Whateverweb.com
Upcoming SlideShare
Loading in...5
×
 

Whateverweb.com

on

  • 344 views

 

Statistics

Views

Total Views
344
Slideshare-icon Views on SlideShare
344
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Whateverweb.com Whateverweb.com Presentation Transcript

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