Smashing Daily #24: Units, Shoppings Carts, Eggs

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 Transforms1
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.

Some easy units exist2

Highly optimized images for the Web in 3 steps3
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 ImageOptim4 (I use the combination of ImageOptim and ImageAlpha5 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.

Same elephant, different weight6

A Responsive Shopping Cart7
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 scripts8
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 Results9
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 Clients10
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 book11 after that (and the e-Book is really pretty cheap).

A good book12

A changing tide13
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 Tags14
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 Pinhegg15
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.

A pinhole egg16

Previous Issues17

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

Vasilis van Gemert is the Principal Front-end Developer at Mirabeau in The Netherlands and a board member of Fronteers. His aim is to close the gap between design and (front-end) development. He believes the excess of knowledge he has can be better used by others, by more creative and smarter people. You can follow him on Twitter.

  1. 1

    Loving Smashing Daily.

    Something to read in the morning ;)

    0
  2. 3

    Is it possible to subscribe to Smashing daily via RSS? I cant find any link.

    1
  3. 6

    ImageAlpha, unfortunately, only exists for Mac OS.
    But there’s an online alternative: http://compresspng.com

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top