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