When coming up with a new mobile site, you will go through the same planning process that you did for its desktop version. Choosing the right color scheme would be one of these steps, and a very important one at that.

Deciding on the right colors to use for your mobile website is very important to make sure that your site displays well on any mobile device, and that it will be easy to read by users who are on the go.

1. Use the colors you have for your desktop website.
2. Remember that mobile screens are not as powerful as your desktop monitor.
3. Avoid gradients.

Be Careful with Gradients and Background Images

If you use a lot of gradients in your designs (as I do), you need to be even more careful. Gradients are cool, but really only on a desktop. On a mobile, a user can see gradients even when they are not present – he or she just needs to bend the device a little, and voila, here is a gradient that you didn’t include in your design. Of course, this doesn’t mean you must kick gradients completely out of your mobile repertoire but if you minimize their use, this won’t be a mistake.

Backgrounds pose a similar problem. The same background might be perfectly legible on a desktop but on a mobile it might be impossible to read the text. It is your task to make sure this doesn’t happen.

CSS provides an easy way to target browsers on different types of devices, or different uses. For example, the design you produce for a normal desktop browser may not be suitable for a handheld device, or a printer. These are known as media types. There are several media types, and most browsers will generally concentrate on just one or two, depending on what they are designed to be used for. Opera is by far the most versatile, and supports six different media types.

CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.

Max Width
——————————————————————————-

@media screen and (max-width: 600px) {
.class {
background: #ddd;
}
}

Put the following line of code in between the tag. If you want to link to a separate stylesheet.

Min Width
——————————————————————————-

@media screen and (min-width: 900px) {
.class {
background: #999;
}
}

Multiple Media Queries
——————————————————————————-
Combining multiple media queries.
The below code will apply if the viewing area is between 600px and 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #444;
}
}

Device Width
——————————————————————————-
The below code will apply if the max-device-width is 480px (eg. iPhone display).
Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.

@media screen and (max-device-width: 480px) {
.class {
background: #f00;
}
}

For iPhone 4
——————————————————————————-
The stylesheet is for iPhone 4 specificly

For iPad
——————————————————————————-
You can also use media query to detect orientation on the iPad (portrait or landscapse)

It is possible to create multiple columns for laying out text With CSS3 – like in newspapers! with single html tags

Below are multiple column properties:

» column-count
» column-gap
» column-rule

Browser Support

Internet Explorer does not yet support the multiple columns properties.
Firefox requires the prefix -moz-.
Chrome and Safari require the prefix -webkit-.

1. column-count :
The column-count property specifies the number of columns an element should be divided into:

div
{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;
}

2. column-gap :
The property specifies the gap between the columns:

div
{
-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari and Chrome */
column-gap:30px;
}

3. column-rule :
The property sets the width, style, and color of the rule between columns.

div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}

Here are the dimensions of the iPhone screen when running Safari.

In portrait orientation the screen dimensions are 320 by 356 pixels. In landscape the dimensions change to 400 by 208 pixels.

The URL field can drop down at any time, so the extra 60 pixels at the top should not be counted on when trying to keep important items above the fold.