Find Your Mobile Wonderland – Responsive Design

When Alice first arrives in Wonderland, she’s faced with a dilemma: she wants to enter the beautiful garden, but she can’t even fit her head through the door. By drinking the little bottle marked ‘Drink me’ Alice is able to shrink down to a size where she can fit. Realizing she’s now too small to lift the key, she eats the small cake marked ‘Eat me’ and grows again. Alice continues to shrink and grow throughout the story–sometimes to her advantage and other times not–but without that ability to change she may never have experienced all that Wonderland had to offer.

A recent development in web design, called Responsive Design, can provide your website with a little bottle or small cake of its own. It may not lead you to Alice’s Wonderland, but it can open up your business to the ever-growing wonderland of the mobile web by creating a better browsing experience and ultimately improve conversion.

A responsive website is one that changes (or responds) based on the size of the screen used to view it. How it responds is up to you, but creating a responsive website allows your site to display and function smoothly on any number of devices. With some analysts predicting that mobile internet usage will outpace desktop usage by 2015 (that’s just 2 years away) it’s hard to ignore such promising possibility!

Desktop and laptop screens all present pages in a landscape view, with desktop monitors traditionally being wider. Smart phones and other small mobile devices more often present pages in a portrait view, due to the way in which we hold them. Tablets fall in a middle ground, where either landscape or portrait views are natural.

Understandably, the user experience (UX) varies greatly based on the device, but responsive design gives you the ability to better control that user experience. Make sure your site is always presented in a clean, usable way, and that your messages are always getting through.

Change the Layout

One option when making a website responsive is to change the layout of the content on the page.

Say your homepage has a billboard (or slider), three call-outs in columns, a welcome paragraph, your four latest blog posts and contact information. On a desktop or laptop, this is what your site might look like:

That layout might even look fine on a tablet, but what about on a mobile phone? Mobile screens are so skinny that a normal site appears ‘zoomed out,’ meaning much of your content would be almost completely illegible.

If the same homepage was designed to responsively change the layout of information when viewed on a mobile device, it might look like this:

The responsive design shifts to create a more vertical layout, where all of the elements become roughly the same width and the font sizes remain large and easily to read. This provides a more natural mobile experience as users scroll through elements that, while relatively larger than their desktop counterparts, are more easily read and clicked.

Change the Content

The other option when creating a responsive site is to change the content that is displayed when the page shrinks.

Page views on mobile devices are steadily growing, but it’s safe to assume that most users aren’t going to be doing everything on their phones. If we give a bit more thought to user goals, we can change our site to reflect that.

Even when they’re optimized for a smaller screen, most users prefer not to read long articles using their phones. Based on this knowledge, perhaps we could cut out the 4 recent blog posts from our mobile homepage. They’ll still be able to navigate to the blog using the menu if they want, but we’re not going to push them there.

For the majority of mobile users, easy access to location, hours and contact information are key (because they’re often on their way to you, or plan to be). Desktop visitors are more likely have time to browse and look at a number of other features.

Taking ideas like this into account, our mobile responsive homepage could actually look as simple as this:

Responsive Design vs. Mobile Sites

If responsive design is the relative newcomer to the tea party, mobile site development was the first guest to arrive. There are pros and cons to either option but regardless of what you choose, having a mobile-friendly web presence is becoming a must-do for any business.

Content Management

They may look different, but because responsive sites use code to dynamically change how a pages display, it’s still just one site. Development of a mobile site, on the other hand, creates a duplicate site. This second site lives on a separate domain (usually ‘m.’ instead of ‘www.’) and has to be managed separately as well. Needless to say, managing a website in one place is easier than managing it in two.

Search Engine Optimization

If not handled correctly, duplicate content on a mobile and desktop site can hurt your SEO efforts. Even if the correct steps are taken, a link to m.website.com is not the same as a link to www.website.com, so links to your mobile site won’t serve to boost your actual website’s organic ranking.

A responsive site always uses the same URL so your content lives in one place and one place only. It’s better for you as an admin, and it’s better for SEO… even Google agrees!

Price

While lacking in a few areas, mobile sites are still a very viable option for many businesses, since they can often cost much less to create than to redesign a site to work responsively.

In Conclusion…

Things can look very different when you’re changing size, as Alice quickly found out. Take some time to consider how visitors use your site and how their device of choice affects that experience.

Which one is right for you? This isn’t always an easy question to answer, and may require a trip down the rabbit hole. One thing is for certain, though, the need for mobile-friendly websites isn’t going to change anytime soon.