Do you incorporate a web tracking for your website? Have you looked at the traffic data recently and investigated how many percent of your web traffic is from mobile devices? If the answers are a resounding NO, we highly recommend Google Analytic, a free web-based tracking application, and start analyzing the traffic to your website.
IDC reported that in 2010 the shipment of smartphone worldwide was 302.6 million units. Then, according to Facebook, there are 350 million users actively using mobile apps (such as Facebook for iOS and Android devices). Chances are that these 350 million users are using their mobile devices to browse the Internet too. During the Christmas 2011 period, there were 6.8 million iOS and Android devices being activated, an increase of 353%.
I am not sure about you, but boy, I think that is a huge number and we should cater to people using mobile devices. Approximately 20% to 30% of the traffic to our website, including the blog, are from mobile devices. Furthermore, we don’t want to ignore the mobile device users because who knows? They might turn out to be our customers. Hence we place a high priority on mobile devices accessibility.
If you haven’t started thinking on mobile website, it is time to start now to better provide accessibility to your visitors browsing through your website on a mobile device. You definitely don’t want to lose any potential customers just because they are using mobile devices. But before you embark on doing and/or start converting your existing website to work on mobile devices, there are 5 things that you will need to consider:
[Note: By mobile devices we are referring to smartphones such as iPhone, Android phones, Blackberries and etc. iPad and other tablet are excluded and will be labeled Tablet.]
#1: Provide More Space
Mobile devices have smaller screen property. A typical smartphone has 3.5 inch to 4.7 inch screen size, so visibility can be an issue. Thus spacing between element is important because if they are not generously spaced, then the whole website will look cramp and viewing on such a small screen will be extremely difficult.
The screenshot above is from our blog and website when viewed on iPhone (3GS, if you must know). Notice the space in between to make reading easier and the visitor can find the information they are looking for.
#2: Resize Everything!
Your website has a 1024 x 768 pixel picture that your are proud of. Furthermore it has a slider to display your products and services and that plays a pivotal role in attracting the attention of your visitors.
That’s great. But it won’t work on mobile devices. As mentioned before, mobile devices have smaller screen size compare to the laptop, netbook, tablet or desktop, so if the image or element is too big then there will be a lot of scrolling involved.
To make things easier to read and more user friendly on small screen, resize the elements or pictures that will fit the screen. If you go to our website main page on a mobile device, you will notice that the jQuery slider will automatically resized to fit a mobile device screen. Furthermore, the navigation menu on top will be resized as well.
Another good example will be the Verge website. When view on mobile devices, the pictures, div and etc are all resized and designed to fit the screen, as shown below.
#3: Easy Navigation!
If you look at the Verge mobile website (as shown below), you will notice that the navigation menu is big and stacked vertically to maximize the viewing area of the screen of the smartphones. We recommend that fancy menu be scaled down to provide clear label so that visitors can navigate on the mobile website easily.
A “Back” button is easy to understand: everyone knows what is a back button, so there is very less chance of confusing your visitors and reducing the chances of the visitors being lost at the maze if the website.
#4: Focused Content
For a full sized browsers, you can have many elements on the screen, with sidebar, or even 2 sidebars. The main aim is to show off the design and also provide more information to the visitors. But for mobile devices, you need to rethink on the layout. The rule of thumb is: show the focused content to your visitors, and arrange the other information at the bottom so that visitors can find the information that they are looking for easily.
Some might recommend to hide the information that is less important, but I think we shouldn’t assume what the visitors are looking for. Maybe the information of the sidebar will provide the visitors the information that they are looking for and making them your customers.
If you need to remember one thing about this, just remember this: vertical scroll. Stack your content vertically and place your most important content all the way at the top.
#5: Branding! Don’t forget about that!
This is applicable for everything that you do, including your corporate identification and your brand image. Fitting your website onto a mobile device with a small screen size doesn’t mean that you will need to sacrifice your branding.
A good example will be Burberry website. When you browse Burberry website on a mobile device, they don’t lose their branding. It is still beautiful and speaks loudly about the Burberry brand.
You can compromise many things in order for the mobile website to work, but never ever compromise on your branding.
This is a long post, and since you have been reading until here and also we are still in the Chinese New Year spirit, I will throw in a bonus.
#6: Oops! Honey, I shrunk the site!
Since you are shrinking your website, remember to shrink the other important thing: file size.
We believe that any website shouldn’t be bogged down with large file size. It is ridiculous to ask the visitors to load a 50MB files just to see a page. It is wasting a lot of bandwidth and even on a broadband, it will take quite some time to load. It is highly recommend that a website should load (almost) instantly. Most importantly, most mobile devices browse the Internet by using their mobile data plan. So when you are designing a mobile website, it is important to consider the file size and design it for lower bandwidth consumption.
Also, it is advised not to use Flash for the website. For slower laptop, Flash will actually take up a lot of resources and it won’t work on iOS devices. Instead, consider using HTML5!
So there you have it, the 5 things (6, actually) you need to know when designing your website for mobile devices. Happy coding!
If you have a question or need help with website design or just want to chat, do drop us a call or email us.