Basic Introduction to Simple Responsive Design With Code
By Stephen Bucaro
In the early days of computers the most popular screen resolution was 640 x 480 pixels.
Designers couldn't provide much of a Web page experience with that tiny screen size.
Gradually computer display screens grew larger, and designers were free to be more
creative. Then came mobile devices.
Today many Web sites are accessed more often by mobile tablets or smart phones than
by personal computers. And there is a whole range of mobile devices out there with
a wide range of screen aspect ratios and resolutions. It's sad that we now have to
revert back to designing for small, even tiny screens. But the growth in users accessing
the Web with mobile devices makes that market impossible to ignore.
To help us respond to the problem of designing for a wide range of screen sizes, CSS3
(Cascading Style Sheets version 3) has provided us with the Media Query. One
of the most important tools in responsive design is the media query. The format of a
media query is shown below.
@media media_type and (expressions) { style code }
After the keyword media is the media type, which is almost always going to be Screen,
although it can also be print for printers, speech for screen readers,
or all for all media types.
After the media type is an expression (or expressions). An expression is a statement
like (min-width: 480px). When the Web browser comes upon the media query, it responds
with the requested media type's specifications, and the query's expressions will be
logically tested against those specifications returning a true of false result.
@media screen and (width: 250px) { style code }
The media query above will be true if the device has a screen width of 250 pixels.
If the media query result is true, then the styles listed will be applied.
@media screen and (min-width: 480px) and (max-width: 640px) { font-size:16px; }
The media query above will be true if the device has a screen width between 480
pixels and 640 pixels. Then the font-size style will be applied.
The properties listed in the expressions are called media features, and besides
width some of the other features you can test against are height, resolution, aspect-ratio,
and orientation (portrait or landscape).
Before we go any further, it's important to mention that HTML version 5 also introduced
a tool to help web designers with reponsive design, the viewport <meta> tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
When placed in the <head> section of your Web page, the viewport meta tag shown above
will force the browser to report its width as the device-width and to
set its initial-scale to 1.0 (no zoom).
<meta name="viewport" content="initial-scale=1, user-scalable=no">
The viewport meta tag shown above will force the browser to set its initial-scale
to 1.0 (no zoom) and prevent the user from using zoom. Not really a good idea.
The important thing about the viewport meta tag is that if you don't provide one, the
mobile device browser will ignore your media query and either set itself to a default
setting or analyze your Web page code and try to adjust its setting for the best view.
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
