Responsive Web Design using the Foundation 5 CSS Framework
-
Upload
chris-morrow -
Category
Internet
-
view
566 -
download
0
Transcript of Responsive Web Design using the Foundation 5 CSS Framework
![Page 1: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/1.jpg)
Responsive Web Designusing ZURB Foundation 5
by Chris Morrow
![Page 2: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/2.jpg)
THE PLANWhat is Responsive Web Design?Responsive Design: Pros and ConsFrameworksDownload/Setup of FoundationUI Dev ToolsUsing Foundation 5
![Page 3: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/3.jpg)
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.
![Page 4: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/4.jpg)
PROS & CONSResponsive vs Adaptive vs Mobile vs App
![Page 5: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/5.jpg)
ADAPTIVE
liquidapsive.com (http://www.liquidapsive.com/)
![Page 6: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/6.jpg)
RESPONSIVEPros:
One Site to maintainSEO FriendlyLower Cost to Build and Maintain
Cons:More Complex CodeBad PerformanceBad Perfomance: false, for the most part
![Page 7: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/7.jpg)
OK GOOGLE!AWD vs RWD vs ___
AWD: All Wheel Drive
RWD: Rear Wheel Drive
FWD: Front Wheel Drive
![Page 8: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/8.jpg)
DEV ACRONONYMSAWD: Adaptive Web DesignAWD: Adaptive Web DeliveryRWD: Responsive Web DesignSWD: Situational Web DesignWTF: Insert New Approach Here
![Page 9: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/9.jpg)
RWD: MISCONCEPTIONS
![Page 10: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/10.jpg)
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 "
![Page 11: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/11.jpg)
When compared to maintaining a seperate mobilesite, responsive sites can be equal or lower in cost
"Responsive Design is Expensive"
![Page 12: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/12.jpg)
<default Bootstrap styles>
"All responsive websiteslook the same"
![Page 13: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/13.jpg)
"Anyone who embracesResponsive Web Design is stupid"
![Page 14: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/14.jpg)
![Page 15: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/15.jpg)
ZURB QUOTE"Friends don't let friends design in 960px"
![Page 16: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/16.jpg)
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
![Page 17: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/17.jpg)
IS YOUR WORKFLOW SLOW?
![Page 18: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/18.jpg)
UI DEV TOOLS
![Page 19: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/19.jpg)
http://yeoman.io/ (http://yeoman.io/)
![Page 20: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/20.jpg)
BENEFITS OF UI TOOLS?Grunt: run local serverGrunt: automationGrunt: livereloadYeoman: starter projectsBower: dependency management
![Page 21: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/21.jpg)
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
![Page 22: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/22.jpg)
![Page 23: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/23.jpg)
RWD USING FOUNDATION 5How to Setup ZF5The GridResponsive Images / MediaMedia QueriesBlock GridCustomizing / Settings
![Page 24: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/24.jpg)
HOW TO SETUP ZF5http://foundation.zurb.com/develop/download.html
Download CSSManual SCSS DownloadUse A Task Runner (GRUNT/GULP/...)
![Page 25: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/25.jpg)
THE GRIDRows and ColumnsCenteringNestingOrderingCustomizing the Grid
![Page 26: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/26.jpg)
RESPONSIVE IMAGES / MEDIAImagesPictureFill 2.0VideoWelcome Interchange!
![Page 27: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/27.jpg)
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+
![Page 28: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/28.jpg)
FOUNDATION 5: CUSTOMIZINGUnderstanding the SetupSettingsJS ComponentsMake It Your Own
![Page 29: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/29.jpg)
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/
![Page 30: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/30.jpg)
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
![Page 31: Responsive Web Design using the Foundation 5 CSS Framework](https://reader034.fdocuments.in/reader034/viewer/2022051516/55a517531a28abdc7f8b4717/html5/thumbnails/31.jpg)
THANKS FOR COMING!