Responsive web design has very quickly become the gold standard on how to design mobile websites. It’s much more flexible than any other approach and allows you to build mobile sites for all kinds of devices, from iPhone to Android to weird obscure operating systems.

What is responsive web design and how can you use it to improve your mobile site?

==> Responsive Web Design in a Nutshell

Responsive web design is a style of designing that allows you to design for all kinds of browsers, from desktop to iPad to mobile in one go.

Instead of having one desktop design and one mobile design, you instead have one “responsive” or flexible design.

Whenever a visitor lands on your website, your site uses user agent and media queries to figure out exactly what browser and device people are visiting your site with.

Then your website will load up a custom CSS stylesheet designed specifically for their device or screen width.

==> The Only Way to Design for All Devices

Responsive web design allows you to design a different stylesheet based on different screen widths. It would be (nearly) impossible to design a different site for every tablet out there. But you could easily design a CSS stylesheet that applies to every tablet of a certain width.

There are a lot of devices that you simply won’t have the time to design for. Responsive web design will let you still create great-looking sites for these devices.

==> Better for SEO

It’s still unclear how good or bad mobile sites are for SEO. But most SEO experts agree, splitting your links between a “www.site.com” version and a “m.site.com” version is probably bad for SEO.

With responsive web design, you don’t have to worry about that at all. A different stylesheet is loaded up on different pages of content, but the site’s URL is exactly the same. You only have one page and that page gets all the backlinks.

==> Go Mobile First

The best way to design responsive websites is to design the mobile version first. This allows you to create a design that looks good on small pages first, then grow it larger.

Most designers go the other way around. That ends up creating mobile websites that look watered down. If you start small and go big, you can make sure all levels of your website look fantastic.

==> Where to Go from Here

Start by educating yourself on media queries and user agent queries. Learn how to serve up different kinds of CSS stylesheets based on screen size, device and other variables.

Then design at least three designs: One for mobile, one for tablets and one for desktops. Some designers go so far as to create as many as ten different designs!