Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

New CSS trends to watch

Saturday, March 22nd, 2014 by Servage


Responsive web design is a technique that uses CSS to adapt a page’s layout based on screen size. It is just one strategy we are employing to cope with the mind-blowing variety of screen sizes.

Of course, responsive design is a big, fat, gnarly topic that could fill (and has filled) whole books. What I’m going to do here is introduce you to the basic ingredients of a responsive site so you get a feel for building one.

A simple example

In this section, we’ll work together on making the Jenware page responsive. The example below  shows how the same Jenware HTML page will look on a narrow screen, a tablet screen in portrait and landscape orientations, and a large desktop monitor by the time we are finished.


On the smartphone-sized screen, the page has a one-column layout and very narrow side margins. On tablets in portrait mode, there is room for slightly more generous margins and wrapped text. At 1,024 pixels wide, there is room for a second column, and in very wide browser windows, the width  of the content is limited with the max-width property to make sure the line lengths don’t get out of control. These are very modest adjustments compared to professionally designed responsive sites,  but they should be enough to show you how it works.

Responsive design as first proposed by Mr. Marcotte has three core components:

  • A fluid layout
  • Flexible images
  • CSS media queries

Setting the viewport

To fit standard websites onto small screens, mobile browsers render the page on a canvas called the viewport and then shrink that viewport down to fit the width of the screen (device width). For example, on iPhones, Mobile Safari sets the viewport width to 980 pixels, so a web page is rendered as though it were on a desktop browser window set to 980 pixels wide. But that rendering gets shrunk down to 320 pixels wide when the iPhone is in portrait orientation, cramming a lot of information into a tiny space.

Mobile Safari introduced the viewport meta tag that allows developers to control the size of that initial viewport. Soon other mobile browsers followed suit, and this is an essential first step to a responsive design. Simply add the following meta element to the head of the HTML document:

<meta name="viewport" content="width=device-width, initial-scale=1">

This line tells the browser to set the width of the viewport equal to the width of the device screen (width=device-width), whatever that happens to be. The initial-scale sets the zoom level to 1 (100%).

Adaptive Layout

As an alternative approach—especially when there is no time or budget for a true responsive site redesign—some designers choose to create an adaptive layout instead.

Adaptive layouts feature two or three different fixed layout designs that target the most common device breakpoints. They may be quicker and less disruptive to produce, but the advantages of fluid layouts are lost. Some consider adaptive layouts to be more of a stopgap solution than a long-term mobile design strategy.

Sources for Further Reading

New CSS trends to watch, 3.5 out of 5 based on 4 ratings
Categories: Guides & Tutorials


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.