Part One of our series on mobile-friendly web design will be covering the concept of responsive design.
So what is responsive web design?
A site designed with responsive web design adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule. –Wikipedia
Okay, so what’s that in regular English? Responsive design means that your webpage adjusts to whatever screen size it is being displayed on. Older sites, known as “static pages” do not adjust to the screen size and, instead, have one fixed width. This makes a site very difficult to view on a mobile device. When users on a phone or tablet load the page, they are served the same content in the same format as a desktop user.
What’s the advantage of responsive design over other methods?
There are other ways to make a site mobile-friendly. Some of these are even recognized by Google and will not cause a decrease in search rankings. The two most popular way are using separate mobile pages or dynamic serving. So why should you still use responsive design? Simple, it’s the easiest to implement and use.
Creating a separate domain for mobile solves the problem, but causes other issues. For example, take the Sephora site. www.Sephora.com is the desktop site and m.Sephora.com is the mobile site. Having the same content on two separate pages can confuse search engines, and makes it difficult to share links. You don’t want to open the mobile link on a desktop or the desktop link on a mobile device.
Dynamic serving, however, is actually a good solution. It allows users to go to one url. The server determines what type of device is requesting the page and then decides whether to show the mobile or desktop version of the site. However there is a downside to this approach. It is difficult and expensive to implement, typically only seen in large-scale applications like amazon.
How does responsive design work?
Responsive design uses a multi-column layout to organize content and text. These columns, along with other content like images, are sized dynamically. Instead of having a fixed width, they have a width that is proportional to the screen size. For example, instead of a main content column being set to a fixed width of 480px, it may be set to display at 80% of the screen width. Then special functions known as “media listeners” are used to determine the size of the screen. Put these two things together, and you get a webpage that responds dynamically to screen size. If you want to see this in action, take this window and decrease its width–or watch the demo above. Watch what happens particularly as the page width decreases.
What does this mean for the mobile user?
Having everything in dynamically-sized columns allows for a more aesthetically pleasing arrangement on mobile devices. What may be three or four columns on the desktop automatically shrinks to one or two columns on phones and tablets. This is done automatically, and the content of the columns automatically reorders to keep useful information easily accessible. For example, some content like sidebars or nave panes that may be displayed on the side of a desktop page are typically moved to the top of a mobile page, so they remain easy to access. Other content like text and images will be displayed in logical order below the navigation sections.
How does this affect your website?
If your site is already responsive, great! You are done. If you have a static page, or if your responsive site is not functioning correctly, you should fix it immediately. This is the single biggest issue causing mobile users to abandon your site. We strongly recommend making your site responsive before continuing with this guide. Every article from this point forward assumes you are working with a web page that employs responsive design. If you are not sure how to make your site responsive, you can always contact us or get a free online quote and we will do the work for you.