Mobile-Friendly Responsive Design Tutorial
The explosion of smartphones and tablet computers in the past several years has led to website designers adjusting their layouts to perform well on a much wider range of display widths as an alternative to simply serving specially-designed webpages to users of mobile devices, using a method called "Responsive Design" Laptop and desktop computers have always had a good deal of variation in screen sizes, but the website design solutions for them were relatively simple, requiring only modest flexibility in the widths of the major structural elements. However, the very narrow screens on smartphones and tablets and their ability to be used in either portrait or landscape orientation - and change between them at any time - forces a much more sophisticated approach. This responsive design tutorial demonstrates how designing page using percentages and using media queries can help to make your website design more flexible (ie. "mobile-friendly") so that you can properly serve your content to this still-growing source of traffic without compromising the experience for conventional computers.
The goal is to introduce you to responsive design, and explain the fundamental principles and design techniques required to create mobile-friendly websites, which is important for search engine rankings in both Google and Bing.
The 'viewport' meta Tag
A vital first step in creating webpages with responsive design is to include the 'viewport' meta tag which controls the display of your pages on mobile devices. Without this tag, mobile devices will display the page as if it was a desktop computer by shrinking the content to fit the screen which forces the user to endlessly zoom in and out to actually view the content. Many mobile users will simply look for an alternative website that's mobile-friendly, rather than deal with such obstacles. Google recommends the following for the 'viewport' meta:
At a minimum, you should include "width=device-width" to set the browser to use the device's native screen width. The 'viewport' meta tag has many more options, and you should become familiar with all of them so that you have maximum flexibility in designing your pages. For more information, see Google's 'viewport' meta Tutorial. Proper support for mobile devices is very important for getting your pages to rank well in the search engines for mobile users.
Responsive Design Requires Flexible Layouts
When we were all designing for desktop and laptop computers, it was common to set the width of structural elements using fixed pixel ("px") values to create a stable grid-based layout. For responsive design layouts to work well on the wide variety of devices being used today, you want to create a much more fluid layout that flexes to fit the display. A fluid layout depends on setting the widths of major structural elements, as well as many others, using percentages (or 'em' units when appropriate) to provide this fluidity. So, for example, where we used to rely on tables to create a display grid, we now use other block-level elements like divs that use the 'float' property so that they are displayed side-by-side as the screen space allows and the design dictates. To provide truly mobile-friendly design, we then use a powerful CSS mechanism called "media queries" to provide precise control of the page layout on tablets and smartphones.
Naturally, there are practical limits to the size of many structural elements, so in addition to setting an element's width in percentages. For example, a div whose width is set to 30% might be more than adequate on a typical desktop or laptop, but would squeeze the life out of an image or a <h>eadline tag on a smartphone or tablet where 30% might mean less than 100 pixels is displayed. So, it's often useful to also set the 'min-width' to a fixed value in pixels. Such elements are generally floated, so when the 'min-width' setting is invoked, the block cascades downward underneath the preceeding content. Media queries can then kick in and re-define the width to produce a pleasing layout. There are examples of this below, but there's more to learn yet.
What Are CSS Media Queries?
Media Queries are special sets of CSS rules that are only applied by the browser when the media attributes (type, width, height, etc.) meet the criteria that you select. They were introduced in CSS Level 2, but were limited to media types (generally, screen or print). In the past, we might have used a separate stylesheet with a link element whose 'media' attribute was set to "mobile". But that attribute value doesn't always work for today's devices, and maintaining separate stylesheets is cumbersome and time-consuming. These days, HTML 5 and CSS Level 3 brings additional values for the media attribute like width, height, color, orientation and more, which makes it possible for designers to work toward what is now called "responsive design". However, HTML 4 doesn't allow these new attributes and older browsers don't always behave well when they encounter them, so you're best off embedding media queries in your stylesheet, as in the following from this page:
The CSS code shown above is a copy of the stylesheet for this page that controls the responsive design examples of multi-column layouts shown below. Note the media query ("@media") block which is set to invoke a different set of rules when the devive's maximum width is 480 pixels or less. The effects of these settings are explained later, but the idea is to adjust the page's layout to the device's capabilities in order to create a good user experience regardless of the platform.
Using media queries for responsive design is fairly simple. You start by designing your page layouts with the notion that some structural elements will be side-by-side on some devices and on top of each other on mobile devices. You also want to consider when you'll need to set your CSS rules using relative dimensions like "%" or "em" rather than fixed measures like "px" or "pt". As usualy, the devil is in the details, but once you start to work with flexible layouts, you'll soon get comfortable with using it for all of your website designs.
Many browsers have built-in tools for developers that allow you to view your pages in a mode that emulates popular tablet and smartphones. In Firefox and Chrome, pressing F12 will bring up the Developers Toolbox. In Firefox, in the top row of the console there is an icon near the right edge of the screen that toggles the "Responsive Design Mode" on and off. In Chrome, the icon is near the left and is labeled "Toggle Device Mode". Internet Explorer has some limited tools in this area as well, but the other browsers are much better for this purpose. These emulation modes let you test your responsive design settings for various devices, screen sizes and orientation settings.
Multiple Columns with Responsive Design
One common website design layout is to have a large main content box with a narrow side column - either on the left or the right. In days gone by, designers would often rely on a table to set up the columns because they allow for flexible widths and heights. But that won't work well on tablets and smartphones with their narrower displays because everything gets too small to see clearly. So, instead of tables we rely on CSS and media queries to adjust the layout to the user's display. When the display is narrower than a typical desktop or laptop, our media query shifts the fixed-width column underneath the main content box and the 'width' property of the columns is changed to 100% so that the full width of the containing element is used to display their content. If you change the size of your browser window, you can see this effect when the width of the available width below is less than 768 pixels (the narrow dimension of many tablets).
Two Column CSS Responsive Design Layout
As you can see, when the browser window is narrow enough, a media query (ie; "@media") in our stylesheet invokes a special set of CSS rules that sets the width of both columns to the full width available, and in the fixed-width column the size of the font increases and the text is slightly re-positioned.
Header
Side Box
Fixed Column
Fixed Column
Fixed Column
Fixed Column
Fixed Column
Fixed Column
Flexible Content Box
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Click Here to see the CSS rules contained in the style section for this page. These are all of the rules that control the responsive design examples shown below. You can refer to this alongside the "View Source" window to examine the HTML for this page. The "Main Content Box" uses the "flexColumn" class, and the "Side Box" is set to "fixedColumn".
I used a very simple method here. The main content box is allowed to expand normally with it's width left at the default setting of 'auto'. The only real trick is that the 'overflow' property is set to hidden to allow the adjacent fixed-width floating div to be directly adjacent to it. Note that this technique requires that the floated divs appear before the flexible div in the HTML code.
Note how the width of the image in the main content box also adjusts as your change the width of your browser window. It's CSS rules set the width as a percentage of the main content div so that it's always displayed at a pleasing proportion to the content box. Percentage-based dimensions are a fundamental aspect of responsive design. Using percentages allows you to present a layout that is visually consistent across the various platforms and screen sizes. It's generally a good idea to set your margin and padding rules in percentages when the width and/or height is set with them so that you can use simple addition to calculate the screen space involved in your layout and to keep the major elements properly aligned in relation to each other. And, of course, since both column divs are set to "float:left", we add the CSS class "clearFix" to the footer div so that the containing div expands vertically to enclose everything and subsequent content is displayed normally.
Three Column CSS Responsive Design Layout
Three columns is trickier because you have to decide how you want the columns to cascade when the media query is in use. For simplicity, I just allow the boxes to stack up sequentially, but with some effort, you could change the order in which they stack up vertically.
Header
Side Box 1
Fixed Column
Fixed Column
Fixed Column
Fixed Column
Fixed Column
Fixed Column
Side Box 2
Fixed Column
Fixed Column
Fixed Column
Fixed Column
Fixed Column
Fixed Column
Flexible Content Box
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This layout doesn't perform perfectly here due to the constraints of the overall layout of this page. The primary goal is to demonstrate that there are no limits to the number and positioning of the content boxes. Additional media queries would be required to adjust the CSS rules to perfect the design for intermediate widths. But you could copy this code and paste it into a separate page and it would perform much as you would expect. We could add an extra condition in our media query so that it would only be invoked when the user's screen is in the "portrait" orientation.
Testing Responsive Design Layouts
Naturally, you should thoroughly test your designs on a variety of platforms to insure that all users can clearly see the content of your pages and easily navigate through your website. Since it's unlikely that you'll have access to all of the different smartphones and tablets that are commonly in use, you'll need to find ways to emulate typical mobile devices on your computer. There are several online emulators, many of which are provided by device manufacturers. An easier and more convenient method is to use the Developer Tools in Google's Chrome browser. Just press F12 (or select "Developer tools" from the Tools menu) to display the debugging console. The second icon from the left in the console's menu bar sets the browser in emulation mode and gives you a large selection of devices to test your layout. If you test this page, you'll see that I still have work to do. I didn't think many users would be searching for this information on mobile devices. So, I haven't put much effort into the layout yet, but it's coming along.
Summary
This tutorial has shown you how simple CSS media queries can create responsive design layouts to present an attractive layout on a wide variety of platforms with a single stylesheet. The objective is to give you a foundation so that you don't have to re-invent commonly used coding methods to achieve your design goals. Using media queries means you aren't presenting smartphone and tablet users a squished version of your pages which forces them to zoom in and scroll just to view the content. You're giving all users a fully-functional layout that is tailored to their display, which is the very definition of responsive design.
This page was last modified on October 01, 2020
