RESPONSIVE DESIGN PROBLEM WITH THE TITLE?
Responsive Design
Jan 15, 2015
Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)
Esign has already a lot of experience in making websites in responsive design. One of our projects was the responsive website for Google and IAB-Belgium for their IAB ThinkMobile event.
You can always contact us at [email protected]
Esign - Get ahead on the web
www.esign.eu
Esign has already a lot of experience in making websites in responsive design. One of our projects was the responsive website for Google and IAB-Belgium for their IAB ThinkMobile event.
You can always contact us at [email protected]
Esign - Get ahead on the web
www.esign.eu
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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/
Related Documents
