{Carrer web log}

Bulletproof CSS3 media queries

Tuesday, July 20, 2010 { 9 Comments }

If you are part of the CSS community you probably know that CSS3 media queries will change the way how we write CSS.

Why is that?

CSS3 media queries are very handy to target various devices with various monitor (screen) size. With the help of the CSS3 media queries we can have site optimized for iPhone and other mobile devices, with the same solution we can have site optimized for iPad and all other tablets . This CSS solution will be much more cheaper than building new mobile web site something like http://m.somewebsite.com or http://ipad.somewebsite.com .

Can we start using the CSS3 media queries today?

Yes we can!

The main problem of the CSS3 media queries is they will not work in the older browsers .

CSS3 media queries will not work in IE8 (and lower) also browsers lower then Firefox 3.5, Safari 3, and Opera 7. Basically the main problem is IE and the older version of Firefox.

For the mobile web browsers this solution should work for the modern webkit and opera browsers that support CSS3 media queries.

I tried to resolve this problem by providing pure CSS solution for 95% of market share PC browsers and JavaScript solution for the rest of the browsers.

Here is the solution:

<!-- Big screen -->
<link rel="stylesheet" type="text/css" href="CSS/main.css" media="screen and (min-device-width: 800px)" />

<!-- Tablet pc -->
<link rel="stylesheet" type="text/css" href="CSS/tablet.css" media="screen and (min-device-width: 481px) and (max-device-width: 799px)" />

<!-- Mobile -->
<link rel="stylesheet" type="text/css" href="CSS/mobile.css" media="only screen and (max-device-width: 480px)" />

<!-- If is lower than IE9 use conditional comments -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="CSS/main.css" media="all" />

And the JavaScript solution for Firefox:


<script type="text/javascript">

if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){

var ffversion=new Number(RegExp.$1);

if (ffversion<=3.5){
var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'CSSNEW/main.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
}
}
</script>

We have one CSS for mobile browsers with max screen of 480px. For the older phones who doesn’t support CSS3 media queries we can alternately add media="handheld" CSS.

For the monitor size from 481px to 799px (iPad and other tablets) we will have other CSS.

In the case of the monitors from 800px and more we will have the main CSS.

All current IE browsers don’t support media queries but we can easily fix this by using IE Conditional Comments

For the older version Firefox we can use JavaScript

Probably very few people use Opera6 and Safari2 so I didn’t provide any solution. Alternately can be added JavaScript solution.

This CSS + JavaScript solution should work at 99% of all PC browsers and on newer Opera and Webkit mobile browsers.

Other important thing the browsers will probably download only one ( <link type="text/css" … /> ) stylesheet and ignore all the other CSS. In this way the browser will not load unnecessary CSS.

I’m not 100% sure that all the browsers will ignore the unnecessary CSS probably the browser speed experts like Steve Souders and Stoyan Stefanov may know little more about this.

Demo of this solution

Download the code

Conclusion: CSS3 Media Queries are cheap and easy way to optimize your web site for various devices. With this solution you can safely cover 99% of PC browsers and the modern mobile browsers (iPhone, iPad, Android, new webkit BlackBerry and the new Opera Browsers).

Other useful resources:

• Responsive Web Design


• CSS3 Media Queries


• CSS Media Queries & Using Available Space


• Media queries


• Eric Meyer at An Event Apart [PIC]


• How To Use CSS3 Media Queries To Create a Mobile Version of Your Website


• W3C Media Queries

If you have any ideas how we can improve this solution please comment!

Distributed Color Palette – Photoshop Tool

Monday, June 28, 2010 { 2 Comments }

There are many color palette tools that can help you choose colors for your web site or project.

Usually all color tools generate or combine colors in equal quantity proportions, but in one web site, magazine or anywhere else the color is not distributed in equal proportion.

I wanted to make a color tool who can do better job in simulation of color quantity distribution.

I used photoshop shapes and layers to build circle based color system. You can easily customize it by duplicating and adding extra layers and colors.



Here is demo example for vimeo.com

>> Download the photoshop tool

iPhone Grid System

Tuesday, June 01, 2010 { 4 Comments }

