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 a service from Yandex api.yandex.ru/detector
    When working with User Agent, there is only one problem - new User Agent constantly appearing.


    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" corresponds to a regular computer, media = "handheld" is a mobile device. New devices are abandoning this approach and it is necessary to use queries inside the media attribute.

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

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

    Combining both methods, 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 provide the user with a choice of which styles he wants to use.

    What to write in styles

    1. Get rid of multi-column layout
    2. Put display: none; on unimportant elements
    3. Reduce the margins around the elements
    4. Reduce the use of images, especially large background
    5. Increase the readability of the text by increasing the size of small text.
    6. Throw out the floating elements
    . 7. Note 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, these tags:
    <input type = "tel" />
    <input type = "email" />

    HTML5 tags allow browser-side validation and open the appropriate character set.

    Dimensions and Orientation

    Modern mobile devices typically scale the page to fit the entire screen.
    This is not always convenient. To change this behavior of the browser, you need to use the meta tag with the viewport attribute. For example:
    <meta name = "viewport" content = "width = 320" />


    This definition means that 320 pixels of the 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 the orientation of the device:
    @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 detection is not supported by all devices; using max-width is more reliable for determining screen width.

    IPhone Special Notes


    1. iPhone does not support Adobe Flash
    2. Tag is not supported
    <input type = "file" />
    because there is no access to the file structure.
    3. Files no larger than 25 Kb
    are cached 4. There are problems with @ font-face - using external font downloads. See also the article about fonts .

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

    See also the CSS Framework, which displays 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 such 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 - discussion on 3-part mobile development
    * Return of the Mobile Stylesheet - using styles
    * Hardboiled CSS3 Media Queries - how to assign styles to 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: Taking Your Website to the Small Screen - an old, but still useful article.

    Also popular now: