SlideShare una empresa de Scribd logo
1 de 22
RESPONSIVE WEB DESIGN
SUPPLEMENT
THE MOBILE REVOLUTION
The Multi-Screen World
• Increasing number of devices we use per day
effects how we search and consume content.
– Phones
– Tablets
– Watches
– Desktops/Laptops
– TVs, DVD players
– Gaming Consoles
The New Multi-Screen World, Google 2012
How Do We Adapt to This New World?
Separate Mobile Website
A separate website is designed specifically for mobile. Results in two
code-bases with different functionality for each.
Adaptive Website Design
Websites adapt to the width of the browser at specific points. The
website is only concerned about the browser being a specific width, at
which point it adapts the layout.
Responsive Website Design
Websites respond to the size of the browser at any given point. No
matter what the browser width may be, the site adjusts its layout (and
perhaps functionality) in a way that is optimized to the screen.
Responsive Web Design (RWD)
Responsive Website Design uses a single HTML
code base for all platforms.
“Rather than creating disconnected designs, each
tailored to a particular device or browser, we should
instead treat them as facets of the same experience. In
other words, we can craft sites that are not only more
flexible, but that can adapt to the media that renders
them.”
- Ethan Marcotte, Author of Responsive Web Design
The Ingredients of RWD
1. Flexible/Fluid Layouts
2. Flexible Images and Media
3. Media Queries
FLEXIBLE LAYOUTS
Fluid Grid Layouts
• Rather than setting
our layouts in
pixels we use
percentages.
• We adjust our box
model math
accordingly
Responsive Typography
• We set type in percentages, em units, or rem units
• Type adjusts relative to a flexible baseline.
• Watch your line length for readability.
• Adjust font size to be larger on smaller screens
FLEXIBLE IMAGES AND MEDIA
Flexible Images
• Image widths are set to expand
to fill the size of their container
and maintain proportion.
• Capture at highest resolution &
let browser scale
img {
width: 100%;
height: auto;
}
Scalable Vector Graphics (SVGs)
• Vector based graphics rendered by the browser.
– Can scale up/down without loss of quality
– Low file sizes
– Can be modified via css to change size, color, etc...
• If you have a flat illustration,
An icon, a logo, just about
anything that can be
displayed as an SVG, then
SVG is the way to go.
What About High Resolution Screens?
• Some techniques use new HTML elements or attributes to
account for multiple versions of the image to fit the correct
resolution determined by the browser.
– <picture> element
– “srcset” attribute on <img> element
No agreed upon solution yet. Both techniques have their strengths/weaknesses and may
need additional javascripting or polyfills for true cross-browser support.
MEDIA QUERIES
What Are Media Queries?
• Media Queries are a CSS3 module allowing
content rendering to adapt to conditions such as
screen resolution (e.g. smartphone screen vs.
computer screen).
• It became a W3C recommended standard in
June 2012, and is a cornerstone technology of
Responsive web design.
• http://mediaqueri.es/
Common Media Queries
• max-width
• max-device-width
• min-width
• min-device-width
• vw (viewport width)
• vh (viewport height)
Responsive Web Design Kittens
Graceful Degradation vs Progressive Enhancement
THINGS TO CONSIDER
Test! Test! Test!
Keep In Mind
• Performance/Load times
• Accessibility
• Imagery
• Scripts
• Typography - web fonts, font stack fallbacks on
devices (standard desktop typefaces not
available on mobile)
A successful responsive design bends,
flexes, and breaks the right way to make the
best use of the available space.
- Jamie Neely, Typecast

Más contenido relacionado

Destacado

Chapter 5 Text
Chapter 5 TextChapter 5 Text
Chapter 5 Textshelly3160
 
Supplement Color
Supplement ColorSupplement Color
Supplement Colorshelly3160
 
Chapter 2 Digital Data
Chapter 2 Digital DataChapter 2 Digital Data
Chapter 2 Digital Datashelly3160
 
Chapter 4 Computer Software
Chapter 4 Computer SoftwareChapter 4 Computer Software
Chapter 4 Computer Softwareshelly3160
 
Chapter 10 authoring
Chapter 10 authoringChapter 10 authoring
Chapter 10 authoringshelly3160
 
Chapter Multimedia Revolution
Chapter Multimedia RevolutionChapter Multimedia Revolution
Chapter Multimedia Revolutionshelly3160
 
