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…
All articles
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
Questions to ask yourself before you start Before you decide to design a reference number, ask if…
How to disable text selection using CSS quickly
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…
Pseudo Class
A pseudo-class starts with a colon (:),it is similar to a class in HTML, but it's not…
Hiding Elements using CSS
We have plenty of options at our disposal at hiding elements with CSS. In this post we…
Quick Tip – Using CSS3 For Alternate Row Colours
Using the CSS3 pseudo class nth-child we can style table rows to be alternating colours.Browser support using…
CSS How to Style External Links
Styling an external links is a nice visual indictor for users that if they click the link…
Opacity Property in CSS
The CSS opacity property controls how transparent an element is. The values can be between 0 (not…
All of the CSS cursor types
Using the correct type of cursors is becoming more important than ever with the increase in web…
Comments in HTML
Using comments in the HTML document will not be visible in the user's browser. It can be…
A Guide to HTML Tables
Tables have been used in the past (hopefully not still) to design the full layouts of websites.…
CSS flexbox guide
Originally posted on Codepen, this post will look into Flexbox. (more…)
The Pseudo Element
Not to be mistaken with pseudo-classes, pseudo-elements allow you to style certain parts of a document. We…
HTML5 Input Type’s (email, URL and phone)
In the previous post about Disabling Autocomplete, Autocapitalise and Autocorrect we looked at how we can improve forms for…