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:

• Media queries: lots of examples of responsive design
• Brad Frostâ??s excellent compilation of resources related to responsive design
• Great deck on designing for mobile
• Discussion on Quora: responsive vs adaptive
• Good detailed post on optimizing your design for retina displays