Responsive web design ppt
•Download as PPTX, PDF•
7 likes•7,009 views
This document discusses the history and concepts of responsive web design. It covers topics like fluid grids and layouts, flexible images and videos, media queries, and the advantages of responsive design. The key points are: - Responsive web design allows websites to automatically adjust to different screen sizes through fluid grids and layouts, flexible images and media queries. - Media queries allow different CSS styles to be applied based on screen width and orientation. - Responsive design helps create a better user experience by optimizing websites for various devices like desktops, tablets and phones.
Report
Share
Responsive web design ppt
- 2. 1. HISTORY OF WEB DESIGN 2. WHAT IS RESPONSIVE WEB DESIGN ? 3. FLUID GRIDS AND FLEXIBLE LAYOUT 4. FLEXIBLE IMAGES AND VIDEOS 5. WEB SITE NAVIGATION 6. MULTIPLE SCREEN AND BROWSER COMPATIBILITY 7. MEDIA QUERIES 8. RESS-FUTURE OF WEB DESIGN 9. ADVANTAGES 10. CONCLUSION
- 3. • In August 1991, Tim Berners Lee published the first website.
- 4. • In 1994, the World Wide Web Consortium (W3C) formed. • Table-based layouts gave web designers more options for creating websites. • In 1996, Microsoft released its first competitive browser, with its own features and tags called “internet explorer”. • Between 2000 and 2005, the top sites included apple.com, msn.com, ebay.com, napster.com, forbes.com, adobe.com and microsoft.com.
- 5. A responsive website is one that adapts to the screen size of the device where the website is being served. So when the page resizes, the layout adjusts according to the fit of the screen.
- 7. • New devices with new screen sizes are being developed every day, and each of these devices may be able to handle variations in size, functionality and even color. • Some are in landscape, and others are portrait like Iphone , Ipad, HTC, Sony Xperia
- 8. • In responsive web design the illustration will crop off while changing the view from desktop to smartphone view. • The name , heading position changes automatically and resizes as needed for good display
- 9. • Images can be automatically adjusted and also the content of that web site adjusts to the screen resolution of the device. • As we can see below the 3 screens of desktop, tab, smartphone of a same website.
- 10. • How a website is structured, how information is spread through the website and how critical is the content for the particular purpose of the website are some key considerations while designing navigational elements for a responsive website. Home Component Of Website About Us Products Gallery Contact
- 11. A fluid grid is a way of defining a layout in terms of proportions. Thus, when the dimensions of a screen are shrunk, the layout with all elements will reduce in proportion.
- 12. • When any device is requesting for a web site then images get flexible for that device. • With the help of media queries, you can also add flexible image sizes and embed flexible video displays on your responsive website. Adjust Images Flexible Images
- 13. RWD allows you to design flexible screen resolution that is fluid and adapts to multiple screen sizes (such as ultrabooks, iPads, iPhones, HDTVs, android phones and tablets), and is compatible with most popular browsers. Flexible Screen Browser Compatibility
- 15. • Chrome browser can Emulate any web page to any device using the RWD. • www.starbucks.com is one of those web sites which has RWD
- 19. • For doing this we have to go to the developer options >> settings >> overrides tab and click on ‘Show Emulation’. • Then go to any web site , automatically page gets emulated to selected device screen.
- 25. • In iPhone and iPod the Web designs automatically rescale to fit the tiny screen. • One issue this simulator created , images were still changing proportionally with the page even if they were specifically made for the tiny screen.
- 26. • Without media queries, responsive websites wouldn’t have been where they are today. With CSS3 media queries, you can conditionally apply CSS styles depending on the screen size. • Media queries are applied to the CSS code to load specific style elements according to the width of the screen. Screen Resolution Layouts
- 27. • New CSS3 features also include orientation (portrait vs. landscape), device-width, min-device-width and more. • One can create multiple style sheets, ranges of widths — even for landscape vs. portrait orientations.
- 29. • The min-width property sets a minimum browser or screen width that a certain set of styles would apply to. • If anything is below this limit, the style sheet link or styles will be ignored.
- 30. • RESS is a responsive website with server-side detection built-in. • The server will detect what device is coming to the website and deliver an appropriate experience to that device.
- 31. • Better user experience • Single site management • Single-view analysis • Easy viewing of socially shared sites • Keep on connected to the hottest trend
- 32. • Necessitates a redesign of your website. • It takes time. • Your mobile traffic is less than 5% • It doesn’t mean to be one-size- fits-all.
- 33. We are indeed entering a new age of Web design and development. Far too many options are available now, and there will be far too many in the future to continue adjusting and creating custom solutions for each screen size, device and advancement in technology. Responsive Web design and the techniques discussed above are not the final answer to the ever-changing mobile world.
- 35. Mail me your queries