I was recently introduced to responsive web design and, I have to admit, it was a mind blowing experience. The concept of building a website that has the ability to scale proportionally to almost all screen sizes is an incredible development. The crazy part is the idea of responsive web design was brought to light back in 2010 but is now gaining popularity due to the explosion of smartphone and tablet browsing.
If you’re unfamiliar with responsive web design I’ll do my best to give the 101 version. As I explained in the paragraph above your website will be able to scale from a large desktop screen all the way down to a smartphone display with your layout adapting so your text is still legible and your images look similar to the large layout. Cool, but how does a website do this?
The changes are done when the webpage loads and calls a specific CSS file depending on the browser window size. For example, you’re surfing the web and have your browser maximized on your screen at 1920 px X 1080 px but then decide to change the browser size to multi-task. When you change the browser size the CSS code understands whether the page is above or below a certain window dimension percentage. Since we decided to make our browser window smaller, lets say 800 px X 600 px, the webpage calls for the small layout CSS code because the code determined we were not at the correct size to display the large layout CSS code.
What’s impressive about a website that has a responsive design structure is how seamless the changes are made. As you shrink or grow your browser the page elements will immediately adjust and reorganize.
A couple things I should note since I’m making responsive web design seem pretty easy to create:
- The process is very CSS intensive and works best with CSS3.
- Scaling images isn’t the easiest process because you may have to create multiple sizes which can hinder page load time.
- Some screen dimensions will still mess up your layout.
Even with those issues I believe it’s still worth your time to experiment with a responsive web design because:
- You have one design for an array of devices.
- Layouts transition seamlessly when adjusting browser size.
- It makes your website legible on a small screen.
If you’re interested in learning more about responsive web design I would suggest reading the 2010 blog post from Ethan Marcotte. Even though the article is 2 years old it goes over the basics I explained above with far more detail.
A similar, and more recent, post to Marcotte’s was done by Smashing Magazine. Their article is also a high level look at how to work with and implement the code
Finally, Media Queries has a built a site dedicated to sharing responsive web design examples.
