SlideShare a Scribd company logo
1 of 22
Download to read offline
Responsive Web
          Design


with HTML5 and CSS3
Outline
● Introduction
● When To Use It? Why?
● How?
  ○   HTML5
  ○   CSS3
  ○   Media Queries
  ○   Design
● Conclusion
  ○ Advantage
  ○ Disadvantage
Introduction
● What is Responsive Web Design?
  ○ A website that renders the content respond to the
    device that accesses it.
When To Use It? Why?
● Things to Consider:
  ○   Money & Time
  ○   SEO (Search Engine Optimization)
  ○   Performance
  ○   Browser Support
How To Do It?
● 4 Main Points to Know:
  ○   HTML5
  ○   CSS3
  ○   Media Queries
  ○   Design
HTML5
● What is HTML5?
  ○ The fifth revision of HyperText Markup Language,
    the core language for presenting content on the web.
HTML5
● Graphics / Multimedia
  ○   <cavas> (2D/3D), <video>, <audio>, ...
● Realtime / Communication
  ○   WebSocket : chat, analytic, ...
● File / Hardware Access
  ○   Geolocation, Device Orientation, ...
● Offline / Storage
  ○   SQL Database, Offline, Application Cache, ...
● Semantics & Markup
  ○   <header>, <footer>, <input type="tel" .../>, ...
● Nuts & Bolts
  ○   document.getElementsByClassName("section"), ...
HTML5
● Example
  <input type="tel" name="telephone" value="" />
CSS3
● What is CSS3?
  CSS3 is the newest implementation of that
  markup language and enables responsive
  markup.
CSS3
● CSS Selectors
  tr:nth-child(even) {
      background-color: gray;
  }
  tr:nth-child(odd) {
      background-color: white;
  }
CSS3
● Web Fonts
  @font-face {
    font-family: 'FontName';
    src: url(FontPathLocation.ttf);
  }

  h1 {
    font-family: 'FontName';
  }
CSS3
● Text Wrapping
  div {
     text-overflow: ellipsis;
  }




● Columns
  div {
      *-column-count: 2;
      *-column-rule: 1px solid #bbb;
      *-column-gap: 2em;
  }
CSS3
●   Transitions
●   Transforms / Rotations
●   Animations
●   Button Style
●   Text Shadow
●   Rounded corners
●   Detect screen size, device orientation, ...
●   ...
Media Queries
● What is Media Queries?
  A media query combines a media type and a
  condition to specify how web content will
  appear on a particular receiving device.
Media Queries
 ● Example
@media screen and (min-width:1001px) and (max-width:1400px){
    body {
       background-color: red;
    }
}
@media screen and (min-width:501px) and (max-width:1000px){
    body {
       background-color: blue;
    }
}
@media screen and (min-width:240px) and (max-width:500px){
    body {
       background-color: white;
    }
}
Media Queries
Design
● How to design website?
  ○ Design from smallest to larger viewports/screen
    sizes.
  ○ "Stop thinking in pages, start thinking in systems."
                                                   - Jeremy Keith
Conclusion
● Advantage
  ○   User Experience (Mobile/Tablet/Desktop)
  ○   Analytics
  ○   Not separate mobile site (for Sharing/Linking)
  ○   Optimized content (SEO best practice)
  ○   Development (no redirects/user-agent targeting)
  ○   Maintenance
  ○   Information Architecture
Conclusion
● Disadvantage
  ○   Limitations of CSS media queries
  ○   Image resizing
  ○   Speed
  ○   Mobile needs and desktop needs may be different
  ○   Mobile versions are always more optimized
Thanks for Your
   Attention

 Question & Answer
Demo
References
● Books:
  ○ Responsive Web Design with HTML5 and CSS3 by
    Ben Frain
● URLs:
  ○ HTML5 : http://slides.html5rocks.com
  ○ RWD : http://goo.gl/eagpD

More Related Content

What's hot

Responsive Design Presentation
Responsive Design PresentationResponsive Design Presentation
Responsive Design PresentationEugen Figursky
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design pptNAWAZ KHAN
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1Shahrzad Peyman
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web developmentMohammed Safwat
 
Elements Of Web Design
Elements Of Web DesignElements Of Web Design
Elements Of Web DesignDan Dixon
 
ASP.NET Presentation
ASP.NET PresentationASP.NET Presentation
ASP.NET Presentationdimuthu22
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design pptaccede16
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web ArchitectureChamnap Chhorn
 
Advanced Web Development
Advanced Web DevelopmentAdvanced Web Development
Advanced Web DevelopmentRobert J. Stein
 
Web Development In 2018
Web Development In 2018Web Development In 2018
Web Development In 2018Traversy Media
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introductionshaojung
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Gil Fink
 
