The use of imagery is profound in websites, but takes a heavy toll on the loading times of websites. And this is even more true for smaller mobile devices, which often need to download the same images as their high definition counterparts. Although they can be scaled, their file size remains equal. Luckily enough, there is an HTML attribute for the image tag which can help to serve the right. It’s called srcset and sizes. Responsive images used to be about scaling the image proportionally to the width of a device. A desktop would serve the full size images, but […]

Dropdown menus can almost be considered a web standard, and occur for example in many WordPress Themes. Now I’ve worked some times with Superfish plugin, which makes the transition between drop-down menu’s smoother, but it did not work optimal in all cases. Well, with CSS3, it is fairly easy to make a smoothly animated dropdown menu! The good thing is, that we don’t need Javascript. The bad thing is, the animation will not work in older versions of IE. Well, I guess you would have expected that. Nevertheless, it saves a whole piece of Javascript and rewards users of normal […]

Website optimization is an important aspect of a web developers life, as website speed is a determining factor if visitors will stay. In this tutorial, we will look to one small aspect of website optimization, namely the use of image sprites. This will be done with the example of social media icons in svg, which we will render retina compatible with a .png fallback for IE8. What is an image sprite? Image sprites combine reusable images into one single image, thereby reducing the amount of http requests that have to be made. Using CSS and elements with a fixed height […]

A slider is a powerful technique to display multiple sections of text and visualisations in just one screen. It is for no reason that it is wildy popular and used on many websites. In this article I want to describe how you can make a custom slider in WordPress, using custom post types, jquery flexslider and metaboxes. It is assumed that you have basic understanding of WordPress and understand HTML and CSS well. Step 1: Registering a Custom Post Type With register_post_type, it is possible to register a custom post, which enables you to have another type of posts besides […]