Responsive Design
description
Transcript of Responsive Design
![Page 1: Responsive Design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b795164a79591d4a8b46cb/html5/thumbnails/1.jpg)
RESPONSIVE DESIGNPROBLEM WITH THE TITLE?
![Page 2: Responsive Design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b795164a79591d4a8b46cb/html5/thumbnails/2.jpg)
WEB USERS
Types of screens increasing
• Different dimensions• Different resolutions (retina)
More input controls
• Mouse + keyboard• Touch• Controllers (Playstation, Wii)
![Page 3: Responsive Design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b795164a79591d4a8b46cb/html5/thumbnails/3.jpg)
OPTIMIZE!
Mobiel web != web lite
How?
• Mobile website(s…)• Responsive design (single website)
![Page 4: Responsive Design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b795164a79591d4a8b46cb/html5/thumbnails/4.jpg)
![Page 5: Responsive Design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b795164a79591d4a8b46cb/html5/thumbnails/5.jpg)
MOBILE WEBSITE
Usually via detection + different URL:
m.esign.eu, m.phone, m.tablet,…
Caveat
• When to redirect?• Example: a mobile user shares on Facebook
• Does a desktop user sees the mobile version?• Example: a desktop user shares on Facebook
• Is the desktop version of that page available on the (simplified) mobile version
• Don’t redirect to home!
• Maintenance!!!
![Page 6: Responsive Design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b795164a79591d4a8b46cb/html5/thumbnails/6.jpg)
RESPONSIVE DESIGN
What?
• Layout responds to environment
How?
• Fluid grids• Flexible images• Media queries
Caveat
• Architectural + content (writing style) changes not easy• Overhead in terms of data
• Restrictions on design• Simply resizing images is not always adequate.
![Page 7: Responsive Design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b795164a79591d4a8b46cb/html5/thumbnails/7.jpg)
FLUID GRIDS
Dimensions are relative to the container (=context)
In CSS, ems: target ÷ context = result
![Page 8: Responsive Design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b795164a79591d4a8b46cb/html5/thumbnails/8.jpg)
FLEXIBLE IMAGES• Scale (min / max)• Crop (background)• Use different images, eg header banners (portret vs
landscape)
![Page 9: Responsive Design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b795164a79591d4a8b46cb/html5/thumbnails/9.jpg)
MEDIA QUERIES
What?
• CSS for specific screen dimensions (pixels) and/or resolution (dpi)
• Change layout (more / less columns)• Change look and feel (touch buttons, legible text)• Hide or show content
How?
• @media screen and (max-device-width: 480px) {}
![Page 10: Responsive Design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b795164a79591d4a8b46cb/html5/thumbnails/10.jpg)
RESPONSIVE OR MOBILE WEBSITES?
• Target audience?• Mobile = better UX• Responsive = easier to maintain + SEO
• ROI?• Converting existing website (responsive)• Creating new mobile website
![Page 11: Responsive Design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b795164a79591d4a8b46cb/html5/thumbnails/11.jpg)
GUIDELINES MOBILE• simpler navigation• more focused content (phone, location,…)• lists or rows instead of multiple columns
![Page 12: Responsive Design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b795164a79591d4a8b46cb/html5/thumbnails/12.jpg)
![Page 13: Responsive Design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b795164a79591d4a8b46cb/html5/thumbnails/13.jpg)
RESOURCES
Guidelines
http://www.howtogomo.com/en-gb/d/why-get-mo/#mobile-best-practices
Examples
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://artequalswork.com/
Navigation
http://bradfrostweb.com/blog/web/responsive-nav-patterns/