SlideShare ist ein Scribd-Unternehmen logo
1 von 29
Downloaden Sie, um offline zu lesen
Responsive
Web Design
Done Right
A List Apart, 2010
This is our way forward. Rather than tailoring
disconnected designs to each of an everincreasing number of web devices, we can treat
them as facets of the same experience. We can
design for an optimal viewing experience, but
embed standards-based technologies into our
designs to make them not only more flexible, but
more adaptive to the media that renders them. In
short, we need to practice responsive web design.
But how?
Responsive Web Design (done right)
I think, 2014
Responsive web design is useful when we need to
rearrange the content of each page of a website
depending on the viewing experience while
maintaining the same overall navigation and
keeping more or less the same interaction.
Gmail and LinkedIn all uses different UIs
depending on the device used by user.
MEDIA QUERIES!
<link type="stylesheet"
href=“desktop.css">!
!

<link type="stylesheet"
href="mobile.css" media="all and
(max-width: 320px)">        !
!

<link type="stylesheet"
href="tablet.css" media="all and
(min-width: 321px) and max-width:
800px)">!
Responsive Web Design (done right)
Breakpoints ?
There are several tactics for deciding where to put
breakpoints in a responsive design. There is the
rusty idea that they should be based on common
screen sizes, but this doesn’t scale well. There are
no “common” screen sizes. Another popular
tactic is to create a breakpoint wherever the layout
breaks.
Vasils van Gemert
If you start with a small screen
and you grow it, every time the
width of the main content
grows wider than either 75
characters or 10 words,
something should happen.
Simply said, these are your
breakpoints.

TRY THIS
MOBILE FIRST
Resource Wise
With a mobile first viewpoint, we start by
loading the absolute bare essentials on the
smaller platforms. This leads to a snappier
experience that avoids unnecessary lag. The
additional resources are loaded strictly on an asneeded basis to platforms that can handle them
well.
Joshua Johnson
<meta !
name="viewport" !
content=“!
width=device-width, !
user-scalable=no”!
>
<meta !
name="viewport" !
content=“!
width=device-width, !
user-scalable=no”!
>
HIGH DENSITY DISPLAY, TOUCH, …
small

Galaxy S2

iPhone 4/5

iPad 2

MBook Pro

Ultrabook

CBook

medium

large

touch

HDD
html.touch a{!
    display: block;!
    line-height: 1.8;!
    background-color: #ACA8A8;!
    text-align: center;!
    color: #ffffff;!
    margin: 1px 0;!
    text-decoration: none;!
}
https://github.com/izilla/Supports-Touch
@media print,!
  (-webkit-min-device-pixel-ratio: 1.25),!
  (-o-min-device-pixel-ratio: 5/4),!
  (min-resolution: 120dpi) { !
  .logo {!
    background-image: url("logo@2x.png");!
    background-size: 100px 50px;!
  }!
}
TOO MESSY!
@mixin retina{!
    @media print,!
        (-webkit-min-device-pixel-ratio: 1.25),!
        (-o-min-device-pixel-ratio: 5/4),!
        (min-resolution: 120dpi) { !
        @content        !
    }!
}

TRY THIS
THERE’S STILL <IMG>
srcset: The attribute essentially takes a commaseparated list of URLs each with one or more
descriptors giving the maximum viewport
dimensions and pixel density allowed to use the
image. From the available options, the user
agent then picks the most appropriate image.
<img alt="The Breakfast Combo"!
    src="banner.jpeg"!
    srcset="banner-HD.jpeg 2x, !
banner-phone.jpeg 100w, !
banner-phone-HD.jpeg 100w 2x">
picture: This specification provides developers
with a means to declare multiple sources for an
image, and, through [CSS3-MEDIAQUERIES] (CSS
Media Queries), it gives developers control as to
when those images are to be presented to a
user.

<picture width="500" height="500">!
   <source media="(min-width: 45em)" src="large.jpg">!
   <source media="(min-width: 18em)" src="med.jpg">!
   <source src="small.jpg">!
   <img src="small.jpg" alt="">!
   <p>Accessible text</p>!
</picture>
https://github.com/scottjehl/picturefill
UNUSED JS!
we can load some components only if a media
query match; in this way we can save bandwidth
and CPU.

