SlideShare ist ein Scribd-Unternehmen logo
1 von 9
RESPONSIVE WEB DESIGN
PRESENTATION
BY:
ATUL KUMAR
1DT19IS022
WHAT IS RESPONSIVE WEB DESIGN
Responsive Web Design makes your web page
look good on all devices (desktops, tablets, and
phones).
Responsive Web Design is about using HTML and
CSS to resize, hide, shrink, enlarge, or move the
content to make it look good on any screen
MAKE YOUR WEBSITE EASILY
ACCESSIBLE ON MOBILE DEVICES
• Don’t make a separate mobile-friendly website
• Use responsive design
• Always include a viewport meta tag
• Font sizes and button size matters
• Use high-resolution images
• Remove the default zoom
• Use YouTube videos on your site
• Don’t constrain your user’s mobile experience
• Never stop testing
WHAT DOES IT MEAN WHEN
A WEBSITE IS RESPONSIVE?
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
mobile phones to desktop computer monitors).
WHY IS IT IMPORTANT?
A responsive design can improve user experience
and accommodate everyone, whether they are on a
desktop or a smartphone or tablet.
A responsive website is all round much easier to
manage. With the importance of mobile-friendly
websites only increasing, take a minute to ensure
your web design is the best it can be!
USEFUL TIPS FOR CROSS-
BROWSER CODING.
Keep it simple. ...
Validate your code. ...
Avoid browser quirks modes. ...
Use CSS reset rules. ...
Develop in Firefox. ...
Test in as many browsers as possible. ...
Fix IE issues by using conditional comments. ...
8. Make IE6 work with transparent PNGs.
HOW IS RESPONSIVE DESIGN
DIFFERENT FROM ADAPTIVE DESIGN?
Adaptive web design is different from responsive
design in that there isn't one layout that always
changes. Instead, there are several distinct layouts
for multiple screen sizes. ... The site detects the type
of device used, and delivers the pre-set layout for
that device.
WHAT IS RESPONSIVE DESIGN
IN ARCHITECTURE?
Responsive architecture is an evolving field
of architectural practice and research. Responsive
architectures are those that measure actual
environmental conditions (via sensors) to enable
buildings to adapt their form, shape, color or
character responsively
THANK YOU

Weitere ähnliche Inhalte

Ähnlich wie Responsive web design UDI.pptx

Tips to Build Responsive Website Design
Tips to Build Responsive Website DesignTips to Build Responsive Website Design
Tips to Build Responsive Website DesignHari Kumar
 
Impact_Responsive web design brings success to your business
Impact_Responsive web design brings success to your businessImpact_Responsive web design brings success to your business
Impact_Responsive web design brings success to your businessAmit Thakur
 
Impact_Responsive Web Design Brings Success to Your Business-AmitFBOXERLLP
Impact_Responsive Web Design Brings Success to Your Business-AmitFBOXERLLPImpact_Responsive Web Design Brings Success to Your Business-AmitFBOXERLLP
Impact_Responsive Web Design Brings Success to Your Business-AmitFBOXERLLPAmit Thakur
 
Introduction | SEO Expate BD Ltd.
Introduction | SEO Expate BD Ltd.Introduction | SEO Expate BD Ltd.
Introduction | SEO Expate BD Ltd.Sonia Simi
 
Website redesign
Website redesignWebsite redesign
Website redesignOptfinITy
 
Responsive web-design
Responsive web-designResponsive web-design
Responsive web-designSopan Ganage
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design pptNAWAZ KHAN
 
Whitepaper: Responsive Test - A test framework to cover it all
Whitepaper: Responsive Test - A test framework to cover it allWhitepaper: Responsive Test - A test framework to cover it all
Whitepaper: Responsive Test - A test framework to cover it allIndium Software
 
Wunderman - Responsive Design
Wunderman - Responsive DesignWunderman - Responsive Design
Wunderman - Responsive Designnrgza
 
Wunderman Responsive Design
Wunderman Responsive DesignWunderman Responsive Design
Wunderman Responsive Designnrgza
 
Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)Sandip Jadhav
 
S. Responsive Web Design
S. Responsive Web DesignS. Responsive Web Design
S. Responsive Web Designshelly3160
 
Intro to Responsive
Intro to ResponsiveIntro to Responsive
Intro to ResponsiveTom Elliott
 

Ähnlich wie Responsive web design UDI.pptx (20)

Tips to Build Responsive Website Design
Tips to Build Responsive Website DesignTips to Build Responsive Website Design
Tips to Build Responsive Website Design
 
