Guides, tutorials and useful resources on topics such as HTML, CSS, UX and website performance written by Michael Gearon and guest writers. Based in the UK, Mike works for Companies House (UK Government) as a Senior Interaction Designer whilst mentoring and helping other designers in the design industry, read more…
Latest articles
Complete guide to user preference media features in CSS
The user preference media features is probably one of the most exciting upcoming CSS features. It allows…
<noscript> tag in HTML
In some cases users disable scripts in their browser (user-agent) or the browser they're using doesn't support…
How to use Google Fonts on your website
Google provides a free to use service that allows you to access thousands of fonts. All of…
border-radius CSS property
The border-radius property can be used to create rounded corners on elements. The value of property can…
Scroll to text fragment: How to link & highlight any text on a web page
Text fragments can be used to link to a web page and highlight matching text in the…
Feature detection using @supports in CSS
The @supports CSS at-rule allows you to write CSS based on whether a feature is supported or…
!important rule in CSS: when and how to use it
The !important rule in CSS is a powerful tool that should be used rarely and for a…
line-clamp CSS guide
The line-clamp property is a way to truncate text at a specific number of lines. At time…
How does CSS cascade?
Cascading is probably one of the most important factors in CSS. The Cascade in Cascading Style Sheets…
Hopes and Fears activity in your design sprint
Hopes and Fears is a good project kick-off exercise. You encourage everyone in the room to share…
One thing per page principle
How do you make a complicated process easier to complete if you can't make the process shorter?…
New accessibility features with Chrome 82
Google Chrome are rolling out a new feature with Chrome DevTools to give designers and developers the…
How to design transaction reference numbers
Transaction reference numbers can come in a range of formats and used for a so many different…
How to disable text selection using CSS
Perhaps a controversial idea but you can disable the ability for the user to select text in…
Test-Driven Product Design
Test-driven development or TDD is a methodology on improving the delivery from concept to deployment in the…
Cognitive Biases — The Barnum Effect
Written for Medium the Barnum Effect looks at how we believe that general information such as your…
Cognitive Biases — The Bandwagon Effect
When we a see a long queue of people or a crowd of people we naturally think…
Cognitive Biases — The Anchoring Effect
The anchoring effect is one of the most used biases in retail especially in sales like Black…
Cognitive biases: loss aversion
Written for the UX Collective on Medium the loss aversion looks at how designers and marketing people…
Leading a data-driven strategy
A data-driven strategy is a concept that I came up with whilst working at GoCompare. It is…
Cognitive Biases — Availability heuristic
The availability heuristic is a type of bias where people make a decision or a judgement based…
Decisions and distractions
Cognitive Biases — Post-Purchase Rationalisation
Post-purchase (or Buyer’s Stockholm Syndrome) rationalisation in a nut shell is when someone purchases a product or…
Cognitive Biases — Framing Effect
A decision can come across more attractive by highlighting the positive or the negative attributes. The framing…
Level up — Design Better Steppers
Progress indicators can have a huge amount of value in an interface especially when used over long…
Cognitive Biases — The IKEA Effect
Why do we love something more when we’re involved in building it? Whether it’s making a house…
Cognitive Biases — Unit Bias
Unit bias is how people want to complete a task or fulfil an objective. An example could…
8 Ways To Improve Your UX Writing
CSS url()
The use cases of url() in CSS are huge, here are most of the properties the url()…
CSS :focus-within pseduo-class
The :focus-within pseudo-class is a CSS Level 4 selector that is supported by Firefox, Chrome, Safari as…
Cognitive Biases Cheat Sheet
Framing effect In summary: Framing is not about what is said, but how it is said. Example of…
WebPageTest Obscure Features for Performance Testing
WebPageTest for those who haven't used it can allow anyone, for free, to test their website performance…
CSS custom properties for cascading variables
Preprocessors like Less and Sass have helped over the past few years to keep development CSS codebases…
Google to Use Page Speed as Ranking Signal in Mobile Search
From July 2018, Google is going to consider page speed as a ranking signal for mobile search. Page…
UX and UI Tools 2018
With a plethora of UX tools on the market it can be overwhelming what to use. From…
The guide on progressive web apps
It is very difficult to get people to install a native mobile app. Even if someone installs…
The web is bloated
First published on LinkedIn - June 25, 2017 One of the greatest frustrations with websites is speed.…
CSS Borders
The border property allows you to specify how the border of the box representing an element should…
CSS Padding and Margin
The most two popular CSS properties are margin and padding, they are used for spacing-out elements. Simply…
CSS Font Smoothing in Webkit and Firefox
Using font smoothing can turn a horrible typeface to a beautiful one. The Webkit and Firefox browsers…