Chapter 8 Video
Chapter 8 VideoChapter 8 Video
Chapter 8 Videoshelly3160
 
Chapter 6 Graphics
Chapter 6 GraphicsChapter 6 Graphics
Chapter 6 Graphicsshelly3160
 
Chapter 3 Computer Hardware
Chapter 3 Computer HardwareChapter 3 Computer Hardware
Chapter 3 Computer Hardwareshelly3160
 
7 Things Banks should do with Blockchain
7 Things Banks should do with Blockchain7 Things Banks should do with Blockchain
7 Things Banks should do with BlockchainSam Wouters
 
Advancing Dialysis - Cardiovascular Disease
Advancing Dialysis - Cardiovascular DiseaseAdvancing Dialysis - Cardiovascular Disease
Advancing Dialysis - Cardiovascular Diseasenxstage
 
Chapter 7 Sound
Chapter 7 SoundChapter 7 Sound
Chapter 7 Soundshelly3160
 
Peter Minkjan - Likeconomics
Peter Minkjan - LikeconomicsPeter Minkjan - Likeconomics
Peter Minkjan - LikeconomicsUpstream
 
Green tecnlogy patents
Green tecnlogy patentsGreen tecnlogy patents
Green tecnlogy patentsAltacit Global
 
Chapter 9 animation
Chapter 9 animationChapter 9 animation
Chapter 9 animationshelly3160
 
Financing the Future of Sustainability
Financing the Future of SustainabilityFinancing the Future of Sustainability
Financing the Future of SustainabilityAlan Laubsch
 
L'Intrapreneur : entreprendre au sein des entreprises
L'Intrapreneur : entreprendre au sein des entreprisesL'Intrapreneur : entreprendre au sein des entreprises
L'Intrapreneur : entreprendre au sein des entreprisesGuillaume Chevalier
 
Iscom Lyon display 2017 session 1
Iscom Lyon display 2017 session 1Iscom Lyon display 2017 session 1
Iscom Lyon display 2017 session 1D2b Consulting
 

Destacado (18)

Chapter 5 Text
Chapter 5 TextChapter 5 Text
Chapter 5 Text
 
Supplement Color
Supplement ColorSupplement Color
Supplement Color
 
Chapter 2 Digital Data
Chapter 2 Digital DataChapter 2 Digital Data
Chapter 2 Digital Data
 
Chapter 4 Computer Software
Chapter 4 Computer SoftwareChapter 4 Computer Software
Chapter 4 Computer Software
 
Chapter 10 authoring
Chapter 10 authoringChapter 10 authoring
Chapter 10 authoring
 
Chapter Multimedia Revolution
Chapter Multimedia RevolutionChapter Multimedia Revolution
Chapter Multimedia Revolution
 
Chapter 8 Video
Chapter 8 VideoChapter 8 Video
Chapter 8 Video
 
Chapter 6 Graphics
Chapter 6 GraphicsChapter 6 Graphics
Chapter 6 Graphics
 
Chapter 3 Computer Hardware
Chapter 3 Computer HardwareChapter 3 Computer Hardware
Chapter 3 Computer Hardware
 
7 Things Banks should do with Blockchain
7 Things Banks should do with Blockchain7 Things Banks should do with Blockchain
7 Things Banks should do with Blockchain
 
Advancing Dialysis - Cardiovascular Disease
Advancing Dialysis - Cardiovascular DiseaseAdvancing Dialysis - Cardiovascular Disease
Advancing Dialysis - Cardiovascular Disease
 
Chapter 7 Sound
Chapter 7 SoundChapter 7 Sound
Chapter 7 Sound
 
Peter Minkjan - Likeconomics
Peter Minkjan - LikeconomicsPeter Minkjan - Likeconomics
Peter Minkjan - Likeconomics
 
Green tecnlogy patents
Green tecnlogy patentsGreen tecnlogy patents
Green tecnlogy patents
 
Chapter 9 animation
Chapter 9 animationChapter 9 animation
Chapter 9 animation
 
Financing the Future of Sustainability
Financing the Future of SustainabilityFinancing the Future of Sustainability
Financing the Future of Sustainability
 
L'Intrapreneur : entreprendre au sein des entreprises
L'Intrapreneur : entreprendre au sein des entreprisesL'Intrapreneur : entreprendre au sein des entreprises
L'Intrapreneur : entreprendre au sein des entreprises
 
