Responsive Web Design
0 likes67 views
Responsive web design (RWD) is a technique that enables websites to adapt to various screen sizes, enhancing user experience across devices. Introduced by Ethan Marcotte in 2010, RWD utilizes fluid grids, flexible images, and media queries to create optimized layouts. Key benefits include single-site management for multiple devices, improved navigation, and the ability to keep up with the growing demand for mobile-friendly internet access.
Responsive Web Design
- 1. ResponsiveWeb Design - A Future of Web Designing Heru Wijayanto Aripradono [email protected]
- 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 ([email protected]) siheyu siheyu Heru Wijayanto https://www.linkedin.com/in/heruwijayanto/