How to Convert a Website for a Mobile Browser
By David Weedmark
Mobile devices, like smartphones and tablets, account for more than half of all Internet traffic. Yet, according to research done by BrightEdge in 2014, over a quarter of the websites people visit aren't configured properly for these devices -- costing them an average of 68 percent loss in traffic. Properly modifying your own website for mobile browsers does require planning and testing. The coding itself, however, is usually not very challenging, particularly if you're already familiar with CSS. If you use a platform like WordPress, you don't need to know code at all.
Common Platforms
Since the advent of the iPhone, developers behind website platforms like WordPress, Joomla and Drupal have integrated mobile design. Drupal, for example comes with mobile-friendly themes in its original installation. Each of these platforms have mobile themes that are designed to kick in as soon as your website detects it is being accessed by a mobile browser. Other themes are already mobile-friendly and will respond to touch gestures just as they respond to mouse-clicks, without significantly changing the design or layout of your website across different devices.
Using CSS and HTML
For HTML websites, use a cascading style sheet, or CSS, file to present the mobile version of your pages when they are accessed by a mobile browser. While it is possible to code CSS to detect specific devices, a more common approach is to specify layouts based on screen size in pixels. If desired, you can have one style for large screens, one for tablets and one for mobile phones. Using CSS has the added advantage of only having to write the code once -- in the CSS file. Each of your pages then need only a single line of code to draw its styles from CSS.
Touch Screen Interactive Features
If you have configured a Web page to be an interactive experience for visitors using JavaScript or HTML5, it's vital that you know how your website will respond to touch events, not only on a mobile browser, but on a growing number of touch screen desktops too. In most cases, you should consider adding touch events and gestures to your design code. In JQuery, for example, the equivalent to a mouse-click on a touch screen is a tap event, triggered when a user touches and then lifts a finger from the screen. Depending on your page, you may also want to disable default settings on the mobile browser, like pinching to zoom or dragging to scroll, by using "preventDefault" events.
Testing and Verification
The best way to test your new mobile website is to use your own mobile device. Examine the style and page layout, navigate with touches and gestures, and look closely at your images to ensure they look crisp. You can also use your computer's Web browser to emulate a mobile display. On Google Chrome, for example, press "F12" to open the Developer's Console. Click the "Settings" icon and then click the "Emulation" tab to select a device like a Google Nexus or Apple iPad.
References
- Unimity Solutions: Understand the Drupal 8 Mobile Initiative
- Joomla Extensions: Mobile Template
- WordPress Plugins: Any Mobile Theme Switcher
- Perishable Press: The 5-Minute CSS Mobile Makeover
- Smashing Magazine: Simple Responsive Images With CSS Background Images
- Apple Safari Developer: Safari Web Content Guide
- CNN: Mobile Apps Overtake PC Internet Usage in U.S.
- BrightEdge: 2014 Mobile Share Report
Writer Bio
A published author and professional speaker, David Weedmark has advised businesses and governments on technology, media and marketing for more than 20 years. He has taught computer science at Algonquin College, has started three successful businesses, and has written hundreds of articles for newspapers and magazines throughout Canada and the United States.