Introduction to Web Development
Introduction to Web DevelopmentIntroduction to Web Development
Introduction to Web DevelopmentParvez Mahbub
 

What's hot (20)

Responsive Design Presentation
Responsive Design PresentationResponsive Design Presentation
Responsive Design Presentation
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design ppt
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1
 
Web development
Web developmentWeb development
Web development
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
Page layout with css
Page layout with cssPage layout with css
Page layout with css
 
Elements Of Web Design
Elements Of Web DesignElements Of Web Design
Elements Of Web Design
 
ASP.NET Presentation
ASP.NET PresentationASP.NET Presentation
ASP.NET Presentation
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design ppt
 
Intro to html 5
Intro to html 5Intro to html 5
Intro to html 5
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web Architecture
 
Advanced Web Development
Advanced Web DevelopmentAdvanced Web Development
Advanced Web Development
 
Web Development In 2018
Web Development In 2018Web Development In 2018
Web Development In 2018
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introduction
 
Css3
Css3Css3
Css3
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Introduction to Web Development
Introduction to Web DevelopmentIntroduction to Web Development
Introduction to Web Development
 
Php introduction
Php introductionPhp introduction
Php introduction
 

Viewers also liked

Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Joseph Lewis
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignKoombea
 
Introduction to Frontend Development - Session 1 - HTML Fundamentals
Introduction to Frontend Development - Session 1 - HTML FundamentalsIntroduction to Frontend Development - Session 1 - HTML Fundamentals
Introduction to Frontend Development - Session 1 - HTML FundamentalsKalin Chernev
 
Game jump: frontend introduction #1
Game jump: frontend introduction #1Game jump: frontend introduction #1
Game jump: frontend introduction #1Sebastian Pożoga
 
Game jump frontend introduction #workshop1
Game jump  frontend introduction #workshop1Game jump  frontend introduction #workshop1
Game jump frontend introduction #workshop1Sebastian Pożoga
 
Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)Sandip Jadhav
 
Importing Files Into Adobe Audition
Importing Files Into Adobe AuditionImporting Files Into Adobe Audition
Importing Files Into Adobe AuditionSamuel Edsall
 
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García MilanConferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García MilanAndres Karp
 
Comparative study of web 1, Web 2 and Web 3
Comparative study of web 1, Web 2 and Web 3Comparative study of web 1, Web 2 and Web 3
Comparative study of web 1, Web 2 and Web 3Dlis Mu
 
Advanced PC Maintenance and Troubleshooting
Advanced PC Maintenance and TroubleshootingAdvanced PC Maintenance and Troubleshooting
Advanced PC Maintenance and TroubleshootingNatan Mesfin
 
Refreshing Your UI with HTML5, Bootstrap and CSS3
Refreshing Your UI with HTML5, Bootstrap and CSS3Refreshing Your UI with HTML5, Bootstrap and CSS3
Refreshing Your UI with HTML5, Bootstrap and CSS3Matt Raible
 
Web 1.0 to Web 3.0 - Evolution of the Web and its Various Challenges
Web 1.0 to Web 3.0 - Evolution of the Web and its Various ChallengesWeb 1.0 to Web 3.0 - Evolution of the Web and its Various Challenges
Web 1.0 to Web 3.0 - Evolution of the Web and its Various ChallengesSubhash Basistha
 
Web Evolution Nova Spivack Twine
Web Evolution   Nova Spivack   TwineWeb Evolution   Nova Spivack   Twine
Web Evolution Nova Spivack TwineNova Spivack
 
Magazine Layout and Colour Scheme
Magazine Layout and Colour SchemeMagazine Layout and Colour Scheme
Magazine Layout and Colour SchemeLewisBrownMedia
 

Viewers also liked (20)

Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
Introduction to Frontend Development - Session 1 - HTML Fundamentals
Introduction to Frontend Development - Session 1 - HTML FundamentalsIntroduction to Frontend Development - Session 1 - HTML Fundamentals
Introduction to Frontend Development - Session 1 - HTML Fundamentals
 
Game jump: frontend introduction #1
Game jump: frontend introduction #1Game jump: frontend introduction #1
Game jump: frontend introduction #1
 
Game jump frontend introduction #workshop1
Game jump  frontend introduction #workshop1Game jump  frontend introduction #workshop1
Game jump frontend introduction #workshop1
 
Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)
 
Importing Files Into Adobe Audition
Importing Files Into Adobe AuditionImporting Files Into Adobe Audition
Importing Files Into Adobe Audition
 
Basic Html for beginners.
Basic Html for beginners.Basic Html for beginners.
Basic Html for beginners.
 
Introduction To Web Design
Introduction To Web DesignIntroduction To Web Design
Introduction To Web Design
 
