Responsive Web Design

 

If you see this in an iFrame, check out
kdurrani.co.uk/responsive

 

 

Katja Durrani   @kdurrani   13 May 2013

Elements of Responsive Design

Ethan Marcotte, A List Apart — May 2010

ALA

 

Elements of Responsive Design

Responsive Web Design — May 2013

 

Aims of Responsive Design

What do we want to achieve?

 

Responsive Design — Responding Fast

Elements of Responsive Design

Viewport Metatag

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

Elements of Responsive Design

Media Queries

Elements of Responsive Design

Tackling different screen densities

Elements of Responsive Design

Responsive (bitmap) Images

Proposal in 2010 article:     img{max-width: 100%}

Problems: Mobile might receive much larger file than necessary; browser needs reflow/repaint

Alternatives? Just a few.. and are they?

Elements of Responsive Design

Further things to keep in mind

Responsive Layouts

Different types of grids

 

Responsive Layouts

A difference between ems and px

This is only possible if the container max-width is set in ems - no media queries involved

  

 

Responsive Layouts

Anatomy of a fluid grid framework


.col {float: left; margin-left: 1.6%}
.col:first-child{margin-left: 0}
.span_3_of_5 { width: 59.36%; }
.group{.clearfix;}

 

Responsive Layouts

Anatomy of a fluid grid framework (2)

The :nth-child css rule can turn an 8 column row into a 4 column row

.span_1_of_8:nth-child(4n+1) {
clear: both; margin-left: 0;
}

Responsive Layouts

Design patterns

Responsive Layouts

Write modular CSS!

 

 

 

 

 

 

Responsive Layouts

Claudia Pilsl website Holistic Community website Find a Therapist website Matin Durrani website

Thank you!

 

 

Katja
@kdurrani — mail@kdurrani.co.uk