SlideShare a Scribd company logo

Responsive Web Design

•Download as PPT, PDF•
•
R
RZasadzinski

The document discusses responsive web design (RWD), which allows websites to automatically adapt to different screen sizes through flexible grids and images, and media queries. RWD uses fluid layouts where elements are sized using relative units like percentages. It also leverages CSS3 media queries to apply different styling for various devices. The document provides an overview of RWD and examples of how to structure HTML and CSS for a responsive design that can accommodate diverse screen sizes. It also lists resources for learning more about this approach to building adaptive and mobile-friendly websites.

Technology
1 of 51
Responsive Web Design Fort Collins Internet Professionals August 12, 2010
When life was simple Flickr: Jean-Lou Dupont
1280 x 800 Photo: Steve Rhodes 1280 x 800 Flickr: goodrob13
1280 x 800 Photo: Steve Rhodes 16 : 9 Photo: Steve Rhodes
1280 x 800 Photo: Steve Rhodes Netbook 8.9” screen Flickr: ziaek
Title Many screens Flickr: aranarth
Title More is better 5120 x 1600 Flickr: jochenWolters
Title Flickr: photographer 2006 Smart Phones Flickr: barnoid
Title Flickr: photographer 2007 Smart Phones Flickr: PowerupMobile.com
Title Flickr: photographer And then came…
Title Flickr: photographer The One.
Title Flickr: photographer Copyright: Fox Studios
Title Flickr: photographer Flickr: bandita
Title Flickr: photographer January 9, 2007 Flickr: shapeshift
Title Flickr: photographer 2008 Smart Phones Flickr: midnightglory
Title Flickr: photographer 2009 Smart Phones Flickr: lalunablanca
Title Flickr: photographer 2009: Me Flickr: Spartacus007
Does Mobile Matter? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Flickr: Gravitywave
Title Flickr: photographer Innovation & Transition
Title Flickr: photographer 2010 iPad – 3 million sold in 80 days Flickr: JaredEarle
Title Flickr: photographer Oh yeah, it doesn’t run Flash Flickr: JaredEarle
Title Flickr: photographer iPhone 4 – 960 x 640 @ 326 ppi “Retina Display” Flickr: Yutaka Tsutano
Title Flickr: photographer Android, BlackBerry Flickr: Johan Larsson, dusk-photography
Title Flickr: photographer 2010 Many Screens Flickr: AndreasSchepers
Flickr: Malingering
Flickr: Beni Ishaque Luthor
We can rise above it ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Mobile browsers converging ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Title Flickr: photographer Einstein’s quest for the Unified Field Flickr: Thomas Thomas
The Unified (web) Field? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Responsive Web Design is ,[object Object],[object Object],[object Object],[object Object]
Responsive Web Design ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Where do you start? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Keep in mind the context ,[object Object],[object Object],[object Object],[object Object]
Full width blocks ,[object Object],[object Object],[object Object]
Sizing in % rather than px ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
What about images? ,[object Object],[object Object],[object Object]
Media Types ,[object Object],[object Object]
CSS3 Media Queries… ,[object Object],[object Object],[object Object]
CSS3 Media Queries ,[object Object],[object Object],[object Object],[object Object]
More Media Queries ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Browser Support ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
A magic bullet ,[object Object],[object Object],[object Object],[object Object]
Design: Factors to Consider ,[object Object],[object Object],[object Object],[object Object]
Resources ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
A few examples ,[object Object]
Resources ,[object Object],[object Object]
Where to find me ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Many Thanks to: ,[object Object],[object Object],[object Object],[object Object]
Responsive Web Design Fort Collins Internet Professionals August 12, 2010

Recommended

Responsive web design
Responsive web designResponsive web design
Responsive web design
Christian Glover Wilson
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Russ Weakley
 
Responsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordResponsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzword
Russ Weakley
 
Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Design
arborwebsolutions
 
Specialise or cross-skill
Specialise or cross-skillSpecialise or cross-skill
Specialise or cross-skill
Russ Weakley
 
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Tom Hermans
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
Sara Cannon
 
Responsive Web Design - but for real!
Responsive Web Design - but for real!Responsive Web Design - but for real!
Responsive Web Design - but for real!
Rudy Rigot
 

Recommended

Responsive web design
Responsive web designResponsive web design
Responsive web design
Christian Glover Wilson
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Russ Weakley
 
Responsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordResponsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzword
Russ Weakley
 
Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Design
arborwebsolutions
 
Specialise or cross-skill
Specialise or cross-skillSpecialise or cross-skill
Specialise or cross-skill
Russ Weakley
 
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Tom Hermans
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
Sara Cannon
 
Responsive Web Design - but for real!
Responsive Web Design - but for real!Responsive Web Design - but for real!
Responsive Web Design - but for real!
Rudy Rigot
 
HTML and Responsive Design
HTML and Responsive Design HTML and Responsive Design
HTML and Responsive Design
Mindy McAdams
 
Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013
Jason Grigsby
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
Clarissa Peterson
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
Bart De Waele
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
Dave Olsen
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Joseph Labrecque
 
