Pick a site. Any site.

Open a new tab in your browser and go to that site. Maximize that window. Take a good look. That site looks pretty nice, doesn’t it?

Now let’s try something.

Drag one of the edges and reduce the width of that window to about a quarter of it. Is your site experience still the same? Are images shifting around? Can you view the page properly?

If your answers to all of these questions are no, then let me tell you that site sucks in smartphones.

They look ugly. U-g-l-y and they got no alibi.

Not only that, but also most visitors to that site are bouncing off right away. According to eMarketer, in 2012 57.6% of Baby Boomers, 62.2% of Gen Xers, 63.2% of Millenials in the United States accessed the Internet from mobile devices. And 100% of all them hate sites that look crummy on their expensive iPhones and Galaxy S4s. You can quote me on that last one.

Let’s talk about fixing those ugly sites.

You fix those ugly sites by providing visitors on their fancy phones an easy reading and navigation with a minimum of resizing, panning, and scrolling.

You would do that for iPhone users.

You would do that for Windows Phone users.

You would do that for Android phone users.

Oh, wait let’s not forget about Blackberry-ians, HTC-ians and on and on.

There has got to be a better way.

Responsive Mobile Design is that better way.

Instead of addressing each device separately, what you want to do is attack all devices at ones. En garde! Responsive mobile design does that.

Coined by web designer and developer Ethan Marcotte in a 2010 blog post, responsive web design is a design approach that crafts sites to provide an optimal viewing experience across a wide range of devices.

Let’s talk about how responsive mobile design does that.

Responsive web design uses fluid grids, flexible images, cascading style sheets (CSS) media queries, and server-side components. All of these tools create style rules allowing content to adapt to different conditions.

• Fluid grids – The concept of fluid grids swaps page sizing from absolute to relative units. Instead of using pixels, it uses percentages.
• Flexible images –When viewing content on mobile devices, images often don’t render within defined parameters. Establishing flexible images prevent that.
• CSS3 media queries – This is a set of modules that address all possible browser widths guaranteeing an optimal user experience.
• Server-side components – These components work together with included in mobile devices for faster loading within cellular networks.

Who is using responsive mobile design?

© Copyright Jason A. Howie and licensed for reuse under this Creative Commons License

Here are some names you might recognize:

• Time
• Mashable
• Starbucks
• World Wildlife Fund
• Boston Globe

Trust me. You would be in good company. And your Windows Phone visitors will be happy. Nobody likes unhappy Windows Phone visitors. They don’t buy products or services. If they don’t buy products or services, nobody is making money.

And I am sure you want to make money.

With a site that uses responsive mobile design, you will not lose out on potential customers.

You have to pay attention to mobile traffic. Talk with your Webmaster about options to make your site easy to read across all devices or the devices that your target audience uses the most.

Responsive mobile design is an effective approach to develop sites that are optimized for all devices.

What devices, again?

All of them.

Sounds good? Then, find out more about how we are helping clients big and small update their websites with responsive web design.

We look forward to learn about your business and find out if we can help you. Schedule a free consultation to talk about your web needs.  Let’s do this!