In the last few years mobile design has exploded, but knowing what to do and where to start can be tricky. Mobile design is not just a question of a mobile website or an app – there are a range of options in between and aspects to take into account.
Following are a few tips to help you get started:
1. Responsive designs :
Responsive is a more unified approach to Web development that allows you to create a similar experience for the user no matter how they are accessing the site (desktop, tablet or Smartphone).
In addition to being a better user experience across devices, it combines your website so you do not need a separate mobile URL, it has SEO benefits, and it’s also much easier to manage.
People increasingly click the ‘desktop version’ link, particularly when served with a very limited mobile website, or a site that is substantially different structurally or visually to what they are used to. So try to keep the core content the same and keep in mind how the user will move from one device to another and what that should mean for their experience.
2. Simple design, short and sweet content :
A clean design can go a long way. Remember that you only have a few seconds to convey .This is true for any website design, but is particularly important when you are designing for smaller devices. Too many graphics, video can hamper the site’s ability to load quickly and distract from your message. If you plan on using images, try and use images that are smaller in byte size as this will reduce the amount of time that users spend waiting for the page to load.
The screen on a Smartphone is much smaller than that on a desktop computer, so try to minimize the amount of text on your mobile website. Mobile users are interested in scrolling quickly so include only essential data to keep the reader’s attention.
3. Design for fingers :
Make sure your site is completely navigable with one thumb and requires no pinching to use.
Users should be able to navigate your site with just ‘one hand’ without the use of a second hand. Additionally if you have to pinch to zoom, your content is probably too small or not perfectly optimized for that browsing device.
Too often a mobile friendly website will simply resize the screen using CSS (media queries) and not take into account that fingers might cause misplaced clicks. When designing for mobile interfaces, you should make your targets large enough to be easily selectable. The average index finger for most adults is 15 to 20 mm, which translates to 45 to 57 pixels, give buttons or tap elements at least 45 pixels of space for selection areas.
The bigger the buttons are on your webpage, the better for touch-capable fingertips.
4. Icons instead of words :
To keep your site from looking cluttered, use conventional mobile [icons], rather than words for tap to call, connect socially or find the menu. Using these symbols helps viewers know that the site is optimized for mobile.
5. Optimized image and video :
The mobile Web is considerably slower. So be sure to strip down the heavy media files that exist on your desktop site, such as videos. Use media queries to change your desktop site’s retina-ready images into lower res versions.
Mobile device resolutions and aspect ratios are very fragmented also consider that mobile devices operating under a 3G network are still considerably lagging behind in download speeds and that many mobile users out there pay for bandwidth use. Factoring all of this in means that it is crucial to resize, crop and optimize images to best fit the specific device resolution and aspect ratio. This can save a huge amount of bandwidth, dramatically reducing mobile Web pages loading times while greatly improving visitors’ browsing experience.
Video is an absolute must-have for any mobile site. That said, use a video technology that provides a flawless mobile experience. Your mobile video player should run HTML5 to ensure that it can play on most mobile devices. In addition, use a video player that’s lightweight so that you can significantly improve page loading time and provide a better overall experience.
6. Minimize text input :
Minimize the number and size of form fields as much as possible, and leverage the technology built into mobile devices to optimize usability. For example, GPS is usually accessible. So don’t ask someone to enter their city, state and ZIP if you can pre populate it instead.
To reduce user frustration, aim to minimize the amount of text input you require in web forms, and where it’s really necessary make sure that you consider the practicalities.
7. Don’t go overboard with Java :
Avoid excessive JavaScript in your mobile websites where possible, because it runs differently across different browsers and devices. Even different models of the same phone can often behave quite differently when it comes to JavaScript. This isn’t to say that you shouldn’t use JavaScript, but rather be clever about it and keep in mind that it could affect the performance of your mobile-friendly site.
8. Make it easy to find your phone number, location and contact info :
Keep in mind the context in which your site will be used on mobile. Often, users are looking for store hours, a contact or booking number or perhaps the business’s nearest location. The easier it is for users to access and take action on this information, the better the user’s experience.
9. Use geolocation :
Take advantage of mobile capabilities such as geolocation. Businesses can use geolocation to give directions, allow visitors to check in-store availability at the nearest store location, offer targeted promotions, offer online shoppers prices in their local currency and connect to social communities.
10. Test on different devices, platforms and operating systems :
Remember to test the mobile user experience by operating system to improve overall site experience with usability testing. There are so many different platforms out there that it’s practically impossible to test on every possible combination of Smartphone and operating system but it is important to test across a cross-section of devices, however, and you should aim to make this an iterative, ongoing process.