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.