Like a many developers and designers I was tempted to start building application for iPhone and for mobile devices in general. Beside the problem of choosing the programming language native Objective-C or Javascript + HTML5 was the problem of creating design environment for more easily pre application development and prototyping.

I’m a fan of the grid design. Grids can help you understand the design space better, and they usually bring order and the balance to the design process and there are great help in the prototyping stage.

I was inspired with the Massimo Vignelli’s Unigrid System and I wanted to the similar thing with the iPhone.

So the problem was how to organize the 480px X 320px iPhone working space.
I decided to build 12:8 (480:320) Modular Grid System with the unit of 40px and the gutter of 5px.

I think that 12:8 grid system is a right balance for the iPhone, 24:16 will be probably too much and 6:4 too little.

For the calculating the gutter I first divided 320/8 = 40 and than 40/8 = 5px. For the gutter there is no right and wrong size it all depends what the grid will hold and what you want to achieve with the grid. So please feel free to change the gutter size or not to use it.

I made three version of the grid the first the grid only the second the grid and the iPhone frame and the last version The Grid + iPhone Frame + Notes with bought .PNG and photoshop .PSD files.

The iPhone Grid



iPhone Grid + Frame



iPhone Grid + Frame + Notes



Download - all images in .PNG

Download - all files like Photoshop Template .PSD

.PSD iPhone Template can be easily personalized, feel free to change anything.
I hope that this grid system can help you in your next iPhone application or site development. If you want to learn more about the Grid Design this site is great place to start The Grid System

Any comments?

P.S If you are fan of paper prototyping you one of my previous post useful Sketchbook for web designers

CSS Mini Reset

Thursday, May 20, 2010 { 22 Comments }

What is CSS Reset?

CSS Reset usually aims to reduce browser inconsistencies by evening up the CSS default settings in all browsers.

The most used CSS Rests are

• Eric Meyer CSS Reset


• YUI Reset


• And other ..

Last week I spotted "CSS Reset – a simpler option" by Russ Weakley.

Russ made few smart observations: we don’t always need complete CSS reset because CSS Reset file can become very large and we often forget to set all the styles.

Also in my opinion we don’t always use all the CSS and HTML tags, when was the last time when you used “address” tag?

In many cases the complete CSS Reset makes perfect sense like in the case of some CSS Framework.

I used Eric Meyer Reset for my CSS Framework (Emastic and The Golden Grid).

In other my project complete CSS reset doesn’t make sense (Malo, Formy, 1 line CSS Framework).

My point is different projects(sites) can be approached differently, and not always we need complete CSS reset.

I wanted to make Mini CSS Reset who will focus on the main CSS features like Divs , Tables and Forms who are also the most used CSS(HTML) elements.

And here is the result:

/* CSS Mini Reset */

html, body, div, form, fieldset, legend, label
{
 margin: 0;
 padding: 0; 
}

table
{
 border-collapse: collapse;
 border-spacing: 0;
}

