Variations on a Theme

A Responsive Design Solution to Support Multiple Display Sizes

 

Responsive Design Article Ye Ol Composers Website

Responsive Design Article Ye Ol Composers Website

The Theme:

Ever since mankind first broke free from the pythonian bit-crushing death grip of dial-up, we’ve been evolving the use and function of websites. They’ve changed from simple static pages of mostly text to information warehouses designed to attract, engage and retain viewers. The one constant throughout these changes has been the importance of content and how it’s displayed.

Nowadays, websites can be viewed on a number of devices in various shapes and sizes: mobile phones, tablets, e-book readers, and widescreen monitors, just to name a few. This has created a challenge for us designers. How do we best present the same content so that it’s readable (and still engaging) on all these different screens without losing our minds?

Responsive Design – Not Just for Mad Geniuses

To solve this dilemma, many designers have adopted the practice of building a separate website specifically for smaller display sizes. People that hit the website from mobile devices then get redirected to this mirror site, which may or may not look anything like the original website. Considering all the display sizes in the world today, it’s easy to see how this separate website solution could quickly overwhelm designers (and their clients) with innumerable designs and become a maintenance nightmare.

Enter responsive design. Introduced by Ethan Marcotte, “Responsive Design” represents a shift in the thinking about how websites are created. It’s based on the premise that viewing a website on a different display size is just a variation of the same viewing experience – not a completely separate website with a different design.

Responsive design uses a combination of design decisions and techniques revolving around two technologies:

  1. Fluid Grids and
  2. Media Queries

Getting Flexible – Fluid Grids

In a responsive website, dynamic layouts, or fluid grids, adjust based on the size of the screen display. Elements in these types of layouts are sized proportionally to their containers, and these proportions stay the same, regardless of how the container is resized. This includes not only illustrations, text, and graphics, but also images.

Fluid grids are accomplished via CCS by defining the width of an element as a percentage of its container instead of a fixed pixel width.

#div_block{ width: 30%; } versus #div_block{ width: 300px; }

Calculating Width Percentage Based on a Static Mock-Up

A fluid grid can be created from a static mock-up by using the fixed pixel sizes of elements and their containers to compute the proportionate width. For example, if a 960px container is split into a 300px and a 660px width block, the percentage width of the interior blocks will be calculated as shown below:

Responsive Design Article Fluid Grid Calculations

Computing Fluid Grid Element Width

Computing Fluid Grid Element Width

Using this technique the leftmost block will always take up 31.25% of the container, regardless of how the container is resized.

It’s important to note that these percentage calculations can result in values with many numbers after the decimal point. Don’t round off the decimals. We want the layout to stay as close to the reference design as possible. Besides, the computer can calculate a number with 10 decimal places just as quick as a number with two.

Ye Ol’ Example

For this article, I’ve created a hypothetical website for some old school composers, which I’ve aptly named Ye Ol’ Composers. These clients are embracing modern technology and a content marketing strategy to help educate the masses, but they want to make sure that site navigation and content is displayed in a way that maximizes their user’s viewing experience. I’ll demonstrate how this can ultimately be accomplished through the combination of fluid grids and media queries.

Fluid Grid Example

Here is a link to the Ye Ol’ Composers website built on a fluid grid. The sizes of the main containers are based on a percentage of the display size. Resizing your browser will expand or shrink content to fill the available space.

Alone, a fluid grid has its limitations. These become readily apparent after decreasing the display size of the browser window.  The layout begins to break down as images become too small to easily see, and text wrapping becomes rampant as its container continues to shrink.

Responsive Design Article Fluid Layout Size ComparisonFluid Grid Main Content at 1200px and 480px Display Widths

The fluid grid has taken us as far as it can go; now it is up to media queries to take us the rest of the way.

Media Queries

Media queries are a powerful tool for website design.  They provide a mechanism to conditionally include a block of CSS code based on the physical characteristics and type of display device. In a responsive design, this code can override existing CSS defines to alter the layout and formatting of a website to match the display size.

For example, adding the media query

 

to the <head> section of an html file checks to see if the display width of the rendering screen is equal to or less than 900px. If the condition is met then the CSS code in foo.css will be included. Otherwise, it will be ignored.

Media queries can also be made within a CSS file

@media screen and (max-width: 480px) and  (max-height: 640px)  {
     /* Insert CSS here */
}

Variations on a Theme

So, let’s combine both methods and see what happens. Using media queries coupled with a fluid grid, I’ve created multiple variations of the Ye Ol’ Composers website to support different display sizes.

For a sneak preview, Click here to see the responsive design in action by resizing your browser window, or click here to see a side-by-side comparison of the website at different screen resolutions. Now, let’s open our music theory books and explore the Variations on a Responsive Design Theme. Slowly, with feeling…

Introduce the Theme

The following image should look familiar. It’s the original theme from the fluid design example, only I’ve included media queries, which come into play at different display sizes. It’s designed to take advantage of widescreen displays by using a three-column layout: one for navigation, another for main content, and one for a sidebar with calls-to-action (CTAs).

Ye Ol Composers Original Layout With Main Containers Highlighted

Original Layout With Main Containers Highlighted

