Responsive Design: How to Have a Mobile Website Without the Pain
Between 2010 and 2015, the number of U.S. mobile Internet users will increase by a compound annual growth rate of 16.6 percent while PCs and other wireline services first stagnate, then gradually decline.
—The Daily Tech
The people coming to your website are using mobile devices more and more every day. This means that, unless you are prepared, they are viewing something intended for a large desktop screen on a tablet size screen, or, even worse, on a tiny smartphone screen. What are your options?
- Ignore them. This is a tried and tested method to ensure that people never come to your website again.
- Create a separate website for mobile. You might use the .mobi top level domain or something, but this takes a lot of extra effort, cost and often means that you have to maintain two different websites. Plus, your mobile site may work well on a smartphone screen, but not a tablet-sized screen.
- Create your site using responsive design. Never heard of it? well, read on.
Websites are built using HTML to control the structure of the content and CSS to control the style of the content. Unfortunately, most websites use the same styles to display the page structure, regardless of the device. The problem with this "one-size-fits-all" method for the style code is that the styles applied for a computer screen may not work well on a tablet or smartphone device.
The page looks the same in all three devices
Responsive Design relies on a new CSS capability called media queries. This is simple code that “asks” the browser of the person looking at your site about the screen size, number of colors, and orientation (portrait or landscape) of the display. Your site can then deliver styles tailored to how the content is being displayed.
The styles are applied based on the screen size, so the page looks different depending on whether it's on a desktop computer, smartphone, or tablet.
Coupled with some clever JavaScripting, this will allow you to customize the same web page in a variety of ways, optimized for different devices. The upshot: You have a mobile-friendly website with only a little extra effort.
Responsive Design is a pretty new concept for the web, but it has been evolving for several years. As it developed, different people called it different things. Although Responsive Design appears to be the most popular term now, you may also hear it referred to as:
- Reactive Design
- Adaptive Design
- Reflexive Design
- Fluid Design
- Flexible Design
- Mobile First
Forum One has been playing around with Responsive Design for a while now, and we are rolling out the ability to quickly add responsive design to any new website, or adapt a current website built with Drupal 7.
We started with the Drupal Omega theme, but we've also added some of our own special sauce to improve the overall user experience. This can be especially seen on smartphones, where we tailor links and buttons to make them more finger-friendly.
We used the Aspen Ideas Festival website to create our proof of concept. It's still in development, but as you view the site in different devices (or re-size the window in a web browser window), you'll see it automatically adapt to fit the width of the screen on which it is displayed.
The Aspen Ideas Festival on the desktop…
...the same page on an iPad…
...and again on an iPhone.
Take a look at aspendideas.org. Resize the window and see what happens!
See this related blog post on responsive design and the Aspen Ideas Festival project.
Comments
Thnx for this post - it
Thnx for this post - it explained responsive design really well for me being a non-techie. The Australian Museum in Sydney is using responsive design as we re-build aspects of our website. You can find out more here: http://australianmuseum.net.au/BlogPost/Web-2U/Responsive-Web-Design-and-Museums
- Lynda Kelly
Post new comment