No one should underestimate the power of a well-designed website. A great looking website can spell the difference between sales conversions and going bust. Because of this, there are dozens upon dozens of web design tutorials available online, both free and for a fee. But should you risk designing your own site even if you know next to nothing about the job? Or should you take a course to ensure you’re more up to the challenge? Also, do you know where to host your websites? What are the good web hosting companies?

Designing a web site can be confusing. Creating a responsive design even more so. But it’s something that can separate your site from all others. But before anything else, you have to understand what responsive web design actually means.

To do that, imagine a web page that magically adjusts to fit the browser width. So regardless where you access it, desktop or mobile, you get the best possible resolution. Responsive web design, therefore, addresses the need for websites to fit each individual device. It eliminates the need to create an entirely new webpage of the same website for each available gadget.

1

Responsive web design creator, Ethan Marcotte discussed the key ideas that form responsive web design. It’s not a single piece of technology. Rather, it’s a set of techniques and ideas forming a whole. These include:

  1. Fluid Grids

Fluid grids are “liquid layouts” that expand with the page. In the past, web pages have fixed width layouts; page designs have a fixed number of pixels across and are centered on the page. With the number of available screen resolutions today, that is just severely limiting.

With fluid grids, the page is designed in terms of proportions. Because of this, the layout automatically resizes its width according to how tiny or stretched the device being used to view it is.

There’s a whole math to getting the right proportions for the page elements, too. But fluid grids can only take your page so far. Widths still may be too narrow and the design will still break down. But this is a problem easily addressed by the next element: media queries.

  1. Media queries

CSS3 media queries currently enjoy good support across modern browsers. What are they? Basically, they allow you to gather data about your site visitors and use it to apply CSS styles conditionally.

For the purpose of responsive web design, you have to look at the min-width media feature. It allows you to use and apply specific CSS styles should the browser go below the width you specified.

Using a series of media queries, it’s possible to work your way up to larger resolutions. Pixel width that bears targeting are as follows:

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px

Ideally, the layout would adjust to match every device width. But in the real world, you often have to pick and choose where to spend your efforts on.

Responsive web design is fairly new. Just a year old or so. But there are plenty of available resources on the web to help you learn all about it. If you’re already spending effort to create a good web site, might as well take the time to use the latest in technology, don’t you think? And you can’t get any more “latest” than with responsive web design.

Contact Us!