Mobile sites! Any advice or suggestions for building one?

[Martin_S]

Hello Mozland,

I'm looking to have a mobile site built. We have a fair amount of traffic coming from smart phones, tablets etc and want to capture this traffic better.

Do you have any advice on how to have it built properly, if/how it can be optimised, what good features to include, or anything else you think might be of help?

Many thanks

Martin

[AlanMosley]

I have made a test site, i used CSS, where you can have one set of css for screens less that a certain width, and 1 for wider pages. you will also need the metat tag below that will set your page to the correct width for each phone.

So when a mobile comes to the page, its sets a width lets say 320px, then your css will take over (note: set to <850)

you can then set a layout for the small screen, this way you can have 2 layouts in the sdame page, and keep the rank, rather then having one page for browsers and one for mobiles

if you want to see it work, try this link, it is a simple example, and i have not tested it on a phone, (I am one of the few poeple in the world that does not have a mobile phone) http://news.thatsit.net.au/

.myclass{ for the main page }

@media only screen and (max-width: 850px)
{

.myClass{ for the mobile page}

}

[Martin_S]

Thanks Alan,

I will pass this on to the developers (who don't seem to have built a .mobi site before).

[AlanMosley]

i dont think too many people have, i made that test for when someone asks

[kchandler]

Alan is spot on with the CSS3 reference to media selectors! Try to search around on "responsive design" there are some great articles on how to have your website respond to the user without having to create multiple site for each experience. This approach wil also benefit you since you won't have to have your mobile site on a different domain or sub-domain and you will have no worries with duplicate content.

[Martin_S]

Ok, so I'm not tech savy, and as I mentioned, I don't think my developers know about this either.

So, if I want a .mobi site built, this'll be completely separate to the .co.uk full site, right? How do the redirects work to a .mobi site when viewed on a smart phone or tablet, how is it that this'll be the site that's returned in searches to be viewed in those platforms as opposed to the full site?

[kchandler]

Using media selectors you do not need to have a separate mobile site on a different domain, nor do you have to use a redirect. Instead it resizes your corporate site based on the users screen resolution.

For example, here is my portfolio site (not anywhere close to being done). However, it uses HTML5 and CSS3 to resize based on the size of the browser screen. So try slowly resizing your browser when viewing it and you will see what i am talking about.

The SEO benefits of this are:

• No duplicate content since it uses the same page
• You link splitting since there are not multiple domains or subdomains of content

So instead of creating a new mobile site, you would make updates to your current corporate site.

edit: It is also important to mention that only current browsers can render CSS3 so anything before IE9 or early versions of Chrome or Firefox will simply display the website in its full version. Any newer browsers (especially smartphones) will render CSS3 hence giving the graceful degradation to the users!