Mobile Website Design – How It Works

If you own a smartphone, chances are you’ve used it to look up something on the Internet.

However, as I’m sure you’ve encountered, surfing the web from your phone is often a cumbersome experience simply because traditional websites just weren’t designed to be viewed on smartphones.

The 3 main problems with viewing regular websites on mobile devices are …

• They’re slow to load.
• The entire site is displayed on the small surface of a smartphone, thus making the content microscopic.
• They’re usually difficult to navigate from a touchscreen … even if you do have tiny fingers.

It’s generally an unpleasant experience.

But there is a solution >> Having a mobile-optimized version of your website.

So, yes, you still need the regular version of your website so people can view it on their laptops and desktop PC’s, but you also need an additional version of your website that is designed specifically to be viewed smartphones.

By far, the two most popular methods of creating a mobile-optimized website are:

• Responsive design.
• Dedicated mobile website design.

Here’s a brief overview of how each method works.

Responsive Design

By definition, responsive design means that a website “responds” to the device it’s being displayed on and automatically morphs to the current size of the screen.

Here’s a good example:

http://www.google.com/adwords/express/

When you visit this website, play around with the size of your web browser and watch what happens.

When you make your web browser smaller to simulate the size of a tablet or smartphone, the website content as well as the navigation responds accordingly (hence, responsive design) to try and give you a better viewing experience.

However, as with anything, there are upsides and downsides to responsive design:

Upsides:

• Set it and forget it.  Whenever you add content to your site, there’s nothing further you need to do to make sure it’s optimized for mobile. The responsive design of your website will reposition your content automatically.

• No additional cost to develop or maintain a separate mobile site.  All you need is one website and it’ll work in all browsers and mobile devices.

Downsides:

• Your main website must be built on a responsive design platform. This means that your existing website would have to be built from scratch using responsive design technology. For many, they’re not going to want to incur the time and expense of starting over and building a brand new website, especially if they already have a nice site up and running.
• Does not allow for detailed customization.  Sometimes the information on your main website is just too much to be viewed comfortably on a mobile device, and it would be nice to have a shortened version of your content for your mobile site. In addition, if you want your mobile site to have more of a custom “app” look and feel you’re probably going to need to go with a dedicated mobile website.

Dedicated Mobile Website Design

With this method, you actually maintain two separate websites … your main website as well as a separate custom mobile site.

The way it works is like this. When someone visits your website from a laptop or desktop PC, they see your main website just like always.

But when someone tries to view your website using a smartphone, a special script automatically redirects that person to the mobile version of your website.

Therefore, the correct version of your website is automatically served up based upon the type of device they’re using to view your website. The process is seamless.

Here’s an example of an actual site that uses a dedicated mobile website:

The image on the left is what you would see if this website (www.sailingmachines.com) was not optimized for mobile. It’s the main website crammed down to fit on the small display of a smartphone. Without substantial magnification it’s basically unreadable.

On the right is the mobile optimized version of the website (m.sailingmachines.com). Easy to read and navigate. Big buttons to solve “fat finger” syndrome.

Also, the information on the mobile site has been condensed, because mobile users are generally on-the-go and just want the “executive summary”. If they want more detailed information, they can visit the full website when they’re back at their computer.

More examples of dedicated mobile websites can be found here

Upsides:

• Highly customizable. Provides the look and feel of an app. You control exactly how you want your mobile site to look on a smartphone.
• The existing main website remains “as is”. No need to uproot it and start over.

Downsides:

• Development and maintenance costs. Because a mobile site is actually a stand-alone website, albeit a mini-version of your main site, you will need to invest time and/or money to design and maintain your mobile site. Fortunately, though, these costs are a fraction of what it takes to develop a full website.
• Must be manually updated. Although it is sometimes possible to sync your main site with your mobile site, formatting issues usually arise. For that reason, manually updating your mobile site is recommended to ensure it precisely displays how you want it to.

Regardless of whether you decide to go with responsive design or a dedicated mobile website, the whole objective is to make it a better experience for the mobile user.

Visitors to your site shouldn’t have to “pinch & zoom” to be able to read anything, and your site should be easy to navigate on a touchscreen device.

Just a few short years ago, searching the Internet from your phone what somewhat of a novelty. But today, it’s commonplace. The mobile web is now part of our daily lives.