Let's get accessible!
Let's get accessible!Let's get accessible!
Let's get accessible!
Tady Walsh
 
Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016
Kate Walser
 
Ui and ux principles
Ui and ux principlesUi and ux principles
Ui and ux principles
Norman Caesar Tecson
 
Responsive Design
Responsive Design Responsive Design
Responsive Design
Clarissa Peterson
 
Responsive UI using CSS Media Query
Responsive UI using CSS Media QueryResponsive UI using CSS Media Query
Responsive UI using CSS Media Query
Neev Technologies
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive Design
Jason Grigsby
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
Clarissa Peterson
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information Architecture
Christian Crumlish
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Clarissa Peterson
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
Chris Love
 
Responsive Design Methodology
Responsive Design MethodologyResponsive Design Methodology
Responsive Design Methodology
Wijs
 
Breaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfBreaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconf
Christian Heilmann
 
Designer vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORNDesigner vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORN
Sara Cannon
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive Websites
Clarissa Peterson
 
Opera and the Open Web platform
Opera and the Open Web platformOpera and the Open Web platform
Opera and the Open Web platform
Andreas Bovens
 
Flourish2011
Flourish2011Flourish2011
Flourish2011
Mark Meeker
 

More Related Content

What's hot

Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013
Jason Grigsby
 
Let's get accessible!
Let's get accessible!Let's get accessible!
Let's get accessible!
Tady Walsh
 
Designer vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORNDesigner vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORN
Sara Cannon
 

What's hot (20)

HTML and Responsive Design
HTML and Responsive Design HTML and Responsive Design
HTML and Responsive Design
 
Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Let's get accessible!
Let's get accessible!Let's get accessible!
Let's get accessible!
 
Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016
 
Ui and ux principles
Ui and ux principlesUi and ux principles
Ui and ux principles
 
Responsive Design
Responsive Design Responsive Design
Responsive Design
 
Responsive UI using CSS Media Query
Responsive UI using CSS Media QueryResponsive UI using CSS Media Query
Responsive UI using CSS Media Query
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive Design
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information Architecture
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
Responsive Design Methodology
Responsive Design MethodologyResponsive Design Methodology
Responsive Design Methodology
 
Breaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfBreaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconf
 
Designer vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORNDesigner vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORN
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive Websites
 

Similar to Responsive Web Design

Homer michelle mobile_presentation
Homer michelle mobile_presentationHomer michelle mobile_presentation
Homer michelle mobile_presentation
Michelle Homer
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
St. Petersburg College
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Justin Avery
 
Michael(tm) Smith WND09 Presentation
Michael(tm) Smith WND09 PresentationMichael(tm) Smith WND09 Presentation
Michael(tm) Smith WND09 Presentation
Michael(tm) Smith
 
Cloud Computing in Mobile
Cloud Computing in MobileCloud Computing in Mobile
Cloud Computing in Mobile
SVWB
 
Responsive Web Design On Student's day
Responsive Web Design On Student's day Responsive Web Design On Student's day
Responsive Web Design On Student's day
psophy
 

Similar to Responsive Web Design (20)

Opera and the Open Web platform
Opera and the Open Web platformOpera and the Open Web platform
Opera and the Open Web platform
 
Flourish2011
Flourish2011Flourish2011
Flourish2011
 
Responsive Design - WordUp Edinburgh 2011
Responsive Design - WordUp Edinburgh 2011Responsive Design - WordUp Edinburgh 2011
Responsive Design - WordUp Edinburgh 2011
 
Don't touch the mobile parts
Don't touch the mobile partsDon't touch the mobile parts
Don't touch the mobile parts
 
Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
 
Flash Web Development.pdf
Flash Web Development.pdfFlash Web Development.pdf
Flash Web Development.pdf
 
Homer michelle mobile_presentation
Homer michelle mobile_presentationHomer michelle mobile_presentation
Homer michelle mobile_presentation
 
HTML5
HTML5HTML5
HTML5
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
 
How to build a mobile website with Drupal?
How to build a mobile website with Drupal?How to build a mobile website with Drupal?
How to build a mobile website with Drupal?
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Making your site mobile-friendly / RIT++
Making your site mobile-friendly / RIT++Making your site mobile-friendly / RIT++
Making your site mobile-friendly / RIT++
 
Michael(tm) Smith WND09 Presentation
Michael(tm) Smith WND09 PresentationMichael(tm) Smith WND09 Presentation
Michael(tm) Smith WND09 Presentation
 
Cloud Computing in Mobile
Cloud Computing in MobileCloud Computing in Mobile
Cloud Computing in Mobile
 
Responsive Web Design On Student's day
Responsive Web Design On Student's day Responsive Web Design On Student's day
Responsive Web Design On Student's day
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive Design
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
 
2011 08-24 mobile web app
2011 08-24 mobile web app2011 08-24 mobile web app
2011 08-24 mobile web app
 

Recently uploaded

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Jeffrey Haguewood
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Recently uploaded (20)

FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 

Responsive Web Design

Editor's Notes

  1. Prediction: by 2014 90% of web devices will be mobile
  2. Show example of Amscan.org