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

Last week, we discussed the pros and cons of building a mobile app for your site. But what if you’re not interested in building an app? Are there still viable options for making your regular site mobile-friendly?

In fact, there are two options we webdesigners have for this issue. We can make a whole separate site for mobile devices only, or make our desktop site “responsive” to the types of devices that are accessing it. As we’ll soon see, there are pros and cons to both approaches.

Mobile-Friendly Design #1: A Separate Mobile Site

Making a separate mobile site can be a less time- and money-intensive way, at least at the outset, to build mobile functionality into your site. You build one separate layout that looks good for any mobile user, then put it onto a separate site that only has the content your mobile users want to see. If people end up wanting to see something that only appears on the full site, they can then click a handy “Go to full site” link, as Jakob Nielsen suggests on nngroup.com. All of that, and no more zooming in to read text or zooming out to find navigation! Sounds great, right?

However, building a separate site brings with it its own set of issues. As handy as it is in the beginning to cross-link and cross-post between two sites, it can easily become an updating/maintenance nightmare, since you have to remember to keep updating two sites instead of one. Plus, you won’t really know until after the fact whether you’re providing all the content to mobile users that they want–you’ll probably get a few emails saying “Wait a minute, where can I find this page on the mobile site?” Nielsen suggests making a lot of inter-linkage between the two sites, but some mobile users (i.e., me) can be very turned off by having to click more times to get to content than is really necessary.

Mobile-Friendly Design #2: Responsive Design

Making a site that responds to whatever device is accessing it is what “responsive design” is all about, as Bruce Lawson at SmashingMagazine notes. Whether somebody’s looking at your site using a laptop, a smartphone, a tablet, or a giant TV screen functioning as a monitor (hey, it happens), a responsive design will ideally look great to everyone and be equally usable. Plus, no worries about interlinking content–it’s all contained on the same site, so when you update your content once, it’s done for all browsers and all devices. Lastly, you don’t have to worry about your web address looking different and possibly confusing users about what site they are visiting.

However, responsive design does require a little bit more work on the backend–it requires that you make a layout that can shrink and grow with the screen size, and a navigation design that functions well whether the screen is itty-bitty or huge. This is a design challenge and a half, let me tell you. It’s like us ladies asking for a man that is tough AND sensitive AND burly AND refined…it’s a tall order to fill. (LOL!) Plus, responsive code may not respond correctly to every browser or device which accesses it, which could lead to a lot of zooming in and out again to read text (something you definitely want to avoid).

My Verdict? It Depends

Unlike either of these referenced articles’ authors, I do not believe that either approach is the definitive answer to designing for the mobile user. I think that your choice really depends on what kind of site you have.

Responsive Design: For Content-Driven Sites

If you have a site with a ton of content, like a high-volume blog or a fansite, I think a responsive design is best. Like I said earlier, you never really know what kind of content your mobile user will want to access, and if you’ve got a lot of content to choose from and it’s your primary site focus, you really need to make sure your user can quickly get to their desired page.

Thus, a site design with as few link hoops to jump through as possible works better–a responsive design that simply serves up the content, no cross-links or cross-posts necessary. Plus, it’s less to update and maintain later, even if there’s more work up-front.

The one concern I have with this is that the responsive design may not “respond” accurately for all devices right at first. But as long as you stay updated on what kinds of browsers and devices need to be catered to, it seems to me that the responsive design still works better for big content-driven sites. (A few of the resources I’ve linked to below will help you toward making a responsive design function better.)

Separate Mobile Site: For Service-Driven Sites

If you have a site that exists mainly to provide a service, like e-commerce or social networking, I believe a separate mobile site is best. When you have a service-driven site, it’s probably already pretty stripped down in terms of content, so there won’t be a lot of excess updating/maintenance issues between your full site and your mobile site.

Thus, a separate mobile site would make it simpler for mobile users to use your service without having to worry about loading the full site’s layout or any extraneous content. (It would almost be like an app in that regard.)

A Final Word

The bottom line? Identify what kind of site you have (content-driven or service-driven), and then design accordingly. I’ve tried to give a good guideline of which to choose in this post, but it’s really up to your discretion as a designer/developer which type of mobile design you use.

But, whichever type you choose, make it the best you can. Don’t rush a half-hearted, ill-thought-out mobile design just to have one–remember that mobile browsing is fast becoming the only way some of us access the Web at all. You want your site to have the best mobile first impression it can!

Resources for Further Reading and Development

Responsive Design

Make Your Site Mobile-Ready Without Creating a Mobile Site
Why We Shouldn’t Make Separate Mobile Websites

Separate Mobile Site

How to Make a Mobile Website: 6 Easy Tips
Mobile Site vs. Full Site

Comparing the Two

32 Examples of Usable Mobile Website Layouts
Separate Mobile Site vs. Responsive Website: Presidential Smackdown

General Mobile Design Advice and Help

How to Create a Mobile Version of Your Website
Mobile Guidelines
Onbile.com (make mobile version of your site easily)