SlideShare ist ein Scribd-Unternehmen logo
1 von 31
Downloaden Sie, um offline zu lesen
Responsive Web Design
using ZURB Foundation 5
byChrisMorrow
THE PLAN
What is Responsive Web Design?
Responsive Design: Pros and Cons
Frameworks
Download/Setup of Foundation
UI Dev Tools
Using Foundation 5
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.
PROS & CONS
ResponsivevsAdaptivevsMobilevsApp
ADAPTIVE
liquidapsive.com(http://www.liquidapsive.com/)
RESPONSIVE
Pros:
OneSitetomaintain
SEOFriendly
LowerCosttoBuildandMaintain
Cons:
MoreComplexCode
BadPerformance
BadPerfomance:false,forthemostpart
OK GOOGLE!
AWD vs RWD vs ___
AWD:AllWheelDrive
RWD:RearWheelDrive
FWD:FrontWheelDrive
DEV ACRONONYMS
AWD: Adaptive Web Design
AWD: Adaptive Web Delivery
RWD: Responsive Web Design
SWD: Situational Web Design
WTF: Insert New Approach Here
RWD: MISCONCEPTIONS
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 "
When compared to maintaining a seperate mobile
site, responsive sites can be equal or lower in cost
"Responsive Design is Expensive"
<default Bootstrap styles>
"All responsive websites
look the same"
"Anyone who embraces
Responsive Web Design is stupid"
Responsive Web Design using the Foundation 5 CSS Framework
ZURB QUOTE
"Friends don't let friends design in 960px"
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
IS YOUR WORKFLOW SLOW?
UI DEV TOOLS
http://yeoman.io/(http://yeoman.io/)
BENEFITS OF UI TOOLS?
Grunt: run local server
Grunt: automation
Grunt: livereload
Yeoman: starter projects
Bower: dependency management
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
Responsive Web Design using the Foundation 5 CSS Framework
RWD USING FOUNDATION 5
How to Setup ZF5
The Grid
Responsive Images / Media
Media Queries
Block Grid
Customizing / Settings
HOW TO SETUP ZF5
http://foundation.zurb.com/develop/download.html
Download CSS
Manual SCSS Download
Use A Task Runner (GRUNT/GULP/...)
THE GRID
Rows and Columns
Centering
Nesting
Ordering
Customizing the Grid
RESPONSIVE IMAGES / MEDIA
Images
PictureFill 2.0
Video
Welcome Interchange!
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+
FOUNDATION 5: CUSTOMIZING
Understanding the Setup
Settings
JS Components
Make It Your Own
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/
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
THANKS FOR COMING!

Más contenido relacionado

Was ist angesagt?

WordPress & User Experience - WordCamp St. Louis
WordPress & User Experience - WordCamp St. LouisWordPress & User Experience - WordCamp St. Louis
WordPress & User Experience - WordCamp St. LouisSara Cannon
 
Responsive Design - WordUp Edinburgh 2011
Responsive Design - WordUp Edinburgh 2011Responsive Design - WordUp Edinburgh 2011
Responsive Design - WordUp Edinburgh 2011Epitome Solutions Ltd
 
How did you use media technologies in the construction and research, planning...
How did you use media technologies in the construction and research, planning...How did you use media technologies in the construction and research, planning...
How did you use media technologies in the construction and research, planning...Fahmida Begum
 
Getting Familiar with Adobe Edge Tools and Services
Getting Familiar with Adobe Edge Tools and ServicesGetting Familiar with Adobe Edge Tools and Services
Getting Familiar with Adobe Edge Tools and ServicesJoseph Labrecque
 
Return Of The Browser Wars Ajax World West2007
Return Of The Browser Wars Ajax World West2007Return Of The Browser Wars Ajax World West2007
Return Of The Browser Wars Ajax World West2007John Eckman
 
Testing Responsive Webdesign
Testing Responsive WebdesignTesting Responsive Webdesign
Testing Responsive WebdesignSven Wolfermann
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignMelanie Burger
 
The Flashy Side of Adobe Edge
The Flashy Side of Adobe EdgeThe Flashy Side of Adobe Edge
The Flashy Side of Adobe EdgeJoseph Labrecque
 
What's Up with WordPress? (WordCamp Columbus)
What's Up with WordPress? (WordCamp Columbus)What's Up with WordPress? (WordCamp Columbus)
What's Up with WordPress? (WordCamp Columbus)Jane Wells
 
MWC/ADC 2013 Camera and Lenses - Photo extensibility for Windows Phone
MWC/ADC 2013 Camera and Lenses - Photo extensibility for Windows PhoneMWC/ADC 2013 Camera and Lenses - Photo extensibility for Windows Phone
MWC/ADC 2013 Camera and Lenses - Photo extensibility for Windows PhoneMicrosoft Mobile Developer
 
Breaking The Broken Web
Breaking The Broken WebBreaking The Broken Web
Breaking The Broken WebFITC
 
Modev ux brian lacey presentation
Modev ux brian lacey presentationModev ux brian lacey presentation
Modev ux brian lacey presentationBrian Lacey
 
WordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonWordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonSara Cannon
 

Was ist angesagt? (18)

Yeoman
YeomanYeoman
Yeoman
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
WordPress & User Experience - WordCamp St. Louis
WordPress & User Experience - WordCamp St. LouisWordPress & User Experience - WordCamp St. Louis
WordPress & User Experience - WordCamp St. Louis
 
Responsive Design - WordUp Edinburgh 2011
Responsive Design - WordUp Edinburgh 2011Responsive Design - WordUp Edinburgh 2011
Responsive Design - WordUp Edinburgh 2011
 
How did you use media technologies in the construction and research, planning...
How did you use media technologies in the construction and research, planning...How did you use media technologies in the construction and research, planning...
How did you use media technologies in the construction and research, planning...
 
Getting Familiar with Adobe Edge Tools and Services
Getting Familiar with Adobe Edge Tools and ServicesGetting Familiar with Adobe Edge Tools and Services
Getting Familiar with Adobe Edge Tools and Services
 
Responsive Web Designs
Responsive Web DesignsResponsive Web Designs
Responsive Web Designs
 
Return Of The Browser Wars Ajax World West2007
Return Of The Browser Wars Ajax World West2007Return Of The Browser Wars Ajax World West2007
Return Of The Browser Wars Ajax World West2007
 
Testing Responsive Webdesign
Testing Responsive WebdesignTesting Responsive Webdesign
Testing Responsive Webdesign
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
The Flashy Side of Adobe Edge
The Flashy Side of Adobe EdgeThe Flashy Side of Adobe Edge
The Flashy Side of Adobe Edge
 
World spotlight
World spotlightWorld spotlight
World spotlight
 
Web over 9000
Web over 9000Web over 9000
Web over 9000
 
What's Up with WordPress? (WordCamp Columbus)
What's Up with WordPress? (WordCamp Columbus)What's Up with WordPress? (WordCamp Columbus)
What's Up with WordPress? (WordCamp Columbus)
 
MWC/ADC 2013 Camera and Lenses - Photo extensibility for Windows Phone
MWC/ADC 2013 Camera and Lenses - Photo extensibility for Windows PhoneMWC/ADC 2013 Camera and Lenses - Photo extensibility for Windows Phone
MWC/ADC 2013 Camera and Lenses - Photo extensibility for Windows Phone
 
Breaking The Broken Web
Breaking The Broken WebBreaking The Broken Web
Breaking The Broken Web
 
Modev ux brian lacey presentation
Modev ux brian lacey presentationModev ux brian lacey presentation
Modev ux brian lacey presentation
 
WordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonWordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp London
 

Ähnlich wie Responsive Web Design using the Foundation 5 CSS Framework

Responsive Web Design using ZURB Foundation
Responsive Web Design using ZURB FoundationResponsive Web Design using ZURB Foundation
Responsive Web Design using ZURB FoundationSolTech, Inc.
 
Using Foundation with Drupal
Using Foundation with DrupalUsing Foundation with Drupal
Using Foundation with DrupalExove
 
Going Mobile First With Drupal
Going Mobile First With DrupalGoing Mobile First With Drupal
Going Mobile First With DrupalJesper Wøldiche
 
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski MeetMagentoNY2014
 
Angular js mobile jsday 2014 - Verona 14 may
Angular js mobile   jsday 2014 - Verona 14 mayAngular js mobile   jsday 2014 - Verona 14 may
Angular js mobile jsday 2014 - Verona 14 mayLuciano Amodio
 
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…Atwix
 
Measuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb EditionMeasuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb EditionDave Olsen
 
SeConf2015: Advanced Automated Visual Testing With Selenium
SeConf2015: Advanced Automated Visual Testing With SeleniumSeConf2015: Advanced Automated Visual Testing With Selenium
SeConf2015: Advanced Automated Visual Testing With Seleniumadamcarmi
 
Rethinking Angular Architecture & Performance
Rethinking Angular Architecture & PerformanceRethinking Angular Architecture & Performance
Rethinking Angular Architecture & PerformanceMark Pieszak
 
Measuring Web Performance
Measuring Web Performance Measuring Web Performance
Measuring Web Performance Dave Olsen
 
Digibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David WalkerDigibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David WalkerLizzie Hodgson
 
Responsive Design Lessons
Responsive Design LessonsResponsive Design Lessons
Responsive Design LessonsDaniel Naumann
 
Build a Responsive WordPress Theme with Zurbs Foundation Framework
Build a Responsive WordPress Theme with Zurbs Foundation FrameworkBuild a Responsive WordPress Theme with Zurbs Foundation Framework
Build a Responsive WordPress Theme with Zurbs Foundation FrameworkBrendan Sera-Shriar
 
Responsive Web Design: Tips and Tricks
Responsive Web Design: Tips and TricksResponsive Web Design: Tips and Tricks
Responsive Web Design: Tips and TricksGautam Krishnan
 
Building Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalBuilding Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalFour Kitchens
 
Top Ten Tips for HTML5/Mobile Web Development
Top Ten Tips for HTML5/Mobile Web DevelopmentTop Ten Tips for HTML5/Mobile Web Development
Top Ten Tips for HTML5/Mobile Web DevelopmentSimon Guest
 
Advanced Automated Visual Testing
Advanced Automated Visual TestingAdvanced Automated Visual Testing
Advanced Automated Visual Testingadamcarmi
 

Ähnlich wie Responsive Web Design using the Foundation 5 CSS Framework (20)

Responsive Web Design using ZURB Foundation
Responsive Web Design using ZURB FoundationResponsive Web Design using ZURB Foundation
Responsive Web Design using ZURB Foundation
 
Using Foundation with Drupal
Using Foundation with DrupalUsing Foundation with Drupal
Using Foundation with Drupal
 
Going Mobile First With Drupal
Going Mobile First With DrupalGoing Mobile First With Drupal
Going Mobile First With Drupal
 
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
 
Angular js mobile jsday 2014 - Verona 14 may
Angular js mobile   jsday 2014 - Verona 14 mayAngular js mobile   jsday 2014 - Verona 14 may
Angular js mobile jsday 2014 - Verona 14 may
 
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
 
Measuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb EditionMeasuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb Edition
 
SeConf2015: Advanced Automated Visual Testing With Selenium
SeConf2015: Advanced Automated Visual Testing With SeleniumSeConf2015: Advanced Automated Visual Testing With Selenium
SeConf2015: Advanced Automated Visual Testing With Selenium
 
Rethinking Angular Architecture & Performance
Rethinking Angular Architecture & PerformanceRethinking Angular Architecture & Performance
Rethinking Angular Architecture & Performance
 
Measuring Web Performance
Measuring Web Performance Measuring Web Performance
Measuring Web Performance
 
Digibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David WalkerDigibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David Walker
 
bootstrap
bootstrap bootstrap
bootstrap
 
Responsive Design Lessons
Responsive Design LessonsResponsive Design Lessons
Responsive Design Lessons
 
Build a Responsive WordPress Theme with Zurbs Foundation Framework
Build a Responsive WordPress Theme with Zurbs Foundation FrameworkBuild a Responsive WordPress Theme with Zurbs Foundation Framework
Build a Responsive WordPress Theme with Zurbs Foundation Framework
 
Responsive Web Design: Tips and Tricks
Responsive Web Design: Tips and TricksResponsive Web Design: Tips and Tricks
Responsive Web Design: Tips and Tricks
 
Building Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalBuilding Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with Drupal
 
Top Ten Tips for HTML5/Mobile Web Development
Top Ten Tips for HTML5/Mobile Web DevelopmentTop Ten Tips for HTML5/Mobile Web Development
Top Ten Tips for HTML5/Mobile Web Development
 
Advanced Automated Visual Testing
Advanced Automated Visual TestingAdvanced Automated Visual Testing
Advanced Automated Visual Testing
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
RWD - Bootstrap
RWD - BootstrapRWD - Bootstrap
RWD - Bootstrap
 

Último

Benefits of Fiber Internet vs. Traditional Internet.pptx
Benefits of Fiber Internet vs. Traditional Internet.pptxBenefits of Fiber Internet vs. Traditional Internet.pptx
Benefits of Fiber Internet vs. Traditional Internet.pptxlibertyuae uae
 
Mary Meeker Internet Trends Report for 2019
Mary Meeker Internet Trends Report for 2019Mary Meeker Internet Trends Report for 2019
Mary Meeker Internet Trends Report for 2019Eric Johnson
 
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...hasimatwork
 
如何办理朴茨茅斯大学毕业证书学位证书成绩单?
如何办理朴茨茅斯大学毕业证书学位证书成绩单?如何办理朴茨茅斯大学毕业证书学位证书成绩单?
如何办理朴茨茅斯大学毕业证书学位证书成绩单?krc0yvm5
 
Tungsten Webinar: v6 & v7 Release Recap, and Beyond
Tungsten Webinar: v6 & v7 Release Recap, and BeyondTungsten Webinar: v6 & v7 Release Recap, and Beyond
Tungsten Webinar: v6 & v7 Release Recap, and BeyondContinuent
 
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85APNIC
 
Google-Next-Madrid-BBVA-Research inv.pdf
Google-Next-Madrid-BBVA-Research inv.pdfGoogle-Next-Madrid-BBVA-Research inv.pdf
Google-Next-Madrid-BBVA-Research inv.pdfMaria Adalfio
 
overview of Virtualization, concept of Virtualization
overview of Virtualization, concept of Virtualizationoverview of Virtualization, concept of Virtualization
overview of Virtualization, concept of VirtualizationRajan yadav
 
Generalities about NFT , as a new technology
Generalities about NFT , as a new technologyGeneralities about NFT , as a new technology
Generalities about NFT , as a new technologysoufianbouktaib1
 
SQL Server on Azure VM datasheet.dsadaspptx
SQL Server on Azure VM datasheet.dsadaspptxSQL Server on Azure VM datasheet.dsadaspptx
SQL Server on Azure VM datasheet.dsadaspptxJustineGarcia32
 

Último (10)

Benefits of Fiber Internet vs. Traditional Internet.pptx
Benefits of Fiber Internet vs. Traditional Internet.pptxBenefits of Fiber Internet vs. Traditional Internet.pptx
Benefits of Fiber Internet vs. Traditional Internet.pptx
 
Mary Meeker Internet Trends Report for 2019
Mary Meeker Internet Trends Report for 2019Mary Meeker Internet Trends Report for 2019
Mary Meeker Internet Trends Report for 2019
 
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
 
如何办理朴茨茅斯大学毕业证书学位证书成绩单?
如何办理朴茨茅斯大学毕业证书学位证书成绩单?如何办理朴茨茅斯大学毕业证书学位证书成绩单?
如何办理朴茨茅斯大学毕业证书学位证书成绩单?
 
Tungsten Webinar: v6 & v7 Release Recap, and Beyond
Tungsten Webinar: v6 & v7 Release Recap, and BeyondTungsten Webinar: v6 & v7 Release Recap, and Beyond
Tungsten Webinar: v6 & v7 Release Recap, and Beyond
 
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
 
Google-Next-Madrid-BBVA-Research inv.pdf
Google-Next-Madrid-BBVA-Research inv.pdfGoogle-Next-Madrid-BBVA-Research inv.pdf
Google-Next-Madrid-BBVA-Research inv.pdf
 
overview of Virtualization, concept of Virtualization
overview of Virtualization, concept of Virtualizationoverview of Virtualization, concept of Virtualization
overview of Virtualization, concept of Virtualization
 
Generalities about NFT , as a new technology
Generalities about NFT , as a new technologyGeneralities about NFT , as a new technology
Generalities about NFT , as a new technology
 
SQL Server on Azure VM datasheet.dsadaspptx
SQL Server on Azure VM datasheet.dsadaspptxSQL Server on Azure VM datasheet.dsadaspptx
SQL Server on Azure VM datasheet.dsadaspptx
 

Responsive Web Design using the Foundation 5 CSS Framework