TRY THIS
TIPS AND
TRICKS
Transition
We can use transition to have a smooth animation
between two different states triggered by media
queries.

TRY THIS
Zooming with rem
We can set all the dimensions of our page in rem and
then create a height/width breakpoints that changes
only the html font-size to obtain a zooming effect.

TRY THIS
Thanks
@sandropaganotti ~ compartoweb.com

Weitere ähnliche Inhalte

Andere mochten auch

Service worker: discover the next web game changer
Service worker: discover the next web game changerService worker: discover the next web game changer
Service worker: discover the next web game changerSandro Paganotti
 
Come sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTMLCome sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTMLSinergia Totale
 
Framework web per lo sviluppo mobile
Framework web per lo sviluppo mobileFramework web per lo sviluppo mobile
Framework web per lo sviluppo mobileSandro Paganotti
 
HTML5 come strumento di sviluppo mobile
HTML5 come strumento di sviluppo mobileHTML5 come strumento di sviluppo mobile
HTML5 come strumento di sviluppo mobileSandro Paganotti
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerMatteo Magni
 
Html5 e css3 nei miei progetti: cosa ho fatto
Html5 e css3 nei miei progetti: cosa ho fattoHtml5 e css3 nei miei progetti: cosa ho fatto
Html5 e css3 nei miei progetti: cosa ho fattoRocco Passaro
 

Andere mochten auch (8)

Service worker: discover the next web game changer
Service worker: discover the next web game changerService worker: discover the next web game changer
Service worker: discover the next web game changer
 
Come sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTMLCome sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTML
 
Discover ServiceWorker
Discover ServiceWorkerDiscover ServiceWorker
Discover ServiceWorker
 
Framework web per lo sviluppo mobile
Framework web per lo sviluppo mobileFramework web per lo sviluppo mobile
Framework web per lo sviluppo mobile
 
HTML5 come strumento di sviluppo mobile
HTML5 come strumento di sviluppo mobileHTML5 come strumento di sviluppo mobile
HTML5 come strumento di sviluppo mobile
 
HTML5 Live
HTML5 LiveHTML5 Live
HTML5 Live
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesigner
 
Html5 e css3 nei miei progetti: cosa ho fatto
Html5 e css3 nei miei progetti: cosa ho fattoHtml5 e css3 nei miei progetti: cosa ho fatto
Html5 e css3 nei miei progetti: cosa ho fatto
 

Ähnlich wie Responsive Web Design (done right)

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Designdanpastori
 
Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)Tirthesh Ganatra
 
Designing for the Mobile Web
Designing for the Mobile WebDesigning for the Mobile Web
Designing for the Mobile WebRefresh Bmore
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Devicefilirom1
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Atos_Worldline
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignShawn Calvert
 
Responsive Web Designs.pdf
Responsive Web Designs.pdfResponsive Web Designs.pdf
Responsive Web Designs.pdfJiniya Bipasha
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10Almog Koren
 
Module 08: Responsive Web Design
Module 08: Responsive Web DesignModule 08: Responsive Web Design
Module 08: Responsive Web DesignDaniel Drew Turner
 
Fragmented Web Design
Fragmented Web DesignFragmented Web Design
Fragmented Web DesignMatthias Lau
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsSEGIC
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)admecindia1
 
Responsive web design
Responsive web designResponsive web design
Responsive web designZeeshan Khan
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive WebsitesJoe Seifi
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJulia Vi
 

Ähnlich wie Responsive Web Design (done right) (20)

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)
 
Designing for the Mobile Web
Designing for the Mobile WebDesigning for the Mobile Web
Designing for the Mobile Web
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Device
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
Mobile ux sot a and challenges
Mobile ux sot a and challengesMobile ux sot a and challenges
Mobile ux sot a and challenges
 
Mobile UX Challenges
Mobile UX ChallengesMobile UX Challenges
Mobile UX Challenges
 
Responsive Web Designs.pdf
Responsive Web Designs.pdfResponsive Web Designs.pdf
Responsive Web Designs.pdf
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10
 
