Last week I took the chance to reveal some interesting figures about the importance to have a mobile presence that have emerged during a Google presentation I have the fortune to join.
It is evident that more and more people are utilizing mobile devices to access the web on a daily basis. Seriously, the numbers are impressive, and you can’t miss the opportunity.As a matter of fact, those people are probably already finding your site but when they are taken to a desktop version of your site, and with a good chance they might bounce off in a couple of seconds (Have a look at your analytics package to determine what chunk of your web traffic hails from a mobile device).
On top of this, a mobile version of your site is incredibly important for the local search and for engaging with your audience.
So, if I have been good enough to convince yourself and your company to invest part of your budget into mobile, I hope the very basic guidelines below it could be useful enough for supporting your project too.
So what should I consider when designing a mobile site? Below you can find an actionable list of things to start.
Very limited screen size
This affects both the visualization on the Search Engine listing as well as when the web site is displayed.
As a result of this both meta tag description and meta tag title need to be revisited and keep short than usual. The suggestion is about 35 characters for the Title and 70 for meta tag description.
Internal / external navigation links
As devices size are limited, don’t overload the page with many hyperlinks that are too close each other, unless you don’t want to frustrate your user while selecting them.
Consider using one or two keywords at maximum in the anchor text attribute.
Inbound links
As usual links are important for a web site, but because mobile sites are not so competitive as the standard web sites, with a few links your web site should gain the required visibility to start acquiring quality score and link-juice.
Location
If web site is going to present product, service or something where the location is a component, be sure to consider the location as critical information and to render only the information regarding the specific location requested.
This will keep the page at the minimum, more compelling and responsive to the user demand.
Shrink the size
A standard web page size is normally around 150-200Kb (image included). A mobile web page should be no more than 20Kb. I don’t have a personal experience on this, but reading through many forums it looks like the page size play as an optimisation factor and some mobile web site has been “penalized” due to their web page size.
Create a mobile sitemap
Providing a sitemap for a website assure a fast and more accurate crawling on a web site. A mobile web site doesn’t differ too much from a web site, but the sitemap does.
This piece of code comes directly from Google Mobile sitemap.
<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0"><url><loc>http://mobile.example.com/article100.html</loc><mobile></mobile></url></urlset>As you can see the structure is similar to a standard sitemap, and XML language is the same. However the schemas is different and a node must be included at the end of the sitemap. If you miss this, your mobile sitemap will be ignored.
URL. More than ever, short and easy to understand URLs are essential on the mobile web site version. Users do require catching what a web site is talking about in a snap.
Call-to-Action
Most of the Mobile web sites fail to delivery their marketing objective because they don’t realize their marketing message is hidden below the fold. Consider a total different layout on the mobile site.
Graphics
Do not use images that cannot be rendered by the device and the limit provided by the GSM or 3G network. Images should be kept around 5K at maximum, therefore avoid high-resolution images that could load indefinitely. Also don’t use images for creating empty spaces.
When including an image into the HTML code, specify always the image size so to avoid re-flowing and distortions of the page when the browser has finally downloaded the image.
Best of all, reduce the number of the images at the minimum.
Use XHTML Mobile 1.0
It is likely that WML will be phased out in the near future, therefore adopting the new XHTML specific will let your web site last in a long period.
Of course, consider which is the audience that you are targeting, because many users may probably use old devices where WML is the only language supported.
Validate your code and get an error free site
Many web traditional developers do not consider validating the web site code as a best practice.
The quality of the search result is constantly increasing the number of factors that are considered during the web site assessment.
I feel offering an invalid code can create trouble to the search engines while digesting and invalid code.
CSS and style sheet
With the exception of the images, Avoiding pixel and absolute measures. In this way the browser can adapt the content to fit the display. Create a separate style sheet specific for the mobile platform.
Develop with accessibility in mind
Tables, iFrame, Flash and JavaScript are partially or not supported at all, so avoid using them.
Separate subdomain instead mixed optimization
As a result of the beforehand mentioned general guideline, the best solution to adopt is operating using a separate subdomain rather than trying to mix standard SEO and mobile SEO on the same web site. This kind of approach is not worth anymore and will fall in problem during the long-term.