Designing Smartphone-Optimized Websites: Challenges Web Developers

Jun 20, 2012
CSS HTML
182 Shares
By

Web developers are increasingly being asked to build sites that cater to smartphone Internet users, or to recast existing sites into user-friendlier formats for mobile devices. By 2015, statistical research by eMarketer predicts that more than half of the persons who access the Web will do so through a smartphone or other small-screen device.

This paradigm shift represents a challenge to the established Web development community, which now has a mandate to configure Web content previously optimized for large personal computer and laptop screens into smaller mobile device space constraints.

Utilizing CSS and Javascript to create a more ‘mobile-friendly’ experience

Incorporating customized CSS coding is an effective way to adjust an existing site’s content to be more accessible for mobile users. To properly instruct a smartphone browser on how to display Web content, users should be directed to a mobile CSS stylesheet with the inclusion of the following code in the Head section:

<link rel="stylesheet" href="http://www.domain.com/handheld.css" type="text/css" media="handheld" />

or

<link rel="stylesheet" href="http://domain.com/mobile.css" type="text/css" media="handheld" />

The ‘handheld.css’ or ‘mobile.css’ file should contain all of the stylesheet parameters that will ensure an optimal viewing experience for a small screen device user.

Screen size adjustments
Within a given mobile-tuned stylesheet, in order to maximize the content space for varying screen sizes, it is best to express widths by percentage:

#element {
width: 100%;
}

The above is known as a ‘fluid layout’ style in which CSS page element widths are expressed in a different way than by a set number of pixels.

Clutter reduction
To reduce clutter, utilize the stylesheet to hide extraneous page elements for mobile viewers with coding such as:

#sidebar, #footer {
display: none;
}

Control image sizes
To control the image sizes within a mobile device accessible area of a site, the following coding can be utilized:

#content img {
max-width: 200px;
}

Javascript solutions
If a site owner chooses to build an entirely separate mobile site, or area of a site, a Javascript redirect code should be placed in the Head section:

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "handheld.html";
}
//-->
</script>

The ‘handheld.html’ expression directs a mobile browser to the correct place, and could also be shown as “http://mobile.domain.com” if a ‘sub-domain’ approach is desired.

For a script tailored specifically for iPhones, utilize:

<script language=javascript>
<!--
if ((navigator.userAgent.match(/iPhone/i)) {
location.replace("handheld.html");
}
-->
</script>

Other mobile device coding options to facilitate website accessibility

Because smartphone users frequently change the device viewing aspect from portrait to landscape, and vice versa, the <viewport> tag is an important page element.

This meta tag allows a mobile phone browser to seamlessly scale content between views. A typical coding arrangement would look something like:

<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial-scale=1.0; user-scalable=yes"/>

Other tags specific to smartphone use include a measure that determines if all telephone numbers located on a Web page will appear as hypertext links, thus allowing for the initiation of a phone call by clicking on the number.

In HTML5, this is achieved through the <format-detection> tag:

<meta name="format-detection" content="telephone=yes"/>

The above coding is the default setting for most mobile sites, and enables the hypertext link feature. However, a developer can turn off this ability by utilizing:

<meta name="format-detection" content="telephone=no"/>

Which tools can help a developer design websites for smartphones?

Since a number of potential visitor screen sizes exist, it is vitally important to know how a site design looks to various users.

To mimic the experience of viewing a site from a mobile device, Opera offers a Mobile Emulator, which can be downloaded from Cnet.com for free (Windows or Mac). Once installed, the application allows for simulated browsing on a number of pre-set mobile device screens, as well as in customized sizes.

Advanced developer software tools also offer site previews in various mobile screen sizes.

Conclusion

The above techniques, along with many others, are geared toward facilitating a more satisfying experience for mobile device website visitors. The stakes are dramatically rising for online merchants to get on board with the mobile trend, as such users represent an increasingly large slice of the projected eCommerce sales total of $200 billion for 2012.

  • http://vaughndumas.wordpress.com/ Vaughn Dumas

    The theory behind this is called Responsive Web Design. This explains why you need to do this.

  • http://www.joomladesignservices.com/ William Smith

    It is quite a challenge for the developers but once it is overcome by them there will be of great convenience to people who are using or dealing with business having such nature.

  • http://www.littlephilz.com/ Phil

    It surely has been quite a challenge for me so far. Optimizing for the iPad has not been too much of a problem. But for the iPhone or a Smartphone I have come across some troubles.

    Thanks for sharing this.

    • Dave

      Thanks for your input, Phil. Designing for small-screen devices can be quite a challenge. In particular, graphics that render correctly in larger screens will probably not do so on a smart phone. I would recommend downloading the Opera Mobile Emulator, as suggested in the article, so you can see exactly which adjustments need to be made for visitors with smaller screens.

  • Hello

    Kind of ironic that this article faIls short in demonstrating the topic

  • http://daltonbateman.com/ Dalton Bateman

    display: none; is a risky thing to do for mobile sites, the phone still downloads all of the data, it just doesn’t display, making your site take much longer to display than is needed.

    • Dave

      ‘display: none;’ is a cosmetic measure and does not prevent the hidden content from being loaded with the rest of the page. It is, of course, better to render a mobile-targeted page lighter by completely removing unwanted elements. However, the article addresses a situation where the page itself is not being modified, only the display.