The Basics of Mobile-Friendly Web Design - dummies

The Basics of Mobile-Friendly Web Design

By Lisa Lopuck

When designing or redesigning a website, you must also consider creating alternative, mobile-friendly versions of the site. These versions are not to be confused with native applications that live on your smart phones (the ones you download from app stores). Smart phones all have web browsers and can render your website with varying degrees of success. Essentially, you must make a list of what devices you will support, and design alternative sites to meet these multiple targets. Other than that, the most obvious constraint they all share is the small screen size of phone browser windows.

You can add code to your site that detects a user’s device and redirects them to the appropriate version of your website. With so many devices to choose from, developers typically create various device profiles and lump many devices into one of a handful of these profiles. Profiles are usually driven by screen size:

  • *Microscopic: 132 pixels or less wide

  • *Tiny: 240 pixels or less wide

  • *Small: 320 or less wide

Given these small screen spaces in which to deliver your web experience, there’s no getting around the need to provide alternative designs.

Look at pixels for mobile websites

What’s unique to devices is that they don’t have 72-dpi pixels anymore. Many of these devices have higher resolutions. This is where things get tricky, because for websites and CSS, you must still define elements in pixels that are 1/72 inch wide. This measurement has nothing to do with the pixel density of devices, so the pixel is now a relative unit of measure.

Nevertheless, if you were to set up a Photoshop template to simulate an iPhone screen space, you’d use 640 x 960 at 72 dpi. This screen size gives you the right “retinal display” detail you’ll get on an iPhone. But don’t be tempted to squeeze a lot of text and images into this space. This is clearly a much larger canvas size than the phone. To get a sense of how your design will actually display on the phone, zoom out your Photoshop document to 50 percent.

Simplify the navigation of a mobile website

Remember, there is no mouse to move around. Many mobile users have either a keypad or a touchscreen. There isn’t a lot of space to show all the navigation elements you might normally include in the main site. For this reason, mobile versions of sites often have a stripped-down navigation scheme.

Often, these reduced sites are frustrating to users who are on the go and need to access a certain area of the normal site. That’s why it’s a best practice to include a link to view the main site.

[Credit: © Cable News Network. Turner Broadcasting System, Inc. ]
Credit: © Cable News Network. Turner Broadcasting System, Inc.

Reduce file sizes

When they’re not using Wi-Fi to browse the web, mobile devices cam rack up a lot of megabytes on a user’s data plan, which may have a monthly limit. Therefore, the more you can reduce the file size and dimensions of interface and content components, not only will your site download faster on cell networks, but it will tread lightly on the user’s monthly data transfer allocation budget. You can also remove unnecessary code, comments, and optional tags to speed things along.

Horizontal and vertical orientation

Mobile browsing is a fluid environment. Between the variety of pixel densities and the ability to view sites in both horizontal and vertical orientations, it’s best to approach your mobile-friendly website with a flexible layout, as opposed to a fixed-width layout. By not specifying the site’s width and letting it fill up the available space naturally, you adapt your site more effectively to the mobile viewing environment. Additionally, use CSS color and tiled graphics, instead of pixel-bound single images, to fill your components.

Use a single-column layout on a mobile website

Even though smart phones are larger than their predecessors, they’re still not big enough to effectively support more than a single-column layout when displaying content. This is a significant design alteration to make to your main web design, but well worth the effort in terms of the usability boost. A single-column content layout that uses the entire width of the screen (in whatever orientation) avoids the need for a user to pan back and forth or zoom in. Let the content expand down the page instead. Users are much more accepting of scrolling down the page than they are of having to move side to side and zooming in.

The Crew Clothing Company mobile site is an excellent example of a complex e-commerce mobile site that uses a simplified navigation system and a single-column layout to pack in a lot of functionality. In addition, they also provide a clear link to view the main site in case users need additional functionality that has been stripped out of the mobile version.

[Credit: © Crew Clothing Co Ltd. ]
Credit: © Crew Clothing Co Ltd.