Responsive Web Design
-
Upload
jonas-auken -
Category
Technology
-
view
382 -
download
2
description
Transcript of Responsive Web Design
![Page 1: Responsive Web Design](https://reader034.fdocuments.us/reader034/viewer/2022051816/544f21a2af79596a6a8b4a72/html5/thumbnails/1.jpg)
Responsive Web DesignAn Introduction
![Page 2: Responsive Web Design](https://reader034.fdocuments.us/reader034/viewer/2022051816/544f21a2af79596a6a8b4a72/html5/thumbnails/2.jpg)
Who Am I?Jonas Auken
Dane living in Delhi
ArchitectTechieCurious
![Page 3: Responsive Web Design](https://reader034.fdocuments.us/reader034/viewer/2022051816/544f21a2af79596a6a8b4a72/html5/thumbnails/3.jpg)
BankdataCurrent jobSoftware for banksE.g. Jyske Bank - 3rd largest bankin Denmark
![Page 4: Responsive Web Design](https://reader034.fdocuments.us/reader034/viewer/2022051816/544f21a2af79596a6a8b4a72/html5/thumbnails/4.jpg)
Screen Resolutions
![Page 5: Responsive Web Design](https://reader034.fdocuments.us/reader034/viewer/2022051816/544f21a2af79596a6a8b4a72/html5/thumbnails/5.jpg)
The old solutionwww.thehindu.comm.thehindu.com
![Page 6: Responsive Web Design](https://reader034.fdocuments.us/reader034/viewer/2022051816/544f21a2af79596a6a8b4a72/html5/thumbnails/6.jpg)
Mobile Matters
![Page 7: Responsive Web Design](https://reader034.fdocuments.us/reader034/viewer/2022051816/544f21a2af79596a6a8b4a72/html5/thumbnails/7.jpg)
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}
}
![Page 8: Responsive Web Design](https://reader034.fdocuments.us/reader034/viewer/2022051816/544f21a2af79596a6a8b4a72/html5/thumbnails/8.jpg)
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
![Page 9: Responsive Web Design](https://reader034.fdocuments.us/reader034/viewer/2022051816/544f21a2af79596a6a8b4a72/html5/thumbnails/9.jpg)
Beyond ContentLoan Calculator
http://www.jyskebank.dk/wps/portal/jfo/produkter/laan/regnlaan
Currency Calculatorhttp://www.jyskebank.dk/valuta
![Page 10: Responsive Web Design](https://reader034.fdocuments.us/reader034/viewer/2022051816/544f21a2af79596a6a8b4a72/html5/thumbnails/10.jpg)
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