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
-
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
-
Cognitive Biases — The Anchoring Effect
-
Cognitive biases: loss aversion
-
Leading a data-driven strategy
-
Cognitive Biases — Availability heuristic
-
Decisions and distractions
-
Cognitive Biases — Post-Purchase Rationalisation
-
Cognitive Biases — Framing Effect
-
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
-
Cognitive Biases — Unit Bias
-
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…
-
A Guide to Understanding the Favicon
The Favicon is sometimes an overlooked aspect to digital branding, yet this small opportunity is just another…
-
Disable Autocomplete, Autocapitalize, and Autocorrect
Although autocomplete, autocapitalise and autocorrect is useful when creating notes or posting a comment on a Twitter status…