Be Responsive. Use a responsive technology framework. There are several of these available.
These frameworks are basically simple ways to lay out elements in a grid and then shift that grid based on different screen sizes, so that elements on a large monitor are spaced just as well as they would be on an iPad or Smartphone. 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 consolidates your website so you do not need a separate mobile URL, it has SEO benefits, and it’s also much easier to manage.
Think with your thumb (or index finger). Make sure your site is completely navigable with one thumb and requires no pinching to use.
This is one of the most important tips for any mobile site as you want users to be able to navigate your site with their ‘phone 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.
Most users visiting a mobile website will be using a touchscreen device, so ensure that the buttons and menu navigation are big enough even for fat fingers. 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.
Similarly, 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. Our ‘rule of thumb’ (pun intended) is to give buttons or tap elements at least 45 pixels of space for selection areas. This allows the targets on screen to be easily selectable and removes many of the accidental taps from the user experience.
Too many bells and whistles (i.e., graphics, copy, and video) can hamper the site’s ability to load quickly — and distract from your message. If you plan on using images, try and serve images that are smaller in byte size as this will reduce the amount of time that users spend waiting for the page to load.
Keep content short and sweet. People sometimes fall in love with their website content and it makes the mobile site too cluttered, figure out how to tell your story with fewer words.
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 copy to keep the reader’s attention.
Remember, an icon is worth a thousand (or, okay, a dozen) 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.
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.”
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.
Consider video, but add it wisely. Video is an absolute must-have for any mobile site. That’s because consumers using mobile devices are three times as likely to watch videos as laptop/desktop computer users.
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 (doesn’t consume valuable bandwidth and processing resources) so that you can significantly improve page loading time and provide a better overall experience.
Make sure forms are designed for mobile. Request the minimum amount of information that you need in order to contact a lead.
Consider 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.
Test to ensure your content can be properly viewed 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.
Forget about designing your website for mobile devices. Instead, design your website for all devices, from tiny phones to huge living room flat-screens.
Nearly every business needs to adapt to reach consumers effectively on any screen. There are two basic strategies for building websites that display well on all devices: responsive and adaptive. And responsive sites are the best bet for most small businesses.
At a minimum, adjust your existing site for today’s web users. No business can afford to ignore the fact that more than a billion people primarily access the web from mobile devices. Even if you’re not ready to rebuild your site for optimal display on all devices, at least take one of the following two steps:
Simplify your site design. Pull up your website on a smartphone (or view it on the Google GoMoMeter) and you’ll probably see the need for design changes. To display well on mobile, we recommend simpler page designs, large font sizes, critical information placed “above the fold,” and big, touchable buttons that are fat-finger-proof.
Create a mobile version of your site. As an alternative to editing your website, you can create a parallel version, using mobile-site-design services, many of which are free or low cost. If your mobile site has a second URL, search engines may or may not find it. Both Bing and Google advocate a one-URL approach for findability and search engine optimization. Still, if you love your site or can’t afford to rebuild it, creating a mobile site that links to your main site isn’t the worst strategy.
Adaptive design is the high end of website design. It’s used by big companies that invest — heavily — to reach the largest possible online audience. Responsive design is a more affordable solution that uses CSS (Cascading Style Sheets) technology to create a single version of a website that auto-adjusts to display properly on all devices except the oldest cellphones. A responsive site allows you to reach the most active Web audience.
As you prepare to make long-delayed investments in your business, put website redesign high on your list so you’ll be ready to reach consumers via their phones, tablets, PCs, TVs or, soon, refrigerator doors and more.
Finally, once you get the technology right, turn your attention to creating great website content that especially on mobile devices, people access your website for three reasons: to save time, to connect with others and to waste time. So give them quick and easy access, put your contact information front and center, gives them links to maps and directions, and then add video or other amusements to keep them on your site for as long as they want to stay.