Smashing Daily #24: Units, Shoppings Carts, Eggs

• By Vasilis van Gemert
• June 15th, 2012
• Smashing Daily
• 6 Comments

It’s almost the weekend, so there’s lots to read in this edition of The Smashing Daily. Some great articles on performance, a piece about CSS units, there’s an incredible responsive shopping cart, and as a last click, there’s a photograph inside an egg. Enjoy!

“Alternative Units for CSS3 Rotation Transforms”
If you want to rotate an element with CSS you need to choose a unit to do so. The unit that’s been used the most (and the only unit I knew of until today) is deg, which stands for “degrees”. Louis Lazaris shows us that there are more units: grad, rad, and turn. They all seem to work in all modern browsers (it currently works in Firefox), and you might find some of them easier to work with than deg.

“Highly optimized images for the Web in 3 steps”
Here’s a great post about images on the Web, how you can optimize them and how you can serve them for better performance. Pascal Altena explains that changing the content of the image can help a lot (I’d like to add, that blurring unimportant parts of an image may greatly reduce it in size), and of course he mentions different techniques for reducing HTTP requests. He ends the article with a good, long explanation of different file types and he links to the excellent ImageOptim (I use the combination of ImageOptim and ImageAlpha to reduce the file size of images for The Smashing Daily, with incredible results. These tools should definitely be part of your workflow). You should read this article, you’ll be smarter after you did.

“A Responsive Shopping Cart”
Complex components like headers, tables and shopping carts are often used in arguments against Responsive Design: the layouts and interactions of these things just differ too much, they can (probably) not be built with just one code base. The people who say that usually don’t know what’s possible with CSS. Eric Eggert clearly knows what’s possible, and so he created this responsive shopping cart.

“Don’t docwrite scripts”
Steve Souders gives the excellent advice not to use document.write(), not even as a script loader. As always, he explains in detail why.

“Media Query & Asset Downloading Results”
When a certain image is only needed on bigger screens you probably don’t want to send it to visitors with a smaller screen. But how do you do that? There are of course many ways to hide an image, but does hiding always mean that the request is not made? Tim Kadlec did some extensive research on the different CSS techniques he could think of and published the results right here. You should definitely read this article and bookmark it for later reference.

“Getting Clients”
Here’s an excerpt from the book Mike Monteiro wrote a while ago about running a design business. This book is not just for bosses and designers, it’s a great read for everybody in the Web business, and filled with good advice about professionalism (for instance, how to create and maintain a good relationship with your clients). You should read this chapter—you’ll probably buy the book after that (and the e-Book is really pretty cheap).

“A changing tide”
Cennydd Bowles sees some major changes in the UX world where the focus is slowly but clearly shifting from specialists to hybrid designers and from a client-agency model to clients who have their own design shop. He also mentions three things we need to focus on if we want to achieve great things as designers. I’m not going to tell you what they are, you should read them yourself. It’s a very good read about the current state of our industry and about where it might be going.

“Pure CSS3 Post Tags”
Here’s a nice tutorial by Alen Grakalic in which he explains how you can use the :before and :after selector, as well as some other clever CSS-tricks to create a nice looking tag thingy.

Last Click

“The Pinhegg”
I still consider developing my own black and white photos to be one of the most magical things I’ve done: seeing a white page slowly turn into a picture is just much more exciting than waiting for Photoshop to open. Back in school (a long, long time ago), I experimented with printing photographs on objects, and also made some pinhole cameras. But I was never clever enough to print a picture on the inside of an egg-camera like Francesco Capponi did.

Previous Issues

For previous Smashing Daily issues, check out the Smashing Daily Archive.