responsive web design exxample using chrome emulation

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