• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)
 

Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong)

on

  • 8,165 views

A primer on responsive design, various aspects on this technique, various examples, challenges and best practices in form of a case study of a past project as well as considerations and lessons ...

A primer on responsive design, various aspects on this technique, various examples, challenges and best practices in form of a case study of a past project as well as considerations and lessons learned.

Statistics

Views

Total Views
8,165
Views on SlideShare
7,376
Embed Views
789

Actions

Likes
19
Downloads
0
Comments
0

13 Embeds 789

http://www.startupshk.com 379
http://www.iphone-entreprise.com 105
http://ionander.com 77
http://startupshk.foundry8.com 66
https://mycourses.tstc.edu 64
http://kev.hkbeta.com 38
http://localhost 37
https://twitter.com 12
http://www.spundge.com 4
http://lanyrd.com 4
http://twitter.com 1
https://si0.twimg.com 1
http://pinterest.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Responsive Web Design & Workflows for Todays Web (THE UX-MEN at The Hive, Hong Kong) Presentation Transcript

    • Holger Bartel @foobartelh@foobartel.com
    • Responsive Web Design & Workflows for Todays Web
    • What I’ll Talk About Today★ A Primer on RWD★ RWD IRL - A Case Study★ RWD Workflow★ Conclusions & Lessons Learned
    • Perception & Status Quo
    • “We don’t need a mobile site”
    • bradfrostweb.com
    • bradfrostweb.com
    • bradfrostweb.com
    • New Devices Since 09/124"-5" Smartphones 9"-10" TabletsApple iPhone 5 (4" Apple iOS 6.0) iPad Gen 4 (9.7" Apple iOS 6.0)Nokia Lumia 920 (4.5" Microsoft Windows 8) Microsoft Surface Tablet (10.6" Microsoft Windows 8)HTC Windows Phone 8X (4.3" Microsoft Windows 8) Kindle Fire HD (8.9" Google Android 4.0 modified)HTC Windows Phone 8S (4.0" Microsoft Windows 8) Lenovo ThinkPad Tablet 2 (10.1" Microsoft Windows 8)Motorola Droid RAZR HD (4.7" Google Android 4.0) Acer Iconia Tab W510 (10.1" Microsoft Windows 8)Motorola Droid RAZR M (4.3" Google Android 4.0) Dell Latitude 10 (10.1" Microsoft Windows 8)Google/LG Nexus 4 (4.7" Google Android 4.2) Dell XPS 10 (10.1" Microsoft Windows 8) Asus Vivo Tab RT (10.1" Microsoft Windows 8)5"-6" Phone/Tablet Hybrids Google/LG Nexus 10 (10.055” Google Android 4.2)Samsung Galaxy Note II (5.5" Google Android 4.0) 11"-17" Laptops & Convertibles (Tablet/Laptop)7"-8" Tablets 13" MacBook Pro with Retina (13" Apple OSX 10.8)iPad Mini (7.9" Apple iOS 6.0) Lenovo IdeaPad Yoga 13 (13.3" Microsoft Windows 8)Kindle Fire HD (7" Google Android 4.0 modified) Lenovo ThinkPad Twist (12.5" Microsoft Windows 8)Kindle Fire (7" Google Android 4.0 modified) Toshiba Satellite U925T (12.5" Microsoft Windows 8)Google/LG Nexus 7 (7" Google Android 4.2) Dell XPS 12 (12.5" Microsoft Windows 8) Lenovo IdeaTab Lynx (11.6" Microsoft Windows 8)20"-30" Desktops Samsung ATIV Smart PC 500T/700T (11.6" Microsoft Windows 8)Sony Tap 20 (20" touch screen Microsoft Windows 8) Acer Iconia W700 (11.6" Microsoft Windows 8)21.5-inch iMac (21.5" Apple OSX 10.8) Sony Vaio Duo 11 (11.6" Microsoft Windows 8)27-inch iMac (27" Apple OSX 10.8) Samsung Chromebook (11.6" Google Chrome OS) http://www.lukew.com/ff/entry.asp?1646
    • “ It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this. – John Allsopp http://www.alistapart.com/articles/dao/
    • What Is RWD?★ Fluid Grids★ Flexible Images★ Media Queries http://www.macrojuice.com/multimedia/responsive-web-design/
    • bradfrostweb.com
    • CSS3 Media Queries
    • Media Queries in HTML
    • Breakpoints★ basic.css★ 480.css★ 600.css (Tablets Portrait)★ 768.css★ 992.css (Desktop)
    • Make It Work In Your HTML Code In Your CSS Code
    • Browser Support http://caniuse.com/#feat=css-mediaqueries
    • Resources www.abookapart.com
    • “ Responsive design is not about mobile. Its not about tablets. Its not about desktops. Its about The Web. – Jeremy Keith (@adactio)
    • http://www.flickr.com/photos/58534808@N00/323527111/
    • Concept★ Responsive Design or Website + App?★ Requirements★ Usability und Performance★ Project Start: October 2011
    • Experimental Client + Established Trust =Happy Designer & Developer :)
    • “ By 2013, mobile phones will overtake PCs as the most common Web access device worldwide. – Gartner (13.01.2010)
    • Mobile Access★ 2010: ~3.300 (ca. 2,5%)★ 2011: ~8.800 (ca. 6%)★ 2012: ??
    • Content Strategy★ Content First!★ Simplify Structure, What’s Needed?★ Design With Final Content
    • Designing In The Browser★ Quick results & real testing★ Use advantages of HTML5/CSS3★ Prototyping extremely fast★ Easy Changes (Colors, Fontsize, etc.)★ Decide right in the browser
    • “ Using photoshop/fireworks for responsive design is like bringing a knife to a gunfight. – Andy Clarke (@malarkey)
    • The Common Workflow Content StrategyPlanning AndStrategy User Research Copy Wireframes Visual Lorem Ipsum Design Dev Lorem Ipsum Test Pon Kattera (@pkattera) - Design Process in the Responsive Age
    • The RWD ProcessUser Content Iterative Design & Development Prototype HandoverPlanner, UX Planner, UX, Visual, Tech UX, Visual, Tech UX, Visual Tech Test Prototype User Content Sketch RWD Research Strategy Prototype Visual Design Wireframe Pon Kattera (@pkattera) - Design Process in the Responsive Age
    • Frameworks
    • Foundation★ Responsive Grid★ Navigation & Form Elements★ Tabs, Buttons, Alerts, Labels, Tooltips★ Since Foundation 3: Sass/Compass
    • Prototypes & Design
    • The Waterfall Process Content StrategyPlanning AndStrategy User Research Copy Wireframes Visual Lorem Ipsum Design Dev Lorem Ipsum Test Pon Kattera (@pkattera) - Design Process in the Responsive Age
    • The RWD ProcessUser Content Iterative Design & Development Prototype HandoverPlanner, UX Planner, UX, Visual, Tech UX, Visual, Tech UX, Visual, Tech Test Prototype User Content Sketch RWD Research Strategy Prototype Visual Design Wireframe Pon Kattera (@pkattera) - Design Process in the Responsive Age
    • Frontend★ Rebuild Prototype?★ Produce valid & clean code★ Build Modules not pages★ Create re-usable Code
    • Into The Unknown★ Display Size & Resolution★ Different Browsers & -versions★ Different Device Capabilities★ Connection Speed, Bandwidth
    • A Website doesn’t have to look exactly the same on different devices!
    • Navigating The Site
    • Navigation for Mobile
    • Building Modules
    • www.flickr.com/photos/brad_frost/7387823392
    • Open Device Labs opendevicelab.com
    • Open Device Labs opendevicelab.hk
    • RWD Considerations
    • Responsive Images★ Avoid unnecessary data★ Same images for all devices★ When to use Retina images?★ <img> Tag isn’t ready yet★ Polyfills = Just a workaround
    • http://responsiveimagescg.github.com/picture-element/
    • http://responsiveimages.org/
    • The Picture Element
    • Server Side ImageProcessing - RESS
    • Alternatives http://css-tricks.com/which-responsive-images-solution-should-you-use/
    • Conclusions
    • Lessons Learned★ Do not rush, set timing generously (Content Strategy, RWD, Frontend, CMS)★ Mobile First - Content First Design
    • Seperate Layout & Design http://styletil.es/
    • Lessons Learned★ Do not rush, set timing generously (Content Strategy, RWD, Frontend, CMS)★ Mobile First - Content First Design★ Separate Layout & Design★ Use LESS/Sass & Compass
    • Important to Remember★ Test early and often★ Put your JavaScript at the bottom
    • Cost & Benefits
    • The Last 3 Years Year 2010 2011 2012 Mobile 3.300 9.000 20.400 (%) (2,5%) (6%) (14%) Jul-Aug 1.900 4.500 12.500 (%) (3,5%) (7.5%) (18%)
    • The fact is that responsive web designcosts more… than doing nothing. Sure, youcould continue building sites the oldfashioned way and ignore the multitude ofweb-enabled devices accessing the webnow and in the future. But this is 2012. Atthe very least a web experience shouldhave at least some mobile consideration,and at the very most a site should be full-on mobile optimized. http://bradfrostweb.com/blog/web/how-much-does-a-responsive-web-design-cost/
    • “ If you want to be relevant on the web today, your website must adapt and perform on all the devices that use the web. – Mobify
    • Thank You. Holger Bartel @foobartelh@foobartel.comCredits: @beckenhaub