Iscom Lyon display 2017 session 1
Iscom Lyon display 2017 session 1Iscom Lyon display 2017 session 1
Iscom Lyon display 2017 session 1
 

Similar a S. Responsive Web Design

Responsive web design guidelines
Responsive web design guidelinesResponsive web design guidelines
Responsive web design guidelinesSagar Bhosale
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJulia Vi
 
Intro to Responsive Web Design
Intro to Responsive Web DesignIntro to Responsive Web Design
Intro to Responsive Web Designmeghantaylor
 
Alexa IT Solution Responsive Web designing
Alexa IT Solution Responsive Web designingAlexa IT Solution Responsive Web designing
Alexa IT Solution Responsive Web designingRavi Panchal
 
Responsive web design
Responsive web designResponsive web design
Responsive web designZeeshan Khan
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design pptNAWAZ KHAN
 
Responsive Web Development
Responsive Web DevelopmentResponsive Web Development
Responsive Web DevelopmentReema
 
Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)Sandip Jadhav
 
Responsive Web Design | Website Designing
Responsive Web Design | Website DesigningResponsive Web Design | Website Designing
Responsive Web Design | Website DesigningMSA Technosoft
 
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
 
Wunderman - Responsive Design
Wunderman - Responsive DesignWunderman - Responsive Design
Wunderman - Responsive Designnrgza
 
Wunderman Responsive Design
Wunderman Responsive DesignWunderman Responsive Design
Wunderman Responsive Designnrgza
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design CLEVER°FRANKE
 
Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)Tirthesh Ganatra
 

Similar a S. Responsive Web Design (20)

Responsive web design guidelines
Responsive web design guidelinesResponsive web design guidelines
Responsive web design guidelines
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Intro to Responsive Web Design
Intro to Responsive Web DesignIntro to Responsive Web Design
Intro to Responsive Web Design
 
Alexa IT Solution Responsive Web designing
Alexa IT Solution Responsive Web designingAlexa IT Solution Responsive Web designing
Alexa IT Solution Responsive Web designing
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design ppt
 
Responsive Web Development
Responsive Web DevelopmentResponsive Web Development
Responsive Web Development
 
Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)
 
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
 
Responding Responsively
Responding ResponsivelyResponding Responsively
Responding Responsively
 
Responsive Web Design | Website Designing
Responsive Web Design | Website DesigningResponsive Web Design | Website Designing
Responsive Web Design | Website Designing
 
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
 
Design responsively
Design responsivelyDesign responsively
Design responsively
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Wunderman - Responsive Design
Wunderman - Responsive DesignWunderman - Responsive Design
Wunderman - Responsive Design
 
Wunderman Responsive Design
Wunderman Responsive DesignWunderman Responsive Design
Wunderman Responsive Design
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design
 
What is responsive web design
What is responsive web designWhat is responsive web design
What is responsive web design
 
Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)
 

Último

Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfTechSoup
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxEduSkills OECD
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxSaurabhParmar42
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfMohonDas
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptxSandy Millin
 
How to Filter Blank Lines in Odoo 17 Accounting
How to Filter Blank Lines in Odoo 17 AccountingHow to Filter Blank Lines in Odoo 17 Accounting
How to Filter Blank Lines in Odoo 17 AccountingCeline George
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfYu Kanazawa / Osaka University
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptxraviapr7
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.raviapr7
 
How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17Celine George
 
Latin American Revolutions, c. 1789-1830
Latin American Revolutions, c. 1789-1830Latin American Revolutions, c. 1789-1830
Latin American Revolutions, c. 1789-1830Dave Phillips
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17Celine George
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesMohammad Hassany
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice documentXsasf Sfdfasd
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICESayali Powar
 
NOTES OF DRUGS ACTING ON NERVOUS SYSTEM .pdf
NOTES OF DRUGS ACTING ON NERVOUS SYSTEM .pdfNOTES OF DRUGS ACTING ON NERVOUS SYSTEM .pdf
NOTES OF DRUGS ACTING ON NERVOUS SYSTEM .pdfSumit Tiwari
 
Practical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxPractical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxKatherine Villaluna
 

Último (20)

Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptx
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdf
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
 
