A Guideline for Designing Mobile Phone Compatible Website

With the advent of smartphones, more people now access the internet on their handheld devices than they did 5 years ago. Now, mobile phone screen display sizes vary a lot; if one sports a 4 inch screen, the other sports only a 1.8 inch screen. Therefore, making a website designthat is viewable in these devices can be difficult, although not impossible. What webmasters need is to optimize their site for mobile users.

The lack of intelligent styling leads to horrible horizontal and vertical scrolling, image quality, jumbled text, etc, and spoils the whole web surfing experience. Remember, mobile screen space is less and resolution can be extremely poor. Other drawbacks are stylus input, slow processor and limited memory. Make your design lightweight therefore. Here are some suggestions for creating a mobile-friendly web design.

• To design a mobile- friendly website, design one column layouts and avoid floats. Use effective semantic markup and CSS to optimize the HTML. Don’t insert too many images in the site and avoid image based navigation process. Dynamic effects certainly look good on desktops but they are a nightmare for handheld devices, so avoid them as well.
• Some smartphones have a large screen but compared to desktop PC, the screen is vertically wide. Horizontal space in smartphones is always less no matter how large the screen is. You cannot fit more than one column text on display. You also need to make the column as wide as possible to offer better readability.

To keep the pages compact, avoid pixels and use ems. Larger pixels scale very badly. You should also reduce margins, padding, and border widths to go well with the small screens. When it comes to text font size, use small type for both body and headline. The ideal headline font size should not be more than double of the text size.

• Making the layout linear is very important for easy navigation and scrolling. You should minimize the navigation and ornamentation at the top of the page. Use only logo and one or two navigational elements, such as a short navigation list, breadcrumbs, or a search input. If you want to include advertisements on the website, put them after the main text, not as a top banner.

o To keep content enclosed in a single column, you need to make sure wide elements fit the small screen. Assign a max-width and wrap the text very tightly to make the text small screen compatible. You can allocate line-wrapping by adding the following CSS rule to your style sheet:

pre { white-space: -pre-wrap;

    /* Opera CSS Extension */

      white-space: pre-wrap;

    /* CSS 2.1 Addition */}

• Dynamic elements look great on a large desktop window, but if you implement them for the mobile, the effects can be horrible. Don’t use pop up window as it makes navigation process difficult.
• Mobile phone data download charges are very high. If you create an image heavy website, mobile phone users will avoid it for such websites not only increase data charges, but several images make the sites slow.

When you insert any image in the website, keep the widthand height to a minimum Crop, scale down or resize the images for handheld devices. You can also command the browser to use an images alt tag instead of loading the image.

 

• Use resourceful, semantic markup and leave the presentation to CSS. CSS is a powerful and compact tool that does not mess the document with unnecessary presentational data. Don’t use too many class, <div> and <span>, HTML tags and subclass.
• You should design your website keeping in mind that more people are now using smartphones and tablets. The number of handheld users will grow at an exponential rate in the near future.
• To fit any webpage in a mobile phone’s screen, Opera has made an annotated ALA style sheet for the “handheld” media type. Try it out!

 

This is Guest Post by Carol Brown. WebGuru India has been a pioneer in the field of website design and seo services since 2005. We have written and published numerous articles on web design, graphic design, web development and SEO and internet marketing.

 

Tagged as: mobile website development, website development