Responsive Web Design

Responsive Web DesignJoseph Labrecque - ASIS&T Tech BootCamp 2017

Joseph LabrecqueSenior 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 CommitterApache Software Foundation

Author Lynda.com LinkedIn LearningPluralsight Peachpit PressApress Adobe Learn ACATestPrep Packt Publishing O’Reilly Media

RWD Basics

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

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...widthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolutionscangrid

CSS Layout MethodsLiquid Layout

CSS Floats + Positioning

CSS Flexbox Layout

CSS Grid Layout

https://css-tricks.com/snippets/css/complete-guide-grid/

Responsive FrameworksTwitter 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/

Creative Tooling!

Web Browser Dev ToolsGoogle Chrome, Mozilla Firefox, and Microsoft Edge all have some pretty robust developer tooling built in.

Many have tooling specific to responsive web design.

Adobe Edge Suite?“Edge Reflow, Edge Inspect, and Edge Animate are no longer being actively developed.” - Adobe (Nov. 2015)

Edge ReflowResponsive design visual prototyping application.

Edge InspectPreview responsive design work on mobile devices.

Edge AnimateAnimation and interactivity in the DOM.

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

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

Live Demos

Responsive DesignBeyond the Web

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

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

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)

In Closing...

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

http://nvite.co/rmcad

ROCKY MOUNTAIN COLLEGE OF ART + DESIGN

#CREATIVEJAMTHURS FEB 16 @ 7PM

@JosephLabrecque

Joseph.Labrecque@du.edu

http://josephlabrecque.com

Thank You!