CSS Sprites revisited by Niels

Logo Smashing Magazine

No, we are not promoting a new soft drink. Yes, we are proud that Niels Matthijs, one of our in-house front-enders, has published another riveting article in Smashing Magazine. Niels revisits the use of CSS sprites and gives tips and tricks that are especially useful when coding a new website from scratch. Learn all about how you can make image targeting in CSS sprites easier in his article: http://coding.smashingmagazine.com/2012/04/11/css-sprites-revisited/.

CSS sprites increase the page loading speed by combining all your background graphics into a single image. By using the position properties you can then display the image segment of your choice. Many web developers have been using these ‘image repositories’ for years and know that they can make pages load a lot quicker. That is nothing new.

What is new, however, is that Niels has optimized the layout of his CSS sprite sheets and uses a Photoshop® script (credits to Filip Van Tendeloo) that automatically creates a grid of guides based on the size of the sprites square. By adding numbers to the x and y axes of the grid, it becomes a lot easier to pinpoint every square in the grid, and to calculate the coordinates of each image. And with the help of a LESS functions, you can then avoid doing intricate calculations or finding random start coordinates.

Read Niels’ article for all details: http://coding.smashingmagazine.com/2012/04/11/css-sprites-revisited/.

More news

Teaming up to speed up test-drive of Carrefour Belgium’s new e-service

Picture of a box filled with groceries

Carrefour Belgium recently launched Simply You Boxes, an order-to-cook service that simplifies and enhances the daily cooking and shopping experience of their customers. They asked us for a solution, enabling a quick launch and test-drive this new service. In close collaboration with Carrefour Belgium, our team got the digital platform for the Simply You Box user experience up and running in record time: just two months.

more about this news article

The 10 commandments of Sketch exports for iOS and Android

illustration of arrow

Granted, for a visual designer, Sketch makes it really easy to export icons and images for multiple screen resolutions. But especially for native mobile apps, exchanging design assets (why do people still call them slices?) with developers can go a lot smoother if you keep a few common pitfalls in mind. Here are some of the things we’ve learned in our collaboration with iOS and Android development teams.

more about this news article