• Télécharger
Responsive Web Design - Introduction & Workflow Overview
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive Web Design - Introduction & Workflow Overview

on

  • 7,062 vues

Responsive Design's is a way of making a single website that works well on mobile, tablet, and desktop browsers. Back in 2010 Ethan Marcotte, first coined the term "responsive design" and described it ...

Responsive Design's is a way of making a single website that works well on mobile, tablet, and desktop browsers. Back in 2010 Ethan Marcotte, first coined the term "responsive design" and described it as having 3 components:

Flexible Images
Fluid Grids
CSS Media Queries

Well it seems Ethan let quite a few cats of out bag with this one, and we've been trying to herd those cats ever since.

What started as exclusively a front-end web design technique has expanded to include a whole new range of both front-end and server-side programming techniques. The real challenge came when we also suddenly discovered that tried and true practices for project management, and creative concept development all started to fall apart. It’s not practical to create photoshop mockups of ever page in a site at every device size - There’s simply too many variables to account for in graphic design software.

Responsive Design requires a new process for creating websites, and new ways of interacting with teams and clients.

This presentation will outline a birds-eye-view of Responsive Techniques, Strategies, Tools, and Gotchas of RWD. It will focus on some of the new workflow techniques needed and cover some suggestions for where to go to learn more.

Slide Summary

1-25: History of Responsive Design
26-50: Coding Basics (Developer Focused)
51-57: Progressive Enhancement
58-70: Mobile First
71-93: Responsive Workflows
96-99: Selling Responsive Design

Statistiques

Vues

Total des vues
7,062
Vues sur SlideShare
3,198
Vues externes
3,864

Actions

J'aime
8
Téléchargements
0
Commentaires
1

14 Ajouts 3,864

http://responsivedesign.ca 2127
http://www.scoop.it 1380
http://htmltoronto.ca 87
http://atthemoment.altervista.org 83
http://www.responsivedesign.ca 80
http://gallery.grazingcat.com 78
http://responsivedesign.local 21
http://webcache.googleusercontent.com 2
http://designercasecare.mirildatili.com 1
http://betterdesignercase.mirildatili.com 1
http://news.google.com 1
http://www.slashdocs.com 1
http://visual3d.tumblr.com 1
http://greendesignercase.mirildatili.com 1
Plus...

Accessibilité

Catégories

Détails de l'import

Uploaded via as Adobe PDF

Droits d'utilisation

© Tous droits réservés

Report content

Signalé comme inapproprié Signaler comme inapproprié
Signaler comme inapproprié

Indiquez la raison pour laquelle vous avez signalé cette présentation comme n'étant pas appropriée.

Annuler
  • Full Name Full Name Comment goes here.
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
    Processing...
  • Creator Shadow is the most professional and affordable web development & design company. World's best Intuitive web site interfaces and user-friendliness are the hallmark of our company.Responsive Web Design
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
    Processing...
Poster un commentaire
Modifier votre commentaire