Web 1.0 and Web 2.0
Web 1.0 and Web 2.0Web 1.0 and Web 2.0
Web 1.0 and Web 2.0
 
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García MilanConferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García Milan
 
Comparative study of web 1, Web 2 and Web 3
Comparative study of web 1, Web 2 and Web 3Comparative study of web 1, Web 2 and Web 3
Comparative study of web 1, Web 2 and Web 3
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Advanced PC Maintenance and Troubleshooting
Advanced PC Maintenance and TroubleshootingAdvanced PC Maintenance and Troubleshooting
Advanced PC Maintenance and Troubleshooting
 
Web 1.0 2.0-3.0-4.0 Overview
Web 1.0 2.0-3.0-4.0 OverviewWeb 1.0 2.0-3.0-4.0 Overview
Web 1.0 2.0-3.0-4.0 Overview
 
Refreshing Your UI with HTML5, Bootstrap and CSS3
Refreshing Your UI with HTML5, Bootstrap and CSS3Refreshing Your UI with HTML5, Bootstrap and CSS3
Refreshing Your UI with HTML5, Bootstrap and CSS3
 
Web 1.0 to Web 3.0 - Evolution of the Web and its Various Challenges
Web 1.0 to Web 3.0 - Evolution of the Web and its Various ChallengesWeb 1.0 to Web 3.0 - Evolution of the Web and its Various Challenges
Web 1.0 to Web 3.0 - Evolution of the Web and its Various Challenges
 
Web Evolution Nova Spivack Twine
Web Evolution   Nova Spivack   TwineWeb Evolution   Nova Spivack   Twine
Web Evolution Nova Spivack Twine
 
Magazine Layout and Colour Scheme
Magazine Layout and Colour SchemeMagazine Layout and Colour Scheme
Magazine Layout and Colour Scheme
 
Oops in PHP
Oops in PHPOops in PHP
Oops in PHP
 

Similar to Responsive Web Design with HTML5 and CSS3

HTML5 New Features and Resources
HTML5 New Features and ResourcesHTML5 New Features and Resources
HTML5 New Features and ResourcesRon Reiter
 
AD109 Navigating the Jungle of Modern Web Development
AD109 Navigating the Jungle of Modern Web DevelopmentAD109 Navigating the Jungle of Modern Web Development
AD109 Navigating the Jungle of Modern Web DevelopmentShean McManus
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Frédéric Harper
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesiabrucelawson
 
Responsive Implementation in Drupal
Responsive Implementation in DrupalResponsive Implementation in Drupal
Responsive Implementation in DrupalMukesh Agarwal
 
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptxINDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx12KritiGaneriwal
 
Responsive Design: Building for a Modern Web
Responsive Design: Building for a Modern WebResponsive Design: Building for a Modern Web
Responsive Design: Building for a Modern WebHarvard Web Working Group
 
Web Design Trends For 2016
Web Design Trends For 2016Web Design Trends For 2016
Web Design Trends For 2016Pixel Crayons
 
Life in CSE.pptx
Life in CSE.pptxLife in CSE.pptx
Life in CSE.pptxVedVekhande
 
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
 
Responsive Web Design - 01.26.12
Responsive Web Design - 01.26.12Responsive Web Design - 01.26.12
Responsive Web Design - 01.26.12Digiflare
 
Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Frédéric Harper
 
Web Design Workshop with seoplus+ and Google
Web Design Workshop with seoplus+ and GoogleWeb Design Workshop with seoplus+ and Google
Web Design Workshop with seoplus+ and Googleseoplus+
 
Developing for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinDeveloping for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinRazorfish
 
ASHOK KUMAR UI Developer Resume
ASHOK KUMAR UI Developer ResumeASHOK KUMAR UI Developer Resume
ASHOK KUMAR UI Developer ResumeSorakayala Ashok
 
Responsive web design
Responsive web designResponsive web design
Responsive web designChris Love
 

Similar to Responsive Web Design with HTML5 and CSS3 (20)

HTML5 New Features and Resources
HTML5 New Features and ResourcesHTML5 New Features and Resources
HTML5 New Features and Resources
 
AD109 Navigating the Jungle of Modern Web Development
AD109 Navigating the Jungle of Modern Web DevelopmentAD109 Navigating the Jungle of Modern Web Development
AD109 Navigating the Jungle of Modern Web Development
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
Responsive Implementation in Drupal
Responsive Implementation in DrupalResponsive Implementation in Drupal
Responsive Implementation in Drupal
 
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptxINDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
 
The Appy Hour
The Appy HourThe Appy Hour
The Appy Hour
 
Responsive Design: Building for a Modern Web
Responsive Design: Building for a Modern WebResponsive Design: Building for a Modern Web
Responsive Design: Building for a Modern Web
 
Web Design Trends For 2016
Web Design Trends For 2016Web Design Trends For 2016
Web Design Trends For 2016
 
