Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Design Techniques, Tools and Design Strategies with Paul Trani

1,106 views

Published on

Responsive design is all the rage right now, which has lead to some interesting approaches, frameworks, and tools. In this session Adobe Evangelist Paul Trani will review these approaches as well as showcase Edge Reflow—Adobe’s solution to responsive web design.

Published in: Business, Technology
  • Be the first to comment

Responsive Design Techniques, Tools and Design Strategies with Paul Trani

  1. 1. Responsive Design Techniques,Tools and Design StrategiesPiotr Walczyszyn | outof.me | @outof_me
  2. 2. @outof_meFacts0,511,522009 2010 2011 2012 2013 2014 2015BilionsofusersMobile DesktopSource: ComScore survey 2012
  3. 3. @outof_meFakty3.5 BILIONINTERNET CONNECTED DEVICES
  4. 4. @outof_meResponsive Web Design
  5. 5. @outof_meResponsive Web DesignEthanMarcotte
  6. 6. @outof_meMay 2010 June 2011Responsive Web Design
  7. 7. @outof_meResponsive Web DesignFlexible & FluidGridFlexibleImages &MediaMedia Queries
  8. 8. @outof_meExamples
  9. 9. @outof_meTechniques
  10. 10. @outof_meTechniquesDesktop Down vs. Mobile First
  11. 11. @outof_meTechniquesDesign First vs. Common Breakpoints
  12. 12. @outof_meTechniquesPX Media Queries vs. EM Media Queries
  13. 13. @outof_meTechniquesHorizontal & Vertical Media Queries
  14. 14. @outof_meTools
  15. 15. @outof_meEdge ReflowAdobe Edge Reflow
  16. 16. @outof_meResources‣Tools‣Reflow - http://html.adobe.com/edge/reflow/‣Responsive Inspector - http://outof.me/responsive-inspector/‣RWD Frameworks:‣Bootstrap http://twitter.github.io/bootstrap/‣Frameless http://framelessgrid.com/‣Responsive Grid System http://responsive.gs/‣Responsive Grid System http://www.responsivegridsystem.com/‣Skeleton http://www.getskeleton.com/‣Unsemantic http://unsemantic.com/‣Image libraries:‣hisrc https://github.com/teleject/hisrc‣Responsive Enhance https://github.com/joshje/Responsive-Enhance‣Spriteme http://spriteme.org

×