Web Design

Basics of Why and How to Use Responsive Designs Online

Understanding Responsive Web Design
Photo by Chasing Daisy / Flickr

What is responsive web design? The best way to find out is to go to the source, the man who came up with the term originally. According to Ethan Marcotte, your design needs to have three elements in order to be considered responsive.

  1. Flexible Grid Foundation
  2. Images Must be Flexible
  3. Media queries are used to determine view to show

Understanding Responsive Web Design

It’s important to start with a strong foundation – a flexible grid design. Luckily, there’s a lot of information available online that will show you how to implement this groundwork for making your site easily viewable on any device. Find out more about fluid grids.

A little trickier is making sure all of your images resize correctly when viewed on different devices. As is usually the case when it comes to the Internet, there’s more than one way to do this. The important thing to remember is that you should test often and tweak before you launch any new design. Find out more about fluid images.

Last but not least, you need to install a way to know which style sheets and images to use depending on the type of device being used, operating system being used. A lot of third-party scripts make this relatively easy to include in your website. Learn more about CSS3 media queries.

Top Tutorials for Responsive Web Design

As a bonus, here’s a list of some of the best online tutorials for responsive web design.

Any of the links above are a great place to get started learning even more about responsive web design. If you have any experience with this or have any questions, please leave a comment below.

What is your rating for this article?
- Total: 0 Average: 0