Approaches to Responsive Wen Design & Development
Approaches to Responsive Wen Design & DevelopmentApproaches to Responsive Wen Design & Development
Approaches to Responsive Wen Design & Development
 
Life in CSE.pptx
Life in CSE.pptxLife in CSE.pptx
Life in CSE.pptx
 
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
 
Responsive Web Design - 01.26.12
Responsive Web Design - 01.26.12Responsive Web Design - 01.26.12
Responsive Web Design - 01.26.12
 
Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13
 
HTML 5 and CSS 3
HTML 5 and CSS 3HTML 5 and CSS 3
HTML 5 and CSS 3
 
Web Design Workshop with seoplus+ and Google
Web Design Workshop with seoplus+ and GoogleWeb Design Workshop with seoplus+ and Google
Web Design Workshop with seoplus+ and Google
 
Developing for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinDeveloping for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic Welterlin
 
ASHOK KUMAR UI Developer Resume
ASHOK KUMAR UI Developer ResumeASHOK KUMAR UI Developer Resume
ASHOK KUMAR UI Developer Resume
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 

Responsive Web Design with HTML5 and CSS3

  • 1. Responsive Web Design with HTML5 and CSS3
  • 2. Outline ● Introduction ● When To Use It? Why? ● How? ○ HTML5 ○ CSS3 ○ Media Queries ○ Design ● Conclusion ○ Advantage ○ Disadvantage
  • 3. Introduction ● What is Responsive Web Design? ○ A website that renders the content respond to the device that accesses it.
  • 4. When To Use It? Why? ● Things to Consider: ○ Money & Time ○ SEO (Search Engine Optimization) ○ Performance ○ Browser Support
  • 5. How To Do It? ● 4 Main Points to Know: ○ HTML5 ○ CSS3 ○ Media Queries ○ Design
  • 6. HTML5 ● What is HTML5? ○ The fifth revision of HyperText Markup Language, the core language for presenting content on the web.
  • 7. HTML5 ● Graphics / Multimedia ○ <cavas> (2D/3D), <video>, <audio>, ... ● Realtime / Communication ○ WebSocket : chat, analytic, ... ● File / Hardware Access ○ Geolocation, Device Orientation, ... ● Offline / Storage ○ SQL Database, Offline, Application Cache, ... ● Semantics & Markup ○ <header>, <footer>, <input type="tel" .../>, ... ● Nuts & Bolts ○ document.getElementsByClassName("section"), ...
  • 8. HTML5 ● Example <input type="tel" name="telephone" value="" />
  • 9. CSS3 ● What is CSS3? CSS3 is the newest implementation of that markup language and enables responsive markup.
  • 10. CSS3 ● CSS Selectors tr:nth-child(even) { background-color: gray; } tr:nth-child(odd) { background-color: white; }
  • 11. CSS3 ● Web Fonts @font-face { font-family: 'FontName'; src: url(FontPathLocation.ttf); } h1 { font-family: 'FontName'; }
  • 12. CSS3 ● Text Wrapping div { text-overflow: ellipsis; } ● Columns div { *-column-count: 2; *-column-rule: 1px solid #bbb; *-column-gap: 2em; }
  • 13. CSS3 ● Transitions ● Transforms / Rotations ● Animations ● Button Style ● Text Shadow ● Rounded corners ● Detect screen size, device orientation, ... ● ...
  • 14. Media Queries ● What is Media Queries? A media query combines a media type and a condition to specify how web content will appear on a particular receiving device.
  • 15. Media Queries ● Example @media screen and (min-width:1001px) and (max-width:1400px){ body { background-color: red; } } @media screen and (min-width:501px) and (max-width:1000px){ body { background-color: blue; } } @media screen and (min-width:240px) and (max-width:500px){ body { background-color: white; } }
  • 17. Design ● How to design website? ○ Design from smallest to larger viewports/screen sizes. ○ "Stop thinking in pages, start thinking in systems." - Jeremy Keith
  • 18. Conclusion ● Advantage ○ User Experience (Mobile/Tablet/Desktop) ○ Analytics ○ Not separate mobile site (for Sharing/Linking) ○ Optimized content (SEO best practice) ○ Development (no redirects/user-agent targeting) ○ Maintenance ○ Information Architecture
  • 19. Conclusion ● Disadvantage ○ Limitations of CSS media queries ○ Image resizing ○ Speed ○ Mobile needs and desktop needs may be different ○ Mobile versions are always more optimized
  • 20. Thanks for Your Attention Question & Answer
  • 21. Demo
  • 22. References ● Books: ○ Responsive Web Design with HTML5 and CSS3 by Ben Frain ● URLs: ○ HTML5 : http://slides.html5rocks.com ○ RWD : http://goo.gl/eagpD