Basics of Mobile Web Development

Posted byTom

At the moment I’m attending the online course Mobile Web 2: Applications at W3 Tech courses. This post is a summary of the second week’s subject Basics of Mobile Web Development. (Please note: this is not a thorough objective summary of the course, but just the highlights that I found important for myself to remember.)

  1. The way to address scaling issues on a mobile device is to use the meta viewport element. 
    <meta name="viewport" content="width=device-width"/>

    More info: An introduction to meta viewport and @viewport (dev.opera).

  2. CSS Media Queries is a way of applying specific CSS styles depending on a number of properties of the target device. Typical properties include whether it is rendered on screen or in print, the orientation of the device, its resolution or colordepth, and many other such aspects (called “media features”). Examples: 
    @media screen and(max-width:959px){     /* CSS rules to apply specifically when the above is true */}
    <linkrel='stylesheet'href='style.css'type='text/css'media='all and (min-width: 960px)'/>
  3. When writing web sites that target both mobile and desktop, it is usually a better idea to write the core style sheet in a manner that works for mobile devices, and then use media queries to render the same page on larger screens, “mobile first”. This concept can be taken further by starting to design for the “dumbest” phone.
  4. How to test for native JSON:

    if ("JSON" in window) {
    // code that depends on native JSON being available
}

    Or, with a polyfill:

    <script>"JSON" in window || document.write('<script src="json2.js"><\/script>')</script>


  5. In a mobile context, use opacity sparingly.
  6. Xui has the advantage over Zepto that it’s fully portable to all known browsers, while Zepto tends to be Webkit focused.

Mentioned resources: