A. CasalenaWhat are the most common mistakes to avoid in blog design?
Excerpted from my contribution to Blog Design Fatalities by author Ryan Jackson.
One of the most common mistakes I see in blog design are layouts that are image heavy — especially when the images are not
optimized for the web. This can cause extremely slow page loads and
you could lose a visitor if you make them wait too long for your
content. It’s best to use a combination of CSS and small repeating
images whenever possible, and optimize your images with editing
software such as Photoshop.
Another big error I see is sites that are not tested in multiple
browsers and screen resolutions. I test my work in various browsers
on a new Mac running 10.4 with a widescreen Cinema Display, and an
old Dell PC laptop running XP. You can’t always get it perfect in
every browser, especially colors. But at least you can say “Ok, my
site looks great on newer bigger screens, and not too horrible on a
little laptop with a limited color range.” This also allows you to
make sure all of your code renders properly — sometimes you can
have
a small mistake in your CSS that won’t affect Firefox but will look
horribly askew in IE.
Of course, there are many sites where style trumps usability,
especially in art and entertainment. If this is the case with your design, it’s
helpful to include a statement on your front page or footer, i.e.
“This site is optimized for Firefox at 1280x800 screen resolution.”
Also, if your site requires Flash or a PDF Viewer, include a link to
download what’s needed.
Reader Comments (10)
Could you please clarify what optimizing an image for the web entails?
Also, the common mistake I see in blog design/layout is way too many distracting widgets on the sides of the blog. It is so distracting.
To be honest though (and I am almost afraid to say this in this forum), I often shy away from light text on a dark background in general, but specifically when the site is content driven. It breaks one of the cardinal rules of design, and it is often difficult to read. As a designer, I have to say that I never understand why some bloggers do this, and I am surprised that it is used here, considering the site's overall attention to aesthetics.
I'm not sure it's totally analogous, but I set my command consoles to yellow on black for readability in my OS UI.
I also have to commend SquareSpace on the layouts of their pages!
Most people do find light text on a dark background harder to read than dark text on a white background. Research has been done and I think Jakob talks about it in his book.
Great question! When optimizing images for the web there are a few simple steps to follow:
- Make sure you're saving in RGB or Indexed Color mode
- Reduce your image to 72dpi
- Save in the exact dimensions you wish it to appear on your site
- And, if possible, use an image editing program like Photoshop or Fireworks, which come with a 'Save For Web' feature. This interface will allow you to test various settings (such as JPEG quality or number of colors used in a GIF file) which will further reduce your file size.
MedicalSpaMD:
If you're using a Squarespace template and style, yes. But we have many customers who edit their CSS and templates, which can render incorrectly if there is bad markup or styles that are incompatible with certain browsers.
It is definitely good advice to check your blog on several different browsers...when I was new to all this, I often created something which looked great on Safari but awful in Firefox, etc...I've since learned my lesson!