October 6, 2012 in Mobile Web Design, Responsive Web Design

Introduction to Responsive Web Design


Responsive Web Design is a phrase keyed by Ethan Marcotte in the book of the same title. Responsive Web Design is a technique used to address a specific problem; designing  a website that displays well across different devices.

People don’t just view websites on a desktop PC anymore, the explosion of smartphones and mobile devices like the iPhone, iPad and Android based phones have meant a significant shift in how people engage with the web.

The  problem that current ‘non-responsive’ websites have is that they are created for a desktop PC’s typical screen size, for instance: a large monitor with a screen size of 1280 x 1024. If you view these non-responsive websites on a phone with a screen size of 320px your experience will be terrible, even illegible.

Responsive Web Design

Responsive Web Design is a technique that enables a website to be displayed across any existing or future devices, regardless of screen size.

Responsive web design is made up of 3 core elements:

  1. Flexible, grid based layout
  2. Flexible Images
  3. Media Queries

Flexible, grid based layout

A flexible grid based layout means that the layout of the web page should be defined in a relative value. If you set a web page to be 90% width of the screen size then every device that views that web page would have a good reading experience.

#content{width: 90%;}

Traditionally ‘non-responsive’ websites have a set width, set in a fixed value. A fixed value of 900px (900 pixels) would display fine on a traditional desktop PC – which large screen size can easily accommodate 900 pixels, but a mobile device with a screen width of 320px the same layout would not read well.

Flexible layouts allow a website to respond device-independant.

Flexible Images

Flexible images would allow the imagery of your website to respond to the device width too. let’s say you have an image width of 600px, that’s great for a large monitor, but when viewed on a mobile device with a 320px width screen the image would overflow its containing element.

Big problem! so, we need a rule that prevents images from exceeding the width of their container element. Luckily there is such rule in CSS (Cascading style sheets) that will allow the image to stretch to 100% of it’s containing element;

img{max-width: 100%;}

A simple CSS solution to creating responsive images.

Media Queries

Media Queries allow us to design for different kinds of media, you have probably seen these used to create a print stylesheet for your web document.

The W3C (World Wide Web Consortium) who standardise web technologies have introduced a whole array of Media Queries to cope with our varied device landscape;

Media queries can identify types of media; Screen, Print Braille, but they can also importantly identity the physical characteristics of the viewing device, for instance the width of the screen.

The media queries can be housed inside the @media declaration inside our stylesheet:

@media screen and (min-width: 1024px) {
body{font-size: 100%;}
}

Every Media Query has two parts, in this example; a media type of Screen followed by the query itself of Min Width.

If a web browser reads this stylesheet it asks two conditional questions; does this belong to the Screen Media Type and is the browser viewport at least 1024px in width. If so, then load the CSS. If not, then do not load the CSS.

The takeaway from exploring the use of Media Queries is that you can conditionally load stylesheets depending on the browsers width.

Responsive Design Conclusion

Flexible grid based layouts and Fluid Images make our website respond to the width of our devices. Media Queries allow us to capture specific device features and hone our layouts and page elements.

Between these three technologies we finally have a way to design for current and future devices.

 


About Anthony

Anthony Brewitt is Design Bit, has been for years - he's an experienced WordPress Designer, and Muggle-born Marketing Philosopher. Let’s talk about your website; your marketing, blog design, and that cool new mobile web thingy. Contact Anthony

Leave a Reply