Impact_Responsive web design brings success to your business
Impact_Responsive web design brings success to your businessImpact_Responsive web design brings success to your business
Impact_Responsive web design brings success to your business
 
Impact_Responsive Web Design Brings Success to Your Business-AmitFBOXERLLP
Impact_Responsive Web Design Brings Success to Your Business-AmitFBOXERLLPImpact_Responsive Web Design Brings Success to Your Business-AmitFBOXERLLP
Impact_Responsive Web Design Brings Success to Your Business-AmitFBOXERLLP
 
Introduction | SEO Expate BD Ltd.
Introduction | SEO Expate BD Ltd.Introduction | SEO Expate BD Ltd.
Introduction | SEO Expate BD Ltd.
 
Website redesign
Website redesignWebsite redesign
Website redesign
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
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
 
Whitepaper: Responsive Test - A test framework to cover it all
Whitepaper: Responsive Test - A test framework to cover it allWhitepaper: Responsive Test - A test framework to cover it all
Whitepaper: Responsive Test - A test framework to cover it all
 
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
 
Mobile Responsive ​ Website Designing.pdf
Mobile Responsive ​ Website Designing.pdfMobile Responsive ​ Website Designing.pdf
Mobile Responsive ​ Website Designing.pdf
 
Responsive Web Design Whitepaper
Responsive Web Design WhitepaperResponsive Web Design Whitepaper
Responsive Web Design Whitepaper
 
Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)
 
10 Things You Must Need To Know About Responsive Design.pdf
10 Things You Must Need To Know About Responsive Design.pdf10 Things You Must Need To Know About Responsive Design.pdf
10 Things You Must Need To Know About Responsive Design.pdf
 
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
 
S. Responsive Web Design
S. Responsive Web DesignS. Responsive Web Design
S. Responsive Web Design
 
Intro to Responsive
Intro to ResponsiveIntro to Responsive
Intro to Responsive
 

Kürzlich hochgeladen

Ground Improvement Technique: Earth Reinforcement
Ground Improvement Technique: Earth ReinforcementGround Improvement Technique: Earth Reinforcement
Ground Improvement Technique: Earth ReinforcementDr. Deepak Mudgal
 
Convergence of Robotics and Gen AI offers excellent opportunities for Entrepr...
Convergence of Robotics and Gen AI offers excellent opportunities for Entrepr...Convergence of Robotics and Gen AI offers excellent opportunities for Entrepr...
Convergence of Robotics and Gen AI offers excellent opportunities for Entrepr...ssuserdfc773
 
Augmented Reality (AR) with Augin Software.pptx
Augmented Reality (AR) with Augin Software.pptxAugmented Reality (AR) with Augin Software.pptx
Augmented Reality (AR) with Augin Software.pptxMustafa Ahmed
 
Autodesk Construction Cloud (Autodesk Build).pptx
Autodesk Construction Cloud (Autodesk Build).pptxAutodesk Construction Cloud (Autodesk Build).pptx
Autodesk Construction Cloud (Autodesk Build).pptxMustafa Ahmed
 
