Your SlideShare is downloading. ×
Whateverweb.com
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

Whateverweb.com

122
views

Published on

Published in: Technology, Education

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

  • Be the first to like this

No Downloads
Views
Total Views
122
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
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. João Ribeiro (Jay) jr@whateverweb.com | @joaofribeiro Whateverweb.com
  • 2. João Ribeiro (Jay) jr@whateverweb.com | @joaofribeiro
  • 3. João Ribeiro (Jay) jr@whateverweb.com | @joaofribeiro
  • 4. João Ribeiro (Jay) jr@whateverweb.com | @joaofribeiro ?
  • 5. João Ribeiro (Jay) jr@whateverweb.com | @joaofribeiro
  • 6. João Ribeiro (Jay) CSS Optimization & Media Query Extension Image Optimization jr@whateverweb.com | @joaofribeiro Device Detection (Client Features + WURFL)
  • 7. IMAGE OPTIMIZER Auto Image Scaling according to maximum device width Custom Scaling (url parameters) * Metadata Stripping * Image transformations (e.g. rotation, cropping) João Ribeiro (Jay) jr@whateverweb.com | @joaofribeiro <img src="http://img.demo.wew.io/http://yourdomain/your_image.jpg" alt="An image" /> <img src="http://img.demo.wew.io/px_240/http://yourdomain/your_image.jpg" alt="An image" />
  • 8. CSS OPTIMIZER WITH EXTENDED MEDIA QUERIES SUPPORT Runs extended media queries (e.g. brand name, pointing method) Strips “unreachable” CSS code in media queries Strips irrelevant vendor prefixes Inlines/combines CSS fragments using @import Minifies (YUI) / Compresses (YUI) João Ribeiro (Jay) jr@whateverweb.com | @joaofribeiro <link rel="stylesheet" type="text/css“ href="http://css.demo.wew.io/http://yourdomain/styles.css" />
  • 9. João Ribeiro (Jay) @import "bootstrap.css"; /* Standard Media Queries */ @media (min-width: 768px) { .hidden-desktop { display: inherit !important; } } /* Extended media queries - Touch*/ @media (-wew-pointing-method: touchscreen) { .button{ display:block; margin-bottom: 1em; } } /*Extended media queries - Brand*/ @media (-wew-brand-name: Google) { .ads .googleDevices{ display:block; } } styles.css jr@whateverweb.com | @joaofribeiro
  • 10. João Ribeiro (Jay) .clearfix {*zoom: 1;} .clearfix:before, .clearfix:after { display: table; … .button{ display:block; margin-bottom: 1em; } optimized styles.css @import "bootstrap.css"; /* Standard Media Queries */ @media (min-width: 768px) { .hidden-desktop { display: inherit !important; } } /* Extended media queries - Touch*/ @media (-wew-pointing-method: touchscreen) { .button{ display:block; margin-bottom: 1em; } } /*Extended media queries - Brand*/ @media (-wew-brand-name: Google) { .ads .googleDevices{ display:block; } } styles.css X X jr@whateverweb.com | @joaofribeiro
  • 11. João Ribeiro (Jay) @import "bootstrap.css"; /* Standard Media Queries */ @media (min-width: 768px) { .hidden-desktop { display: inherit !important; } } /* Extended media queries - Touch*/ @media (-wew-pointing-method: touchscreen) { .button{ display:block; margin-bottom: 1em; } } /*Extended media queries - Brand*/ @media (-wew-brand-name: Google) { .ads .googleDevices{ display:block; } } styles.css jr@whateverweb.com | @joaofribeiro
  • 12. João Ribeiro (Jay) .clearfix {*zoom: 1;} .clearfix:before, .clearfix:after { display: table; … hidden-desktop { display: inherit !important; } .button { display:block; margin-bottom: 1em; } .ads .googleDevices { display:block; } optimized styles.css @import "bootstrap.css"; /* Standard Media Queries */ @media (min-width: 768px) { .hidden-desktop { display: inherit !important; } } /* Extended media queries - Touch*/ @media (-wew-pointing-method: touchscreen) { .button{ display:block; margin-bottom: 1em; } } /*Extended media queries - Brand*/ @media (-wew-brand-name: Google) { .ads .googleDevices{ display:block; } } styles.css jr@whateverweb.com | @joaofribeiro
  • 13. João Ribeiro (Jay) Sign up for free at whateverweb.com jr@whateverweb.com | @joaofribeiro