Home Blog Development: An Introduction to Responsive Web Design
󰀄
An Introduction to Responsive Web Design

In my early years as a web designer, the quintessential question in that first design meeting was: “What screen size are you designing for?” The answer usually came in some sort of minimum pixel width like 640×480 or 800×600. Things got a little more complicated when 1024×768 screens became widely used, but the same grid was drawn on a whiteboard to start off the design process. This measurement gave us a framework for tables, columns, images, and a test browser to make sure it was all working. A page skeleton would look something like this:

The wide adoption of high definition 1080p monitors, widescreen formats, and mobile devices has given designers a headache with the amount of technology that needs to be accounted for during the design phase. Traditionally, designers would come up with different sites for each device and screen size, then create a number of html pages depending on what platform the user is on. To cater to shifts in technology, a new design concept has emerged called “Responsive Web Design“. This concept isn’t a set of tools or a certain code platform, this design style is more a combination of rules to account for as many screen formats as possible within the same page.

Instead of imagining a web design in pixel dimensions, designers have to consider that no component of a page has a fixed width or height. A simple responsive design site uses percentages to create fluidity:

As screen sizes change, the responsive design layout will shrink or expand every object to fit the browser. This is the first step in responsive design, but by no means the last. Expanding a column to fit a 1080p monitor doesn’t pose many problems, however shrinking a navigation header to 10% of the height of a mobile browser may render the navigation completely unusable. To remedy this, responsive design relies on the @media tag introduced in CSS 2.1. In CSS3, this tag has been expanded to really give us some cool tools.

@media screen and (max-width: 600px){

}
@media screen and (min-width: 601px){

}

The CSS tag example above will apply any CSS within the brackets to browsers with a maximum width of 600 pixels. Any browser using more space than this will apply the second set of css. The power of the @media tag is in the ability to show/hide div layouts, manipulate text and image sizes, and even change the layout and orientation of the page depending on the user’s current browser size. The example below shows how four @media blocks can completely change the same elements within a page depending on the screen size. The content is the same, however elements such as images, fonts, columns, and buttons are all shifted to maximize screen real estate.

* For more great examples of responsive design, visit: http://mediaqueri.es/ 

Modern design relies heavily on the use of images. For a crisp design a high definition screen requires a high definition image adding to the overall download size of the page. For high speed internet connections, the image size isn’t much of an issue, but designers can’t assume a high speed connection for a mobile device. The @media tag handles image sizes too! When using the @media tag, only the images within that CSS will be loaded. For the example below, a mobile browser will download the tiny-header.jpg image but not the hd-header.jpg image. Alternatively, you could hide the .header-image all together using display:none; and the image won’t be downloaded to the browser at all!

@media screen and (max-width: 600px){

   .header-image{
background: url('images/tiny-header.jpg');}

}

@media screen and (min-width: 601px){

   .header-image{
background: url('images/hd-header.jpg');}

}

These are just a few of the tricks and tips available for responsive web design. Gone are the days where we could assume internet speeds and browser sizes. At Function1, we’ve had the opportunity to apply many new design practices that could also apply to your business. Contact us if you’re interested in learning more about how to use modern design practices in your website, content, or portal.

  1. avatar
    March 12, 2012

    Hey Jeremy, very cool stuff, thanks for the post.

    Here’s a link I found a while ago that has a nice demo: http://www.thismanslife.co.uk/projects/lab/responsiveillustration/

    Hope everything is going well!

Comments

Write a comment:

*

Your email address will not be published.

󰁓
󰀰 󰀩 󰀭 󰀎