Module 08: Responsive Web Design
Module 08: Responsive Web DesignModule 08: Responsive Web Design
Module 08: Responsive Web Design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Fragmented Web Design
Fragmented Web DesignFragmented Web Design
Fragmented Web Design
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
 
Responsive Web Designing Fundamentals
Responsive Web Designing FundamentalsResponsive Web Designing Fundamentals
Responsive Web Designing Fundamentals
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive design
Responsive designResponsive design
Responsive design
 

Kürzlich hochgeladen

COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 

Kürzlich hochgeladen (20)

COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 

Responsive Web Design (done right)

  • 2. A List Apart, 2010 This is our way forward. Rather than tailoring disconnected designs to each of an everincreasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design. But how?
  • 4. I think, 2014 Responsive web design is useful when we need to rearrange the content of each page of a website depending on the viewing experience while maintaining the same overall navigation and keeping more or less the same interaction. Gmail and LinkedIn all uses different UIs depending on the device used by user.
  • 6. <link type="stylesheet" href=“desktop.css">! ! <link type="stylesheet" href="mobile.css" media="all and (max-width: 320px)">        ! ! <link type="stylesheet" href="tablet.css" media="all and (min-width: 321px) and max-width: 800px)">!
  • 8. Breakpoints ? There are several tactics for deciding where to put breakpoints in a responsive design. There is the rusty idea that they should be based on common screen sizes, but this doesn’t scale well. There are no “common” screen sizes. Another popular tactic is to create a breakpoint wherever the layout breaks. Vasils van Gemert
  • 9. If you start with a small screen and you grow it, every time the width of the main content grows wider than either 75 characters or 10 words, something should happen. Simply said, these are your breakpoints. TRY THIS
  • 11. Resource Wise With a mobile first viewpoint, we start by loading the absolute bare essentials on the smaller platforms. This leads to a snappier experience that avoids unnecessary lag. The additional resources are loaded strictly on an asneeded basis to platforms that can handle them well. Joshua Johnson
  • 14. HIGH DENSITY DISPLAY, TOUCH, …
  • 15. small Galaxy S2 iPhone 4/5 iPad 2 MBook Pro Ultrabook CBook medium large touch HDD
  • 16. html.touch a{!     display: block;!     line-height: 1.8;!     background-color: #ACA8A8;!     text-align: center;!     color: #ffffff;!     margin: 1px 0;!     text-decoration: none;! } https://github.com/izilla/Supports-Touch
  • 17. @media print,!   (-webkit-min-device-pixel-ratio: 1.25),!   (-o-min-device-pixel-ratio: 5/4),!   (min-resolution: 120dpi) { !   .logo {!     background-image: url("logo@2x.png");!     background-size: 100px 50px;!   }! }
  • 19. @mixin retina{!     @media print,!         (-webkit-min-device-pixel-ratio: 1.25),!         (-o-min-device-pixel-ratio: 5/4),!         (min-resolution: 120dpi) { !         @content        !     }! } TRY THIS
  • 21. srcset: The attribute essentially takes a commaseparated list of URLs each with one or more descriptors giving the maximum viewport dimensions and pixel density allowed to use the image. From the available options, the user agent then picks the most appropriate image. <img alt="The Breakfast Combo"!     src="banner.jpeg"!     srcset="banner-HD.jpeg 2x, ! banner-phone.jpeg 100w, ! banner-phone-HD.jpeg 100w 2x">
  • 22. picture: This specification provides developers with a means to declare multiple sources for an image, and, through [CSS3-MEDIAQUERIES] (CSS Media Queries), it gives developers control as to when those images are to be presented to a user. <picture width="500" height="500">!    <source media="(min-width: 45em)" src="large.jpg">!    <source media="(min-width: 18em)" src="med.jpg">!    <source src="small.jpg">!    <img src="small.jpg" alt="">!    <p>Accessible text</p>! </picture>
  • 25. we can load some components only if a media query match; in this way we can save bandwidth and CPU. TRY THIS
  • 27. Transition We can use transition to have a smooth animation between two different states triggered by media queries. TRY THIS
  • 28. Zooming with rem We can set all the dimensions of our page in rem and then create a height/width breakpoints that changes only the html font-size to obtain a zooming effect. TRY THIS