HTML and CSS Reference
In-Depth Information
Chapter 13
The State of Responsive Design
Tyler Smith, HTML5 Game Developer, Engineer and Tech Evangelist
at AgeCheq
Colt “MainRoach” McAnlis, Developer Advocate, Google
Building an HTML5 game in the modern world is rife with difficulties. In addition to technical limitations and
variations among browsers, you have the added burden of the current consumer world, which is predominantly
driven by a boom in smartphones and tablet devices. What makes developing for this slew of heterogeneous devices
difficult is the massive array of resolutions, physical sizes, and performance among them. For your web game to
be successful, you'll need to adapt it to take advantage of the many screen resolutions available so that users can
experience it on as many devices as possible. To do this, you'll need to adjust your game dynamically, depending on
the current resolution, to achieve the desired game layout. This, at its core, is known as
responsive design
.
Understanding the Problem at Hand
Recall that modern screens are represented as a two-dimensional array of pixel values. However, because of the
physical size of the screen, as well as the technology within, the number of pixels on a screen can vary. Screen
resolution is often given in dots per inch (dpi) or pixels per inch (ppi), which is a measurement of the density of dots,
or pixels, on a screen (see Figure
13-1
). Higher dpi/ppi gives a screen a nicer, polished finish; this is because the
increased pixel count corresponds to smaller pixels, which reduces the chance of the human eye's seeing the edge of
a color. For example, Apple's Retina display doubles the number of physical pixels on the screen. Because the human
eye has trouble distinguishing these smaller pixels, the increased resolution produces cleaner, more vibrant images,
which helps users feel immersed in their computing. For developers, however, this increased resolution is more of a
headache than a blessing.
