800 706-7244
0203 355-8744
Mobile web design essentials
Most Mobile websites are built after the main website-for desktop and computer monitors- has been developed. As a result they are usually set up by optimizing the website for desktops to make it viewable for mobile devices.The term mobile devices now refers to more than just web enabled mobile phones and includes iPhones, Smartphones, cell phones, PDAs and tablets. The rate of use of mobile websites is set to grow as fast as mobile devices become available and cheap data services become common. The factors which make mobile web design necessary include the low bandwidth available to mobile devices, a significantly reduced screen size as compared with the monitors used by desktops, and the recurring issue of cross-platform compatibility.
Here is a basic guideline of how to develop mobile websites that can be used by developers to achieve fast loading and cross-platform compatible websites.
1. Mobile Style sheets
When adding mobile support to a website, style sheets for mobile should be added to adjust the CSS to cater for mobile devices. Using server-side languages such as PHP, the website can detect the mobile device attempting access and provides appropriate style sheets for it.The style sheets can also be provided on the client side or implemented to be initiated by the user. The ultimate goal of mobile style sheets is to alter the web page to display what you most want the visitor to see perfectly on their device.
2. Changes in the Mobile Style Sheets
When designing the layout, it is prudent to reduce multi-column layouts to single columns. The page should have little or no clutter, so the designer should set the property ‘display:none’ for all less important items. This also conserves bandwidth.
The bandwidth should be reduced to cater for slower mobile networks. Images used as buttons should be replaced with CSS. Readability of the fonts used on the website should be improved by increasing their size or using em instead of pt or px for font size. Vertical scrolling preferred over horizontal navigation. Also, mouse-over states should be deactivated for mobile devices.
3. Other Special Features for Mobile
Most handheld devices also function as a phone and so the phone numbers should be made click-able. Another challenge for mobile devices is the challenge of typing. The designer should make it easy for users by implementing HTML 5 input types that allow devices to display a contextual keyboard. The HTML 5 input types include in-browser validation useful when browsing.
4. Viewport Dimensions and Orientation
When mobile devices display (render) a page, they scale the page content to fit their visible area (view port). Using meta tags, the designer can ensure that the viewport is altered. Some styles also alter the screen based on orientation. To detect orientation media queries are used. However, these are not adopted by all devices.
When designing for iPhones, some content such as flash may not display. To work around these challenges, the designer can use the potent capabilities of HTML5 and Javascript.
