Mobile Responsive Design 101

With only 58 seconds on the clock, the San Francisco 49ers trailed the Dallas Cowboys 27-21, with a trip to the Super Bowl on the line.

Joe Montana took the snap and rolled to his right, looking for his running back Freddie Solomon. Solomon should have been wide open, but was perfectly covered by the Cowboys’ safety.

In a split-second, while running, turning, and looking … Montana made a decision to adjust the play.

He backpedaled, lofting a high pass that looked to everyone like a throwaway. It found the fingertips of Dwight Clark in the end zone, finishing one of the greatest plays in NFL history.

Without Montana’s ability to adjust and adapt, the 49ers would have lost that game, missing out on their very first Super Bowl victory.

Being able to naturally and automatically adjust and adapt is a critical key to survival and success. Its true in sports, nature, business, and yes, web development.

Let’s take a look at one of the most exciting — and liberating — changes that’s come along for online publishers in recent web history …

What is mobile responsive design?

When a website is responsive, the layout and/or content responds (or, adapts) based on the size of the screen it’s presented on.

A responsive website automatically changes to fit the device you’re reading it on.

Typically, there have been four general screen sizes that responsive design has been aimed at: the widescreen desktop monitor, the smaller desktop (or laptop), the tablet, and the mobile phone.

As you can see in the examples below, as the screen gets smaller, the content shifts and changes to the best display for each screen …

Why should I care about mobile responsive design?

In short, you (the digital publisher, developer, and designer) should care because you want the visitors to your website to have the best experience possible, without forcing them to adaptthemselves.

There are essentially two ways you can give your audience a good experience utilizing responsive design:

1. Optimize the layout of your content.

If a reader is browsing your site from a mobile phone, they generally don’t have a lot of screen real estate to work with. Phones today will typically zoom out automatically, so that the entire website can be seen onscreen. This can be good, as it gives the reader access to the entire sight, but it can also be frustrating when trying to find information that is located in a tiny part of the upper right of the screen. If you could move some things around, make some things bigger, and not have as many columns, you’ll give your mobile reader a much better experience.

2. Adapt the content that’s shown.

If you own a restaurant and a potential customer is browsing your site from a mobile phone, chances are they aren’t that concerned with how pretty your site is — your foody blog with the awesome slideshow of delectable dishes scrolling from side to side isn’t very useful in that situation. They want to know what your hours are, where you’re located, how to make reservations, and want a look at your menu.

Your potential customer browsing from a desktop computer probably isn’t looking to eat right now, and isn’t in a hurry to see where you’re located and what your phone number is. Most likely, he’s looking to see if you offer a good atmosphere and what kind of food is available.

These are obvious generalizations, but you can see the benefits of having differing content presented to people in different screen viewing circumstances.

Mobile responsive design takes care of this “on the fly”, and without multiple versions of your site to maintain.

How to easily create a mobile responsive website

All of this may be new to a lot of you, and fairly intimidating, since it requires not only a change in code and design, but in your overall web strategy and philosophy.

Thankfully, our team at StudioPress has their capes on and is here to help you out.

We’ve written several articles that detail how you can get started on your own responsive design, starting with the philosophy behind it, and then moving on to actual coding out flexible grids and media queries:

• 2 Indispensable Elements of Excellent Mobile Responsive Design
• Mobile Responsive Design: The Flexible Grid
• How to Make Your Website Respond to Different Mobile Devices

If all that is not your cup ‘o tea, we’ve created several themes that are responsive out of the box.You can check those out right here.

And stay tuned, because we’re in the process of making every Genesis Theme responsive …

Mobile responsive design is the future of the web

Mobile responsive design is all about automatically delivering your audience the content they want, within the context that they’re viewing it.

It’s revolutionary for online publishers, because (for most) responsive design eliminates the need for multiple versions of your site, or exspensive app development and maintenance.

One website, multiple versions.

Perfect simplicity for the publisher, great utility for the reader.