Warning: Long, text-heavy post ahead, if you cannot read or do not read then you may as well skip along.

So you say you want to see some credentials. How about I’m smarter so stop asking stupid questions and just do as I say? There, some bitchiness to set the mood. Oh I feel all important now. The fact is, Graphic Designers are very cocky people – we’re the exact people who queue in Starbucks and openly mock the colour palette of the papercups, we’re people who discriminate users of certain fonts (example: Comic Sans), and most of us believe that Hello Kitty is a whore. (She is, btw.) Graphic Designers are also geniuses and are aesthetically fine-tuned and should be treated like royalty.

Well now that the tone is set, shall we move on.

Now, these aren’t, under any circumstances, rules – just a few friendly neighbour’s advice. There are no rules in design, but there is taste – and in webdesign, there is communication. Wait, I just want to underline that. Blogging is all about COMMUNICATION. Your layout, how you display content, will directly coincide with the quantity and the types of readers that flock around your blog. Of course this depends on what type of blog you’re running, and if you actually wanted visitors – but if you’re a blogger reading this and getting geared up to leave a comment, then you’re in a blogging community and it is 134% sure that you want readers of your own. So take this treatment, I promise that after it, your content will shine and your pores will be smaller.

  1. Background
    • Colour
      Guess why all books, magazines and newspapers have white pages and black text? Duh, it’s just easier to read. I guarantee that bright text on dark background will strain the reader’s eyes and your content may end up not getting read. Depends of course, on how much you write on your blog – a photography based blog may thrive on a black background. Here’s an example:

      • bw1

      and obviously, avoid highlighter colours like pink, green, yellow or blue for a background. If you want a coloured background, natural/desaturated colours would be more easy on the eyes.

    • Background Images
      Remember: Magic Eye = puke. Keep background images subtle and light.
  2. Resolution & Size
    • Screen Size
      Still around 60% of the globe use screen resolution of 1024 x 768. This means many people don’t see your blog as you might on your huge screen. The maximum width of a blog must be 1024pixels. This means with a sidebar size of, let’s say, 250px – image width should not go over ~750 px. It’s rather trendy nowadays to upload huge images exceeding the width of 900px. Those images will be cut on many readers’ screens and the worst thing to be giving a reader is the task to scroll horizontally.

      So
      add up the width of your sidebar and the images you normally post and see if it exceeds 1024px. Also, if you have a chance, view your blog from a smaller monitor or a different OS (Mac if you use PC, and vice versa).

    • Image Sizes
      For images to be better appreciated, their minimum width should be no less than 300px. Asking your visitors to click on every image to enlarge is a huge imposition, remember: readers are lazy. Thumbnails will hardly get clicked on as well – especially if image is hosted on imageshack or photobucket. (They’re just slow to load)Also, many fashion blogs will at some point upload catwalk photos.

      So, please tell me – is this easier to view:
      02
      or this?:
      01
      It’s hard to get full attention for catwalk photos in the first place, you don’t want to make it harder.

      BTW This is crime:

      25e1ca70d974abb2633220d69ccadf46df576ea0_m bird1

      Always rescale or crop. Never ignore scale just to make an image fit.

    • Bandwidth & Loading time
      The larger your images, the slower loading time, the more patience you require from your bloggers. Not everyone has broadband Internet connection, and some viewers may even want to access your page from a mobile phone. Big images also eat up more bandwidth, a possible reason why your photobucket is so kindly telling you to upgrade to pro.
  3. Fonts
    • Size
      Anything under font size 9pt is pushing it. This has nothing to do with aesthetics, it’s a simple matter of legibility.
    • Fontface
      Whatever fancy font you find from your computer, it will never show to viewers. The only fonts that will show are the safe web fonts. Fonts like Arial, Georgia, Courier, Verdana, Garamond, Comic sans…etc but as I said, Comic Sans is a crime, it just is – don’t use it ever in your life, maybe unless you’re drawing a damn comic, even if.

      It is also known to webdesigners that fontface Courier is also a font to avoid for chunks of text. They’re fine for minimal text (titles, statements) but if you write more than a sentence in your blog content, Courier is not recommended. They are usually used for strings of computer programming display – and is not designed to be a well-readable font. Don’t do it just because it’s a blog trend.

    • Limit to 2-3 different fontfaces.
  4. Automatic Background Music
    This should be pretty damn obvious.

    • Reader can be in a quiet library or a public place.
    • Reader may have own music on and overlapping music is annoying.
    • Music taste can be a sensitive thing. You don’t want readers to judge you by your music taste, instead of the blog content.
  5. Sidebar
    Keep it clean. There is always a hierarchy in a web layout and if the sidebar draws more attention than the main content, then there’s something wrong. Avoid using many images or colour. Sidebars are like tools of navigation, so they should act and look like tools, secondary to the content. Beware of 2 sidebars sandwiching the content – make sure at least one is simple and all contents in that sidebar are aligned well.
  6. Header
    • A header is like an introduction paragraph in an essay. Concise and bold is key – I recommend that the height does not exceed 400 px. Again, you should consider the general resolution of 1024 x 768 – think if your screen was 768 px tall, the browser and start menu bar using up around 200px, you’re left with about 550px. If your header was bigger than 400px, then it wouldn’t be an introduction, it’d be a whole page on its own.
    • For good free fonts for the header – visit Dafont for a wide selection. The default fonts in our computers are not beautiful for decoration, and usually considered generic and lazy by designers.
  7. Text
    • The comfortable number of words across a screen is 12-16 words.
      If your paragraphs expand across the whole screen, then you’re asking visitors to physically move their head to read your blog.
    • If again, you write a lot in your blog – it’s probably not the best idea to make the font centre-aligned.
  8. Links
    It’s always better if a link opens in a new window/tab than on top of the page. Links from a blog will always be towards a different blog/source/image so if the link opened in the same window – then it’d be guiding readers to exit from your own blog. (HTML code for having links open in a new window: <a href=”img url” target=”_blank”> Add the target=”_blank” in the the brackets.)
  9. Copyright
    Copyright is a huge deal and it can become a serious problem if dealt lightly. ALWAYS declare the sources of photographs and materials that is not your own.

I know this list makes it look like all blogs should be white with 1 sidebar and a fixed width. Well no, it’s a list to remind you to put yourself into the reader’s shoes, and judge and crit whether your blog is legible and clear.

I think the bitchiness wore off in the middle somewhere, I can always bring it back though, don’t let your guards down. Hope this helped anyone in any way. Any questions, throw it at me.

Posted: March 15, 2009
Category: Do It Yasself