Responsive Web Design using the Foundation 5 CSS Framework
3 likes1,483 views
The document discusses responsive web design (RWD) using Zurb Foundation 5, explaining its definition, pros and cons, and key concepts like fluid grids, flexible media, and media queries. It also covers the comparison of RWD with other design techniques, frameworks for web design, and provides a guide on setting up and customizing Foundation 5. Additionally, various development tools and resources are mentioned to aid in the responsive design process.
Responsive Web Design using the Foundation 5 CSS Framework
- 1. Responsive Web Design using ZURB Foundation 5 byChrisMorrow
- 2. THE PLAN What is Responsive Web Design? Responsive Design: Pros and Cons Frameworks Download/Setup of Foundation UI Dev Tools Using Foundation 5
- 3. WHAT IS RESPONSIVE WEB DESIGN? RWD is creating a website that dynamically changes a.k.a "responds" to all viewport sizes, device orientations, and device resolutions. Ethan Marcotte: three tenets of RWD are a fluid grid, flexible media, and media queries.
- 7. OK GOOGLE! AWD vs RWD vs ___ AWD:AllWheelDrive RWD:RearWheelDrive FWD:FrontWheelDrive
- 8. DEV ACRONONYMS AWD: Adaptive Web Design AWD: Adaptive Web Delivery RWD: Responsive Web Design SWD: Situational Web Design WTF: Insert New Approach Here
- 10. 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 "
- 11. When compared to maintaining a seperate mobile site, responsive sites can be equal or lower in cost "Responsive Design is Expensive"
- 12. <default Bootstrap styles> "All responsive websites look the same"
- 13. "Anyone who embraces Responsive Web Design is stupid"
- 15. ZURB QUOTE "Friends don't let friends design in 960px"
- 16. FRAMEWORKS FOR FREE!!! How to Choose a Framework How many have used a framework or library? Try it for yourself: make an informed decision with firsthand knowledge Understand how it works not just what it does Take "it" apart, break it, then piece it together in "your" way
- 17. IS YOUR WORKFLOW SLOW?
- 18. UI DEV TOOLS
- 20. BENEFITS OF UI TOOLS? Grunt: run local server Grunt: automation Grunt: livereload Yeoman: starter projects Bower: dependency management
- 21. CSS FRAMEWORKS Which one to choose? Foundation vs Bootstrap vs Skeleton vs YAML 4 vs Gumby vs Pure CSS vs Kube vs Columnal vs Toast vs 1140 Grid vs 960 Grid System vs Gridiculo.us Choose what you like best Only use what you need
- 23. RWD USING FOUNDATION 5 How to Setup ZF5 The Grid Responsive Images / Media Media Queries Block Grid Customizing / Settings
- 24. HOW TO SETUP ZF5 http://foundation.zurb.com/develop/download.html Download CSS Manual SCSS Download Use A Task Runner (GRUNT/GULP/...)
- 25. THE GRID Rows and Columns Centering Nesting Ordering Customizing the Grid
- 26. RESPONSIVE IMAGES / MEDIA Images PictureFill 2.0 Video Welcome Interchange!
- 27. FOUNDATION 5: MEDIA QUERIES width/16px (base font size) = EMS small: 0 - 640px (40em) medium: 641px - 1024px (40.063em - 64em) large: 1025px - 1440px xlarge: 1441px - 1920px xxlarge: 1921px+
- 28. FOUNDATION 5: CUSTOMIZING Understanding the Setup Settings JS Components Make It Your Own
- 29. RESPONSIVE TESTING TOOLS? Chrome Device Emulation (in dev tools) Firefox (Responsive View) iOS Simulator (Mac only) Adobe Edge Inspect: https://creative.adobe.com/products/inspect GhostLab: (mac only) http://vanamco.com/ghostlab/ BrowserStack: http://www.browserstack.com/
- 30. RESOURCES & LINKS Tools NodeJS:https://nodejs.org/ Yeoman:http://yeoman.io/ Grunt:http://gruntjs.com/ Bower:http://bower.io/ Zurb Related Foundation:http://foundation.zurb.com/ KitchenSink:http://foundation.zurb.com/docs/components/kitchen_sink.html BuildingBlocks(codesamples):http://zurb.com/building-blocks