Responsive Web Design

795 views
667 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
795
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Web Design

  1. 1. Responsive Web Design
  2. 2. Slides / Info http://www.cargomedia.ch/blog/ Christophe Schwyzer @stophedotcom @cargomedia
  3. 3. Browser- vs Feature-Detection● modernizr● caniuse.com
  4. 4. Screen Sizes & Flexible Layout● Organize Content● Set Viewport Size <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />● Media Queries @media only screen and (max-width : 320px) { /* Styles for screen-widths equal to or less than 320px */ }
  5. 5. Screen Resolutionhttp://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
  6. 6. Icon Fonthttp://css-tricks.com/examples/IconFont/
  7. 7. Icon FontUPSIDE● Cross browser support● Full css styles advantages: size, color, text-shadow, etc.DOWNSIDES● only monochrome color● time consuming to maintain ** Font Custom
  8. 8. Scalable Vector Graphics (SVG)Animationshttp://jsfiddle.net/f5MPb/1/
  9. 9. Scalable Vector Graphics (SVG)UPSIDES● Suitable for all screen sizes and resolutions● Relatively small file size● Works for animations● It is XML Data – You can make (small) design adjustments directly from your editor or via css / javascript.● You can embed SVG using: object, embed, iframe, as background- image, or directly inside html with a <svg> tag.DOWNSIDES● Needs fallback to png/jpg/gif for ancient browsers● Performance: Resource intense (specially for animations / complex images)
  10. 10. Responsive Media Embedding container 100%Imagesmax-width: 100%;@mediaonly screen and (-webkit-min-device-pixel-ratio: 2),only screen and ( min--moz-device-pixel-ratio: 2),...{ /* Retina-specific stuff here -> Serve double-sized image and scale it 50% */}
  11. 11. Video<video> (html5)max-width: 100%;<iframe><object><embed>.video-container { position: relative; padding-bottom: 56.25%; /* for videos with 16:9 ratio */ height: 0; /* IE5 + IE6 */ iframe, object, embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }}
  12. 12. Related Topics● text-overflow● is :hover dead?● flexbox● homescreen shortcutsUseful Resources● Guidelines for Responsive Web Design by Kayla Knight.● Responsive Web Design Patterns● caniuse.com● modernizr

×