Responsive Design
description
Transcript of Responsive Design
RESPONSIVE DESIGNPROBLEM WITH THE TITLE?
WEB USERS
Types of screens increasing
• Different dimensions• Different resolutions (retina)
More input controls
• Mouse + keyboard• Touch• Controllers (Playstation, Wii)
OPTIMIZE!
Mobiel web != web lite
How?
• Mobile website(s…)• Responsive design (single website)
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!!!
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.
FLUID GRIDS
Dimensions are relative to the container (=context)
In CSS, ems: target ÷ context = result
FLEXIBLE IMAGES• Scale (min / max)• Crop (background)• Use different images, eg header banners (portret vs
landscape)
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) {}
RESPONSIVE OR MOBILE WEBSITES?
• Target audience?• Mobile = better UX• Responsive = easier to maintain + SEO
• ROI?• Converting existing website (responsive)• Creating new mobile website
GUIDELINES MOBILE• simpler navigation• more focused content (phone, location,…)• lists or rows instead of multiple columns
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/