SlideShare a Scribd company logo
1 of 13
Download to read offline
Responsive Web Design Tips
by Leland Fiegel
@lelandf
About Me
● WordPress theme developer
● 6+ years
● Theme Lab
● Currently working for digital agency in DC
● Any questions? Interrupt me.
What is responsive
web design?
“Responsive web design (RWD) is a web
design approach aimed at crafting sites to
provide an optimal viewing experience—easy
reading and navigation with a minimum of
resizing, panning, and scrolling—across a wide
range of devices (from desktop computer
monitors to mobile phones)”
-Wikipedia
Do you even need
responsive design?
● Check your analytics
● High bounce rate on
mobile?
● Is pinching and zooming
sufficient?
● Apple.com isn’t responsive
Responsive Web
Design Friends
● Media queries
● Percentage widths
● Max widths
Responsive Web
Design Enemies
● Images
● Video embeds
● Anything fixed width
● Internet Explorer
● Images: Widths and auto
height. Bonus: use
WordPress media classes
● Video embeds: Use FitVids
(also for WP)
● IE 8 and below? Use
Respond.js
● Viewport meta tag makes a
big difference. Prevent
zooming.
● TEST EVERYTHING. Use
BrowserStack or alternative
service.
Questions?

More Related Content

What's hot

Web usability, navigation & accessibility
Web usability, navigation & accessibilityWeb usability, navigation & accessibility
Web usability, navigation & accessibilityChristoffer Rietz
 
Responsive Web Design and Testing
Responsive Web Design and TestingResponsive Web Design and Testing
Responsive Web Design and Testingkksure
 
Testing – responsive web design
Testing – responsive web designTesting – responsive web design
Testing – responsive web designBaiju Joseph
 
Responsive web design
Responsive web designResponsive web design
Responsive web designgwestrom
 
Responsive design
Responsive designResponsive design
Responsive designHans Shih
 
Responsive Web Design: May 2013 at Google
Responsive Web Design: May 2013 at GoogleResponsive Web Design: May 2013 at Google
Responsive Web Design: May 2013 at GoogleBoston Interactive
 
April 2015 google mobile friendly webinar
April 2015 google mobile friendly webinarApril 2015 google mobile friendly webinar
April 2015 google mobile friendly webinarSharon Manderson
 
Stephen Pavlovich_SearchLove San Diego 2013_Conversion Optimization for Mobile
Stephen Pavlovich_SearchLove San Diego 2013_Conversion Optimization for MobileStephen Pavlovich_SearchLove San Diego 2013_Conversion Optimization for Mobile
Stephen Pavlovich_SearchLove San Diego 2013_Conversion Optimization for MobileDistilled
 
Android App Development Journey
Android App Development JourneyAndroid App Development Journey
Android App Development JourneyGerard
 
DesignMap (hearts) Prototyping
DesignMap (hearts) PrototypingDesignMap (hearts) Prototyping
DesignMap (hearts) PrototypingDesignMap
 
Tim McCarthy | Portfolio May 2018
Tim McCarthy | Portfolio May 2018Tim McCarthy | Portfolio May 2018
Tim McCarthy | Portfolio May 2018Tim McCarthy
 
Minimal responsive blog theme
Minimal responsive blog themeMinimal responsive blog theme
Minimal responsive blog themeJenifer Angle
 
Open Source Product Management with KEMP Tech's PM
Open Source Product Management with KEMP Tech's PMOpen Source Product Management with KEMP Tech's PM
Open Source Product Management with KEMP Tech's PMProduct School
 
Web Accessibility Training
Web Accessibility TrainingWeb Accessibility Training
Web Accessibility TrainingMatt Saunders
 
Dennis Yu and Visme — How to Assemble a Powerful and Practical Social Media S...
Dennis Yu and Visme — How to Assemble a Powerful and Practical Social Media S...Dennis Yu and Visme — How to Assemble a Powerful and Practical Social Media S...
Dennis Yu and Visme — How to Assemble a Powerful and Practical Social Media S...Semrush
 
