Information Technology Reference
In-Depth Information
Figure 5-4.
The same page at 2048 x 1536 resolution
By now, you might have started looking at your smartphone or tablet and thought,
“Hmm… wonder what the resolution is on this thing?” You know what? That's what
most of the designers of mobile web pages are wondering too. Currently, with Android
activations hovering around 350,000 new devices a day, designers and developers alike
are realizing they need to make drastic changes in their approach to web application
development in order to stay relevant with the vast array of devices we use daily to view
the web. It's a hard game to play if you favor a fixed-width approach: What resolution do
I build my mobile app for? There are some easy answers (“Well, most people have
iPhones, I'll just build for that”), but they have their downfalls (“What?!? They made a
BIGGER iPhone called an iPad… uh oh…”). By targeting specific devices, you also tend
to annoy users of any device other than your target.
In this chapter, we'll offer you a bit of “screen resolution.” That is to say, we'll attempt to
solve the problem by discussing how your mobile web application can actually be
intelligent enough to understand the resolution, and even the orientation, of the device
that your user is using and adapt automatically for it. It's almost as if you'll be coding up
a small brain that says “Hmm, this device has a lot of width; let's show everything we
can” or “Oh, no; this is a small screen. We can't show this information side by side!” As
a designer, we can harness the small brain and make it even more intelligent, by letting it
display the same content in a variety of different ways to different devices and—by
extension—different users. Let's begin with an example.
