Whenever something new comes out for the web, I like to try it out somewhere, and there’s nowhere better than my website.
The last addition I made was playing with CSS Grid, and now more recently, the “prefers-color-scheme” media query which displays light or dark viewing modes depending upon the user’s system preferences.
Experimentation is instrumental
After implementing the default prefers-color-scheme media query, I thought that not all users would like dark mode, so I applied a simple toggle (in the footer) to override their system preference.
By experimenting with these new features, you can quickly identify issues (such as the one above) and whether they are suitable for use in production or not.
Having this “playground” is essential, especially with all the new features the browser vendors are releasing.
What if they break my website?
You’re probably thinking “what if these experiments break your website? Would it affect business? It’d look bad!”. Well, yeah, they could break my website, but as any seasoned developer knows, you wouldn’t release any updates without performing adequate testing. And, as for affecting business – I would only release an update after thorough testing, so I’d expect business to run without any hiccups.
I like to roll out new features and design styles across my whole site as it gives me more to play with and more test cases, and if it breaks, it breaks. I’ll fix it and learn something along the way. You could separate your experiments within a “lab” section, so they don’t interfere with your site’s design if you find that more comfortable.
In the design section of my website, each case study has its own layout and style. I did this intentionally to try out different techniques and design styles, and to see how they could be made responsive using flexbox, grids and transforms. It was also an opportunity to see how simple, CSS animations could be used to enhance the user experience.
Next up
In my next post, I’ll go into more detail about how I implemented dark mode, and what considerations I had to make to apply it correctly. It wasn’t as simple as just changing colours.