Responsive web-design - shubelal
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Responsive web-design - shubelal

  • 366 views
Uploaded on

Responsive Web Design, RWD, Web Design, HTML5, CSS3

Responsive Web Design, RWD, Web Design, HTML5, CSS3

More in: Design , Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
366
On Slideshare
366
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
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
  • TITLE PAGE– Headline 36pt Arial in WHITE– Sub-head 18pt Arial Reg in GREY– Do not include client logos on title page– TEXT ONLY
  • 1-COLUMN– Headline 32pt Arialin BLACK– Sub-heads 12pt Arial Reg in ORANGE– Body copy & bulleted text 10pt Arial Reg in GRAY; body copy not to go below 6 pt– Left-justify all text and design elements– Divider Lines no larger than 1pt*****Divider lines are not built into Master Slides – must copy and paste from example slide*****
  • TITLE PAGE (ALT)Footer is only editable feature.

Transcript

  • 1. Responsive Web DesignDesktop Mobile and iPad
  • 2. Responsive Web Design– Shubelal kumar
  • 3. − What is Responsive Web Design?− Why Responsive Web Design?− Fluid vs Responsive Web Design− Media Queries− Flexible images in responsive web design− Old version of IE and Responsive web design− POCTopicsResponsive Web Design Topics cover
  • 4. What is Responsive Web Design?Media queries allow the page to use different CSS style rules based oncharacteristics of the device the site is being displayed on, mostcommonly the width of the browser.
  • 5. − One Website, Many DevicesOne of the most appealing aspects of responsive web design is that a responsive website can provide a great user-experience across many devices and screen sizes. This is an important characteristic, since it is impossible to anticipateall the devices and screen sizes searchers will use to access your site. A site that works well regardless of these variableswill provide a better and more consistent user-experience than a separate mobile site that is designed for a specific deviceand screen size.− Easier to ManageHaving a separate desktop and mobile site requires having separate code application. Managing one site and oneApplication is far easier than managing two sites or more. This is a key advantage a responsive website has over aseparate mobile site.− Recommended By GoogleThis is because responsive design sites have one URL and the same HTML, regardless of device, which makes it easierand more efficient for Google to crawl, index, and organize content. Contrast this with a separate mobile site which has adifferent URL and different HTML than its desktop counterpart, requiring Google to crawl and index multiple versions of thesame site.Why Responsive Web Design?
  • 6. Fluid vs Responsive Web Design
  • 7. Media Queries<meta name=”viewport” content=”width:device-width”>
  • 8. .figure {float: right;margin-bottom: 0.5em;margin-left: 2.53164557%; /* 12px / 474px */width: 48.7341772%; /* 231px / 474px */}img {max-width: 100%;}http://www.alistapart.com/articles/fluid-images/SIZINGFlexible images in responsive web design
  • 9. img { max-width: 100%; }<img src="smallRes.jpg” data-fullsrc="largeRes.jpg">SIZINGFlexible images in responsive web design
  • 10. http://code.google.com/p/css3-mediaqueries-js/Old version of IE and Responsive web design
  • 11. Responsive web design− http://www.alistapart.com/articles/responsive-webdesign/− http://net.tutsplus.com/tutorials/html-csstechniques/responsive-web-design-a-visual-guide/− http://mediaqueri.es/− http://webdesignerwall.com/HTML5− http://www.html5rocks.comReference
  • 12. Thank you