Bluetrain Mobile | Mobile Marketing Engine | Mobile CMS

In Transit Blog


Honey, I Shrunk the Website!

by Steffan Berelowitz

29
Jun
2011

shrunk website Honey, I Shrunk the Website!

If you plan on constructing a mobile website, you might think it’s as easy as pointing an electromagnetic shrink ray at your desktop website! In reality, it’s a lot more complicated than that. In fact, it can be very difficult to create a mobile website that looks good and works on multiple smartphones, you have to rethink the structure and design of your desktop website.

Here is an analogy that illustrates our point

Below is picture of a 1967 Shelby GT500. It has the brand attributes of sporty and cool and the functional attributes of high performance and fast.
GT500 Honey, I Shrunk the Website!

If you want to shrink this transportation, to make it smaller and lighter, you might think of this (a GT500 pedal car!):
GT500 pedal Honey, I Shrunk the Website!

BUT, a pedal car no longer has the brand attributes of sporty and cool and the functional attributes of high performance and fast. If I tried to drive a pedal car to work would I look ridiculous it would take me hours! A better way to create a smaller and lighter version of our sports car is this racing bicycle:
bike Honey, I Shrunk the Website!

This bicycle retains our desired brand attributes of sporty and cool and the functional attributes of high performance and fast! The bike accomplishes this by reformatting the functionality of smaller and lighter transportation rather than shrinking it!

Here are some considerations you should keep in mind:

Content
Your mobile users are interested in different content than your desktop users. What is important to your mobile audience? They may want prominent links to your phone number, upcoming events, news, and directions. What else might your mobile audience need as compared to your desktop website visitors?

Copywriting
A typical mobile page should have no more than 75 to 100 words, whereas an average website page can easily have 250 to 400 words. If you don’t boil down your content, you’ll just overwhelm your mobile audience by giving them too much text on too small a screen.

Images
Mobile images must be smaller, optimized to load fast, and they have to be carefully sized to look good on multiple devices and aspect ratios. See Designing for the Small Screen for more tips.

Branding
If you invested hundreds or even thousands of hours building your main website, you probably don’t want a mobile website that looks like it was designed one night by your nephew in his basement. How can you create a mobile website that preserves the integrity of your brand and is consistent with what your customers know and love about your company?

Speed
Mobile visitors are impatient and it’s critical to consider the time it takes for your mobile website to load. You need to optimize content and images with the right technology that can ensure your mobile website loads quickly on a wide variety of devices. With mobile search up 500% this year, if your visitors have to wait too long for your page to load, they may go elsewhere.

Devices
iPhone, Android and Blackberry devices each have their unique strengths, weaknesses, screen sizes, graphics capabilities, etc. Technology advances so fast, especially when it comes to mobile devices. Unless you have a platform that takes care of optimization for you, trying to adapt your website for the latest smartphones is like aiming for a moving target.

So don’t try to ride a pedal car to work. Instead, rethink, redesign and restructure your desktop website so that it’s optimized for mobile devices. How will you change your content, copywriting, and images for mobile while preserving your branding to deliver a fast mobile website that works on multiple smartphones?

Find out more about how Bluetrain Mobile can help you adapt your desktop design for a mobile website.

Video Clip: Honey, I Shrunk the Kids

 

Credits: With thanks to Nathan Teplow, for his research, co-authorship, and collaboration on this blog post.
Related Posts:

 


Bluetrain Mobile

Mobilize your website.