responsive web design

Responsive Web DesignAn Introduction

Who Am I?Jonas Auken

Dane living in Delhi

ArchitectTechieCurious

BankdataCurrent jobSoftware for banksE.g. Jyske Bank - 3rd largest bankin Denmark

Screen Resolutions

The old solutionwww.thehindu.comm.thehindu.com

Mobile Matters

The Basics@media screen and (min-width:500px) { ... }

@media screen and (max-width: 320px) {.employee-shelf ul { left: 20px }.employee-shelf ul li { margin-right: -14px }.employee-shelf.vase li { margin-right: -20px }

}@media screen and (min-width: 321px) and (max-width: 480px) {

.employee-shelf ul { left: 32px }

.employee-shelf ul li { margin-right: -9px }

.employee-shelf.vase li { margin-right: -16px }}@media screen and (min-width: 600px) {

.employee-shelf.havkat ul { background: url('../../images/jyskebank/sections/kontakt/shelf/decoration.png?1349088513')

right bottom no-repeat;padding-right: 222px

}.employee-shelf.vase ul { ...

padding-right: 190px}.employee-shelf.tavle ul { ...

padding-right: 255px}

}

Advanced ContentEmployee Shelf http://www.jyskebank.dk/wps/portal/jfo/kontakt/afdelingsinfo?departmentid=12140

Menu & Site Maphttp://www.jyskebank.dk/wps/portal/jfo/forside

Tableshttp://www.jyskebank.dk/wps/portal/jfo/finansnyt/aktieanbefalinger

Graphshttp://jyskeinvest.dk/afdelingerogkurser/afdelingoverblik/afdelinghistoriskeafkast?portfolioId=5

Beyond ContentLoan Calculator

http://www.jyskebank.dk/wps/portal/jfo/produkter/laan/regnlaan

Currency Calculatorhttp://www.jyskebank.dk/valuta

LinksWikipedia - http://en.wikipedia.org/wiki/Responsive_web_design

Examples - http://designmodo.com/responsive-design-examples/

UX Expert - http://clausstadel.com/

Jyske Bank - http://www.jyskebank.dk

@media - http://www.w3schools.com/css/css_mediatypes.asp

media queries - http://www.w3.org/TR/css3-mediaqueries/

http://en.wikipedia.org/wiki/Media_queries