Responsive Web Design Joseph Labrecque - ASIS&T Tech BootCamp 2017
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