Information Technology Reference
In-Depth Information
This is a lot of code for a simple newspaper; however, the beauty of it is in its versatility:
One HTML page and one CSS page to rule all devices—phones, tablets, Android Media
players, and whatever else someone puts Android on! Let's take a moment to discuss
how this magic happens, using media queries.
Media Queries
When you looked at the preceding code, the first thing that you probably noticed is that
the very fluid vintage newspaper layout that was programmed consists of only two
relatively small files of code. Five to seven years ago, in a land where web developers
had to wear two different hats—web developer hat and Internet Explorer 6 hacker hat—
creating a layout such as this would have been a ridiculously cumbersome task that
would have most likely consisted of two, if not more, completely different layouts. Each
layout would have had to be its own set of HTML and CSS files, displayed to the client
by some backend server code that looked up your device's user agent string. Mobile
devices would have been served the HTML and CSS templates designed specifically for
mobile devices. Desktop computers would have been served desktop equivalent
templates. There was no melding or fluidity between the code versions.
Fast forward a few years into the future—where we sit at the dawn of HTML5 and
CSS3—and the landscape is completely different. Currently we live in a world where
Desktop Internet browsers are being developed and released faster than most users can
get around to installing the most recent update. On the mobile front, it is almost equally
as progressive, with new versions of the Smartphone's operating systems, and in turn
new feature rich versions of their Internet browsers, being released every six to twelve
months, if not sooner!
What that means for you, the mobile web developer, is that you are not stuck in the
past, coding your sites for browsers that are a decade old if not older. At the most, as a
developer targeting the Android user experience, you really only have to worry about
developing for the last year and a half of Android releases. The ability to focus on newer
devices without worrying about hindering your user's experience by focusing too much
on past technologies gives developers a certain freedom that we did not possess
before. With that freedom comes innovation and with innovation comes better
technology and features—such as CSS3 media queries—the technology that is
responsible for letting us create the beautiful “The Daily Droid” demo that we previously
built.
Media queries have, in some form or other, been a part of web development since the
days of HTML4. During that dark shadowy time of font tags and nested tables, media
types made their big claim to fame by controlling styles and style sheets associated with
the medium in which the user would be using to view the content (see Figures 5-10 and
5-11). For instance, a developer would assign some styles to the “print” media type to
remove all advertisements from printed articles on a blog so their user would not
unnecessarily use up their expensive ink when trying to print the blog's content (see
Listing 5-6).
