Use Google to Shrink Websites for Mobile Viewing
Although the number of websites without mobile optimization is shrinking, there remain some that are designed for desktop only. Unfortunately, Google’s previous ‘mobilizer’ web service has been discontinued. The service’s spiritual successor is Google Weblight, designed around optimization for slow connections rather than revising sites for mobile viewing. Beyond Google’s service, there are a number of practices and tools that should be considered when developing a site with mobile in mind.
Contents
Steps
Experimenting with Google Weblight
- Analyze how Weblight works. Weblight is an algorithm created by Google to provide users with faster and lighter page loads when in poor network conditions. This means that Weblight has no user interface and operates on the backend. Pages are stripped of their more complex elements, providing a stripped-down, lightweight experience, rather than one explicitly optimized for the mobile platform.
- Test site changes with Weblight. On your mobile device, simply append your full site URL to the end of the weblight address (e.g. if your website is "mywebsite.com" then you enter http://googleweblight.com/?lite_url=http://mywebsite.com). The page will load a simplified but functional version of itself. With the removed elements, some sites may appear much better on mobile device screens.
- Recognize the limitations. Keep in mind that this is not an explicit converter tool designed for user interaction. While manually entering the website can be used in a pinch, Weblight is designed for speed, not usability.
Designing for Mobile Compatibility
- Keep mobile device limitations in mind. Mobile devices share a few aspects that make them distinct from their desktop counterparts. These core features should be the main considerations when creating a site for mobile consumption.
- Small screens and verticality: Although screen resolutions on mobile devices are constantly improving, the size and form factor remains a concern for site design. Designing a site into a single column layout is best for phones (tablets can often use desktop sites without too much issue).
- Touch interfaces: Page elements should be placed with the size of a finger in mind. Elements that utilize mouseover should be minimized or redesigned for touch (e.g. dropdown menus).
- Data speeds: One of the great advantages of mobile devices is usage outside of wifi range, but data connections are typically slower and less reliable. User interfaces (UI) should remain simple and content should be visible and accessible. Too much clutter will bog down load times and make navigation difficult.
- Use a Content Management System (CMS) service. For those developing with fewer resources, using a CMS service like Wordpress or Squarespace is a great options for low-cost, user-friendly mobile design. Themes that utilize responsive web design will provide the easiest template for a mobile site.
- Responsive web design is a theory of web design that promotes the use of fluid design elements to allow smooth transitions of design and usability across platforms.
- Test mobile device screens using desktop software. There are a number of free web applications that allow you to emulate mobile devices to test website aesthetics and functionality. Using these tools is as easy as selecting the desired test device, then entering to target website to preview. Most will include tools for variables like screen orientation, pixel density, or even browser selection. A few popular examples are:
- Chrome Device Mode Emulator
- mobilephoneemulator.com
- screenfly (a subset of quirktools)
- mobiletest.me (paid membership)
