Responsive Web Design
An Introduction
Who Am I?
Jonas Auken
Dane living in Delhi
Architect
Techie
Curious
Bankdata
Current job
Software for banks
E.g. Jyske Bank
- 3rd largest bank
in Denmark
Screen Resolutions
The old solution
www.thehindu.com
m.thehindu.com
Mobile Matters
The Basics
@media screen and
(min-width:500px) {
... }

@media screen and (max-width: 320px) {
.employee-shelf ul {
left: ...
Advanced Content
Employee Shelf http://www.jyskebank.
dk/wps/portal/jfo/kontakt/afdelingsinfo?departmentid=12140

Menu & S...
Beyond Content
Loan Calculator
http://www.jyskebank.dk/wps/portal/jfo/produkter/laan/regnlaan

Currency Calculator
http://...
Links
Wikipedia - http://en.wikipedia.org/wiki/Responsive_web_design
Examples - http://designmodo.com/responsive-design-ex...
Upcoming SlideShare
Loading in …5
×

Responsive Web Design

456 views
348 views

Published on

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.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
456
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Web Design

  1. 1. Responsive Web Design An Introduction
  2. 2. Who Am I? Jonas Auken Dane living in Delhi Architect Techie Curious
  3. 3. Bankdata Current job Software for banks E.g. Jyske Bank - 3rd largest bank in Denmark
  4. 4. Screen Resolutions
  5. 5. The old solution www.thehindu.com m.thehindu.com
  6. 6. Mobile Matters
  7. 7. 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 } }
  8. 8. Advanced Content Employee Shelf http://www.jyskebank. dk/wps/portal/jfo/kontakt/afdelingsinfo?departmentid=12140 Menu & Site Map http://www.jyskebank.dk/wps/portal/jfo/forside Tables http://www.jyskebank.dk/wps/portal/jfo/finansnyt/aktieanbefalinger Graphs http://jyskeinvest.dk/afdelingerogkurser/afdelingoverblik/afdelinghistoriskeafkast?portfolioId=5
  9. 9. Beyond Content Loan Calculator http://www.jyskebank.dk/wps/portal/jfo/produkter/laan/regnlaan Currency Calculator http://www.jyskebank.dk/valuta
  10. 10. Links Wikipedia - 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

×