responsive web design using zurb foundation
TRANSCRIPT
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