8th International Conference on Soft Computing, Mathematics and Control (SMC ...
8th International Conference on Soft Computing, Mathematics and Control (SMC ...8th International Conference on Soft Computing, Mathematics and Control (SMC ...
8th International Conference on Soft Computing, Mathematics and Control (SMC ...josephjonse
 
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdflitvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdfAlexander Litvinenko
 
Databricks Generative AI Fundamentals .pdf
Databricks Generative AI Fundamentals  .pdfDatabricks Generative AI Fundamentals  .pdf
Databricks Generative AI Fundamentals .pdfVinayVadlagattu
 
Post office management system project ..pdf
Post office management system project ..pdfPost office management system project ..pdf
Post office management system project ..pdfKamal Acharya
 
DFT - Discrete Fourier Transform and its Properties
DFT - Discrete Fourier Transform and its PropertiesDFT - Discrete Fourier Transform and its Properties
DFT - Discrete Fourier Transform and its PropertiesShiny Christobel
 
Computer Networks Basics of Network Devices
Computer Networks  Basics of Network DevicesComputer Networks  Basics of Network Devices
Computer Networks Basics of Network DevicesChandrakantDivate1
 
Working Principle of Echo Sounder and Doppler Effect.pdf
Working Principle of Echo Sounder and Doppler Effect.pdfWorking Principle of Echo Sounder and Doppler Effect.pdf
Working Principle of Echo Sounder and Doppler Effect.pdfSkNahidulIslamShrabo
 
Unsatisfied Bhabhi ℂall Girls Ahmedabad Book Esha 6378878445 Top Class ℂall G...
Unsatisfied Bhabhi ℂall Girls Ahmedabad Book Esha 6378878445 Top Class ℂall G...Unsatisfied Bhabhi ℂall Girls Ahmedabad Book Esha 6378878445 Top Class ℂall G...
Unsatisfied Bhabhi ℂall Girls Ahmedabad Book Esha 6378878445 Top Class ℂall G...Payal Garg #K09
 
Call for Papers - Journal of Electrical Systems (JES), E-ISSN: 1112-5209, ind...
Call for Papers - Journal of Electrical Systems (JES), E-ISSN: 1112-5209, ind...Call for Papers - Journal of Electrical Systems (JES), E-ISSN: 1112-5209, ind...
Call for Papers - Journal of Electrical Systems (JES), E-ISSN: 1112-5209, ind...Christo Ananth
 
Adsorption (mass transfer operations 2) ppt
Adsorption (mass transfer operations 2) pptAdsorption (mass transfer operations 2) ppt
Adsorption (mass transfer operations 2) pptjigup7320
 
Danikor Product Catalog- Screw Feeder.pdf
Danikor Product Catalog- Screw Feeder.pdfDanikor Product Catalog- Screw Feeder.pdf
Danikor Product Catalog- Screw Feeder.pdfthietkevietthinh
 
History of Indian Railways - the story of Growth & Modernization
History of Indian Railways - the story of Growth & ModernizationHistory of Indian Railways - the story of Growth & Modernization
History of Indian Railways - the story of Growth & ModernizationEmaan Sharma
 
Computer Graphics Introduction To Curves
Computer Graphics Introduction To CurvesComputer Graphics Introduction To Curves
Computer Graphics Introduction To CurvesChandrakantDivate1
 
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptxS1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptxSCMS School of Architecture
 
Introduction to Artificial Intelligence ( AI)
Introduction to Artificial Intelligence ( AI)Introduction to Artificial Intelligence ( AI)
Introduction to Artificial Intelligence ( AI)ChandrakantDivate1
 
Fundamentals of Structure in C Programming
Fundamentals of Structure in C ProgrammingFundamentals of Structure in C Programming
Fundamentals of Structure in C ProgrammingChandrakantDivate1
 

Kürzlich hochgeladen (20)

Ground Improvement Technique: Earth Reinforcement
Ground Improvement Technique: Earth ReinforcementGround Improvement Technique: Earth Reinforcement
Ground Improvement Technique: Earth Reinforcement
 
Convergence of Robotics and Gen AI offers excellent opportunities for Entrepr...
Convergence of Robotics and Gen AI offers excellent opportunities for Entrepr...Convergence of Robotics and Gen AI offers excellent opportunities for Entrepr...
Convergence of Robotics and Gen AI offers excellent opportunities for Entrepr...
 
Augmented Reality (AR) with Augin Software.pptx
Augmented Reality (AR) with Augin Software.pptxAugmented Reality (AR) with Augin Software.pptx
Augmented Reality (AR) with Augin Software.pptx
 
Autodesk Construction Cloud (Autodesk Build).pptx
Autodesk Construction Cloud (Autodesk Build).pptxAutodesk Construction Cloud (Autodesk Build).pptx
Autodesk Construction Cloud (Autodesk Build).pptx
 
8th International Conference on Soft Computing, Mathematics and Control (SMC ...
8th International Conference on Soft Computing, Mathematics and Control (SMC ...8th International Conference on Soft Computing, Mathematics and Control (SMC ...
8th International Conference on Soft Computing, Mathematics and Control (SMC ...
 
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdflitvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
litvinenko_Henry_Intrusion_Hong-Kong_2024.pdf
 
Databricks Generative AI Fundamentals .pdf
Databricks Generative AI Fundamentals  .pdfDatabricks Generative AI Fundamentals  .pdf
Databricks Generative AI Fundamentals .pdf
 
Post office management system project ..pdf
Post office management system project ..pdfPost office management system project ..pdf
Post office management system project ..pdf
 
DFT - Discrete Fourier Transform and its Properties
DFT - Discrete Fourier Transform and its PropertiesDFT - Discrete Fourier Transform and its Properties
DFT - Discrete Fourier Transform and its Properties
 
Computer Networks Basics of Network Devices
Computer Networks  Basics of Network DevicesComputer Networks  Basics of Network Devices
Computer Networks Basics of Network Devices
 
Working Principle of Echo Sounder and Doppler Effect.pdf
Working Principle of Echo Sounder and Doppler Effect.pdfWorking Principle of Echo Sounder and Doppler Effect.pdf
Working Principle of Echo Sounder and Doppler Effect.pdf
 
Unsatisfied Bhabhi ℂall Girls Ahmedabad Book Esha 6378878445 Top Class ℂall G...
Unsatisfied Bhabhi ℂall Girls Ahmedabad Book Esha 6378878445 Top Class ℂall G...Unsatisfied Bhabhi ℂall Girls Ahmedabad Book Esha 6378878445 Top Class ℂall G...
Unsatisfied Bhabhi ℂall Girls Ahmedabad Book Esha 6378878445 Top Class ℂall G...
 
Call for Papers - Journal of Electrical Systems (JES), E-ISSN: 1112-5209, ind...
Call for Papers - Journal of Electrical Systems (JES), E-ISSN: 1112-5209, ind...Call for Papers - Journal of Electrical Systems (JES), E-ISSN: 1112-5209, ind...
Call for Papers - Journal of Electrical Systems (JES), E-ISSN: 1112-5209, ind...
 
Adsorption (mass transfer operations 2) ppt
Adsorption (mass transfer operations 2) pptAdsorption (mass transfer operations 2) ppt
Adsorption (mass transfer operations 2) ppt
 
Danikor Product Catalog- Screw Feeder.pdf
Danikor Product Catalog- Screw Feeder.pdfDanikor Product Catalog- Screw Feeder.pdf
Danikor Product Catalog- Screw Feeder.pdf
 
History of Indian Railways - the story of Growth & Modernization
History of Indian Railways - the story of Growth & ModernizationHistory of Indian Railways - the story of Growth & Modernization
History of Indian Railways - the story of Growth & Modernization
 
Computer Graphics Introduction To Curves
Computer Graphics Introduction To CurvesComputer Graphics Introduction To Curves
Computer Graphics Introduction To Curves
 
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptxS1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
 
Introduction to Artificial Intelligence ( AI)
Introduction to Artificial Intelligence ( AI)Introduction to Artificial Intelligence ( AI)
Introduction to Artificial Intelligence ( AI)
 
Fundamentals of Structure in C Programming
Fundamentals of Structure in C ProgrammingFundamentals of Structure in C Programming
Fundamentals of Structure in C Programming
 

Responsive web design UDI.pptx

  • 2. WHAT IS RESPONSIVE WEB DESIGN Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones). Responsive Web Design is about using HTML and CSS to resize, hide, shrink, enlarge, or move the content to make it look good on any screen
  • 3. MAKE YOUR WEBSITE EASILY ACCESSIBLE ON MOBILE DEVICES • Don’t make a separate mobile-friendly website • Use responsive design • Always include a viewport meta tag • Font sizes and button size matters • Use high-resolution images • Remove the default zoom • Use YouTube videos on your site • Don’t constrain your user’s mobile experience • Never stop testing
  • 4. WHAT DOES IT MEAN WHEN A WEBSITE IS RESPONSIVE? 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 mobile phones to desktop computer monitors).
  • 5. WHY IS IT IMPORTANT? A responsive design can improve user experience and accommodate everyone, whether they are on a desktop or a smartphone or tablet. A responsive website is all round much easier to manage. With the importance of mobile-friendly websites only increasing, take a minute to ensure your web design is the best it can be!
  • 6. USEFUL TIPS FOR CROSS- BROWSER CODING. Keep it simple. ... Validate your code. ... Avoid browser quirks modes. ... Use CSS reset rules. ... Develop in Firefox. ... Test in as many browsers as possible. ... Fix IE issues by using conditional comments. ... 8. Make IE6 work with transparent PNGs.
  • 7. HOW IS RESPONSIVE DESIGN DIFFERENT FROM ADAPTIVE DESIGN? Adaptive web design is different from responsive design in that there isn't one layout that always changes. Instead, there are several distinct layouts for multiple screen sizes. ... The site detects the type of device used, and delivers the pre-set layout for that device.
  • 8. WHAT IS RESPONSIVE DESIGN IN ARCHITECTURE? Responsive architecture is an evolving field of architectural practice and research. Responsive architectures are those that measure actual environmental conditions (via sensors) to enable buildings to adapt their form, shape, color or character responsively