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
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.
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.
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.