How to Make Your Website Mobile Friendly
Creating a mobile-friendly website has become crucial for any website desiring a presence on the mobile Web. Given the increased amount of individuals accessing websites from Internet-enabled mobile devices, websites inaccessible from mobile devices will lose a considerable portion of visitors. Browser compatibility remains the biggest challenge in transforming a website into a lite mobile version. Website owners may take a few standard steps, however, to optimize their website for the mobile Web and make their website mobile friendly.
Other People Are Reading
Instructions
-
-
1
Create a separate style sheet for mobile devices by declaring the handheld option for the media attribute when linking the mobile style sheet to HTML pages. Adding an alternate style sheet for mobile devices overrules all styles from the screen style sheet, the style sheet rendered by regular computers. Using a separate style sheet for mobile browsers allows website owners to style the mobile version of their website differently to accommodate varying mobile browsers and platforms.
-
2
Resize images for small screen sizes with image editing software. Smaller mobile screens typically have a harder time rendering larger images and resizing them on the fly. Additionally, viewing larger images on small mobile devices consumes load time and bandwidth. Reduce load times and conserve bandwidth by compressing image sizes.
-
-
3
Present all content in a linear, one-column format. Remove all columns, floats and frames from mobile style sheets. These elements tend to cause viewing problems for mobile devices. Additionally, avoid using pixels when declaring height and width measurements in CSS. Pixels create rigid browser sizes that may appear too large for some mobile screens, causing users to scroll horizontally. Instead, make use of percentage and em units of measure to create fluid browser sizes, suitable for multiple screen sizes.
-
4
Provide clear and concise site navigation. Mobile Internet browsing produces high bounce rates because mobile readers want to get to desired content in as few clicks as possible. Remove links to sections of the website lower in priority for mobile viewers. Alternatively, move navigation menus to the bottom of the page to serve more important elements such as content first, says Patrick Altoft at Blogstorm.
-
5
Test the website's mobile friendliness. In the same fashion regular websites face testing, mobile versions of websites require testing and validation. Test the website's mobile version on popular smartphones, such as the BlackBerry and iPhone, and more basic mobile devices. Check a website's overall mobile friendliness by validating with W3C's MobileOK Checker (see Resources). Ensuring a website conforms to mobile Web standards secures the site's compatibility across multiple mobile devices.
-
1
Tips & Warnings
Eliminate any needless images or features that may slow down a website's mobile loading process.
If mobile devices are not available for testing, the Opera browser allows users to view websites in a small screen to gauge how a mobile device would render the page.
References
Resources
- Photo Credit cellphone image by Philip Date from Fotolia.com
