Clean HTML Design


Back to Clean Buttons Home



Above all clean HTML design is all about making the page as easy to use and intuitive as possible. If you need to explain how your site functions, you should redesign it to make it more intuitive.

Quick to use. Users should be able to see the desired action within seconds of viewing the page. They should also be able to determine the importance of information and the significance of actions.

Consistent Elements. All elements should be consistent and intuitive. For example, text should only be underlined if it is a link. Colors should be consistent with the site, and consistent with what most people are accustomed to. So you should only use red to indicate a dangerous action - like deleting an image.



Less is More. Remove anything you don't need.

Keep it Simple. Fancy transitions (like fading in and out) are distracting and may cause usability issues, especially on mobile devices.



White Background Color. For the main bulk of the text a white background is best. For less important text, or to highlight a quote or a section of code, a light shade of grey can emphasise that this is different.

Dark Grey Text Color. The ideal text color is dark grey (like #222222) for ease of reading. Black text is harder on the eyes if used for the majority of text, but is useful for headings, links and other emphasis.



Narrow Columns. Narrow columns are easier to read. Newspapers, and now news websites use this trick to make large amounts of text easy to read.

Lots of White Space. Plenty of white space around the text makes it much easier to read.


Mobile First

Vital Tag. In order for mobile devices to scale your site, you need to include the below tag in the page header. Click to select, then copy.

<meta name="viewport" content="width=device-width, initial-scale=1">