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
4 phases of the Double Diamond Model
The British Design council in 2004 came up with the idea of the double diamond design model.…
::selection – Change text selection color
The CSS pseudo-element ::selection changes the styling that is highlighted by the user, such as when you…
initial-letter CSS property guide
The initial-letter is a CSS property that allows you to control the styling of the first letter…
CSS System Fonts
System fonts in CSS are worth considering if you want to improve your website speed to provide…
CSS Text Transform – text-transform property
The CSS text-transform property allows you to control the text case. By default the value is none.…
What is the perfect page size for fast loading web pages?
When looking at web performance one of the most common tips is reducing your page size. If…
How to validate your CSS using W3C
W3C have created a free service where you can validate your CSS for free. You can also…
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 (cut off) text after a specific number of lines.…
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 Colors
There are plenty of ways to add a splash of color to your website with CSS. Typically…
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…