• The Four Hundred
  • Subscribe
  • Media Kit
  • Contributors
  • About Us
  • Contact
Menu
  • The Four Hundred
  • Subscribe
  • Media Kit
  • Contributors
  • About Us
  • Contact
  • 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:

    1. Fluid Grid Design. This means that element sizing is in relative units (e.g., percentages or em) as opposed to fixed absolute units (pixels).
    2. Flexible Images. Images are also sized in relative units, so as to prevent them from displaying outside their containing element.
    3. Media Queries. These queries are used to determine which CSS style rules should be applied.

    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.

    1. The first link includes the base CSS document–media_queries_base.css.
    2. The second link includes the CSS document–media_queries_500.css–if the media is a screen and the width of the browser exceeds 500 pixels. Any CSS rules in this document will be appended to or replace rules in the previous document.
    3. The third link includes the CSS document–media_queries_700.css–if the media is a screen and the width of the browser exceeds 700 pixels. Any CSS rules in this document will be appended to or replace rules in the previous two documents.
    <!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:

    • Responsive Grid Sys-tem
    • Bootstrap
    • Frameless
    • HTML5 Boiler-plate
    • YAML CSS Frame-work

    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.



                         Post this story to del.icio.us
                   Post this story to Digg
        Post this story to Slashdot

    Share this:

    • Reddit
    • Facebook
    • LinkedIn
    • Twitter
    • Email

    Tags:

    Sponsored By
    ROBOT

    Big Data is Growing in Your IFS

    Big data doubles every two years and your department doesn't have the dollars to keep up. Don't run out of disk space. Find room you already own.

    Download this exclusive strategy guide to learn the top tools and technologies available to clean your system, forecast future growth, and keep big data from wreaking havoc.

    Download the IBM i Disk Space Strategy Guide today.

    Sponsored Links

    BCD:  Recorded Webinar: How to Simplify RPG or PHP Mobile Development with jQuery
    SEA:  Authority on Demand (AOD) controls user permissions while responding to emergencies.
    Four Hundred Monitor Calendar:  Latest info on national conferences, local events, & Webinars.

    More IT Jungle Resources:

    System i PTF Guide: Weekly PTF Updates
    IBM i Events Calendar: National Conferences, Local Events, and Webinars
    Breaking News: News Hot Off The Press
    TPM @ EnterpriseTech: High Performance Computing Industry News From ITJ EIC Timothy Prickett Morgan

    Micro Focus Finally Goes GA with RUMBA for iPad IBM Wraps Up New PureFlex For IBM i Bundle

    Leave a Reply Cancel reply

Volume 13, Number 20 -- October 23, 2013
THIS ISSUE SPONSORED BY:

Robot
WorksRight Software
Shield Advanced Solutions

Table of Contents

  • Responsive Web Design
  • Make Your DB2 For i Apps Environment Aware
  • Admin Alert: A Primer For Setting Up PC5250 SSL Connectivity, Part 2

Recent Posts

  • Get Your PHP on IBM i, Hold the Zend
  • Syncsort’s Pitney Bowes Deal: All About Good, Clean Data
  • Three IBM i Vendors Who Are Still Announcing Things in 2019
  • Four Hundred Monitor, December 11
  • IBM i PTF Guide, Volume 21, Number 49
  • Moving Off Big Iron? Be Very Careful, Gartner Says
  • Thoroughly Modern: More Than Just A Pretty Face
  • Guru: More End Of Year Feedback
  • As I See It: When Gates Was Young
  • Servers Cool A Bit In Q3, But The Market Is Still Hot

Subscribe

To get news from IT Jungle sent to your inbox every week, subscribe to our newsletter.

Pages

  • About Us
  • Contact
  • Contributors
  • Four Hundred Monitor
  • IBM i PTF Guide
  • Media Kit
  • Subscribe

Search

Copyright © 2019 IT Jungle

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.