Responsive Web Design
October 23, 2013 Paul Tuohy
|
The design of web pages used to be a very straightforward process. You picked a style and made sure that that style was applied throughout your website. Usually, each page would have a fixed width of 500 or 700 pixels, which would be formatted in a grid pattern to best represent the content of the page. But that was way back when you only had to be concerned about designing a web page that would be displayed on a desktop or a laptop. Today, your web page might be displayed on a desktop, a laptop, a tablet, or a mobile phone, and you also have to be concerned about landscape and portrait. The challenge is: how can you go about designing a web page that will adapt to the device upon which it is being displayed? Which leads us to .
(RWD) took form with an article of the same name written by Ethan Marcotte and published in January 2012. A web page designed using RWD is dependent on three factors:
The best way to get to grips with RWD is to look at a simple example. But first, let’s have a look at media queries. Media Queries Media queries are an extension of media types. Media types are a CSS attribute used to detect the type of device the browser is running on. Although there are 10 possible values for media type, only two were truly supported: screen and print. Media queries extend the testing of a media type. For example, a CSS file containing the following code would indicate the background color is blue if the media is a screen and supports color:
@media screen and (color)
{
body { background: blue; }
}
Basically, a media query is an IF condition that tests attributes of the browser to condition which CSS rules should be used. At Work The following example demonstrates how to dynamically change the background color of a web page by changing the width of the browser window. The next piece of code shows the HTML for a simple document. The key lines to note are the three link elements in the head element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> What's up with Jack? </title>
<link rel="stylesheet" href="media_queries_base.css">
<link rel="stylesheet" href="media_queries_500.css"
media="screen and (min-width: 500px)">
<link rel="stylesheet" href="media_queries_700.css"
media="screen and (min-width: 700px)">
</head>
<body>
<div class="container">
<h1>What's up with Jack?</h1>
<p>All work and no play makes Jack a dull boy.</p>
<p>All work and no play makes Jack a dull boy.</p>
<p>All work and no play makes Jack a dull boy.</p>
<p>All work and no play makes Jack a dull boy.</p>
<p>All work and no play makes Jack a dull boy.</p>
<p>All work and no play makes Jack a dull boy.</p>
<p>All work and no play makes Jack a dull boy.</p>
<p>All work and no play makes Jack a dull boy.</p>
<p>All work and no play makes Jack a dull boy.</p>
<p>All work and no play makes Jack a dull boy.</p>
<p>All work and no play makes Jack a dull boy.</p>
</div>
</body>
</html>
Now we will look at the code that shows the base CSS document media_queries_base.css, which contains the base CSS used for the document. The directive we are particularly interested in is the background rule for the body element, which sets the background color to lime.
/* base rules */
body {
margin: 0;
padding: 20px;
color: #000;
background: lime;
font-size: 100%;
font-family: "Helvetica Neue", Helvetica, Arial,
Geneva, sans-serif;
line-height: 1;
}
h1 {
margin: 0 0 .25em;
line-height: 1;
}
p { margin-top: 0; }
.container {
max-width: 25em;
margin: 0 auto;
}
The following code shows the CSS document media_queries_500.css, which contains the CSS rules that will be applied if the width of the browser exceeds 500 pixels. It consists of one directive that sets the background rule for the body element to a color of yellow.
/* for minimum width 500 */
body { background: yellow; }
And lastly, this next bit of code shows the CSS document media_queries_700.css, which contains the CSS rules that will be applied if the width of the browser exceeds 700 pixels. It consists of one directive that sets the background rule for the body element to a color of red.
/* for minimum width 700 */
body { background: red; }
This simple example demonstrates how CSS rules can be changed by simply changing the width of a browser. You will find much more impressive examples at http://mediaqueri.es/. Frameworks The CSS starts to become a lot more complex when you start to play with positioning and sizing. But never fear, help is at hand. There are many, many frameworks that provide the required CSS for multiple grid layouts based on RWD. You might want to check some of the following: I guess it’s time for me to think about re-writing the System i Developer website! Paul Tuohy is CEO of ComCon, an iSeries consulting company, and is one of the co-founders of System i Developer, which hosts the RPG & DB2 Summit conferences. He is an award-winning speaker who also speaks regularly at COMMON conferences, and is the author of “Re-engineering RPG Legacy Applications,” “The Programmers Guide to iSeries Navigator,” and the self-study course called “iSeries Navigator for Programmers.” Send your questions or comments for Paul to Ted Holt via the IT Jungle Contact page.
|
