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 Web Design


Published on

Presentation for ASIS&T Tech BootCamp 2017.

Recording =>

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Responsive Web Design

  1. 1. Responsive Web Design Joseph Labrecque - ASIS&T Tech BootCamp 2017
  2. 2. Joseph Labrecque Senior Interactive Software Engineer University of Denver Principal and Sole Proprietor Fractured Vision Media, LLC Adobe Education Leader Adobe Community Professional Adobe Systems, Inc. Apache Flex Committer Apache Software Foundation Author LinkedIn Learning Pluralsight Peachpit Press Apress Adobe Learn ACATestPrep Packt Publishing O’Reilly Media
  3. 3. RWD Basics
  4. 4. What is Responsive Web Design? “Responsive web design (RWD) is an approach to web design aimed at allowing desktop webpages to be viewed in response to the size of the screen or web browser one is viewing with.” - Wikipedia Important points: ● CSS Media Queries ● Fluid Grids ● Flexible Media
  5. 5. CSS Media Queries “Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution.” - Wikipedia @media (max-width: 600px) { .hidden-small { display: none; } } Media Features... width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid
  6. 6. CSS Layout Methods Liquid Layout CSS Floats + Positioning CSS Flexbox Layout CSS Grid Layout
  7. 7. Responsive Frameworks Twitter Bootstrap “Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.” ● Bootstrap 3 ● Bootstrap 4 (alpha) ● Zurb Foundation “The most advanced responsive front-end framework in the world.” ● Foundation 6 ●
  8. 8. Creative Tooling!
  9. 9. Web Browser Dev Tools Google Chrome, Mozilla Firefox, and Microsoft Edge all have some pretty robust developer tooling built in. Many have tooling specific to responsive web design.
  10. 10. Adobe Edge Suite? “Edge Reflow, Edge Inspect, and Edge Animate are no longer being actively developed.” - Adobe (Nov. 2015) Edge Reflow Responsive design visual prototyping application. Edge Inspect Preview responsive design work on mobile devices. Edge Animate Animation and interactivity in the DOM.
  11. 11. Dreamweaver CC 2017 “Dreamweaver CC has been reimagined with a modern interface and a fast, flexible coding engine to give web designers and front-end developers easier ways to create, code, and manage websites that look amazing on any size screen.” - Adobe
  12. 12. Animate CC 2017 “Design interactive animations with cutting-edge drawing tools and publish them to multiple platforms — including Flash/Adobe AIR, HTML5 Canvas, WebGL, or even custom platforms — and reach viewers on broadcast TV or virtually any desktop or mobile device.” - Adobe
  13. 13. Live Demos
  14. 14. Responsive Design Beyond the Web
  15. 15. Apache Cordova “Cordova wraps your HTML/JavaScript app into a native container which can access the device functions of several platforms.” - Apache ● Mobile apps with HTML, CSS & JS ● Target multiple platforms with one code base ● Free and open source
  16. 16. Apache Flex “FlexJS is a new application development framework that cross compiles MXML and ActionScript into HTML and JavaScript. It brings the advantages of Flex to the JavaScript world.” - Apache ● Flash Player and AIR ● HTML, CSS, and JavaScript ● All from the same source code! ● Free and open source
  17. 17. Adobe AIR “The Adobe AIR runtime enables developers to package the same code into native applications and games for Windows and Mac OS desktops as well as iOS and Android devices, reaching over a billion desktop systems and mobile app stores for over 500 million devices.” - Adobe ● Apache Flex ● Pure ActionScript ● ANE (native extensions)
  18. 18. In Closing...
  19. 19. Joseph’s Publications An assortment of books, articles, professional journals, video publications… and more...
  21. 21. @JosephLabrecque Thank You!