April 17, 2015 // By Adam Wold
Each year we see an increase in use of mobile devices for accessing content on the internet. As this usage increases, the experience of your website on a mobile device becomes ever more vital. Responsive web design is the practice of creating fluid and flexible web pages that have the ability to attractively conform to the confines of any device or screen size.
The Case for Responsive Design
The case for mobile is strong given the incredible statistics we have available on smartphone ownership and usage. According to the Pew Research Center, as of January 2014, 58% of American adults have a smartphone, and 42% own a tablet. That means there are a lot of mobile devices out there that could be accessing your company’s website. Not only does developing for mobile put more eyes on your product, but a good mobile experience can also improve consumer opinion of your brand.
Having a highly responsive and fluid website can also negate the need to develop custom, native applications for the various mobile platforms, reducing the technical expertise required to deliver your business's content to mobile users.
Responsive Web Design Techniques
There are several ways to implement responsive web design in your website, the main players, as laid out by Ethan Marcotte’s original article on this topic, are a fluid grid, media queries, and flexible images.
Fluid grid describes the layout of a website. If you are able to design your website from the start with fluid grid in mind, the outcome can be highly responsive and adaptable to many screens. Fluid grid arranges a webpage into a grid system, where the number of columns and rows can change depending on screen size, as well as the size of each individual box in the grid.
One exciting new way in which to implement a fluid grid design is by use of the CSS Flexbox Layout. This paradigm provides a nearly automatic way to create flexible complex layouts that weren't easily achievable previously. Unfortunately, at this time the Flexbox property is not an official part of the WC3 specification, though it is a candidate. Currently about 66% of browsers in use support Flexbox, with an additional 16% having partial support. While Flexbox will surely play an important role in creating responsive websites in the future, it cannot currently be considered as the main solution. Until support for Flexbox is more widely available, CSS media queries will likely play a primary role in defining your responsive website.
CSS media queries allow for the adjustment of styles applied to your website, usually based upon the size of the client screen. However, there are other parameters that can be leveraged through media queries, such as screen orientation and resolution, both of which can be useful when developing the best mobile user experience. For each media query a separate set of styles will be applied, allowing the modification of layouts, font sizes, and any other CSS property.
Below is Google's recommended media query for mobile devices.
@media only screen and (max-width: 640px) {...}
This media query specifies that the style inside the curly braces will only be applied when the client device has a screen size of 640px wide, or less.
While using media queries does create the overhead of multiple set of styles to maintain, it is vastly less involved than creating a completely separate mobile website, or native mobile applications.
The final ingredient in the responsive web design trifecta is flexible images. While originally this technique referred only to images, all media must be accounted for. Images within your website should conform to the confines of the client device. While presentation to the user is very important, data transfer should also be taken into consideration. Smaller screens require smaller images and scaling these images down on the server can increase the response time for the client.
Conclusion
In the year 2014, if your company's website does not have a functional mobile experience you are behind the times. Responsive web design has been a buzz word for nearly four years now and many tools are available to help you efficiently make the best mobile experience for your customers. Pull out your phone and browse to your website. Is it really as easy to use as you'd like it to be?
To read about mobile application development from Magenic, check out our Mobile Strategy white paper. If you’d like to talk to us directly, email us or call us at 877-277-1044.