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

Looking for more customer centricity? Join our Top Tasks seminar with Gerry McGovern!

Schematic overview on whiteboard what Top tasks are about

What is the first thing thing that you want your customers to do when they visit your website? What should you focus on when building a website or designing an intranet? On the web, the whole world is your competition, which makes customer centricity more important than ever. So please join us in our seminar with Gerry McGovern on the 28th of June and learn all about top tasks, which will help you putting your customer first!

more about this news article

6 design hacks to improve hospital websites

Image of wireframe hospital website with top tasks

While working for a number of customers in the healthcare industry, we noticed that the websites of many Belgian hospitals showed serious flaws in their user interface (UX). And looking at those sites more closely, we discovered that many of them had identical UX issues, some of which can be explained by the nature of the organisation. Below, you will find both our diagnosis and a cure for those UX errors.

more about this news article