Mobile Web Development Tutorial
Creating sites for the mobile web comes with a unique set of challenges. However, most of the principles for best practice are similar to those used for traditional web development. Internet users are browsing on a range of different devices and platforms, from desktop PCs to tablets and smart phones. Making sure a website is accessible to people using a range of devices is now an essential element in mobile web development.
Other People Are Reading
Instructions
-
-
1
Make sure mobile users access the mobile version of your site. Whether you have a separate site created specifically for mobile browsing, or simply want to insert code that will alter your main site for mobile use, you need to be sure that people will end up viewing the right content. There are many tools, both client and server side, that can help you to do this. You can insert code within your site pages to carry out a test to see if a mobile browser is being used. Moreover, there are facilities within many servers that will automatically send the correct content to visitors.
-
2
Simplify your site -- where possible -- for mobile use. There are many ways that you can tailor your site content to mobile visitors. Simplify and streamline the content of your site by reducing the amount of content that appears on a given page for mobile, as opposed to desktop browsing. Consider using collapsible sections and menus to make the content easy to scan and access. People using mobile devices typically do not want to spend long periods reading through site content, but want to get the information they need promptly.
-
-
3
Optimize the content of your site. If your website contains multimedia features, such as videos and Flash applications, try to reduce the size of these where possible -- both file size and dimensions. Avoid large files. It may be worth compromising a little on the quality of images -- if it means that users can download quickly enough over mobile networks. For desktop computers, many developers now work on the assumption that users will have a fast Internet connection, but this cannot be assumed for the mobile Web.
-
4
Make sure your site functions in the absence of technologies or applications that are not always present on mobile browsers. For example, Flash and JavaScript are often not available on mobile devices. Even when they are, they typically function in different ways. People interact differently with a mobile website. Desktop browsing generally involves the use of a mouse and keyboard, but mobile devices use touch-screens or limited keyboards and trackballs, or other components. Ensure that your site interaction will work with the hardware a mobile device uses.
-
5
Style your website for mobile use. Your site style should have a minimalist approach for mobile browsing, and should allow visitors to focus on the content. It's generally less appropriate to use highly-styled designs on mobile sites. These are slower to load and harder to scan through quickly. Try to put your site content at center stage, and use the styling to highlight it -- rather than obscure it.
-
1
Tips & Warnings
Use Internet or software emulators for mobile browsers, if you do not have access to the devices to test your website. Testing mobile websites is essential, and although the emulators are not always entirely accurate, they can be helpful.
References
Resources
- Photo Credit bussines woman with mobile phone in hand - focus on the mobile image by millann from Fotolia.com
