How many times in the past few months have you opened a website via your smartphone or tablet that could not be read without excessive zooming or scrolling?
Old News I: When the iPhone was Released Way Back in 2007, the Device Proved to be a Runaway Success for Apple.
In companion with the expansion of Wi-Fi and more affordable service packages from telecoms, all devices that followed astronomically increased the volume of handheld usage.
According to Cisco, smartphone activity grew by 81% in 2012. Cisco also projects that the number of mobile devices worldwide will exceed the planet’s entire population by the end of 2013.
Options range from SmartPhones, like Samsung Galaxy, Blackberry, HTC, and the iPhone (of course) to Tablets like the iPad, Kindle, Droid, Nook, and Ultrabook. Many people use both a tablet and smartphone.
Many also – including me – now find ourselves performing many if not most of our Internet tasking on handhelds. We are happily unchained from desktop plugs, power strips, and modem cables strung across the house; and from the weight and access limitations of laptops.
Old News II: "App" and "Mobile Site" Development Soared far Beyond Gaming as Handheld Device Options Expanded and Software and Speed Improved in the Mobile-Verse.
Most significantly, when mobile device usage began to cut into the time people spent on desktops and laptops, businesses in the eCommerce sector wised up quickly to the new opportunities offered by the handheld trend.
Many leaders at top retail, banking and information sites jumped into the app game headfirst, creating a new level of online servicing that gave more convenience than ever to tech savvy consumers.
Other companies more simply opted to create and host separate “mobile” versions of their sites featuring easy to press touchscreen buttons and wrapping text.
Additionally, the handheld revolution engendered an entirely new eCommerce sector for companies that specifically target the smartphone and tablet crowd.
On the down side, for those charged with website content management, app and mobile site development proved challenging for website models dependent on timely updates to product information and services. Further, mobile development was often complicated by compatibility conflicts across different devices.
To put the problem simply, for content managers, updating multiple apps and sites separately can create serious versioning problems from both a workflow and labor standpoint, thus making the challenge of "going mobile" unattractive to many.
Deeper into the pit of potential obsolescence, many non-commercial information sites run the risk of falling by the wayside if designs are not upgraded to accommodate mobile users.
Some website owners have not opted into app or mobile site development per se because interactivity was not required to use the sites on smaller devices. Others simply ignored or remained unaware of the challenge.
However, when one looks at such obstacles and upgrade lags through the prism of 81% growth and an average user’s standpoint, any site that fails to adapt to mobile runs the risk of losing audience over the long haul.
Old news III: Entre` the Miracle Code of Codes – CSS for Mobile, of Course.
CSS (Cascading Style Sheet) code has been in use since the 1990s as a means to facilitate universal formatting and design changes across websites, without requiring programmers to update styling on each and every page.
CSS for mobile – no surprise – has also been around for a while, but has only recently been put into widespread use by developers.
CSS for mobile eliminates the versioning problem of managing multi-device renditions of a single website.
Just a few snippets of code and a couple of extra html tags can be used to instruct a site to automatically resize images and wrap text legibly in response to different device sizes.
The process is commonly referred to as "responsive web design," in fact.
Though the label sounds formidable, in truth, responsive design should be a piece of cake for any experienced HTML/CSS coder, and not much of a stretch for the less experienced.
Explained shorthand style:
- To create a responsive design, instructions for image and text resizing and wrapping are written into mobile specific elements of the CSS.
- The elements are then tied to a <meta … "viewport" … /> tag and a <link … "stylesheet" … /> tag in the <head> section of the HTML.
The tags basically instruct the site to adapt to "device width," whereas the CSS elements give the designer control over presentation of the wrapped content.
Once the rudiments are in place, additional tweaking at the test/troubleshoot level may be required, but as long as the code is sound and clean, the ability of a site to wrap legibly to any device should be successful.
The Good News: Free, Hands on Resources for Upgrading a Website to Mobile are Readily Available Across the Web
Several website management platforms, like WordPress, offer "flexible" and "responsive" themes with mobile CSS built in to the design, or plugins that will add the code for you.
In DIY or more advanced development scenarios, learning to set up mobile CSS is often a matter of reading a few articles or watching a video.
To learn more about the design and coding process of converting a site to mobile, I recommend Kayla Knight’s Smashing Magazine article, Responsive Web Design: What It Is and How To Use It.
Additionally, Lynda.com offers several online courses on responsive web design, including a very simple and easy to follow introductory course, Creating a Responsive Web Design, with Chris Converse.
Beyond that a quick search on "css for mobile" at Google, Yahoo or Bing will provide lots of additional information.
Remember! The most important rule of thumb is to make sure that a mobile upgrade is written to respond to all mobile devices, not just one or another. In the big bang of the mobile-verse, there are many winning devices competing for your website.
Laura Mauney has over fourteen years of hands on experience in web content management. Her expertise includes creating simple solutions to the challenge of multiple version and database content updates. For that reason, she really appreciates the value of responsive web design.