Making a responsive layout for mobile users is not just about the design of the site–the code also has to be constructed well. We webdesigners simply can’t afford to be lax about our code, because mobile browsers are less forgiving than desktop browsers. What looks great on your laptop may look terrible on a tablet or smartphone screen!

Here are some important things to remember about coding a responsive mobile layout:

Design and Code for the Smallest Device First

This seems kind of backwards, but don’t design and code your site’s desktop look first. Instead, make sure that the layout you’re making loads and operates well on a very small screen, like a smartphone. If it looks great and performs well on a mobile browser, it will function excellently as a desktop layout, too.

Include the Meta Viewport Tag

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”/>

This little tag, included in the head of your page, keeps mobile browsers from super-shrinking your site to unreadable dimensions and making your users have to zoom in to read your text. (Note: this tag should only be used on responsive layouts or dedicated mobile sites, as HTMLBOY points out.) For more information on how to format this tag, check out the Webdesign Tutsplus page.

Keep the Code Simple, Sweetheart

When you’re designing a mobile layout, as I discussed last week, you want to make sure you’re not crowding your design with lots of images, which require a lot of data transfer over small devices’ connections. But you also don’t want to crowd it with clunky desktop-only formatting, or anything else that will slow the page load time down, especially on a mobile device. Keep the code as simple as possible–even if it looks TOO simple to your eye. A simple but effective site will perform much better than a complicated site that’s trying to do too much.

Also, don’t rely on a:hover at all in a responsive layout. Remember, the user’s “cursor” on a mobile browser is their finger, which doesn’t hover without clicking (unless some folks have magical fingertips quite unlike mine, LOL). Thus, drop-down menus and image changes that happen when the user’s cursor hovers over something is not a good mobile design choice.

Set a Maximum Width for Your Responsive Layout

“Now wait a minute,” you might ask. “Why are you worried about a MAXIMUM width when we’re talking about making a layout small and graceful?” Well, if you’re making a responsive layout, that means that the same layout will be served to all browsers, and will expand and contract with the browser’s window size. The layout that looks great at a width of 400 pixels will probably look REALLY odd at 1300 pixels wide–everything will be stretched out and hard to read.

#maindiv {max-width: 900px;}

The above tag, put into the CSS for your containing DIV, will keep your layout from stretching far into the distance on a widescreen desktop. Your users will cheer!

Don’t Hide Content from Mobile Users

Lastly, don’t assume that mobile users only want to see a few articles on your site. If I visit a site while on mobile, I expect to see ALL the content I would normally see while using my laptop. (This is a big pet peeve of mine to see mobile sites with maybe 20% of the desktop layout’s content.)

So, make sure all your content is accessible via mobile, either with a carefully-designed top-level navigation, or by grouping content into navigational pages so that users can scroll through links for just the content section they want to see. It may sound clunky, but it will work much better than simply hiding content!

Further Reading

NetTuts: Flexible Mobile-First Layouts with CSS
NetMagazine: Build a Basic Responsive Site with CSS
HTML5Rocks: Responsive Design
Designing CSS Layouts with Flexbox is as Easy as Pie