archive tips & tricks

‘Styling’ your web experience

Whether you’re a graphic designer or not, eventually you will find yourself thinking – “Why is this font so small”, or “I wish they haven’t put this massive ad banner here” . Sometimes a single design decision can ruin your experience with a favourite website…

Below are two examples of using a personal style in a browser. They follow ‘before & after’ order.

Design Week’s new website has a very strong header, uselessly stuck to the top of your window, that disrupts viewing and reading and ‘blocks’ the content to have better impact. Also makes my head squint.

Screen Shot 2015-03-07 at 08.37.17

Below an example after adjusting styles in the browser. The content stands out and can be easier focused on.

Screen Shot 2015-03-07 at 08.37.25

Following similar example with a video post.

Screen Shot 2015-03-07 at 08.38.33
Screen Shot 2015-03-07 at 08.38.00

Below a sticky header done right – gives access to related sections without disrupting content experience.

Screen Shot 2015-03-07 at 08.58.50

Another example. Wikipedia’s outdated design makes long articles pain to read – font is too small, lines are too long.

Screen Shot 2015-03-07 at 08.40.20

A small tweak – applying a custom style to body text (<p> element) makes it much easier to read.

Screen Shot 2015-03-07 at 08.39.36
Screen Shot 2015-03-07 at 08.41.12
Screen Shot 2015-03-07 at 08.41.00

Below a popular browser stylesheet editor. Styles can be applied to the whole domain or a specific web address.

Screen Shot 2015-03-07 at 08.44.58

Wikipedia customisation for better readibility

.mediawiki .mw-content-ltr {
	font-family: Georgia, serif;
	font-size: 17px;
	line-height: 1.6em;
.mediawiki .mw-content-ltr p {
	max-width: 36em;


It is not that hard to customize your favourite websites to improve and personalise your web experience, but you need to know a little of  html and css. Not sure if there are tools for a wider audience.

Leave a Reply