Responsive Web Design using ZURB Foundation
4 likes1,071 views
This document discusses responsive web design using the ZURB Foundation 5 framework. It defines responsive web design and its benefits over adaptive, mobile-first, and native app approaches. It outlines the key concepts of the Foundation grid system, responsive images and media, media queries, and customizing Foundation. It also provides resources for UI development tools and testing responsive designs.
Responsive Web Design using ZURB Foundation
- 1. Responsive Web Design using ZURB Foundation 5 byChrisMorrow
- 2. THE PLAN What is Responsive Web Design? Responsive vs Adaptive vs Mobile vs App UI Dev Tools Frameworks RWD: Using Foundation 5
- 4. NOW WE HAVE AWD vs RWD vs ___ AWD:AllWheelDrive RWD:RearWheelDrive FWD:FrontWheelDrive
- 5. NOW WE REALLY HAVE AWD: Adaptive Web Design AWD: Adaptive Web Delivery RWD: Responsive Web Design SWD: Situational Web Design
- 6. 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.
- 13. 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 "
- 14. When compared to maintaining a seperate mobile site, responsive sites can be equal or lower in cost "Responsive Design is Expensive"
- 15. <default Bootstrap styles> "All responsive websites look the same"
- 16. "Anyone who embraces Responsive Web Design is stupid"
- 18. ZURB QUOTE "Friends don't let friends design in 960px"
- 19. UI DEV TOOLS
- 21. BENEFITS OF UI TOOLS? Grunt: run local server Grunt: automation Grunt: livereload Yeoman: starter projects Bower: dependency management
- 22. Q & A 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
- 23. 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
- 25. RWD USING FOUNDATION 5 The Grid Responsive Images / Media Media Queries Customizing / Settings
- 26. THE GRID Rows and Columns Centering Nesting Ordering Customizing the Grid
- 27. RESPONSIVE IMAGES / MEDIA Images PictureFill 2.0 Video Welcome Interchange!
- 28. FOUNDATION 5: MEDIA QUERIES small: 0 - 640px medium: 641px - 1024px large: 1025px - 1440px xlarge: 1441px - 1920px xxlarge: 1921px+
- 29. FOUNDATION 5: CUSTOMIZING Understanding the Setup Settings Components Make It Your Own
- 30. RWD TESTING TOOLS? Google Chrome (Emulation) Firefox (Responsive View) iOS Simulator (Mac only) Browserstack Your Own Real Devices GhostLab (Mac Only) Adobe Edge Inspect