Mobile best practicesSmartphone adoption and using your mobile device for on-the-go search are both increasing at alarming rates. This means that your audience is now engaging with your brand in a whole new platform: Mobile web. This new platform cannot be ignored, or you’ll risk losing customers and sales.

When we say “Mobile Web” We’re referring a web where the user can access information from anywhere, regardless of the type of device.

The Mobile Web presents a challenge for both users and developers, since users tend to encounter problems when trying to access web sites from mobile devices that have not been optimized, and developers need to figure out how to create Web sites that work well in all types of devices and configurations.

The most efficient way to make sure a website is visible on different mobile devices is making a window that can be easily loaded into a screen reader and offer a clean, smaller version of your website.

When we are designing for mobile devices we must consider:

  • Screen size.
  • Memory limitations.
  • Touch and swipe vs. mouse and keyboard
  • Use of a wireless network and cost.
  • Use of native features on mobile devices.

Screen Size

This is the most visible element to consider when we are designing for mobile. The resolution is varied from 96 × 65 pixels to 800 × 480 depending on the device.

The design should be fluid to fit any resolution, therefore, it is recommended to use percentages instead of fixed dimensions.

Memory limitations

The memory of a mobile device is considerably lower than those they have in a normal computer. If our site is heavy it is likely that we overload the device and it is not going to work. This is why it’s critical to monitor the memory your use will use, because if a page takes too long to load or crashes, it is highly unlikely the user will visit the site again.

Touch and swipe vs. mouse and keyboard

On a mobile device, users interact with your site in a completely new way. Most users touch vs. clicking with a mouse. They also swipe from left to right or up and down, so your site needs to be equipped to handle these new browsing motions.

Note that one thing  users don’t like to do is scroll left or right to see the whole page (this goes back to screen size), make sure your page fits on their device and that they’re not scrolling to read the end of your sentence.

Use of a wireless network and cost

Mobile devices navigate using a wireless network, which offers mobility, but it is still unstable, insecure and expensive.

Operators usually offer Internet service with plans based on the amount of data transferred rather than the used time. So we must try to reduce the number of pages and steps to reach the information users want.

Use of the native features on mobile devices

We must take into account that there are great advantages of using mobile devices, that is why we must not only adapt the layout of our page we must use the virtues of the mobile devices such as geolocation, orientation sensitivity, availability of camera, anywhere access, etc.

Here are a few more mobile site development best practices:

  • URL. As short as possible.
  • Navigation bar. Offer at the top of the page, and only the necessary navigation.
  • The most important thing first. Give the user what they want. If you know that the user wants a lot of news media, that should be the first link of the website.
  • Do not automatically reload the page, unless clearly informs the user and provides a way to stop such action. The user may find a considerable bill by this oversight.
  • Weight limited. I would recommend no more than 10 KB
  • Scroll. Limiting the displacement of the page
  • Test. Experiment on emulators and real devices wherever possible.
  • Links.
    • Try to be minimal to external resources.
    • Provide access keys. It is prudent to label the links with number from 0 to 9 to take advantage of the phone keypad. We must minimize the time that the user has to type.
    • Try to balance the links on the web and what a user takes to get where he wants.
    • Identify clearly the link destination. If we are not sure if the device supports the destination format should be specified. For example, for a pdf or a non-mobile web.

What to avoid on your mobile site:

  • Pop-Up’s. No one likes them, especially on mobile
  • Do not offer more content than the requested by the user, on a small screen they don’t want to have to shift through mass amounts of content.
  • Minimize the code. A blank space must be loaded, and that can add to the user’s phone bill
  • Do not use tables unless you know the device supports them.
  • Use cache and not rely on Cookies.
  • Try to make the style sheets lightweight

 

You can check compliance of these rules on your page with the tool that provides W3C Mobile Web Best Practices Checker

The W3C, in order to make access to the web from a mobile device as simple and comfortable as it is from the desktop, has launched the "Mobile Web Best Practices" which seeks to resolve interoperability issues and usability that currently hinder access to the Web from mobile devices and make possible one of the main objectives of the organization is to achieve a unique Web.

The recommendations refer to delivered content and not the processes by which it is created, or the devices or user agents to which it is delivered.

For more information follow the link W3C Mobile Web Best Practices

Conclusions

Having a mobile-friendly website is more important than ever. Also note that if you have a website visible in any type of phone, you have to create a new marketing channel to connect with current customers and potential customers. The more ways you have to connect with your target market the better.

Many people today prefer to receive updates and information via their mobile phones than to get them through email or on their computers. Many people also enjoy last minute contests via SMS or social media on their phones. A great opportunity has opened to establish a closer connection than ever with the use of technology today.