0
Responsive Web Design
Slides / Info     http://www.cargomedia.ch/blog/          Christophe Schwyzer            @stophedotcom                @car...
Browser- vs Feature-Detection● modernizr● caniuse.com
Screen Sizes & Flexible Layout● Organize Content● Set Viewport Size  <meta name="viewport" content="width=device-width, in...
Screen Resolutionhttp://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
Icon Fonthttp://css-tricks.com/examples/IconFont/
Icon FontUPSIDE●   Cross browser support●   Full css styles advantages: size, color, text-shadow, etc.DOWNSIDES●   only mo...
Scalable Vector Graphics (SVG)Animationshttp://jsfiddle.net/f5MPb/1/
Scalable Vector Graphics (SVG)UPSIDES●   Suitable for all screen sizes and resolutions●   Relatively small file size●   Wo...
Responsive Media Embedding    container                100%Imagesmax-width: 100%;@mediaonly screen and (-webkit-min-device...
Video<video> (html5)max-width: 100%;<iframe><object><embed>.video-container {    position: relative;    padding-bottom: 56...
Related Topics●    text-overflow●    is :hover dead?●    flexbox●    homescreen shortcutsUseful Resources●   Guidelines fo...
Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Responsive Web Design

581

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
581
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

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×