Although responsive template has many advantages, you do not always have the opportunity to use it. Especially if your client has an old version of Joomla 1.5 that does not have this type of templates.
Mobile Internet is continuing to grow very quickly. An estimated 44% of the U.S. internet population, ages 8-64, owns a smartphone (estimated 107.0 million consumers), up from 31% (73.2 million consumers) in 2011. 57% of the U.S. internet population, ages 8-64, are expected to own a smartphone by early 2013 (estimated 142.3 million consumers) /source: Online Publishing Associates/. Nearly 70 percent of smartphone owners use them when shopping and search for information about the company, according to Google. Because not everything shown on desktop computer can fit reasonably onto a mobile web page, where space is short and every pixel counts. It’s important that your mobile site should be optimized for smartphones.
Here are some tips for creating mobile page
- Use Jtouch – Mobile Controller or Mobile Joomla extension.
- A clear and simple site structure can do wonders.
- Preparation of aesthetic and useful mobile version of the website based on Joomla! it will take you a few or even several hours.
- Mobile websites should be very focused. You should reduce content of desktop version of web site and include the most important content or features. Yes, I know, your client will want to have a mobile website almost the same content as the standard version. But remeber all low priority content that should be removed. Perhaps you should even add new ones – truncated versions of articles. Irrelevant or uninteresting content will scare away visitors and result in a high bounce rate.
- Single column layouts work best.
- Use Joomla Responsive Forms Components which using CSS3 that adapts the form layout to the viewing environment. The result is that users can properly see and fill the form in a broad range of devices and browsers without the need of resizing or zooming in. Since the mobile forms are implemented utilizing jQuery Mobile, you can use their theme roller to create your own styles.
- Add ‘Back’ button on pages other than the homepage. This keeps the page design simple at the expense of any ability to navigate directly to another section of the mobile website.
- While mobile platforms place many limitations on design and content, they also open up new opportunities that traditional Web sites cannot provide. For example, there is better integration with phone functions such as direct calling. If you want to make the phone number “clickable” so that a mobile web browser can click and dial the number, just add: href=”tel:1-801-000-000″. On a mobile phone, clicking on such a link uses the phone.
- Add ‘Deskotop version’ link to footer.
- Less means better. The loading time of your website can be crucial to your bounce rate. Optimise your code, content and media to reduce the loading time to a minimum.
- Test your mobile site on many smartphones and mobile browsers on how many you can.