Mobile Site Development Tips & Tricks

[Seahorsepip Veteran]

I made this topic to highlight some tips and ideas for mobile website development.

Your free to post your own ideas/input below :D

Some tips/ideas/tricks I know:

1. CSS3 Media Queries

In most cases is making a custom page for mobile devices not needed, instead you can use Media Queries.

It's CSS3 that gives response to the width, height, etc of your device screen.

Here is a nice tutorial about this:

http://webdesignerwa...3-media-queries

More advanced stuff:

What if you got a

navigation

at the top and want to only to show the '

header

' and

'navigation'

on the mobile website homepage?

And you want to show a home button instead of the navigation at the other pages?

A example

*

:

http://seahorsepip.org

^{*Test it on a mobile device or on a modern webbrowser with a browser window of 480px or smaller.}

Adding and removing the elements on the pages will be quite some work on big sites,

so why not get it done automatically trough JS?

Here you go:

if(document.URL != ('http://' + document.domain + '/')) {
		$("html").addClass("mobile");  /*jQuery*/
}

[/CODE]

[/indent]

[indent=1]Above code adds the [i]'mobile'[/i] class to the [i]'html'[/i] element when you're not on the homepage, as example you're at [u][i]domain.com/something[/i][/u] instead of [u][i]domain.com[/i][/u].[/indent]

[indent=1]Now we can remove elements by using CSS:

[CODE]
html #container {
display: none;
}
.mobile #navigation {
display: none;
}
.mobile #container {
display: block;
}
.mobile #homebutton {
display: block;
}
[/CODE]

[/indent]

[indent=1]You can of course do a lot more as shown at the example above with Media Queries and this piece of JS, use your imagination![/indent]

[indent=1][i][b]2. Iphones[/b][/i][/indent]

[indent=1]These days a lot of people use a iphone, but what for resolution do these have?[/indent]

[indent=1]Most mobile phones are 320x480 and some are 480x640 and some are even 640x960![/indent]

[indent=1]The resolution for the iphone is '320x480' and for the iphone 4(s) '640x960'.[/indent]

[indent=1]So that would mean that we have to design our mobile sites for 640 pixel width screens too?[/indent]

[indent=1]Short answer: no[/indent]

[indent=1]As you have noticed is the iphone4 resolution exactly the 2 times higher then the iphone resolution.[/indent]

[indent=1]But the screen size(inch) is not 2 times bigger, which makes the pixels very small![/indent]

[indent=1]Those super sharp displays in iphone 4's are called [i]'retina'[/i] displays.[/indent]

[indent=1]As a result has apple made the design for the iphone 4 user interface different,[/indent]

[indent=1]as example: borders which were normally 1px width are now wider so they look still as 1px width on the iphone 4 device itself.[/indent]

[indent=1]We can do the same design idea as apple did without making a custom page for the iphone 4.[/indent]

[indent=1]To do this we're going to keep our mobile website just 480px width and add a meta tag to the html header which zooms the page in to 640px width.[/indent]

[indent=1]This will make everything 2 times bigger.[/indent]

[indent=2][i]Keep in mind that css styled elements are suggested for a smooth result at the 2 times zoom in,[/i][/indent]

[indent=2][i]if you use images and want them to stay sharp make sure to use a image 2 times bigger then the img tag width or at a div with a background-image an image 2 times bigger then the div and add 'background-size: div-width div-height;'[/i][/indent]

[indent=1]Now everything is 2 times bigger on the iphone 4 we also got bigger border width's which look smooth on the retina display![/indent]

[indent=1]Heres the meta tag:

[CODE]<meta name="viewport" content="width=device-width; initial-scale=1.0">[/CODE]

[/indent]

[indent=1]So after doing this we can just keep our 480px design and use it on the 640px iphone 4 :D[/indent]

[indent=1][i][b]3. Detect devices trough JS[/b][/i][/indent]

[indent=1]You want to know which device is viewing your webpage?[/indent]

[indent=1]In the following guide will be explained hwo you can see that, as example we will try to make the background of a [i]'#container'[/i] [i]red[/i] when the device is a android device.[/indent]

[indent=1]JS to use:[/indent]

[CODE]if(navigator.userAgent.match(/Android/i)){
$("html").addClass("android"); /*jQuery*/
}
else if(navigator.userAgent.match(/webOS/i)){
$("html").addClass("webos"); /*jQuery*/
}
else if(navigator.userAgent.match(/iPhone/i)){
$("html").addClass("iphone"); /*jQuery*/
}
else if(navigator.userAgent.match(/iPod/i)){
$("html").addClass("ipod"); /*jQuery*/
}
else if(navigator.userAgent.match(/iPad/i)){
$("html").addClass("ipad"); /*jQuery*/
}
else if(navigator.userAgent.match(/BlackBerry/i)){
$("html").addClass("blackberry"); /*jQuery*/
}[/CODE]

CSS for this example:

[CODE].android body #container {
background: red;
}[/CODE]

With above code we simply look up the userAgent string to see what device we've got and then

we add a class to the 'html' element so we can use it to style the page for a android device.

Above code can of course also be used in different ways, picking all the apple devices as example:

[CODE]if(navigator.userAgent.match(/(iPhone|iPad|iPod)/i)){
$("html").addClass("apple"); /*jQuery*/
}[/CODE]

[indent=1]_________________________________________________________________________________________________________________________[/indent]

[indent=1]If you got more suggestions feel free to add them below in the comments, I will try to write some more in next few days ;)[/indent]

Edited January 5, 2012 by Anaron

[whitebread]

Is there an easy way to detect if the user is using a mobile device? (eg using the user agent string, or whatever it is called)

[threetonesun]

Is there an easy way to detect if the user is using a mobile device? (eg using the user agent string, or whatever it is called)

Sure, but why. More important is how big their screen is, which CSS media queries handle just fine.

[whitebread]

Sure, but why. More important is how big their screen is, which CSS media queries handle just fine.

Good point. (Y)

[Seahorsepip Veteran]

Is there an easy way to detect if the user is using a mobile device? (eg using the user agent string, or whatever it is called)

JS:

if(navigator.userAgent.match(/Android/i)){
	$("html").addClass("android");  /*jQuery*/
}
else if(navigator.userAgent.match(/webOS/i)){
	$("html").addClass("webos");  /*jQuery*/
}
else if(navigator.userAgent.match(/iPhone/i)){
	$("html").addClass("iphone");  /*jQuery*/
}
else if(navigator.userAgent.match(/iPod/i)){
	$("html").addClass("ipod");  /*jQuery*/
}
else if(navigator.userAgent.match(/iPad/i)){
	$("html").addClass("ipad");  /*jQuery*/
}
else if(navigator.userAgent.match(/BlackBerry/i)){
	$("html").addClass("blackberry");  /*jQuery*/
}[/CODE]

CSS example for a android device:

[CODE]
.android body #container {
background: red;
}
[/CODE]

Keep in mind that you have to write the code as a function to let it work!

A example JS file showing how to call and make functions: http://seahorsepip.org/js/js.js

And I agree with above guys that media queries are enough BUT if you want your site to have a more apple look when you're on a iphone and more android look when you're on a android device you have to use more then just media queries ^^

I will post some more tricks in next few days ^^

P.S.

Some small handy thing to know: using modernizr isn't required in most cases when you have jQuery, take a look here: http://api.jquery.com/jQuery.support/

[Seahorsepip Veteran]

Above comments will be tip 3 then :p