Responsive Design: Tips and Tricks

Last week, I wrote about the basics on responsive design. The topic of responsive design is a relatively new one that started with the emergence of different mobile devices. Developing for mobile devices could be hard because of all the factors to consider, such as handling clickable phone numbers. Today I will share some tips and tricks to make the responsive web development process a bit easier.

Applying Media Queries

I mentioned one way of including media queries in my last post:

<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 600px)" href="mobile.css" />

Another way of including media queries is to put the CSS as part of another stylesheet, like this:

@media screen and (max-device-width: 600px) {
   .container { width: 100%; }
   .footer { display: none; }
}

In the above case, the width of the container will be 100% and the footer will disappear when people view the site using a device smaller than 600px.

Meta Viewport Tag

Sometimes, you may be working on a responsive design and find that the website you have been working does not show up correctly on a mobile device as you intended. Is the full website being shown on the mobile browser? If so, you may have forgotten to add this meta tag.

<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0" />

The above meta tag will ensure three things. First, it will make sure that the width of the website is the device width. Second, the meta tag will ensure that the initial scale of the website will be 1, meaning it will not be zoomed in or out and shown at its original size defined by CSS. Lastly, the meta tag will prevent the user from zooming in or out. One thing to remember is: Make sure your website is accessible without the need for zooming in or out. For example, if you make the font-size too small, users will not be able to zoom in to make it easier to read.

Additional Tips on Responsive Design

1. Start from mobile design first, if possible. Sometimes it is not possible. Perhaps you want to implement responsive design techniques to an existing fixed-width website that was optimized for the desktop. However, starting from mobile design first will make sure that the design translates well into desktop. It is usually easier to add elements than to subtract them.
2. Remember that the devices have fixed widths. Maybe the responsive design you have been optimizing for the iPhone does not look good at 437px width when you resize your browser. However, the viewport sizes for the iPhone are 320px (portrait) and 480px (landscape). If you have included the meta tag above, users will not be able to zoom in or out and will see the website at those two dimensions.

Responsive design is a relatively new topic, but people are increasingly using their mobile device to browser the web. It is important to cater to mobile devices to help prevent the loss of traffic to your website.