Contributed by Vinci Rufus on 18 May 2012
1. Cut down the content:
A mobile site can not and should not have each and every piece of information that’s there on the website. The biggest challenge is usually to identify which pieces of information are most important and make sure they are present on the mobile site.
2. Content is King:
While building the mobile site the focus should entirely be on the content displayed within a minimalistic layout with few lightweight graphics. Mobile screens have very little real estate and don’t let your content fight with graphics for space and the users attention.
3. Page Folds don’t exist on a Mobile Site:
Designers and site owners at times get quite paranoid about the page fold and go to lengths to see how they can push all their important information above the page fold. That however doesn’t hold true for mobile sites. The easiest action on a mobile is scrolling so feel free to let your page flow into multiple scrolls. In fact since its easier to scroll than click, I recommend its better to have long scrolling pages instead of smaller pages with buttons for next and back.
4. Use CSS Animations instead of JavaScript Animations:
Whenever you want to use animations or transition effects in your site try using CSS effects instead of JavaScript. JavaScripts consume more CPU cycles and hence put a load on the CPU which causes the device to slow down. This also causes the battery to drain out faster.
5. Ensure Significant Contrast between your text and backgrounds:
Unlike on desktops or laptops, websites on mobile are accessed at various locations, indoors, outdoors where lighting conditions are quite different. High contrast are a lot easier to view especially outdoors in sunlight.
6. Stick to One Column Layouts:
At 320 or 480px wide there is no place to accommodate a 2 column layout, so don’t even give it a try. Stick to one column layouts. In case you are building a Responsive website then you could try to re-position the 2nd column using CSS media-queries, when the user switches to horizontal mode.
7. Don’t Let your Users Type:
On a desktop or laptop using the keyboard is the most easiest task which comes naturally, however on a Mobile device is probably one of the most difficult and frustrating tasks that a user needs to perform. So as far as possible lets users click and select instead of type. For example a keyword search box on the website could be replaced by a tag could for the mobile version.
8 Your Users don’t care about your Logo:
Companies are obsessed with ensuring their logo and their ‘brand’ is seen upfront and is as large as possible. On the mobile, screen real estate is a premium so don’t waste it on your logo, keep it small and to the top left or center.
9 Avoid Fixing your Headers or Footers:
I’ve come across a lot of sites where have their header or footer (and at times both) stuck to the top and bottom of the screen. Avoid that as much as possible because not only does it reduce your already limited screen space, it’s also quite a challenge to make it work smoothly when the user is switching from portrait to landscape and vice versa.
10 Use Oversized buttons and form controls:
Just because the mobile screen is smaller it doesn’t really mean you must reduce the size of everything on your website. It’s in fact the opposite. Not only should you be making the fonts slightly larger but you must also make your buttons and form controls like radio buttons checkboxes reasonably large. Remember a person’s thumb or index finger is not as precise as the mouse cursor.
11 Eat your own Dog food:
Once your mobile site is ready for testing, make sure you play with it on the actual device and not on one of those simulators/ emulators. The emulator can only show you how it looks on a mobile. There is no way it can simulate the user experience especially when you are clicking buttons with your fingers and filling in forms where the virtual keyboard keeps popping in and out.
12 …and make your friends and family eat it too!!:
Many a times you don’t need to get into detailed usability studies or surveys to identify the usability issues on your mobile app. Just give the phone to a family or friend and closely watch them interact with your mobile site, you’ll learn a lot in those 10 to 15 minutes they spend on your mobile site. Trust me!!
Visit us at Neevtech.com to know more about our offerings.
facebook comments:
© 2013 Blog | Neev Technologies
Leave a Comment