Responsive Web Design – The Cutting Edge of Mobile Design

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 “” version and a “” 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!

The Five Don’ts of Mobile Website Design

In mobile web design, one mistake could be all it takes. Some of these mistakes will cause your websites to not display properly at all. Others will simply frustrate mobile users and cause them to leave. These are five of the biggest mobile web design mistakes you should absolutely avoid.

Mistake #1: Using Flash

There are many reasons not to use Flash. For one, search engines hate it. Video often doesn’t parse properly and it can cause browsers to crash. Most importantly, however, it’s terrible for mobile.

None of the iOS devices support Flash, including the iPhone, iPod Touch and the iPad. If your website is in Flash, it simply won’t display on the most popular mobile web operating system.

Mistake #2: Using JavaScript

JavaScript does work on many mobile devices. On the other hand, it also doesn’t work on many mobile devices. On many mobile devices, JavaScript works – but intermittently.

Many JavaScript commands that work well on desktop don’t work on mobile at all. In short, it’s inconsistent. You can’t build a solid mobile framework on JavaScript.

Mistake #3: Using Pop-Ups

On a desktop computer, a pop-up can be a little annoying. The box pops up, then people just close it and move along.

On a mobile device, however, a pop-up can be downright infuriating. First, it opens a new window on your device. Then it takes up bandwidth to load. Then users realize it wasn’t valuable content – and will most likely leave your site for good.

Never use pop-ups on mobile websites. It’s much, much worse than pop-ups on desktop browsers.

Mistake #4: Have Small Buttons

On desktop browsers, clicking small buttons is pretty easy. Most people are able to click on buttons as small as 5 pixels by 5 pixels. On mobile devices, it’s a different story.

If a button is small, it’s not only hard to click – it can be impossible. People will often end up clicking the button next to the button they’re trying to click.

The finger is a clumsy tool. Keep that in mind when you’re designing your button sizes.

Mistake #5: Content Overload

Another common mistake is to put a ton of content on one page. This works on desktop-based browsers because people have a lot of screen space with which to read.

On mobile devices, having a lot of content on one page or a lot of images just clutters things. It makes it very hard for people to find what they’re looking for.

These five mistakes will make your site either difficult to browse or completely impossible. Make sure you avoid these mistakes – and if your designer suggests doing one of these things, it might be time to find a new designer.

I would like to hear your Mobile Website Design’s Do’s & Dont’s.