Let's begin by stating the old hard fact that any website administrator and owner needs to acknowledge and live with -- your website needs to rock on all devices, not just mobiles, and that includes 50-inch in-home theater screens as well. That's assuming you want to appeal to the 100% of the web user audience of the world. Let's address a key proportion of the global population of web surfers, and explain the tips and tricks of optimizing your website for mobile devices. Mobile website creators like MobiRise Website Builder surface as a convenient and effective solution for creating awesome mobile friendly websites quickly. Here's a refresher on the two solutions for creating websites that load as well on mobile devices as they do on desktops.
Adaptive and responsive web designing -- the basics
Adaptive Designs - Simply put, this is an investment intensive approach, wherein you can involve cutting edge website developers to build code that understands the kind of device screen that the content will be showcased on, and creates web pages in sync with the same. Check out American Airlines' website, as an example. Not that you need to be as big as an airline to afford adaptive design websites, but you'll certainly need to loosen them purse strings a little if you choose to go this way. For others, responsive designs are a cool, affordable, and effective solution.
Responsive Designs - Leveraging the revolutionary CSS (Cascading Style Sheets) technology, an auto-adjusting website is created, which fine tunes itself based on the device screen that's responsive design for you. Check out The Boston Globe's website; it's a perfect example.
Now, let's tell you key strategies, tips, and tricks of creating mobile-ready websites.
Broad fonts, simple content design, and fat buttons
Simple page designs are the key to cracking the puzzle of enabling your websites for hassle free mobile viewing. Begin by checking your website through a mobile, or use a tool like Google GoMeter to emulate the mobile browsing experience. Think like a critique, and note down the pain points that mobile users would face accessing your website on their smartphones. Ensure the key buttons and menu options are bold and broad enough to give a trouble free experience to mobile surfers with fat fingers. Keep the fonts bold and graceful, and keep the key content of the landing page at the first screen that would greet mobile users.
The 'Thumb' Rule
It might sound quirky, but the one thumb rule of mobile website designing has a lot to do with the average human's thumb. The rule says -- ensure that your mobile website can be browsed by a user just by using the thumb of the hand he's using to hold the smartphone. The average human thumb measures anything between 15 to 20 mm in breadth, which translates to roughly 45 to 60 pixels on screen. The moment the user had to use the other hand to browse the web content, the experience falls back, and the convenience factor of the mobile-website is lost. Also, ensure that the surfer has no need to pinch on any area to be able to see, read and understand the content -- it should all be controlled via scrolling.
Use Icons Instead of Words, Wherever Possible
- Add a call button instead of long number strings
- String together social sharing icons to motivate users to 'tap' to share your content
- Use the magnifier icon instead of a 'search' text-indicated bar
The philosophy is clear, de-clutter and in the process, add aesthetic and functional appeal to your mobile-website.
Go Light
- Replace heavy JavaScript libraries such as jQuery Mobile with standard Javascript to make your mobile web content load faster
- Leverage media queries to automatically transform retina display ready heavy images from your website's desktop version to low res files when the website is loaded on a mobile device.
- Remove heavy files such as videos while transforming your desktop website into a mobile-ready version
Realize the context of mobile website browsing
In most cases, the most critical question that you can ask yourself before you go to that all important meeting with the mobile website developers' team is -- in what context will my mobile website be used? For instance, a baker's mobile website will be contextually more relevant to deliver information about store's operational timings, a quick call feature, and the 'recipes' page of the store blog. Add phone numbers, other contact info, and store address within a glance's distance on the landing page. So, the positioning and planning of content for the mobile version of the website needs to be done accordingly. Knowledge of context can drastically reduce the mobile website development efforts, and help achieve desired results much quicker.
Optimize forms for mobile
A key goal of mobile website is to appeal to a wider audience base, develop prospects, and convert them to customers. To that effect, remember to strip down your registration and feedback forms, ask for bare minimum information, and use technology to auto-populate information into forms (for instance, use GPS to detect user location, and add city, state, and pin code information). Geolocation can be leveraged to deliver more advantages, such as driving directions, nearest open store details, booking timings for events, and what not.
There you have it, the long and short of mobile website development, happy developing.