responsive web design ppt

AUTHOR:N.NAWAZ KHAN

103P1A0548IV CSE

SEMINAR TOPIC: RESPONSIVE WEB DESIGN

PRIYADARSHINI INSTITUTE OF TECHNOLOGYRamachandrapuram,Tirupati-517561

INTRODUCTION1. HISTORY OF WEB DESIGN

2. WHAT IS RESPONSIVE WEB DESIGN ?3. FLUID GRIDS AND FLEXIBLE LAYOUT4. FLEXIBLE IMAGES AND VIDEOS 5. WEB SITE NAVIGATION6. MULTIPLE SCREEN AND BROWSER

COMPATIBILITY7. MEDIA QUERIES8. RESS-FUTURE OF WEB DESIGN9. ADVANTAGES10. CONCLUSION

History of web design• In August 1991, Tim Berners Lee

published the first website.

• 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.

Responsive Web Design

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.

ADJUSTING SCREEN RESOLUTION• 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

Flexible Every thing• 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

• 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.

Navigation• 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

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.

Fluid Grids and Flexible Layouts

Flexible Images and Videos• 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

Multiple Screen & Browser Compatibility

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

CHROME IS THE BEST

RWD IN CHROME BROWSER

• 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

Steps to use Emulation in Chrome

• 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.

STOP IPHONE SIMULATOR IMAGE RESIZING

• 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.

Media Queries• 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

• 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. 

CSS-3 QUERIES FOR SOME DEVICES

Queries for min-width • 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. 

RESS - FUTURE OF RESPONSIVE WEB DESIGN

• 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.

Advantages of Responsive web design

• Better user experience • Single site management • Single-view analysis • Easy viewing of socially

shared sites• Keep on connected to the

hottest trend

Disadvantages of Responsive web design

• 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.

ConclusionWe 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.

NAWAZ548PDIT@GMAIL.COM

Mail me your queries