Responsive Web Design: Remember Mobile Visitors

Your visitors should never have to feel excluded from your website.  If you want to keep visitors coming and returning, you need to cater your web design to their devices. If you haven’t heard of responsive web design, you should find out what it is and how to use it.

You create a great web design and build it out in clean code. Technology, however, is unforgiving to your efforts. With events like CES each year, a whole new playing field of digital devices get introduced as well. New sizes, resolutions, rendering engines… It’s enough to drive you crazy!

That’s where responsive web design comes to the rescue.

One By Fire, Two By NOOK

How often do you get a chance to try your web design on a device you don’t own?

I had entered a Barnes & Noble recently and decided to play with the NOOK Color and NOOK Tablet. The main purpose of my adventuring was to see how my website looked on these devices. Since I had just finished a responsive redesign of my site, but hadn’t tested on the Android platform yet, I figured the site would have major errors.

The result made me smile: It looked almost exactly as I intended. The only difference that caught my attention was my site’s title did not render the inset text-shadow CSS on the NOOK.

Also, as intended, the site would show up normal when held horizontally and switch to a mobile-friendly view when viewed vertically.

Shortly after this experience, I was able to test a family member’s Amazon Kindle Fire with my website design. Sure enough, the results were the same as the NOOKs’.

The Future Is Now, And It’s Mobile

Mobile devices are more than a trend in personal computing; they’re becoming a norm and the standard.

If you want your visitors to get the full experience out of your site, you shouldn’t restrict their access based on their device or screen size. The age of, “You must have a minimum screen resolution of…” is at an end.

It’s time to think mobile first, desktop second.

Have you seen what your site runs on an iPhone? How about one of the many Android-based devices? Ever stop to think how it would look on a Blackberry phone or Playbook, or even an HP TouchPad?

It doesn’t matter if the device is popular or one foot (or both) in the grave. You should think about everyone in your audience and try to give everyone the same experience with your site.

How To Accommodate Everyone: Responsive Web Design

Design and build your site to work on screens ranging from 2 inches wide to 20 feet wide and beyond. The best method to do this is to create a fluid layout using percents instead of pixels to let the content adjust sizes and positions. If you want more control, try working with CSS media queries and working with available space to change the site’s style based on different devices and screen widths.

If it’s your first time designing a responsive website, look at some great examples online for inspiration, and use online tools to help you. Or, you can always buy a book on responsive web design.

Give your visitors a seamless experience on any device. If a visitor can’t access the content they’re looking for, you will lose them, no matter how good the design is on a desktop computer.

And in the end, visitors and conversions are what matter most.