developing for responsive design - frederic welterlin
Post on 31-Oct-2014
9 Views
Preview:
DESCRIPTION
TRANSCRIPT
Developing for Responsive DesignFrederic WelterlinSenior Presentation Layer Architect
San Francisco
Agenda
• What is Responsive Design?– How did we get here? – Why should we care?
• Crafting a Responsive User Experience– The Flexible Grid– Flexible Media– Media Queries
• When is Responsive Design Warranted?– Yes! and… Not Really– Ford Motor Company Example– Airline Industry Example
• Conclusions– Some Thoughts– What is Responsive Design?– Thanks
How did we get here?What is Responsive Design?
“We should work toward a universal linked information system, in which generality and portability are more important than fancy graphics techniques and complex extra facilities.”
Tim Berners-Lee original WWW proposal.(http://www.w3.org/History/1989/proposal.html)
“…balancing the needs of designers for a sophisticated set of presentation and interactive features against the desire to make the Web accessible to the largest possible number of browsers (and other client devices) and environments.” © 1998-2001 Web Standards Project(http://archive.webstandards.org/mission.html)
So the question is…
San Francisco MUNIFriday, June 8, 2012
The Players
RESPONSIVE DESIGN
“is a web development approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.”
- Kayla Knighthttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Why should we care?
Crafting a Responsive User Experience
The Birth of Responsive Design
Responsive Web DesignEthan Marcotte
The term “Responsive Design” was first introduced in Ethan’s A List Apart article:
http://www.alistapart.com/articles/responsive-web-design/
Subsequently, he wrote:
The Flexible Grid
The Flexible Grid
The Flexible Grid
Gridpackhttp://gridpak.com/
FRAMELESShttp://framelessgrid.com/
960 Grid Systemhttp://960.gs/
There are so many…..http://www.awwwards.com/grid-based-web-design-resources.html
Other Tools, like CSS Preprocessors (LESS, SASS, Stylus)
SASS (syntactically awesome style sheets)Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows.http://sass-lang.com/
Extends CSS with dynamic behavior…
- Variables- Nesting- Mixins- Operations- Selector Inheritance- Etc
Examples “borrowed” directly from SASS web siteVariables Nesting$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { margin: $margin / 2; border-color: $blue; }
.content-navigation { border-color: #3bbfce; color: #2b9eab;}.border { margin: 8px; border-color: #3bbfce;}
table.foo { margin: 2em; td.bar { text-align: right; }}
table.foo { margin: 2em;}
table.foo td.bar { text-align: right;}
Flexible Media
img, embed, object, video {max-width:100%;
}
Media Queries
@media screen and (max-width: 480px) {.foo {
float: left;}.bar {
margin: 0;border: 4px solid #666;
}}
CSS3 Media Queries expands on the role of the traditional CSS2 “media” attribute with specific parameters that control how your styles are applied for various devices.
Media Queries
@media screen and (min-width: 320px) { insert CSS for SmartPhone portrait… }
@media screen and (min-width: 480px) { insert CSS for SmartPhone landscape… }
@media screen and (min-width: 768px) { insert CSS for iPad portrait… }
@media screen and (min-width: 1024px) { insert CSS for iPad landscape… }
@media screen and (min-width: 1200px) { insert CSS for desktop… }
(disclaimer: these measurements are simplified for illustrative purposes :-)
Media Queries
So… who is this guy??
Media Queries
http://www.thismanslife.co.uk/projects/lab/responsiveillustration/James Mellers
When is Responsive Design Warranted?
When is Responsive Design Warranted?
• YES!– Content focused sites: information travels in one
direction, from source to user…»Newspapers»Magazines
• Not Really…–Transactional sites: complex applications that utilize
workflows and user input…»Banking Applications»Airline Ticketing
Yes!
The business advantages of using Responsive Design…• One code base (less maintenance, saves money)• Device agnostic• Improved SEO• Possibility of using “mobile first” approach
Ford - Support Site (http://support.ford.com/)
Not really…
The business disadvantages of using Responsive Design…• Does not address differing user needs between
device usage• Performance (un-needed markup is still being
sent)• Pixel perfect expectations are shattered• Need to support legacy (non HTML5/CSS3)
devices
Device: DesktopGoal: Research Trip to NCTask: Find/Review Flight
www.united.com
Dates, Options, Connections
Device: DesktopGoal: Research Trip to NCTask: Get Mileage Balance
www.united.com
Review Status Upgrade
Device: DesktopGoal: Research Trip to NCTask: Sign-Up for Credit Card?
www.united.com
Device: DesktopGoal: Research Trip to NCTask: Review Deals and
www.united.com
Vacation Packages
Device: SmartPhoneGoal: Travel to New York CityTask: Go to Mobile Site
mobile.united.com
Device: SmartPhoneGoal: Travel to New York CityTask: Get Flight Status
mobile.united.com
Device: SmartPhoneGoal: Travel to New York CityTask: Check In, get Mobile Boarding
mobile.united.com
Pass
Device: SmartPhoneGoal: Travel to New York CityTask: Review Itinerary
mobile.united.com
Yeah… but Fred, isn’t what you just showed an example of being “responsive?”
Conclusions
Some Thoughts…
• “Responsive design” is a marketing term, and should be used with caution.
• Razorfish tailors technology solutions around user experience and business needs (and not the other way around).
• Responsive design is still in its infancy. Future visionaries and architects will continue to iterate on the “one code base” concept. Responsive architecture?
RESPONSIVE DESIGN
is a web development approach that suggests that design and development should respond to the user’s business or task oriented needs, in conjunction with device usage.
- Fred Welterlin
Thank You
• Thanks and respect to the following individuals…
– James Walton and Michael Calfee (Razorfish, Austin, TX) – Ralph Brandi (Razorfish, New York, NY)
– Ethan Marcotte (author, “Responsive Design”)– Ray Velez/Chris Stetson (Razorfish executive sponsors of this presentation)
top related