th, td
{
 text-align: left;
 vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

img { border: 0; }

You can compare:

• Eric Meyer CSS Reset


• YUI CSS Reset


• CSS Mini Reset

You can use CSS Mini Reset when you actually don’t want to reset everything just the fundamental HTML elements.

Fork - Download CSS Mini Reset on github

Any suggestions?

CSS vendor prefixes – Can we all get along

Wednesday, May 05, 2010 { 15 Comments }

Last week I published CSS3 Action Library here is one part of the CSS code:

.h-scale:hover {
 -webkit-transform: scale(1.5); //For Safari and Chrome
 -moz-transform: scale(1.5);  // For Firefox
 -o-transform: scale(1.5); // For Opera
 transform: scale(1.5); // For some unknown future
}

You can notice that is the same code but only optimized for different browsers.
Thank god we have only few mainstream browsers. Otherwise this example should be much more longer.

I think that we didn’t learn the lesson from the past . We fight for years with Microsoft to respect the web standards. With IE8/9 great progress was made and Microsoft is finally going in right direction.

But today we have bigger problem than IE. We don’t have finished CSS3 spec.

In the absence of standards all browsers are guessing what should they implement. Every browser wants to be first to implement some new cool CSS feature. The risk is that we will end up writing specific CSS code for every browser. Trust me we don’t want that!

So what can we do?

We can help the CSS3 working group by donating, joining the CSS3 discussion, suggesting new features, writing examples, writing and discussing about CSS3 ...

I think that if more people are involved directly or indirectly in the Decision Making better the result (product) will be.

In the meantime while waiting for the definitive CSS3 spec browsers can join forces and decide for one universal prefix.

What about –css3- prefix for all new CSS3 experimental stuff?

The example from above will look like this (less code) :

.h-scale:hover {
 -css3-transform: scale(1.5); // In experimental phase 
 transform: scale(1.5); // When becomes accepted standard
}

-css3 is much more prettier, semantic and logical then –moz, -webkit, -o, -i-Hope-there-will-be-no-new-browsers ..

PPK suggested –beta prefix but I think –beta can be confusing( –beta of what CSS2,CSS3 or CSS4).

Actually I don’t care if it is –css3 or –beta or –something-else I just don’t want to write the same CSS code million times.

This is open call to all the browsers: Can you all decide for one prefix ? Pretty Please.

What do you think? Please, comment!

CSS3 Action Framework

Tuesday, April 27, 2010 { 2 Comments }

It all started when I wanted to do Google CSS3 redesign. The propose of that redesign was to use as much as possible CSS3. I wanted to maintain Google minimalistic style with little Apple flavor and Bing background style. Also to use only pure CSS and CSS3. And the result was:

Example: Google CSS3 redesign

CSS3 is really powerful tool and many of the things that early were done with some JavaScript library now can be done with CSS3.

When I write CSS I usually extract all the best practices and try to make little library so in the next project I will not write the same code over and over again . Don't repeat yourself.

After the Google CSS3 experiment I decided to spend little more time and make little CSS3 action library(framework).

The library is based on :hover, :active and :target and mainly on CSS3 transforms.

Here are some examples:

• Hover


• Active


• Target


• All in one

About the code syntax



If you have multiple .h-scale values you can personalize your values.



How the system works?

About :hover(mouse over) and : active(mouse click) is very easy to understand. The HTML element will perform some action(scale, rotate, hide ..) on mouse over or mouse click.

Example:

This div will scale on mouse over and rotate on mouse click

<div class=" h-scale a-rotate ">…. </div>

The :target is also simple to understand, meaning with a click of some link you can trigger event on another HTML element.

Example:

The click of the link will trigger scale event on the image. Everything is possible because of href=”#a” calls id=”a” of the image.

<a href=”#a”>Some link</a>
<img id=”a” class=”t-scale” src=”” />

But the best way to learn is to play around with the CSS file and the examples. The code will work mainly in latest version of Firefox , Chrome, Safari and Opera. The cool thing is that even if this CSS doesn’t work in some browsers(mainly IE) the page will look exactly the same, obviously all the events will be off in the older browsers.

Please feel free to add more functionality to this library, new events, new features extended browser support ( I was lazy to optimize for IE8 and lover), change or extend the naming system if you don’t like my naming conventions.

I hope that this project can help you understand some of the new CSS3 features. Principally is made for teaching purpose but can also used in production.

This project is hosted on Google Code

Download the code & examples

I will leave you with this thought: CSS3 is powerful make up tool, do you want to look pretty?

Minimalistic Wallpaper for iPad

Tuesday, April 13, 2010 { 0 Comments }

This two weeks seams the whole world talk about one thing iPAd. So if you can't beat them join them. I feel that I’ve been brainwashed by this iPad thing :)

I decided to build wallpaper for the iPad. I’m not sure why I did it, iPad is not even arrived in Italy. I’m not sure that I’m going to buy it but I wanted to create my own iPad wallpaper.

I wanted to be book like and simple and to contain the golden proportion(I’m little obsessed about the golden proportion lately)


So here is the result (768px X 1024px 132dpi)




I used Helvetica like a font and white color to make contrast with the iPad black frame.

Here is how I used the golden proportions:



Enjoy