Sam Gentile's Blog

Way back on October 9, 2011, when I was working on a hybrid mobile application, I had a key post for this category entitled “Viewport Meta Tag and Using HTML5/CSS3/jQuery to Build Mobile Interfaces”. The post had two key concepts vital to developing mobile applications with these technologies:

1. Viewport Meta Tag
2. CSS Media Queries

Although I identified these two key enablers, I was just learning at the time and fishing around, so I feel I didn’t give enough context and explanation (I gave an example of Media Queries without defining them or their purpose!). This post is an attempt to fill in the gaps.

I said, “Not only do I believe that it these technologies represent the present and future of Web Development, but also as a way to do cross-browser, cross-platform Mobile device UI development. Yes, you heard me right. These technologies make possible true cross-browser, cross-platform mobile web development for the first time. Some background. “

This is true but most be qualified in terms of what type of application you are building. The whole reason there is such passionate interest in HTML5, CSS3 and their associated JavaScript APIs is that most people don’t want to build “Native” mobile applications, at least not out in the corporate sector. Native mobile applications require you to learn a different programming language and IDE for each platform. Instead, most of us want to re-use skills we already know in building “web applications” and get some code reuse. This falls in the category of “Hybrid” or “Pure” Mobile applications. If you have no need to access native features of the device, you can build a “Pure” mobile web application with HTML5 and CSS3 only. But this is rare. These kind of applications can only go so far in leveraging native sensors and APIs on those devices, While some features – like geolocation – are provided to mobile browsers, many – like the accelerometer or video – are not. The great news, however, is that the popularity of Web programming has enabled HTML5, JavaScript, and CSS to “go native” as it were. Popular frameworks like PhoneGap and Titanium Appcelerator enable you to use HTML5 and JavaScript to build native applications for iOS, Android, and Windows Phone, with device access to boot. Thus, the “hybrid” mobile app.

I talked about the Viewport and Media Queries but the context is what’s called Adaptive or Responsive Web Applications, in that the application can scale up and down with different devices. Several things have happened lately to make these things possible:

• Media tags to tell a mobile browser not to scale your site down
• New standards that make building sites that work well in multiple mobile browsers much easier
• New standards that make building sites that act more like web applications.

These standards include the family of HTML5 standards and CSS3. I covered HTML5 here and here.

I talked about the Viewport meta tag: So what is the Viewport meta tag? The Viewport meta tag was introduced by Apple Mobile Safari to let Web Developers control the viewport’s scale and size. It’s now an universal standard. Unless you tell it otherwise, Safari on the iPhone is going to assume your page is 980px wide. If you are going to do mobile web development for the iPhone and Blackberry devices with the smaller dimensions, you have to let Mobile Safari, you must let Mobile Safari (or Ripple for the Blackberry) know about it by adding a viewport meta tag to the head element of the HTML documents which sets it to the device width:

<meta name="viewport" content="user-scalable=no, width=device-width" />

I showed an example of a media query but didn’t talk about it!

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

Media Queries (new with CSS3) are very powerful and I encourage you to read Dan Wahlin’s extensive post on them but the general idea is that they are a CSS expression than can evaluate to true or false. If true, the CSS selectors and properties of an expression will be applied. When combined with CSS cascading rules, it enables you to respond to different resolutions, orientations, or changes in resolution or orientation. This rule is basically saying, “for mobile devices with a device max width of 480px, apply the iphone stylesheet.

Again, this post barely scratches the surface of this whole area but hopefully fills in some holes and nails down Viewports and Media Queries as fundamental concepts in building hybrid web applications with HTML5, JavaScript, and CSS3. I plan to build on these posts to go more in depth.