Responsive Web Design - Introduction & Workflow Overview Presentation Transcript

  • 1. FOSTER INTERACTIVE Web Development + Design Discovery Design Production LaunchRESPONSIVEDESIGN.CA @finteractive (Drupal / Personal)Questions? Post to the linkedIn Group @responsivDesign (RWD Tips)http://linkedin.responsivedesign.ca
  • 2. I “borrowed” this whole sequence from Luke Wroblewskihttp://www.lukew.com/ff/entry.asp?1506
  • 3. 371 K 378KBabies born per day iPhones sold per day
  • 4. 378K iPhones sold per day 371 KBabies born per day
  • 5. 378K iPhones sold per day 562K iOS devices 371 KBabies born per day
  • 6. 378K iPhones sold per day 562K iOS devices 700K Android devices activated per day 371 KBabies born per day
  • 7. 378K iPhones sold per day 562K iOS devices 700K Android devices activated per day 371 K 200K Nokia smartphonesBabies born per day
  • 8. 378K iPhones sold per day 562K iOS devices 700K Android devices activated per day 371 K 200K Nokia smartphonesBabies born per day 143k Blackberry devices
  • 9. 1,983,000! Purchases / Activations of mobile Devices 371 KBabies born per day
  • 10. Sales on PaypalBlack Friday vs. 2010 IDC Predictions
  • 11. The Challenge / OpportunityImage Credit: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  • 12. Existing Mobile Solutions Make an App!
  • 13. Existing Mobile Solutions mobile website “m.website.com” “website.mobi”
  • 14. 2010 (SPRING)
  • 15. Ethan Marcotte’s Lab - (Artist’s impression)Let there be...Responsive Design
  • 16. http://www.alistapart.com/articles/responsive-web-design/
  • 17. 2011 (SEPTEMBER)
  • 18. Bostonglobe.com
  • 19. barakobama.com
  • 20. barakobama.com (redo)
  • 21. greygoose.com
  • 22. microsoft.com
  • 23. Before StartingResponsive Design
  • 24. USE(and HTML5shiv) http://www.flickr.com/photos/22290288@N03/
  • 25. Explore html5boilerplate.com
  • 26. HAVE http://sass-lang.com/
  • 27. FireBug +FireSass
  • 28. Navigate with http://compass-style.org
  • 29. Don’t Settle for
  • 30. ResponsiveDesign Basics
  • 31. Viewport Meta Tag
  • 32. BADUX
  • 33. #1 - Fluid Images#2 - Flexible Grids#3 - CSS3 Media Queries
  • 34. #1 - Fluid Images
  • 35. #2 - Flexible Grids
  • 36. Messy Grids use HTML markuphttp://foundation.zurb.com/docs/grid.php
  • 37. Messy Grids use HTML markup5 Classes! What’s Up with That?
  • 38. Good Grids put style in the CSS http://susy.oddbird.net/
  • 39. #3 - CSS3 Media Queries
  • 40. Media Query Basics - Breakpoint in css
  • 41. USE EMs for Breakpoints(They Scale with zooming)
  • 42. Breakpoint Mixin For Compasshttps://github.com/canarymason/breakpoint
  • 43. Responsive Web Designhttp://www.abookapart.com/products/ responsive-web-design
  • 44. Progressive Enhancement (aka Adaptive Design)
  • 45. Example: Menu Big Screen Small Screen
  • 46. Example: Menu Big Screen Small Screen
  • 47. Example: Touch
  • 48. Example: Location
  • 49. http://modernizr.com/
  • 50. http://filamentgroup.com/dwpe/http://easy-readers.net/books/adaptive-web-design/
  • 51. Mobile First (Content First)
  • 52. Mobile First - Design Strategyhttp://www.abookapart.com/products/mobile-first
  • 53. Streamlined Functions Mobile HAS to be Task BasedSimple to be USABLE Direct Messaging
  • 54. NO! We Must fit“Message From The Board” on the mobile Homepage!
  • 55. Who Benefits? - EveryoneImage Credit: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  • 56. Mobile First (Website Structure) DEFAULT STYLES
  • 57. @media (min-width: 25em)DEFAULT MEDIUM-ISH STYLES STYLES
  • 58. @media (min-width: 50em) LARGE STYLES
  • 59. Breakpoint Mixin For Compasshttps://github.com/canarymason/breakpoint
  • 60. (Generally) Put Media Queries in CSS not the HTML Header
  • 61. Same as always custom styles sheets (we tend to go fixed width)
  • 62. Responsive Design Workflow
  • 63. Conventional “Waterfall” Workflow Discovery Visual Design Coding Launch
  • 64. Device Breakpoints
  • 65. Desktop
  • 66. Tablets
  • 67. that just ONE page
  • 68. 5 Breakpoints x 5 Layouts(Home, Blog List, Article, Case Study, Resources)
  • 69. 5 Breakpoints x 5 Layouts(Home, Blog List, Article, Case Study, Resources) = 25 Files!
  • 70. 5 Breakpoints x 5 Layouts (Home, Blog List, Article, Case Study, Resources)= Crazy Maintenance
  • 71. Style Tiles - Design Systemshttp://iallenkelhet.no/2012/05/24/5-lessons-learned-from-a-mobile-first-responsive-design-process/
  • 72. DiscoveryVisual Design Coding Launch
  • 73. Natural Breakpoints
  • 74. Design the Extremes
  • 75. Prototype HTML Code Mobile First
  • 76. Stretch Until Ugly
  • 77. (Go Back a bit) Breakpoint!
  • 78. Repeat until you’re at your largest size
  • 79. Get Team’sFeedback on real devices
  • 80. Adobe Edge Inspect (formerly Adobe Shadow)
  • 81. 1-2 templates & repeat design / code cycle ReviewVisual Design Coding Launch
  • 82. I Wrote a book review on responsivedesign.cahttp://www.implementingresponsivedesign.com/
  • 83. FREE CHAPTER ON RESPONSIVE MEDIAhttp://www.implementingresponsivedesign.com/sample_chapter.pdf
  • 84. The Jargon• Responsive Design CSS & Media Queries to change layout• AdaptiveDesign /Progressive Enhancement Default Website Presents simplest Markup, JS & Other techniques layer on additional complexity• Mobile First Design & Structural Strategy for implementation
  • 85. Nav Patternshttp://bradfrostweb.com/blog/web/responsive-nav-patterns/http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/Layout Patternshttp://www.lukew.com/ff/entry.asp?1514
  • 86. Costs vs Desktop Only ~50% more
  • 87. Costs vs Mobile Alternatives
  • 88. ConclusionEstablish the Value of Mobile WebDemo Responsive DesignEstablish Credibility w/ Big SitesFirst out of the gate - Big AdvantageCompare $$$ to mobile Alternatives
  • 89. We are Looking for a Responsive Design Front End Designerhttp://fosterinteractive.com/job/designer
  • 90. Hey @HTML5_Toronto, I want to go to @FITCs Spotlight Responsive Design on Dec.1 in TO #HTML5TO DECEMBER 1http://www.fitc.ca/events/about/?event=140
  • 91. THANK YOU http://linkedin.responsivedesign.ca@finteractive (Drupal / Personal) @responsivDesign (RWD Tips)