SlideShare a Scribd company logo

Responsive Web Design

•
•
Heru WIjayanto
Heru WIjayanto

Responsive Web Design This Session is created for "Information Technology" Subject Created By Heru Wijayanto, @ 2020

Related slideshows

Web 2.0: characteristics and tools (2010 eng)
Web 2.0: characteristics and tools (2010 eng)Web 2.0: characteristics and tools (2010 eng)
Web 2.0: characteristics and tools (2010 eng)
 
XCC Introduction - Web Content Management Extension for IBM Connections
XCC Introduction - Web Content Management Extension for IBM ConnectionsXCC Introduction - Web Content Management Extension for IBM Connections
XCC Introduction - Web Content Management Extension for IBM Connections
 
Web2.0 Basics
Web2.0 BasicsWeb2.0 Basics
Web2.0 Basics
 
1 of 26
Download to read offline
ResponsiveWeb Design - A Future of Web Designing Heru Wijayanto Aripradono heru@sociopreneur.id
2
3
BACKGROUND 4 • And then for some websites, there is a mobile website that is separate from the regular desktop site. • This type of site displays at full size when you load it on your smartphone (no zooming necessary), but you’ll notice that it’s often very different from the same website when you view it on your desktop monitor—there’s often a lot of content missing, so the site owner can cut down on the work involved in maintaining multiple versions of the site.
RESPONSIVE WEB DESIGN 5
The term Responsive means , To provide “Responses or Adaptiveness Quickly and Positively” to the users.
What Really Happened Behind UX Iceberg - http://conversionxl.com/8-effective-ways-of-measuring-ux/ This is what people see uxtactics.com
WHAT ISARESPONSIVE WEB DESIGN? 8 • A Responsive Web Design refers to “Creating a Catalog of Multi-Device Layout patterns”. • Responsive design, overall, is a way to make websites that can be easily viewed and used on any type of device and size of screen, all the way from the smallest mobile phones up to the widest desktop monitors.
Responsive? Responsive Web Design… Means that a web site works optimally well for users regardless of the device they are using. The core of RWD is a media query, a request for the resolution of the users’ viewport. http://mashable.com/2012/12/11/responsi ve-web-design/ In 2012, PC sales were lower than the previous year, something that hasn’t happened since 2001. Why? Tablets. Phones.
Responsive Web Design
HISTORY OF THE RESPONSIVE WEB DESIGN  The term Responsive Web Design was first coined by Ethan Marcotte in his article A List Apart in May 2010 http://alistapart.com/article/responsive-web-design  He defined the technique of RWD by using fluid grids, flexible images, and media queries to deliver different visual experiences for different screen sizes.  Ethan expanded his RWD theory and published his book titled Responsive Web Design.
WHY SHOULD WE BUILDARESPONSIVE WEB?  Each year new devices are pouring into the market, responsive web design let us build one site, and modify it to adapt the new device’s screen size  Build once for all devices  Easy to manage content editing through a single CMS (Content Management System)  If we have a working website:  Not need to rebuild new websites to adapt the new devices  We can convert the existing working website to a responsive Web site to adapt all kind of devices
13
14
RESPONSIVE WEB DESIGNING (RWD) 15  ResponsiveWeb Designing (RWD) is a process of designing a single website to be used and compatible on different portable or handy electronic devices.  Also known as AdaptiveWeb Designing (AWD).  It regarded as an integrated approach of designing through which compelling and easy to use websites are built, to give an optimal viewing user experience across a wide variety of devices starting from desktop computers to mobile phones. ResponsiveWebsites Offers  Smooth navigation  Easy reading  Minimum pinching  Reduces scrolling and zooming.  Excellent user experience.
WHYYOU NEEDARESPONSIVE WEBSITE? 16  Growing Demand for Smartphones  Multiple Screen Sizes and Mobile Browsers  Wide Usage of Internet  Permits wider browser support  Compulsory for Getting Good Business
UNDERSTANDING THE MOBILE WEBAND ITS CONTENT 17  Web designers should consider the following questions while mobilizing the content Q.What is the purpose of the site? Q.Who are the users? Q.What sort of data is being accessed by them? Q. User’s locations ? Q.What’s the capacity of the devices and screen information such as size, resolution, pixel density, and color information from which information is being accessed?
ADAPTING THEAPPROPRIATE LAYOUT 18  Designers should use appropriate layout to suit completely different screen sizes. Devices Size Phones 480px and below Phones toTablets 767px and below PortraitTablets 768px and above Net Book 990px to 1024px Monitor 1024px and above
19
MAJOR COMPONENTS OFARESPONSIVE WEBSITE 20  Responsive website designing is a modern approach of website designing. It comprises of four core elements. 1. MetaTags 2.CSS3 MediaQueries 3. Grid Systems 4. Frameworks
1. WHAT ARE META TAGS? 21  Meta tag is a coding statement in HTML.  It describes few aspects of the contents of a web page.  Information provided in the meta tags is used by the search engines for page indexation.  Placed at the top of a web page as a part of heading.  We use viewport meta tag for making a web page Mobile Optimized. See the example on next page.
2. WHATARE CSS3 MEDIAQUERIES ? 22  CSS3 Media Queries consists of a media type and zero or an optional expression to assign different style-sheets depending on browser window size using media features such as width, height, orientation, resolution, pixel aspect ration, and color etc.  Using CSS3 media queries, presentations can be tailored to a specific range of output devices without changing the content itself.  You can use media queries in different ways for different reasons.
3. WHAT ISAGRID SYSTEM? 23  Grids are the simplest, strongest, and quick way to create page layouts. A grid is a set of number of “columns” and intervening “gutters” (margins) inside a “container” with any width and flexibility.  It gives a feeling of considered organization of one’s website.  In the words of Josef Muller Brockmann,”The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”
4. USEFUL FRAMEWORKS OF RWD 24  Frameworks can be defined as a set of tools, libraries, conventions and best practices that enable the designers to cut down their routine tasks into reusable generic modules.  CSS3 frameworks provide following benefits to web designers and developers:  Faster designing and building of websites.  Designers can focus on crucial segments of website building-using a grid, including a print style sheet, browser compliance, creation of multiple layouts, etc.  Following are the popular frameworks that web designers and developers used to develop responsive websites:  Skeleton  Foundation  Bootstrap
BENEFITS OF RWD 25
Heru Wijayanto, MM., MBA., M.MT (heru@sociopreneur.id) siheyu siheyu Heru Wijayanto https://www.linkedin.com/in/heruwijayanto/

