Responsive Design – Part 2


Why Should I Care About Mobile Responsive Design?

You (publisher, developer, and designer) should care because you want the visitors to your website to have the best experience possible, without forcing them to adapt themselves.

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

The first is optimizing the layout of the content.

If a user is browsing 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.

The second is to adapt the content that is 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 the 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 types food are available.

These are obviously 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 all “on the fly”, and without multiple versions of your site to maintain.

Benefits of Building Responsively

  • Allows the development of a consolidated front-end code base for use on all devices.
  • Improves maintainability of codebase.
  • Reduces requency of app submissions and allows apps to be updated transparently, without forcing users to download from iTunes or Android Marketplace.
  • Reduces expense of maintaining separate teams to maintain codebases for different devices.

Responsive Methods

  • Reset CSS
  • Percentage Widths
  • Responsive Font Sizing
  • Responsive Image Sizing
  • Viewport Control
  • CSS Media Queries

For more information you can see below slides:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s