In 2015, for the first time in history, more U.S. consumers will access the internet via mobile devices than PC’s. That means notebooks, tablets, smartphones, and even PDAs will generate more web traffic than desktop computers and laptops. This also means that, for a vast majority of websites, a one-size solution will not suffice. What consumer wants to scroll horizontally to view content from a website designed for the desktop computer? Does a mobile user want or need to view the slow-loading graphics that hamper the mobile experience? No! The answer is Responsive Web Design, where the website is designed to respond to the user’s behavior and environment based on screen size, platform, and orientation.
How to Create a Responsive Site
With the increased use of tablets, smartphones, and even wearable computers; developers must account for multiple devices and screen sizes when designing websites or web applications. This situation will result in lengthier and more complex designs but can be implemented rather gracefully using standard stylesheets and CSS3.
There are two approaches a developer can implement to become more responsive to the user’s environment. The first is to create a miniaturized version of the larger desktop view. The benefit of this option is that users are accustomed to the layout and user flow. On the other hand, the miniaturized layout may not provide a beneficial experience if the links, text, graphics, and other elements are too small to adequately interact with.
A more adaptive approach is to create multiple layouts – a fixed width for large and medium screens and fluid widths for smaller screens. In practice this means not only scaling columns to smaller widths, but also reducing columns – eventually displaying all content in one column. This is the approach we normally implement here at Segue Technologies.
Both approaches are implemented using varying stylesheets. CSS 2.1 introduced the concept of media types where the site can recognize the environment and load a stylesheet based on that environment.
Improving on this concept, CSS3 added the media query – a method which allows developers to target not only certain device classes, but to actually inspect the physical characteristics of the environment before rendering the page. Developers can load various style sheets based on the media query or even more granular changes to html elements or css classes. The query contains two components, the legacy 2.1 media type and the media component which contains a media feature. For instance within this code () the section within the parentheses is the media query. It translates to “if the device is in a horizontal position and the width is equal to or less than 480px, then load the segue.css file”.
Media queries are not limited to loading css files; media queries can also determine the character of specific html elements or css classes. For instance if you have a layout with three columns in a large display; a media query can reformat the layout to one column, with the content displayed vertically. To create our three column display we add a class in our stylesheet called grid—3 and set the float: left and the width: 33%. For smaller layouts, we utilize a media query to set the width: 100% so now the columns stack on top of each other.
.grid—3 { float: left;
width: 33%;}@media screen and (max-width: 480px) { .grid—3 {
width: 100%; }}
That’s it. The browser sets all .grid—3 classes to 100% width for devices that are equal to or less than 480px width; otherwise the width of .grid—3 classes is set to 33%. Pretty easy.
In later posts we will show how to incorporate Response Design concepts in two popular CMS platforms, WordPress, and Drupal.