Responsive Web Design using ZURB Foundation

Responsive Web Designusing ZURB Foundation 5

by Chris Morrow

THE PLANWhat is Responsive Web Design?Responsive vs Adaptive vs Mobile vs AppUI Dev ToolsFrameworksRWD: Using Foundation 5

REMEMBER THIS?

NOW WE HAVEAWD vs RWD vs ___

AWD: All Wheel Drive

RWD: Rear Wheel Drive

FWD: Front Wheel Drive

NOW WE REALLY HAVEAWD: Adaptive Web DesignAWD: Adaptive Web DeliveryRWD: Responsive Web DesignSWD: Situational Web Design

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/)

MOBILEPros:

Simpler CodeBetter PerformanceMore Cost-effective than Building aNative App

Cons:Have to maintain two sitesNot as SEO Friendly as ResponsiveStill needs to be Responsive

APPPros:

Better User Experience(mobile-first-only)

Native UIMore features (camera, contacts, etc)

Cons:More Time and Money(App Store review anyone?)

Have to maintain app and websiteMay be deletedStill needs to be Responsive

RESPONSIVEPros:

One Site to maintainSEO FriendlyLower Cost to Build and Maintain

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

RWD: MISCONCEPTIONS

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

visually scaled down and not re-sized, smartphones andtablets 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"

UI DEV TOOLS

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

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

Q & AHow 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

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 5The GridResponsive Images / MediaMedia QueriesCustomizing / Settings

THE GRIDRows and ColumnsCenteringNestingOrderingCustomizing the Grid

RESPONSIVE IMAGES / MEDIAImagesPictureFill 2.0VideoWelcome Interchange!

FOUNDATION 5: MEDIA QUERIESsmall: 0 - 640pxmedium: 641px - 1024pxlarge: 1025px - 1440pxxlarge: 1441px - 1920pxxxlarge: 1921px+

FOUNDATION 5: CUSTOMIZINGUnderstanding the SetupSettingsComponentsMake It Your Own

RWD TESTING TOOLS?Google Chrome (Emulation)Firefox (Responsive View)iOS Simulator (Mac only)BrowserstackYour Own Real DevicesGhostLab (Mac Only)Adobe Edge Inspect

THE ENDLINKSZURB:http://foundation.zurb.com/http://foundation.zurb.com/docs/sass.htmlhttp://patterntap.com/codehttp://zurb.com/playground

TOOLS:http://yeoman.io/learning/http://gruntjs.com/http://bower.io/http://nodejs.org/

RWDhttp://www.liquidapsive.com/http://alistapart.com/article/creating-intrinsic-ratios-for-video