responsive web design
DESCRIPTION
The goal for responsive web design is two fold: Firstly it supports one solution across all browser platforms thus enhancing reuse of both frontend and backend components. Secondly it gives the customer a fresh approach to web design: mobile first. The practice of responsive web design is easy to understand but difficult to master. This presentation will give a real life use case showing both sides of the story.TRANSCRIPT
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