(617) 433-7483 Servicing Boston & Surrounding Areas

Basic Rules of Designing Mobile Version of Websites

June 17, 2013

Basic Rules of Designing Mobile Version of Websites

Posted by with - in Web Design

Let’s look at some things that designers must take into account while working on the mobile version of a website, i.e. version of the site that users download via mobile phone, iPhone and other mobile devices.


Semantic markup
A solid foundation of a good mobile web site is in a clear semantic markup. There are some things you can design on a desktop version of a site, but which can create problems when using a mobile device. Correct implementation of coding in accordance to W3C standards will help to ensure the correct display of the site in any browser, and this in turn will generate the most favorable impression for site visitors.

Content and css-design
In addition to semantically correct layout, you must also have good content, which is independent of the design, i.e. elements of website design created with the help of graphics and css. Visitors to the mobile site, unlike desktop users, almost certainly, will be viewing pages with disabled graphics and CSS. The most important thing for these visitors is to have access to content and links. Site with a clear layout, where the text is structured using html-tags and is easy to read without css, has a good chance of success.

Alt-tags for images
Certainly, not all users will want to view pictures, so it is important to have Alt-tags. Of course, these elements must be used anyway, but it’s especially important for mobile versions of sites.

Given that mobile browsers do not always display text formatted using css adequately, it is necessary to pay more attention to the title. Mobile browsers rarely display the text the way you want to, but tags h1, h2, h3, etc. help to structure the text on the page for the convenience of users.

Floating blocks
Even if the mobile browser correctly displays the page containing blocks of content to flow around, it is unlikely it will look good on the small screen. As a rule, the best solution in such cases is the rejection of the “floating” of the text in favor of a conventional, fixed content.

Most of the websites have the main menu on the top of the page. It works on mobile versions of sites, but the number of tabs there is usually reduced. Keep only the most necessary and possible links that provide users with easy access to the rest of the navigation items.

Color contrast
Screens of mobile phones can not provide the same image quality as that of desktop monitors and laptops, so make sure that the text and background colors have enough contrast.

Comments are closed.