Mobile: responsive, adaptive or optimized?

This is a question that we hear a lot lately: will my new website be mobile-optimized?

And before answering this question, letâ??s make sure all parties mean the same thing when they ask for â??mobile-optimizedâ?.

Hereâ??s how we at 360i define it:

Websites can be mobile-friendly and mobile-optimized.

Mobile-friently vs mobile-optimized

A mobile-friendly website is the SAME website that you see on a desktop browser or a mobile browser. Nothing in the layout of the site changes, but all content is viewable on mobile. So your users browsing from smartphones can still read and access all of your content. Most websites can be called mobile-friendly, except for sites built with Flash – they will not show on iPhone Safari browsers.

Generally, there is not much additional work in this case, just follow best practices when youâ??re building a mobile-friendly site:

  • use descriptive, semantic markup (appropriate header tags for headers, donâ??t include text as part of images)
  • minimize image file sizes for slower mobile connection
  • avoid Flash and advanced JavaScript/CSS animations

A mobile-optimized website provides a DIFFERENT experience when viewed in a mobile browser. The reason for this is to address the smaller screen size and provide the best user experience to your visitors who are on mobile devices.

Responsive vs adaptive design

There are two ways you can create a mobile-optimized experience:

1) Responsive website
Responsive design is a SINGLE FLUID design for all devices and screen sizes. Your page elements can be re-arrranged based on the screen size, but they are still same elements.

Example: forgottenpresidents.com

This is usually done with use of media quieries in CSS, and looks like this (very simplified example):

/* --------------- Tablet ------------- */

@media only screen and (max-width: 1024px) {
     /* your styles for tablet here */
 }

/* ------------- Smartphone ------------- */

@media only screen and (max-width: 480px) {
    /* your styles for smartphone here */ 
 }

2) Adaptive website
Adaptive websites present users with DIFFERENT designs, depending on the device and screen size.

This is accomplished by detecting the device (by checking the User-Agent header), which can be done either in JavaScript or server side. Hereâ??s a good site with script snippets for mobile browser detection.

Usually, once a mobile browser is detected, the site redirects to a mobile version.

Example: amazon.com

Obviously, creating a mobile-optimized website (responsive or adaptive) would require more work, because you would have to either create a design that scales fluidly (for responsive sites), or create multiple design versions (for adaptive sites).

Here are some additional resources that help you understand these concepts:

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