Presentation for ASIS&T Tech BootCamp 2017. Recording => https://youtu.be/o9GTwOMQ3w0

1. Responsive Web Design
Joseph Labrecque - ASIS&T Tech BootCamp 2017

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
Lynda.com
LinkedIn Learning
Pluralsight
Peachpit Press
Apress
Adobe Learn
ACATestPrep
Packt Publishing
O’Reilly Media

3. RWD Basics

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. 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. CSS Layout Methods
Liquid Layout
CSS Floats + Positioning
CSS Flexbox Layout
CSS Grid Layout
https://css-tricks.com/snippets/css/complete-guide-grid/

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)
● http://getbootstrap.com/
Zurb Foundation
“The most advanced responsive
front-end framework in the world.”
● Foundation 6
● http://foundation.zurb.com/

8. Creative Tooling!

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. 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. 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. 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. Live Demos

15. Responsive Design
Beyond the Web

16. 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

17. 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

18. 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)

19. In Closing...

20. Joseph’s Publications
An assortment of books, articles, professional journals, video publications…
and more...

21. http://nvite.co/rmcad
ROCKY MOUNTAIN COLLEGE OF ART + DESIGN
#CREATIVEJAM
THURS FEB 16 @ 7PM

22. @JosephLabrecque
Joseph.Labrecque@du.edu
http://josephlabrecque.com
Thank You!