Mobile browsers are growing rapidly and a lot of webmasters start to wonder how optimize their website for these new users. First there are some general rules of thumb which we do have to take into account for mobile users, and then there are some decisions to be made how to allow access to mobile users.
1. Placing the pages in your domain
A point of special consideration, before you start designing your website, is how you would like to allow mobile users to access your page. There are several options, ranging from automatic generation of mobile pages under the same URL's to having dedicated mobile pages to even having special (sub) domains for mobile devices. The way you want to deal with the pages in your domain greatly impacts the way you design the mobile web pages.
Our Approach:
Adding a specific sub domain (mobile is most commonly used, resulting in mobile.yourcompany.tld) to your site is one of the best way of opening your website for mobile users. This could be very useful if you would deliver other content to mobile users than you would for desktop users. One could think of adapting more to the needs of mobile users. Mobile users generally have a need for context specific information (they have to act now), while desktop users are in need for more random information.
We need to keep in mind that a general redirection to the PDA formatted site upon the request of a specific URL (like redirecting all incoming mobile requests to our general mobile start page, mobile.yourcompany.tld) might be extremely annoying. These users will be lost on the website, not knowing where to start. As a rule of thumb, we need to make sure that mobile users ending up on a random URL still should get the information they are looking for.
2. Content
We need to remind that the context the user is in is more demanding on the user. Few people browse websites while sitting comfortably at home. Most people are in transit or busy with other activities while browsing your site.
General things to take in account are:
· Remove all categories of content that is not important for people that are mobile. This means that all data that is complex or not needed when they are solving a pressing problem should not be present on the site. Some examples of what people don't expect and what they do expect on a mobile website:
o People don't want complete technical details of the product on the mobile website (including technical drawings), most will want to know its basic features and current suggested retail price (and the amount you have in stock).
o People don't want to know that you are a great equal opportunity employer; they probably just want to know what products you make or sell.
o People don't want to know what the price of a year of unlimited travel on railways is; they do want to know when the next train to Amsterdam will leave.
o People don't want to know about your mission statement as an airport, they just want to know if their flight is delayed.
o Make pieces of text short and to the point. We need to direct/advise them to use the desktop version if they need more information.
We need NOT to add big advertisements on the screen. The screen fills quite quickly and advertisements tend to delay loading of websites significantly. In fact, considering the need for speedy information, one should really consider running without advertisement.
3. Mobile Content Optimization
Mobile content is optimized similarly to normal web content except that we must keep in mind that they usually have significantly less content to optimize so every word must count.
Here are top tips specifically for optimizing mobile content that we will follow:
· Need to make sure the file size of the page is as low as possible to minimize load times.
· Need to order the navigation keeping in mind what links visitors are most likely to want to click first.
· JavaScript, Frames, Flash, and pop-ups are examples of technologies not supported by most mobile devices with the exception of most Smartphone.
· We need to choose to optimize only keywords comprised of 2 to 3 words because mobile searchers tend not to type in more than 2 or 3 word searches.
· Title tags, description Meta tags, heading tags and filenames should be carefully crafted with target keywords to maximize the little optimizable content available.
· Need to ensure that all phone numbers within your mobile content are formatted to be clickable; this will allow visitors to call you simply by clicking on a link.
4. General page design rules
The mobile devices have a different screen layout than desktops. Because the screen size is smaller, we have to work differently with the available scrensize: whitespace management is vital in all this.
Do's of mobile webpage's design:
· Need to design pages for a screen size of 320 by 240 pixels.
· Need to keep in mind that the user can not focus on very detailed areas of the design. One of the most important considerations is that user input can be garbled for many reasons and clicking on small links is hard when doing it running for a connecting train or plane.
· Need to add alt-tags for pictures, users regularly block downloading images in their web browsers just to reduce bandwidth consumption.
Don'ts of mobile webpage's design:
· We need to take care of the restricted uses of scripting languages, flash or other complex objects.
· Limited use of frames or other dividers, they take a lot of space and do not add much value; many frames are shown only for 20%, causing a lot of sliders as well.
· Need not to use big pictures, besides the waste of screen space, they also use a lot of bandwidth costing a lot of time and money
· Need not to write lengthy texts, since people on the run generally have a hard time reading them
5. Technical implementation
Once decided what to tell you mobile users, the next step to decide is how to bring the pages to them. Of course, we can create specific pages for the mobile users, but that has the huge disadvantage that people have to notice that they have to click that specific link.
· Meta-tags: On mobile optimized web pages, we need to give them a mobile meta-tag: MOBILEOPTIMIZED, this will signal mobile web browsers that the content does not have to be shrunk down (pictures will not be doubled for example).
· Stripping down a page using CSS: This is the most subtle way of modifying a website for mobile use, if it is feasible. It will NOT reduce the bandwidth load and loading speed, but it will optimize the viewing experience on a small device (once it finally is loaded...).
· Mobile aware generation of web pages: If the web pages include very server-intensive parts, generate a lot of data that is not included on a mobile device, or have a completely modified page to send then we should consider that the server-side is aware that it is generating content for a mobile device.
o Client-side redirection
o Server-side redirection/Browser detection
No comments:
Post a Comment