We all want our sites to be mobile-friendly, and Google has now provided us even more incentive, as they lower the search rankings of sites that do not perform well on mobile devices.
Like many of you, I have many static web pages I maintain, so complete rewrites are not practical. However, most of my sites are pretty simple in structure, with layout mostly defined by basic HTML. For such sites, a few simple changes are all that are needed to incorporate responsive design principles and to pass the Google Mobile-Friendly and PageSpeed Tests. The purpose of this page is to share tips and methods to provide quick and easy retrofits of existing web pages to make the responsive and moble friendly.
Based on Google's assessments of my pages, the most common obstacles to performing well on small screens are:
Below you will find a set of quick changes to apply to your web pages to address each of the above.
A web page with a responsive design alters its formatting so as to be easy to read and navigate on devices from smart phones to large monitors. Common responsive elements include images that can shrink so as to not overflow the screen, a layout that renders as three columns on large screens but one long column on small screens, and a navigation bar that is horizontal on large screens but vertical and collapsible on small screens.
Responsive design is in contrast with a once popular approach of designing two different versions of the web site for laptop/desktop users and mobile device users.
The approaches below supports responsive design.
Every responsive web page needs a defined viewport to allow the browser to sense the physical dimensions of the screen. Include the following in the <head> section of your site:
<meta name="viewport" content="width=device-width, initial-scale=1">
Immediately after the <body> line, add this line:
<div class="container">
Immediately before the final </body> line, add
</div>
Google penalizes plain HTML unordered and ordered lists of links that create tap targets that are too close together. You can use CSS to increase the vertical spacing in lists. I took the lazy approach of increasing the default list element spacing via an external style sheet to which I already link most of my pages. In the CSS, I include the following:
li { padding: 10px 0px 0px}
Of course, better design would be to include the above style in just those lists containing links or on just the pages affected. That way you do not have such wide spacing on your lists where not needed for this purpose.
Images need to shrink on devices with low resolution screens. The easiest way to make your images responsive (shrinkable) is to do the following.
First, include the following Bootstrap Framework code in the <head> section of your web page:
link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Next, include the following in each <img> tag: class="img-responsive" , e.g.,
<img src="4-waySwitches-end.gif" class="img-responsive" width="593" height="292">
The Bootstrap Framework takes care of the details of how to make the image responsive.
If you have the old style button bars using tables of images and roll-overs, you will likely need to replace them. The easiest way to design a responsive replacement is to use a CSS menu generator site such as CSSMenuMaker.com.
Embedded videos from YouTube, Vimeo, etc., take special treatment to accommodate varying screen sizes. See Making Embedded Content Work In Responsive Design for instructions and a good explanation. Here is a brief summary:
CSS:
Include the following in a <style> specification in your <head> section or in a linked stylesheet:
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden; }
.video-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
HTML
Now wrap the following div around the embedding iframe:
<div class="video-container">
<iframe ...>
</div>
Are you using tables to control layout? That is, are you using tables to give your web page a multi-column layout? Those will need to go, most likely. The easiest replacement I have found is the Bootstrap Grid System. It let's you think of your desktop layout in the same way, but the columns will collapse to a single column on small devices.
Tip: first plan your one column layout for smart phones, and then think about how to break it into two or three columns for desktop users.
If your need is genuinely for a table -- in contrast with using a table for a muti-column web page -- the Bootstrap framework provides responsive table classes to meet most needs. See Bootstrap Tables.
To check the appearance of your page on mobile devices, visit it in Chrome and type CTRL-SHIFT-I. You can choose the device properties you wish to test against.
Google provides two pages that are helpful for testing your pages and essential for determining whether Google will penalize your pages for not being mobile-friendly:
I recommend
It is not my intent to replace or replicate the many web sites that provide a thorough treatment of responsive web design fundamentals. My purpose here is to share a set of minimal changes that can be used to make most simple web pages "good enough" to be easy to use on mobile devices and to pass the Google tests for mobile-friendly pages.
The above methods address about 90% of my web pages sufficiently to pass the Google PageSpeed test. I hope you find these tips useful. I welcome your feedback on these methods and any tips you would like to share.
The focus of this page has been minimal retrofits of existing web pages to make them "good enough" for mobile devices. If you are starting a page from scratch, I highly recommend the Boostrap Framework. It is a very nice and accessible toolbox for building responsive sites.