How to create a website for mobile devices

Styles

User Agent

One way to enable styles for a mobile device is to use the User Agent that the server receives from the client.
This can be helped by a set of scripts: code.google.com/p/mobileesp , as well as the service from Yandex api.yandex.ru/detector
When working with the User Agent, only one problem is the constantly emerging new User Agent.

Client side

Previously used this approach:

  <link rel = "stylesheet" href = "site.css" media = "screen" />
 <link rel = "stylesheet" href = "mobile.css" media = "handheld" />

The line with media = "screen" is the same as a regular computer, media = "handheld" is a mobile device. New devices refuse such an approach and it is necessary to use requests inside the media attribute.

For example, for devices with a screen width of 480px and less, we will use the code:
')

  <link rel = "stylesheet" href = "mobile.css" media = "only screen and (max-device-width: 480px)" />

Combining both ways you can write:

  media = "handheld, only screen and (max-device-width: 480px)" 

User choice

Given that it is not always possible to accurately determine whether a device is mobile, you can give the user a choice of which styles he wants to use.

What to write in styles

1. Get rid of multicolumn markup.
2. Set display: none; on unimportant elements
3. Reduce margins around elements.
4. Reduce the use of images, especially large backgrounds.
5. Increase the readability of the text by increasing the size of small text.
6. Throw away the floating items
7. Keep in mind that mouseover events do not work.

What besides styles

Many mobile devices understand this phone number entry:

  <a href="tel:15032084566" class="phone-link"> (503) 208-4566 </a>

Some devices already support HTML5 , so you can use, for example, the following tags:

  <input type = "tel" />
 <input type = "email" /> 

HTML5 tags allow you to validate on the browser side and open the corresponding character set.

Dimensions and orientation

Modern mobile devices usually scale the page to display it all on the screen.
This is not always convenient. To change this browser behavior, you need to use a meta tag with the viewport attribute. For example:

  <meta name = "viewport" content = "width = 320" /> 

This definition means that 320 pixels of a page will be visible on the device.
You can also disable scaling:

  <meta name = "viewport" content = "width = 320, user-scalable = false" /> 

You can also add styles based on device orientation:

 @import url ("portrait.css") all and (orientation: portrait);
 @import url ("landscape.css") all and (orientation: landscape); 

As you understand, the portrait.css file will be used for portrait orientation, and landscape.css for landscape orientation.

Orientation detection is not supported by all devices, using max-width more reliably to determine screen width.

IPhone Special Notes

1. The iPhone does not support Adobe Flash
2. Not supported tag

  <input type = "file" /> 

because there is no access to the file structure.
3. Cached files no larger than 25 Kb
4. There are problems with @ font-face - using loading external fonts. See also the article on fonts .

But you can use JavaScript libraries that you can use to access the special features of the iPhone. Pay attention to Sencha Touch , jQTouch and iui . These libraries also work with Android. Additionally, jQuery Mobile production release is expected.

See the same CSS Framework displaying an IPhone style page.

You can also create your own icon for the site using the following syntax:

  <link rel = "apple-touch-icon" href = "/ customIcon.png" /> 

The icon should be 57x57 pixels in png format. Android also understands these icons.

The article is based on the article www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website

Links for additional reading

* State of Mobile Web Development - a discussion about mobile development in 3 parts
* Return of the Mobile Stylesheet - using styles
* Hardboiled CSS3 Media Queries - how to assign styles for devices
* CSS Media Query for Mobile is Fool's Gold - arguments against media queries
* Mobile Web Design - design
* Mobile operating systems and browsers are headed in opposite directions - directions in the world of mobile devices.
Pocket-Sized Design: An old, but still useful article.