More Related Content

Responsive Web Design

  • 1. ResponsiveWeb Design - A Future of Web Designing Heru Wijayanto Aripradono heru@sociopreneur.id
  • 2. 2
  • 3. 3
  • 4. BACKGROUND 4 • And then for some websites, there is a mobile website that is separate from the regular desktop site. • This type of site displays at full size when you load it on your smartphone (no zooming necessary), but you’ll notice that it’s often very different from the same website when you view it on your desktop monitor—there’s often a lot of content missing, so the site owner can cut down on the work involved in maintaining multiple versions of the site.
  • 6. The term Responsive means , To provide “Responses or Adaptiveness Quickly and Positively” to the users.
  • 7. What Really Happened Behind UX Iceberg - http://conversionxl.com/8-effective-ways-of-measuring-ux/ This is what people see uxtactics.com
  • 8. WHAT ISARESPONSIVE WEB DESIGN? 8 • A Responsive Web Design refers to “Creating a Catalog of Multi-Device Layout patterns”. • Responsive design, overall, is a way to make websites that can be easily viewed and used on any type of device and size of screen, all the way from the smallest mobile phones up to the widest desktop monitors.
  • 9. Responsive? Responsive Web Design… Means that a web site works optimally well for users regardless of the device they are using. The core of RWD is a media query, a request for the resolution of the users’ viewport. http://mashable.com/2012/12/11/responsi ve-web-design/ In 2012, PC sales were lower than the previous year, something that hasn’t happened since 2001. Why? Tablets. Phones.
  • 11. HISTORY OF THE RESPONSIVE WEB DESIGN  The term Responsive Web Design was first coined by Ethan Marcotte in his article A List Apart in May 2010 http://alistapart.com/article/responsive-web-design  He defined the technique of RWD by using fluid grids, flexible images, and media queries to deliver different visual experiences for different screen sizes.  Ethan expanded his RWD theory and published his book titled Responsive Web Design.
  • 12. WHY SHOULD WE BUILDARESPONSIVE WEB?  Each year new devices are pouring into the market, responsive web design let us build one site, and modify it to adapt the new device’s screen size  Build once for all devices  Easy to manage content editing through a single CMS (Content Management System)  If we have a working website:  Not need to rebuild new websites to adapt the new devices  We can convert the existing working website to a responsive Web site to adapt all kind of devices
  • 13. 13
  • 14. 14
  • 15. RESPONSIVE WEB DESIGNING (RWD) 15  ResponsiveWeb Designing (RWD) is a process of designing a single website to be used and compatible on different portable or handy electronic devices.  Also known as AdaptiveWeb Designing (AWD).  It regarded as an integrated approach of designing through which compelling and easy to use websites are built, to give an optimal viewing user experience across a wide variety of devices starting from desktop computers to mobile phones. ResponsiveWebsites Offers  Smooth navigation  Easy reading  Minimum pinching  Reduces scrolling and zooming.  Excellent user experience.
  • 16. WHYYOU NEEDARESPONSIVE WEBSITE? 16  Growing Demand for Smartphones  Multiple Screen Sizes and Mobile Browsers  Wide Usage of Internet  Permits wider browser support  Compulsory for Getting Good Business
  • 17. UNDERSTANDING THE MOBILE WEBAND ITS CONTENT 17  Web designers should consider the following questions while mobilizing the content Q.What is the purpose of the site? Q.Who are the users? Q.What sort of data is being accessed by them? Q. User’s locations ? Q.What’s the capacity of the devices and screen information such as size, resolution, pixel density, and color information from which information is being accessed?
  • 18. ADAPTING THEAPPROPRIATE LAYOUT 18  Designers should use appropriate layout to suit completely different screen sizes. Devices Size Phones 480px and below Phones toTablets 767px and below PortraitTablets 768px and above Net Book 990px to 1024px Monitor 1024px and above
  • 19. 19
  • 20. MAJOR COMPONENTS OFARESPONSIVE WEBSITE 20  Responsive website designing is a modern approach of website designing. It comprises of four core elements. 1. MetaTags 2.CSS3 MediaQueries 3. Grid Systems 4. Frameworks
  • 21. 1. WHAT ARE META TAGS? 21  Meta tag is a coding statement in HTML.  It describes few aspects of the contents of a web page.  Information provided in the meta tags is used by the search engines for page indexation.  Placed at the top of a web page as a part of heading.  We use viewport meta tag for making a web page Mobile Optimized. See the example on next page.
  • 22. 2. WHATARE CSS3 MEDIAQUERIES ? 22  CSS3 Media Queries consists of a media type and zero or an optional expression to assign different style-sheets depending on browser window size using media features such as width, height, orientation, resolution, pixel aspect ration, and color etc.  Using CSS3 media queries, presentations can be tailored to a specific range of output devices without changing the content itself.  You can use media queries in different ways for different reasons.
  • 23. 3. WHAT ISAGRID SYSTEM? 23  Grids are the simplest, strongest, and quick way to create page layouts. A grid is a set of number of “columns” and intervening “gutters” (margins) inside a “container” with any width and flexibility.  It gives a feeling of considered organization of one’s website.  In the words of Josef Muller Brockmann,”The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”
  • 24. 4. USEFUL FRAMEWORKS OF RWD 24  Frameworks can be defined as a set of tools, libraries, conventions and best practices that enable the designers to cut down their routine tasks into reusable generic modules.  CSS3 frameworks provide following benefits to web designers and developers:  Faster designing and building of websites.  Designers can focus on crucial segments of website building-using a grid, including a print style sheet, browser compliance, creation of multiple layouts, etc.  Following are the popular frameworks that web designers and developers used to develop responsive websites:  Skeleton  Foundation  Bootstrap
  • 26. Heru Wijayanto, MM., MBA., M.MT (heru@sociopreneur.id) siheyu siheyu Heru Wijayanto https://www.linkedin.com/in/heruwijayanto/