In today’s world the variety of devices that are surfing the web is astounding. Platform, browser, screen size, connection speed and more can vary wildly. For this reason when optimizing for mobile devices like tablets and smart phones I usually recommend responsive design.
Responsive design, a term coined by independent web designer Ethan Marcotte, is all about adapting your site’s layout to the device. One big advantage of this approach is that you will only have to maintain a single responsive website as apposed to multiple sites targeting the different devices. At eGen we work with attorneys across the country. In order to meet the needs of all our clients who practice law in areas ranging from Social Security Disability to Personal Injury we have to run multiple sites. So I can attest to the fact that responsive design has saved me countless hours in website maintenance.
In this post I’ll cover some of the basic techniques I use to build responsive sites. So fire up your favorite text editor and follow along as I reveal my mobile optimization secret sauce.
This article assumes an intermediate knowledge of HTML, CSS and Javascript. But beginners should be able to follow along with a few web searches to fill in the gaps. Example files are available on github: Mobile Optimize Demo
Let’s begin!
When a mobile device lands on your site it will automatically assume that it’s optimized for a desktop computer. This is not what we want. To let mobile devices know that your site is mobile friendly add the following meta tags within the HTML head:
<!-- demo-mobile-optimized/01_meta_tags/index.html -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
If you are not working on a live web host you may not be able to test out your newly mobile optimized site from your smart phone or tablet directly. Mobile emulators to the rescue! I found a really useful list of mobile emulators here: Mobile Emulators & Simulators: The Ultimate Guide
Next up: site navigation.
Now that our website is mobile friendly we must consider that people will be navigating with their relatively fat fingers rather than a more precise mouse pointer. I suggest creating buttons and links with a clickable area between 38 and 44 pixels in height so that they are easy targets to hit.
The site’s main navigation is of the utmost importance and there are a number of options to choose from depending on your needs. I’m going to show a simple way to achieve decent usability that also demonstrates CSS media queries.
Create a simple list of menu items to add in our HTML body.
<!-- demo-mobile-optimized/02_navigation/index.html -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
Let’s also add a link to an external style sheet in the HTML head.
<!-- demo-mobile-optimized/02_navigation/index.html -->
<link rel="stylesheet" href="style.css">
As a side note storing your style sheets and javascripts in external files allows browsers to cache them which can boost mobile performance and reduce loading times at slow connection speeds. Your mobile users will thank you.
Now paste the following into the new style.css file:
/* demo-mobile-optimized/02_navigation/style.css */
* {
margin: 0;
padding: 0;
border: 0;
}
ul {
list-style: none;
width: 100%;
}
ul li a {
display: block;
background: #428bca;
border: 1px solid #fff;
color: #fff;
text-align: center;
text-decoration: none;
padding: 1em;
}
/* large and medium screens */
@media all and (min-width: 640px) {
ul {
display: table;
}
ul li {
display: table-cell;
}
}
I won’t go into too much detail about everything that’s going on here but there are a couple important points to note. The @media tag has a minimum width or "breakpoint" set to 640 pixels. This means that all web browsers wider than that will load in the styles defined within those curly brackets. You can test this by simply adjusting your browser’s width. If you are using the latest Mozilla Firefox browser you can use the keyboard shortcut "Command-Option-M" on Mac or "Control-Option-M" on PC to enable a responsive design view.
The other important point to note is that the default styles are optimized for mobile and the styles inside the media query for desktop computers. This is often referred to as "Mobile First", a term coined by entrepreneur and author Luke Wroblewski. Mobile first has many advantages. Avoiding large image downloads intended only for desktop is one of them. More often than not small screen devices will have a slow connection speed so adding images inside the media query can have a significant impact on mobile performance.
You may want to consider support for older browsers.
If you happen to check out your new responsive site in Internet Explorer versions 8 and lower you will notice that it is not respecting your media queries. In some cases this won’t be an issue, but if you do need to support these older browsers I suggest using a javascript library called Respond.js. The code is maintained on github and is freely available here: Respond. I like this solution because it is lightweight, about 5K minified, and simple to setup. Just download the zip from github, extract and look for the respond.min.js file, move that file into your project and add the following just above the closing body tag in your markup:
<!-- demo-mobile-optimized/03_respond_js/index.html -->
<script src="respond.min.js"></script>
Of course you’ll have to update the style sheet to support those older browsers, for example, the "display: table;" property used in the demo styles is not available in IE7. I’ll leave that to you.
That concludes this post on optimizing your site for mobile. Obviously this subject is quite extensive and continues to evolve everyday, but I hope this post was helpful in getting you started.