Lazy loading Google Maps with the IntersectionObserver API

For business web sites it is quite common to have a map on the site. In most cases clients want to add a Google Map, because that is what a lot of people use. The problem is that such a map loads a lot of JavaScript and images. These maps are often placed at the…

Using text-decoration-color and text-decoration-skip with underlined links

Currently, I am creating a new WordPress theme and I had to think about which colours to use. I eventually went with a palette based on Abstraction Blue by Georgia O’Keeffe. Part of any web design is the styling of links. One of the goals is to have a good level of accessibility. And it…

Changing the default settings for the WordPress Media Player

WordPress offers the possibility to add videos and audio files. To play these files a default media player is available. It is based on MediaElement.js and has been included since WordPress 3.6. For a project, I recently worked on, videos were used on the web site. By default WordPress displays videos with the control buttons…

Making your WordPress header image responsive

A lot of web sites have a large header image, also known as a hero image. WordPress provides out-of-the box functionality to use these type of images in the design of your web site. Unfortunately most themes put out the full-sized image on every screen size. This wastes bandwidth, because in a lot of cases…

Using video headers in WordPress

Following the trend of using large videos as a design element, WordPress added support for video headers in version 4.7. Also the new Twenty Seventeen theme was released to show this feature. The use of video has been part of the some projects I have done. With HTML5 video became easy to integrate. Except it…

Back to top