Layar q&a april 2015
Layar q&a april 2015Layar q&a april 2015
Layar q&a april 2015Layar
 
Dos & Donts when making Technology choices
Dos & Donts when making Technology choicesDos & Donts when making Technology choices
Dos & Donts when making Technology choicesVinci Rufus
 
Product Managers: How To Get Your Developers To Love You
Product Managers: How To Get Your Developers To Love YouProduct Managers: How To Get Your Developers To Love You
Product Managers: How To Get Your Developers To Love YouProduct School
 

What's hot (19)

Web usability, navigation & accessibility
Web usability, navigation & accessibilityWeb usability, navigation & accessibility
Web usability, navigation & accessibility
 
Responsive Web Design and Testing
Responsive Web Design and TestingResponsive Web Design and Testing
Responsive Web Design and Testing
 
Testing – responsive web design
Testing – responsive web designTesting – responsive web design
Testing – responsive web design
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive design
Responsive designResponsive design
Responsive design
 
Responsive Web Design: May 2013 at Google
Responsive Web Design: May 2013 at GoogleResponsive Web Design: May 2013 at Google
Responsive Web Design: May 2013 at Google
 
April 2015 google mobile friendly webinar
April 2015 google mobile friendly webinarApril 2015 google mobile friendly webinar
April 2015 google mobile friendly webinar
 
Stephen Pavlovich_SearchLove San Diego 2013_Conversion Optimization for Mobile
Stephen Pavlovich_SearchLove San Diego 2013_Conversion Optimization for MobileStephen Pavlovich_SearchLove San Diego 2013_Conversion Optimization for Mobile
Stephen Pavlovich_SearchLove San Diego 2013_Conversion Optimization for Mobile
 
Android App Development Journey
Android App Development JourneyAndroid App Development Journey
Android App Development Journey
 
DesignMap (hearts) Prototyping
DesignMap (hearts) PrototypingDesignMap (hearts) Prototyping
DesignMap (hearts) Prototyping
 
Tim McCarthy | Portfolio May 2018
Tim McCarthy | Portfolio May 2018Tim McCarthy | Portfolio May 2018
Tim McCarthy | Portfolio May 2018
 
Minimal responsive blog theme
Minimal responsive blog themeMinimal responsive blog theme
Minimal responsive blog theme
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Open Source Product Management with KEMP Tech's PM
Open Source Product Management with KEMP Tech's PMOpen Source Product Management with KEMP Tech's PM
Open Source Product Management with KEMP Tech's PM
 
Web Accessibility Training
Web Accessibility TrainingWeb Accessibility Training
Web Accessibility Training
 
Dennis Yu and Visme — How to Assemble a Powerful and Practical Social Media S...
Dennis Yu and Visme — How to Assemble a Powerful and Practical Social Media S...Dennis Yu and Visme — How to Assemble a Powerful and Practical Social Media S...
Dennis Yu and Visme — How to Assemble a Powerful and Practical Social Media S...
 
Layar q&a april 2015
Layar q&a april 2015Layar q&a april 2015
Layar q&a april 2015
 
Dos & Donts when making Technology choices
Dos & Donts when making Technology choicesDos & Donts when making Technology choices
Dos & Donts when making Technology choices
 
Product Managers: How To Get Your Developers To Love You
Product Managers: How To Get Your Developers To Love YouProduct Managers: How To Get Your Developers To Love You
Product Managers: How To Get Your Developers To Love You
 

Similar to Responsive web design tips

Wunderman - Responsive Design
Wunderman - Responsive DesignWunderman - Responsive Design
Wunderman - Responsive Designnrgza
 
Wunderman Responsive Design
Wunderman Responsive DesignWunderman Responsive Design
Wunderman Responsive Designnrgza
 
Rwd Testing Baiju Joseph
Rwd Testing Baiju JosephRwd Testing Baiju Joseph
Rwd Testing Baiju JosephvodQA
 
