Responsive Web Designusing ZURB Foundation 5

by Chris Morrow

THE PLANWhat is Responsive Web Design?Responsive Design: Pros and ConsFrameworksDownload/Setup of FoundationUI Dev ToolsUsing Foundation 5

WHAT ISRESPONSIVE WEB DESIGN?

RWD is creating a website that dynamically changes a.k.a"responds" to all viewport sizes, device orientations, anddevice resolutions.Ethan Marcotte: three tenets of RWD are a fluid grid,flexible media, and media queries.

PROS & CONSResponsive vs Adaptive vs Mobile vs App

ADAPTIVE

liquidapsive.com (http://www.liquidapsive.com/)

RESPONSIVEPros:

One Site to maintainSEO FriendlyLower Cost to Build and Maintain

Cons:More Complex CodeBad PerformanceBad Perfomance: false, for the most part

OK GOOGLE!AWD vs RWD vs ___

AWD: All Wheel Drive

RWD: Rear Wheel Drive

FWD: Front Wheel Drive

DEV ACRONONYMSAWD: Adaptive Web DesignAWD: Adaptive Web DeliveryRWD: Responsive Web DesignSWD: Situational Web DesignWTF: Insert New Approach Here

RWD: MISCONCEPTIONS

RWD Causes Poor Performance" Because the images on a responsive site are just

visually scaled down and not re-sized, smartphones and

tablets can notice a lag in loading speeds, especially

when being used on a mobile network "

When compared to maintaining a seperate mobilesite, responsive sites can be equal or lower in cost

"Responsive Design is Expensive"

<default Bootstrap styles>

"All responsive websiteslook the same"

"Anyone who embracesResponsive Web Design is stupid"

ZURB QUOTE"Friends don't let friends design in 960px"

FRAMEWORKS FOR FREE!!!How to Choose a Framework

How many have used a framework or library?Try it for yourself: make an informed decision withfirsthand knowledgeUnderstand how it works not just what it doesTake "it" apart, break it, then piece it together in "your"way

IS YOUR WORKFLOW SLOW?

UI DEV TOOLS

http://yeoman.io/ (http://yeoman.io/)

BENEFITS OF UI TOOLS?Grunt: run local serverGrunt: automationGrunt: livereloadYeoman: starter projectsBower: dependency management

CSS FRAMEWORKSWhich one to choose?Foundation vs Bootstrap vs Skeleton vs YAML 4 vs Gumbyvs Pure CSS vs Kube vs Columnal vs Toast vs 1140 Grid vs960 Grid System vs Gridiculo.usChoose what you like bestOnly use what you need

RWD USING FOUNDATION 5How to Setup ZF5The GridResponsive Images / MediaMedia QueriesBlock GridCustomizing / Settings

HOW TO SETUP ZF5http://foundation.zurb.com/develop/download.html

Download CSSManual SCSS DownloadUse A Task Runner (GRUNT/GULP/...)

THE GRIDRows and ColumnsCenteringNestingOrderingCustomizing the Grid

RESPONSIVE IMAGES / MEDIAImagesPictureFill 2.0VideoWelcome Interchange!

FOUNDATION 5: MEDIA QUERIESwidth/16px (base font size) = EMS

small: 0 - 640px (40em)medium: 641px - 1024px (40.063em - 64em)large: 1025px - 1440pxxlarge: 1441px - 1920pxxxlarge: 1921px+

FOUNDATION 5: CUSTOMIZINGUnderstanding the SetupSettingsJS ComponentsMake It Your Own

RESPONSIVE TESTING TOOLS?Chrome Device Emulation (in dev tools)Firefox (Responsive View)iOS Simulator (Mac only)Adobe Edge Inspect:https://creative.adobe.com/products/inspectGhostLab: (mac only) http://vanamco.com/ghostlab/BrowserStack: http://www.browserstack.com/

RESOURCES & LINKSTools

NodeJS: https://nodejs.org/Yeoman: http://yeoman.io/Grunt: http://gruntjs.com/Bower: http://bower.io/

Zurb RelatedFoundation: http://foundation.zurb.com/Kitchen Sink: http://foundation.zurb.com/docs/components/kitchen_sink.htmlBuilding Blocks (code samples): http://zurb.com/building-blocks

THANKS FOR COMING!