I’ve highlighted the main containers and included some of the original CSS code (below) to show how the layout is constructed. In the next three sections, my “variations” on this theme will show how easily the layout can be adjusted to respond to different display sizes with minimal changes.

Original Container Layout CSS Code

#container { width: 90%; }
#menubar { float: left; width: 15%; }
#wrapper { width: 85%; float: left; }
#content { width: 72%; float: left; }
#sidebar { float: right; width: 27%; }
.author { float: left; width: 31.25%; margin: 10px 0 0 1.5625%; }
.author img { width: 100%; }

Variation 1 – Harmonizing for Smaller Screens

Once the viewing area width becomes smaller than 1300px, the content becomes too compacted to view easily.  This variation restructures the layout by moving the navigation menu to the top of the page, then dividing the rest of the page (#wrapper) between the main content and sidebar.

Ye Ol Composers Website at 1200px Display Width

Because of the fluid grid, the content blocks and images automatically resize, keeping the same proportions to their containers with minimal changes to the layout code.

Container Layout CSS Changes

#menubar { width: 100%; float: none; }
#wrapper { width: 100%; float: none; }

Media Query

 

Variation 2 – Melodic Counterpoint for Tablets

Variation 1 begins to break down when display width drops below 900px. But where it leaves off, Variation 2 picks up, maximizing content display for tablets, netbooks, etc. The new CSS override code transitions the website from a two-column display to a one-column display. The sidebar is also altered, moving below the main content with the CTAs in a single row. Switching to a one-column layout allows the website to still display three authors per row in a visually appealing manner.

Ye Ol Composers Website at a Display Width of 768px

Additional Container Layout CSS Changes

#content { float:none; width:100%; overflow: hidden; }
#sidebar { float:none; width:100%; overflow: hidden; }

Media Query

 

Variation 3 – Changing Key for Mobile

Well, I managed to make it this far without mentioning mobile specific websites. Even the Ye Ol’ Composers have been wondering when I would get to that part. Just as in the previous variations, media queries allow a website’s layout to be customized for mobile viewing devices, too. This variation reduces the number of authors displayed per row to two. It also stacks the CTA blocks. Notice how the viewing experience remains optimal, while the design stays consistent with the original theme, even on this much smaller display size.

Ye Ol Composers Website at Display Width of 480px

Additional Container Layout CSS Changes

 .author { margin: 10px 0 0 1.5625%; width: 47.61904761904762%; }

Media Query

 

The Finer Points (and Counterpoints)

Viewport

Mobile and tablet devices are notorious for taking artistic liberties when reporting their display sizes. Browsers for these devices often report a larger viewing size than the actual physical display. For example, the iPhone 4 acts as if it has a 960px viewing width in portrait mode, while physically it only has 320px. This is done to optimize the display of websites that do not have a specific mobile version, but it throws a monkey wrench into our responsive design. To get the desired behavior from a tablet or mobile device, the following code should be added to support media queries.

 

This forces devices to report their actual physical display width and ensures that your responsive design works as planned.

Infinite Variations – Now You’re Just Showing Off

What if a screen width falls between two media query points? So long as a fluid grid is employed, the “in between” size can be accommodated. For example, the website variation displayed for a device with a screen width of 800px would be based on our 900px media query. The fluid grid would resize its content, and again, keep the right proportions.

Testing – So Many Options

The combinations and permutations of display sizes and devices are dizzying, and they can spin you into a coma if you try to think of a way to test them all. So, don’t. The best that can be done is to test enough variations to feel secure with releasing a website into the cold cruel world. There are tools that can help though.

For the purposes of this article, the Ye Ol’ Composers website was tested with the following display sizes (pixels):

  • 320 x 480
  • 480 x 640
  • 768 x 1024
  • 1024 x 768
  • 1200 x 800
  • 1500 x 1050

Instead or resizing my browser to specific widths, I was able to generate a side-by-side view of each display size using the html code provided by @lensco in the article “Simple responsive design test page.”  I added the last screen resolution to test the widescreen version of Ye Ol’ Composers. See the code in action by clicking here.

Coda – Responsive Design: Not Just a Catch Phrase

The major theme (and its variations) of responsive design is presenting website content in a manner that maximizes viewing experience, regardless of display size. In this article, I’ve demonstrated the use of fluid grids and media queries to implement a responsive website. It’s important to note, however, that a responsive website isn’t created during implementation. It’s created in the design phase. This means designers must consider layout, content, and backgrounds not only for how they look together, but also for how they react and interact once display sizes begin to change. With this new mindset, designers can accommodate the large assortment of display devices in the market and prepare for the next wave of display technology.

Personally, I can’t wait to see a responsive website in holographic 3D.

 

Daily Flugelhorn Responsive DesignSome Useful Resources

 

About Charlie Thompson

Charlie is co-founder and president of GroundSwell Web Designs. When he's not evaluating tools, building sites, assisting clients, or verbally threatening computers you can usually find him outside wondering what that big bright object is in the sky. You can follow him on Linkedin. See all posts by Charlie.

Comments

  1. Glenn Oehms says:

    Nice job, Charlie

    Well paced and structured and lucid. A very good introductin to an important design mode.

    Thanks

  2. James Patterson says:

    Very well presented article. Well done ole boy,! ..Who knew you were funny?