Whateverweb.com

306 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
306
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Whateverweb.com

  1. 1. João Ribeiro (Jay) jr@whateverweb.com | @joaofribeiro Whateverweb.com
  2. 2. João Ribeiro (Jay) jr@whateverweb.com | @joaofribeiro
  3. 3. João Ribeiro (Jay) jr@whateverweb.com | @joaofribeiro
  4. 4. João Ribeiro (Jay) jr@whateverweb.com | @joaofribeiro ?
  5. 5. João Ribeiro (Jay) jr@whateverweb.com | @joaofribeiro
  6. 6. João Ribeiro (Jay) CSS Optimization & Media Query Extension Image Optimization jr@whateverweb.com | @joaofribeiro Device Detection (Client Features + WURFL)
  7. 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. 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. 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. 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. 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. 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. 13. João Ribeiro (Jay) Sign up for free at whateverweb.com jr@whateverweb.com | @joaofribeiro

×