How many websites have you viewed on a desktop or laptop computer lately?
How many websites have you viewed on your smartphone or tablet in the same period of time?
The statistics on several sites I manage show that an average of about 50% of the visitors are using tablets or smartphones, and some sites are higher than that!
The more important question is: how satisfied were you with the version served up on the mobile device?
Much has been written lately about making websites “responsive” to the device(s) being used to view the site, but what does that mean, exactly? And how do you accomplish this efficiently, effectively, and invisibly (to the end user)?
I am assuming the use of WordPress as the basis for this article, although the discussions can be applied to any website.
The most recent included themes in the WordPress core (Twenty Twelve and Twenty Thirteen) are “fully responsive,” meaning they adapt to the layout and size of the viewing device. This is primarily done through the use of media queries in the CSS stylesheet, and a common way to detect the device being used, and adjust the content accordingly. My code examples are taken directly from WordPress files.
If you are designing a new site, your CSS stylesheet and media queries can be written “mobile first” – meaning the site is designed to look how you want it to look on a mobile device first, and you use @media (min-width:###px) to adjust according to larger screen sizes.
If you are RE-designing an existing site, it probably was designed for a desktop, full-size screen layout, and needs to be adjusted downward for mobile devices. In this case, the media queries need to be written using max-width, and adjustments made for smaller screens. This can be quite confusing, but becomes clear if you think of your primary design – is it for MAX screen size or MIN screen size? Your media queries and adjustments should follow suit.
The Twenty Twelve theme is written for “mobile first,” and the initial media query, beginning at line 1435 or so, states @media screen and (min-width: 600px) { CSS here }. This tells me that all the CSS prior to the media query applies to screen widths LESS THAN 600px, which includes most smartphones.
The next media query is @media screen and (min-width: 960px) { CSS here }, so all the CSS prior to this point determines the display option for screens less than 600px, or between 600px and 960px. This pretty much covers smartphones and tablets. This final media query will add any CSS that will apply to any screen larger than 960px – desktops and laptops.
Media queries and CSS control every aspect of your layout; the possibilities are endless! The brief, very condensed examples below are directly from the Twenty Twelve theme style.css file. Keep in mind that the stylesheet is MOBILE FIRST – the style sheet is written for screen width less than 600px.
Base style for mobile
.menu-toggle {
/* Several parameters defined as to how the menu will display with a toggle switch for the various levels of the menu.
You can view the style.css for the Twenty Twelve theme, starting at line 237, to see how the associated elements are configured. */
}
.main-navigation ul.nav-menu,.main-navigation div.nav-menu > ul {
/* Set NOT to display on mobile devices or screens < 600px wide. (line 595) */
display: none;
}
Adjustment for > 600px and < 960px (ref. the @media screen and (min-width: 600px) section, beginning at line 1435 of style.css) :
.menu-toggle {
/* This is not needed on a larger screen, instead, the parameters for the drop down level display are defined. (line 1547) */
display: none;
}
.main-navigation ul.nav-menu,.main-navigation div.nav-menu > ul {
/* Parameters defined for the drop down menu items.
Styles are varied with many configurable elements, and you can view them in the style.css included with the twentytwelve theme, beginning with line 1475. */
}
The menu display will shift from a toggle button to a full dropdown display depending on the device. Simple, but effective.
One more example of basic style when formatting widget areas. On a mobile device these should flow under the main content, and be scrollable:
.widget-area {
/* There’s normally more, but this is the condensed version! */
clear: both; float: none; width: auto;
}
Adjustment for > 600px and < 960px:
.widget-area {
/* The widget area is now floated to the right and viewable beside the main content in a sidebar, pretty typical for a desktop view. (See: line 1461) */
float: right; width: 26.041666667%;
}
These are two (very simplified) examples of how to use media queries to customize the way page elements are displayed on various size devices. The content of your site remains the same; the way it is displayed, and how much of it is displayed, changes with the screen size being used to view the site.
Another approach to designing websites responsively is to create two distinct sites, and serve up the one corresponding to the device being used. Technically this is “adaptive” design, and has been covered in a previous article. I will not go into further detail here.
A third option is not purely responsive design, but closer to an “app,” in that it is hosted and run separately from the main site. Third party services such as Dudamobile, Mobify, and GoMobi (to name a few of many!) can take your current website and “convert” it to a mobile version, host it on their servers, and deliver it to mobile devices.
On most of these services, you can tweak the end result, or even create a whole new design, using their online tools. I am most familiar with Dudamobile (the free option), as I use it for my own site. There is a WordPress plugin that syncs your site with the mobile version; edits and changes are automatically available on the mobile site. Once it is set up, I don’t have to think about it! For a minimal fee, I can have a custom m.mydomain.com URL for the mobile site.
For bloggers or WordPress users hesitant to dive into theme files and CSS, one of these services may be the ideal way to mobilize your site!
The last method I will touch on is a fully functional and separate mobile app, downloadable from app stores (Apple, Google play, Windows, based on your device). This option is not technically responsive, in that it is purely for mobile devices, and it is not suitable for every website or client. Designing a mobile app involves time and expense for the development and approval of the app on the various platforms. I mention it here only as the “ultimate” in mobile design!
In summary, you can design responsively using a variety of techniques and tools. Using media queries in your CSS stylesheet, you can take an existing site and restructure the elements downward so they work on a smaller, mobile screen (using max-width to define your break points). Or you can start with your mobile screen, and expand the layout as the screen size increases (using min-width to define your breakpoints).
Experiment! You can use plugins and third party tools if you don’t want to play with the code yourself.
Your site WILL be viewed on a mobile device. Make it a GOOD experience for the viewer!
Sue Laren is a freelance website designer/developer living in the SF Bay Area (North Bay), married 33 years, with four grown children and two grandchildren. She taught computer lab (basic computer skills) at a local elementary school for many years, and in 2007 started her own web design business, Laren Net Works. Follow her on Twitter at @LarenNetWorks.
1 Comment