Eight Quick CSS Techniques to Make Your Website Cleaner

2019-06-20CSS

Here are several quick CSS tips to help any website look more polished and professional. These are in no particular order and won’t apply in all situations, but these simple rules can make a large visual impact when implemented appropriately.

  1. Add 10px left & right padding to prevent text content from hitting the edge of the viewport
  2. As screen size is reduced the font size should be reduced as well, the opposite is also true (larger screens should have larger font sizes)
  3. Subtle transitions can add a nice touch, I like 0.2s as a general rule
  4. If an image is floated, the top of the image should line up with the top of the text, not the top of the line height boundary
  5. Avoid the use of absolute black or white, an off white/black prevents eye strain and looks nicer in general
  6. Look at selected fonts in as many situations as possible. (Smaller resolutions, large resolutions, long blocks of text, short blocks of text, etc.)
  7. Pay attention to adjacent column heights, make them vertically uniform wherever possible. (Truncate headings, use flexbox and position things like “read more” buttons at the bottom of content in each column so they are aligned)
  8. Use a contrasting background color for call to action buttons to subconsciously draw the user’s attention to your desired action