Taking a webpage from mobile friendly to fully responsive
The difference between a webpage that's simply mobile friendly and one that's fully responsive mainly lies in how secondary elements on the page are handled. While a basic mobile friendly page will simply hide those elements, a responsive page will instead reorganize those contents so they're still available on the page while keeping the main focus on the primary content. In the final part of this quick start guide, we'll see how to easily convert a page to be fully responsive using a responsive template, plus other tips towards responsive glory.
Use a responsive template
An excellent source of barebones, responsive templates can be found at Dynamic Drive CSS layouts. Their completely stripped down nature makes the templates easy to integrate with an existing design, which is important if you're not ready to completely ditch your current layout and start afresh yet. In fact, we're using their 2 column Fixed Fluid template on all tutorial pages of JK, including this one.
The first step is to pick either a two column or three column layout based on your page's existing structure, and whether it should be fluid or fixed in total width. Even a flxed width template will transform to a fluid one when the screen is sufficiently small.
Lets operate on our previously made mobile friendly page to make it responsive using the 2 column Fixed Fluid template. It fits the bill perfectly, with a fixed left column and fluid right column, identical to the old layout. However, the new template's responsive nature means when the page is resized down, no longer will the left column simply disappear, but rather drop down and append itself to the right column.
Open and resize the "responsive" page window to see how the left column drops down to the bottom instead of simply disappear at a small width. The top banner remains visible by design on desktop computers, though on mobile devices, disappears like in our original mobile friendly page to prevent horizontal scrolling. The 2 column Fixed Fluid template we used has the following structure:
<body> <div id="maincontainer"> <div id="topsection"> Top section content here </div> <div id="contentwrapper"> <div id="contentcolumn"> Primary content here goes </div> </div> <div id="leftcolumn"> Left column content goes here </div> <div id="footer"> Footer text here </div> </div> </body>
Just drop in your own content into the highlighted areas above, and you're ready to go. From there you'll want to optimize elements within the layout as well, some of which we'll discuss below.
Google Adsense Responsive Ads
If you site uses Google Adsense to display banner ads, you'll want to switch over to their responsive ad unit, which is one of the options when you create a new ad. The footer ad you see on the current page is a Google responsive ad, with the main difference being these will automatically load the largest ad unit that fits into the current viewport when the page loads, playing nice with your responsive layout. Note that the ad will not further resize itself once the page loads, so resizing the page will not trigger a different size ad, requiring a page reload to see the change.
Responsive Images
Another common area of your page that needs attention within a responsive layout are the images. Images by default have a absolute, fixed dimension that can easily wreck a responsive layout if one is larger than a thumbnail. A quick way to rein in your images is by adding the following CSS to your page:
img{
max-width: 100%;
height: auto;
}
With the above declaration images will retain their original dimensions unless its parent container's width becomes smaller than that of the image's- in that case the image becomes responsive, resizing down to the width of the container (with the height scaled proportionally). Since the maximum width of the images are pegged to their container's width, make sure the container is properly calibrated to be responsive and not simply fixed in width. You can see an example of responsive images on the previous tutorial page with the various screenshots.
Search and replace your way to responsiveness
Finally, whether you're taking your site mobile friendly or fully responsive, the most daunting task if it consists of many static pages undoubtedly will be the mind numbing work of going through each page to apply the necessary changes. For our site JavaScript Kit, that means going through over 2,500 pages- a task that demands nothing less than an army of elves without the aid of technology. Fortunately, there is technology that can help in this case, and that's a great Search and Replace Tool. For us one of the most indispensible tools has been TextCrawler v3.0. It's a highly robust search and replace program that matches entire chunks of code (line breaks and all) without further tweaking and replaces it with the desired new code:
Screenshot: Textcrawler v3.0
It goes through entire directories effortlessly, and has shaved countless hours for us in the road towards updating all of our pages. The key to effectively using the program - or any search and replace program for that matter- is to not limit yourself to simply the text you actually want to replace to enter into the "search" field. Sometimes, in order to effectively isolate a piece of text, you may need to include portions of the surrounding text as well to search for, and in the replace field, simply include that surrounding text to put back in again.
TextCrawler comes in both a freeware (non commercial use) and Pro version, with some of the notable features of the Pro being ability to output to a new file or Folder, search and replace in Clipboard, and Command Line control.
- Tutorial Introduction
- Two invaluable tools for simulating/ testing your page in different devices
- Taking a webpage from mobile friendly to fully responsive
End of tutorial