RWD Testing - Baiju Joseph
RWD Testing - Baiju JosephRWD Testing - Baiju Joseph
RWD Testing - Baiju JosephThoughtworks
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design CLEVER°FRANKE
 
Overview of Responsive Web Design
Overview of Responsive Web DesignOverview of Responsive Web Design
Overview of Responsive Web DesignPankaj Bajaj
 
Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)Sandip Jadhav
 
Developing a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowDeveloping a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowMichael Kowalski
 
Why should we build our website responsive
Why should we build our website responsiveWhy should we build our website responsive
Why should we build our website responsiveOmkarsoft Bangalore
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJohn Nollin
 
Intro to Responsive Web Design
Intro to Responsive Web DesignIntro to Responsive Web Design
Intro to Responsive Web Designmeghantaylor
 
Adaptive vs Responsive Layouts
Adaptive vs Responsive LayoutsAdaptive vs Responsive Layouts
Adaptive vs Responsive LayoutsIhor Zenich
 
Website Designing Courses in chandigarh.pptx
Website Designing Courses in chandigarh.pptxWebsite Designing Courses in chandigarh.pptx
Website Designing Courses in chandigarh.pptxSeoDiscovery6
 
Rwd design pattern
Rwd design patternRwd design pattern
Rwd design patternTed Hsu
 
Responsive web design UDI.pptx
Responsive web design UDI.pptxResponsive web design UDI.pptx
Responsive web design UDI.pptxATULKUMAR527024
 

Similar to Responsive web design tips (20)

Wunderman - Responsive Design
Wunderman - Responsive DesignWunderman - Responsive Design
Wunderman - Responsive Design
 
Wunderman Responsive Design
Wunderman Responsive DesignWunderman Responsive Design
Wunderman Responsive Design
 
Rwd Testing Baiju Joseph
Rwd Testing Baiju JosephRwd Testing Baiju Joseph
Rwd Testing Baiju Joseph
 
RWD Testing - Baiju Joseph
RWD Testing - Baiju JosephRWD Testing - Baiju Joseph
RWD Testing - Baiju Joseph
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design
 
Overview of Responsive Web Design
Overview of Responsive Web DesignOverview of Responsive Web Design
Overview of Responsive Web Design
 
reponsive-web-design.pptx
reponsive-web-design.pptxreponsive-web-design.pptx
reponsive-web-design.pptx
 
reponsive-web-design.pptx
reponsive-web-design.pptxreponsive-web-design.pptx
reponsive-web-design.pptx
 
Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)
 
Developing a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowDeveloping a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflow
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Why should we build our website responsive
Why should we build our website responsiveWhy should we build our website responsive
Why should we build our website responsive
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive
ResponsiveResponsive
Responsive
 
Intro to Responsive Web Design
Intro to Responsive Web DesignIntro to Responsive Web Design
Intro to Responsive Web Design
 
Adaptive vs Responsive Layouts
Adaptive vs Responsive LayoutsAdaptive vs Responsive Layouts
Adaptive vs Responsive Layouts
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Website Designing Courses in chandigarh.pptx
Website Designing Courses in chandigarh.pptxWebsite Designing Courses in chandigarh.pptx
Website Designing Courses in chandigarh.pptx
 
Rwd design pattern
Rwd design patternRwd design pattern
Rwd design pattern
 
Responsive web design UDI.pptx
Responsive web design UDI.pptxResponsive web design UDI.pptx
Responsive web design UDI.pptx
 

Recently uploaded

React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Nikki Chapple
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditSkynet Technologies
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Français Patch Tuesday - Avril
Français Patch Tuesday - AvrilFrançais Patch Tuesday - Avril
Français Patch Tuesday - AvrilIvanti
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 

Recently uploaded (20)

React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance Audit
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Français Patch Tuesday - Avril
Français Patch Tuesday - AvrilFrançais Patch Tuesday - Avril
Français Patch Tuesday - Avril
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 

Responsive web design tips