Your SlideShare is downloading. ×
0
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Responsive web design ppt
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive web design ppt

707

Published on

responsive web design exxample using chrome emulation

responsive web design exxample using chrome emulation

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
707
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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
  • 2. • In August 1991, Tim Berners Lee published the first website.
  • 3. • 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.
  • 4. 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.
  • 5. • 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
  • 6. • 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
  • 7. • 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.
  • 8. • 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
  • 9. 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.
  • 10. • 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
  • 11. 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
  • 12. • 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
  • 13. • 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.
  • 14. • 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.
  • 15. • 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
  • 16. • 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.
  • 17. • 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.
  • 18. • 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.
  • 19. • Better user experience • Single site management • Single-view analysis • Easy viewing of socially shared sites • Keep on connected to the hottest trend
  • 20. • 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.
  • 21. 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.
  • 22. Mail me your queries

×