Your SlideShare is downloading. ×
0
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Web Design

571

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
571
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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

Transcript

  • 1. Responsive Web Design
  • 2. Slides / Info http://www.cargomedia.ch/blog/ Christophe Schwyzer @stophedotcom @cargomedia
  • 3. Browser- vs Feature-Detection● modernizr● caniuse.com
  • 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. Screen Resolutionhttp://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
  • 6. Icon Fonthttp://css-tricks.com/examples/IconFont/
  • 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. Scalable Vector Graphics (SVG)Animationshttp://jsfiddle.net/f5MPb/1/
  • 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. 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. 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. 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

×