How to Filter Blank Lines in Odoo 17 Accounting
How to Filter Blank Lines in Odoo 17 AccountingHow to Filter Blank Lines in Odoo 17 Accounting
How to Filter Blank Lines in Odoo 17 Accounting
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
 
Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.
 
How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17
 
Latin American Revolutions, c. 1789-1830
Latin American Revolutions, c. 1789-1830Latin American Revolutions, c. 1789-1830
Latin American Revolutions, c. 1789-1830
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming Classes
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice document
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICE
 
NOTES OF DRUGS ACTING ON NERVOUS SYSTEM .pdf
NOTES OF DRUGS ACTING ON NERVOUS SYSTEM .pdfNOTES OF DRUGS ACTING ON NERVOUS SYSTEM .pdf
NOTES OF DRUGS ACTING ON NERVOUS SYSTEM .pdf
 
Practical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptxPractical Research 1 Lesson 9 Scope and delimitation.pptx
Practical Research 1 Lesson 9 Scope and delimitation.pptx
 

S. Responsive Web Design

  • 3. The Multi-Screen World • Increasing number of devices we use per day effects how we search and consume content. – Phones – Tablets – Watches – Desktops/Laptops – TVs, DVD players – Gaming Consoles The New Multi-Screen World, Google 2012
  • 4. How Do We Adapt to This New World? Separate Mobile Website A separate website is designed specifically for mobile. Results in two code-bases with different functionality for each. Adaptive Website Design Websites adapt to the width of the browser at specific points. The website is only concerned about the browser being a specific width, at which point it adapts the layout. Responsive Website Design Websites respond to the size of the browser at any given point. No matter what the browser width may be, the site adjusts its layout (and perhaps functionality) in a way that is optimized to the screen.
  • 5. Responsive Web Design (RWD) Responsive Website Design uses a single HTML code base for all platforms. “Rather than creating disconnected designs, each tailored to a particular device or browser, we should instead treat them as facets of the same experience. In other words, we can craft sites that are not only more flexible, but that can adapt to the media that renders them.” - Ethan Marcotte, Author of Responsive Web Design
  • 6. The Ingredients of RWD 1. Flexible/Fluid Layouts 2. Flexible Images and Media 3. Media Queries
  • 8. Fluid Grid Layouts • Rather than setting our layouts in pixels we use percentages. • We adjust our box model math accordingly
  • 9. Responsive Typography • We set type in percentages, em units, or rem units • Type adjusts relative to a flexible baseline. • Watch your line length for readability. • Adjust font size to be larger on smaller screens
  • 11. Flexible Images • Image widths are set to expand to fill the size of their container and maintain proportion. • Capture at highest resolution & let browser scale img { width: 100%; height: auto; }
  • 12. Scalable Vector Graphics (SVGs) • Vector based graphics rendered by the browser. – Can scale up/down without loss of quality – Low file sizes – Can be modified via css to change size, color, etc... • If you have a flat illustration, An icon, a logo, just about anything that can be displayed as an SVG, then SVG is the way to go.
  • 13. What About High Resolution Screens? • Some techniques use new HTML elements or attributes to account for multiple versions of the image to fit the correct resolution determined by the browser. – <picture> element – “srcset” attribute on <img> element No agreed upon solution yet. Both techniques have their strengths/weaknesses and may need additional javascripting or polyfills for true cross-browser support.
  • 15. What Are Media Queries? • Media Queries are a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). • It became a W3C recommended standard in June 2012, and is a cornerstone technology of Responsive web design. • http://mediaqueri.es/
  • 16. Common Media Queries • max-width • max-device-width • min-width • min-device-width • vw (viewport width) • vh (viewport height)
  • 18. Graceful Degradation vs Progressive Enhancement
  • 21. Keep In Mind • Performance/Load times • Accessibility • Imagery • Scripts • Typography - web fonts, font stack fallbacks on devices (standard desktop typefaces not available on mobile)
  • 22. A successful responsive design bends, flexes, and breaks the right way to make the best use of the available space. - Jamie Neely, Typecast

Notas del editor

  1. In April 2015 Google search expanded its use of mobile-friendliness as a ranking signal.
  2. Based on concept of responsive architectural design, whereby a room or space automatically adjusts to the number and flow of people within it.
  3. Think of this as a way to test width, height and other attributes of browser
  4. It is best to add media queries at the point where the parts of the design start to break rather than stick to device sizes.