This post is by Vahni of Grit and Glamour.
What makes a blog user-friendly? What should you not do? That’s what this vlog is all about. Sorry for the abrupt intermission…I don’t do a lot of video editing…what you see is pretty much what I shot.
Part 1—What You Should Do
What you should do recap + extras:
- Be true to yourself, your unique voice.
- Content is king. Post original content whenever possible.
- If you’re using shots from fashion shows, etc., be sure to give attribution, and consider posting images that others aren’t.
- Proofread and spellcheck. Then do it again.
- Have a copyright statement. Read How to protect your copyright—real life example by Suze of Miss Vinyl Ahoy.
- Mobilize your blog. I use WP Touch. Find out what options are out there for your blog and preferences.
- Respond to comments. On that subject, watch Friend Friday: Am I a narcissist? if you haven’t already.
Part 2—What Thou Shalt Not Do
What you should not do recap + extras:
Don’t:
- Use overly-large header images.
- Underline text that is not a link.
- Center all your body copy. We read from left to right, and it takes longer for the eye to find the beginning of the next line when text is centered, so left-justify body copy.
- Have music that automatically plays when a user hits your home page.
- Plagiarize.
Loading ...
This was great and to the point!
Just one question: What are you referring to as the header image? Is it the first (usually top) image of the post? or is it the the name of the blog?
I’ve actually always wonder if the images on my posts were to large.
Thank you!
Thanks Martha! The header image is the image that is used across the top of the blog, and usually includes the name of the blog. Like a masthead on a newspaper. Large images in posts are not usually an issue if they are high-quality, relevant to the post, and optimized for the Web.
But an unnecessarily large header image, one so large that it fills the entire screen and you HAVE to scroll to see the latest post—that is not a value add. On the flip side, it is an annoyance for users, and pushes the actual content to the next screen.
Hope this helps. Thanks for your comment!
Thank you so much for bringing up the music on blogs issue! Another don’t for me would to have the size, font and colour of your text change from word to word. Yes, it can add accent, but that’s what bolding is for.
Great post, it’s really informative!
You’re totally right, Rosie. Overuse of text emphasis is also ineffective. The point of bolding or using color is to catch the eye. When it is used with abandon, it has the opposite effect.
Thank you for your comment!
I hate when music is played automatically! I immediately close the page and don’t bother to look further
Thanks for these tips – think they are spot on!
How you feel about truncating posts? You know, having a “click here to read more..” link. I, personally, don’t like it but I’m curious if you’ve found or think it affects reader satisfaction, usability, or just overall traffic. I’ve read perspectives that support/negate both sides of the it (using it vs. not).
I’d say truncating posts is a good idea when you’re posting over 25 images in a row, or some hugely extensive amount of text – but the content above the truncated portion probably needs to be that much more enticing and engage readers enough for that extra mouse click to reveal the rest of the post (rather than merely to continue scrolling down the page).
Rani, I agree with Michelle 100% on not truncating posts. Unless it is HUGE, there is no point—and you are likely to lose your reader. Most avid blog readers subscribe in a RSS reader, for a reason—they want all their feeds delivered to them so they can scan through them quickly and efficiently. Truncating a post forces them to click to your blog for more, and I’ve read that bloggers have found that truncating posts does not increase blog traffic, but actually decreases it. If a subscriber has 15, 20, 50 posts to get through, they don’t have time to click out for each one. And most people scan content. They rarely read every word.
It is normal to truncate older posts on your blog home page, but that is not the same as actually truncating the post page. So bottom line is, don’t do it.
I think it really depends on the blog too… For I food blog with recipes I think it is great to truncate the post so that you have to click to see the actual recipe, then you can scan the blog and see which you would be interested to cook.
For fashion blogs I don’t think it is worth doing, unless, as you say, there are a huge amount of images.
Thanks for all the advice on this post!!
Exactly – older posts might be truncated to clean up old pages of your blog (because generally if they’re incredibly old, those posts will be reached through their remote link and not by a reader scrolling back that far). But I have had people tell me they took a whole night and scrolled back through my ENTIRE BLOG, so you never know – if you want people to catch everything, keep it visible and scroll-through-able.
Super helpful comments, Michelle Christina and Vahni! It’s not surprising to me that truncating posts can actually decrease readers – I know I’m not prone to “click more” either.
Thanks!
You’ve mentioned some great do’s as well as some of my pet peeve don’ts, especially the automatic music. Like if I wanted to hear music I would go to Pandora.
As usual your vlogs are so well-done!
Thank your so much Fajr!
Vahni-
This was definitely a great vlog; educational and interesting.
You’ve got me though, on the header image problem. I’ve been trying to revamp on my blog for a while now and I used to have a simple “play on text” profreshstyle.com and thought it was boring which is why I now have an image.
Could use your advice on specification on my particular header.
Anyway, thank you for all your tips. They are all quite valid and NECESSARY!
Thank you Christina!
You have a lovely blog with a lot of nice visual elements. I like your header very much, but it does present a bit of a problem, and it’s a common problem. I’m not sure if you and other bloggers are being forced into a square-shaped header because of your templates or not. That’s what I suspect. Then you probably have the added limitation of not being able to change the margins of your body content. So you lose the width of the page because of narrower margins, and you lose the height of the page because of the header proportions.
In this situation, if the header height will adjust to the size of your graphic, my recommendation is rework the graphic to a more rectangular shape. If not, consider a different template with a shorter, more rectangular header space.
Terry Morris, author of Web Development and Design Foundations with XHTML, recommends that “Repetitive information (header/logo and navigation) takes up no more than one-quarter to one-third of the top portion of the browser window at 1024×768 resolution.” That means the height of the header should be between about 250 and 340 pixels or so.
Terry’s site has a fantastic Web Design Best Practices Checklist that every blog author should review and endeavor to learn more about.
One thing I noticed about your blog is that you often use graphical representations—images of text—as your body copy.It does add visual interest, but I’d like to caution you against doing this in the future. First, images slow down the page. Second, if the images don’t load, no one can read your post. Third, images of text that are not properly tagged prevent everyone with a visual impairment using a screen reader from hearing your text. Which is the same as point two: your content is lost. You know what they hear? The name of your image: 07121.
Hope this information helps you!
Vahni-
thank you so much for your response. i actually just finished creating a new header. hope this new one fits appropriately.
also, thank you for addressing the text part. that was something new i was trying and it’s been a 50/50. I think you’re right. it’s definitely time to go back to just typing my text.
THANKS so much!
It looks fantastic! Outstanding, sugar! I am always so happy when I meet bloggers who appreciate and seek out constructive criticism, and actually care about their users’ experience.
Good for you!
Hey-
it’s about maturity..some are, some aren’t. Thanks again for your advice.
<3.
I agree with Vahni, Christina. Your new header image looks great. As someone who’s been designing websites since 2002 here are my suggestions on how to improve your blog’s usability and appearance:
- Use typed text instead of text graphics. Vahni listed a few good reasons not to do this and I might add one more: text in images cannot be indexed by search engines hence you might be losing out on potential readers who come from search engines. Furthermore it’s much more time consuming and you cannot add links to your text images unless you link the whole image. Also, let’s assume you drastically change your blog template and you realized the font you used for the text images totally clashes with your new blog design. You’d have to manually change every image then while you can easily change a font with normal text by using a few lines of CSS.
- Your headlines could use a larger font size so they stand out more. In fact, the font in your text images is way bigger than your headlines which I find visually confusing
- Stick to one type of font family, preferably decide whether you want your font to be a serif font or a sans serif one. On a side note: I would also increase the font size in your sidebar.
- Don’t use too many 3rd party widgets. Firstly, it will considerably affect how fast or slow your blog loads up in the browser. Secondly, most widgets come pre-formatted with their own designs and having too many of them in the sidebar for example will make your blog “cluttered”.
- Avoid making endless link lists in your sidebar. Again, it slows down the loading process. Regular readers will most likely won’t pay attention to it anyway. Also, personally I find them intimidating and overwhelming. Cut them down to 5-10 max. and you will find visitors will be more inclined to click through. If you have so many blogger friends and want people to know about them, create a separate page and put the BIG link list in there.
Alright, I think that’s pretty much it. You really have a lovely blog, Christina. I hope you’re not offended by my suggestions.
Gosh, that must be a veeeery lenghty comment. Sorry about that! Guess I have much more to dish on this topic than I though I would.
Lastly, for a good laugh, take a look at The Oatmeal’s How A Web Design Goes Straight To Hell
P.S.: Vahni, you’ll probably love this one: 10 Words You Need To Stop Misspelling
Irina-
Thanks so much for your advice! this is extremely helpful and dutifully noted. Working on it now!
Man, this is exactly why I love IFB.
Thank you ladies!
Both Irina & Vahni-
It would be great to get current feedback. I’ve made some major changes that I feel really affect the overall appeal.
Thanks again!
Irina, thank you so much for adding all these fantastic points to the conversation. They are spot-on and extremely helpful!
Oh, and I am so going to tweet that 10 words post. Awesome!
Christina, it’s looking good! I saw your tweet about the font size. Hopefully there is a setting in your template where you can adjust that?
Curiously, it’s not bigger than the images you used to use. The font is actually smaller. It just feels funny to you. Play around with other fonts and sizes until you find one you like. Maybe you’d like a sans serif like Verdana or Tahoma?
Christina, wow, so much better already! Your blog’s much more visually scannable now.
What you could do now to make your blog more scannable is to increase the line height of your posts.
I’m not sure about which template you use or how much experience you have with CSS, but try this line of code (you have to include it in the style.css of the template you’re using, the file could be named differently depending on the platform you’re using):
p {
line-height: 150%;
}
You should see a significant change in the appearance of your paragraphs. They aren’t supposed to look that dense afterwards. If that ain’t enough for you, increase the percent value up to 200%.
Great to see people take action and improve their blogs.
Thanks Irina!
Man, you both are really amazing!
So I tried inputting the CSS coding but for whatever reason, Typepad isn’t allowing me to input that. No sure why but hopefully now, I can leave as is and deal later!
xx.
Hey Vahni-
I think that this is such a great post! I plan on getting into the world of fashion blogging (I’ve been blogging for awhile, but mostly just daily thoughts and things) and this helps a lot!
–Ciara<3
Fantastic, Ciara! So glad to know my ramblings are actually helping someone!
I felt sooo happy to find this post! It talks about something that I´ve been worrying about, the copyright statement!
I heard about Indiana from Adored Austin, and other fashion bloggers suffering from plagiarism, and it´s actually one of my mayor concerns ever since I started a fashion blog, to find my pictures in another website without my consent, or even to get myself in trouble for using pictures of garments and products while talking about trends or so.
I found a website (myfreecopyright.com) which claims to protect blogger´s creations, should I try something like this? Have you ever heard of anything similiar?
Thanks a lot!
Luce, thanks for you comment. Glad this is a help to you.
I have never heard of myfreecopyright.com, but it looks like it might be a good idea. A lot of bloggers use Creative Commons. Definitely read Suze’s post, which I referenced in the post above.
Good luck!
Great posts and already I can see changes I can undertake to make my blog a better experience for readers.
I know it is not possible to have a look at every single Blog M.O.T request but I would really appreciate it if you could tell me if there is anything glaring wrong with my blog.
It is relatively new but I don’t want to get used to bad habits this early! mycapaciousbottega.blogspot.com/
Thanks, M! Your blog is clean and well-organized. You’re already doing a lot of great things. What I see off-the-bat:
1. Change “Tit-Bit” in the right rail to either “Tidbit” or “About” or “About Me”…and the latter is the best choice. “Tit-Bit” is, well, obscene! I know what you meant to write, but that one changed letter makes it a reference to a bit of your breast instead of a bit about you.
2. Consider using larger images in the body of your posts. If off-angle shots are your signature, that’s cool. But you might want to throw in a few normal views because the off-angles can be a little disorienting.
3. Move your Google Friend Connect widget from the footer to the right rail.
4. Add a simple copyright statement.
Hope this helps!
Hi Vahni!
Thank you so much for taking the time to look at my blog. Your tips are ultra useful and I shall be implementing them all. Will also convince my husband to take a few off-angle shots once in a while!
Really glad I joined the community
Milly
p.s I forgot to mention, I am going to have to become much more aware of the difference between United Kingdom English and United States English because I really don’t want to offend or exclude any readers by my choice of words!
No problem, Milly. Glad you have found this post and IFB to be a valuable resource.
Vahni,
Thanks so much for this post, you made exceptionally good points. I’m constantly updating my layout for a better viewer experience, and I found the moment I removed my old, obnoxious header everyone was rejoicing. I find layouts to be tricky, since one thing can work for one blog but not another. Anyway, thanks again!
Badley
Wow…thanks for letting me know about the feedback on your header. It’s good for us to share these kinds of experience and learn from each other. Thanks for your comment!
The whole “above the fold” part of your vlog was really interesting and such good advie. I’m always frustrated about how little shows of my newest post, but I really like the look of my free WordPress theme and until I can afford a designer or Thesis I think I’ll be staying with it. I’m going to be thinking about that copywrite suggestion as well.
Thank you Heather. I think half the battle in usability is knowing the direction you need to move in. Fine-tuning what you can until you can implement the ideal solution is still a great approach!
I agree about not truncating, I originally started out doing it on the advice of a non fashion Techi friend but I’ve stopped doing that now. Also I am using my FB page and I’m posting the extra photo’s there if there is a huge amount as I think that, that is an effective way of sharing them.
Hi Nicky, thanks for your comment. Glad you stopped truncating!
It’s funny…there are so many coders or Web designers who aren’t that up on usability. And there are graphic designers who can’t code and many who don’t know a think about usability. But at the end of the day, the most successful sites are aesthetically pleasing, highly functional, AND user-friendly. The best thing any serious blogger can do is take it upon themselves to go outside their comfort zone and learn more about usability and Web best practices.
Wow— this is a great vlog– I’m new to blogging and from the look of it, I’m committing several crimes
like the automatic music 
If you can, would any of you please check out my blog and let me know what you think? I’m opened to anything!
OP~
Some considerations:
1. I strongly recommend changing to a white background with black text. This is the optimal combo for readability.
2. The gradient and font color of your menu bar/navigation at the top is difficult to read. I suggest you eliminate the gradient.
3. Your font color and link colors are too similar, so at-a-glance, users cannot see what is a link and what isn’t. The underline appears under links on hover, but that’s not helpful enough because it requires the user to hover all over your words to determine what is a link and what is not. This is why a white background with black text is a better choice (and is a tried-and-true convention). It makes it very easy to incorporate a link color that stands out.
4. You should always give photo attribution or a link back to the source. I know the girl with the long dark hair in this post is the blogger from PinkBow:
http://www.originalprototype.com/2010/08/get-down-tonight.html
You need to acknowledge that these are her photos, or at the minimum, link them to her blog.
Overall, your blog is clean and straight-forward, which is great. The LinkWithin and social media widgets are smart additions. I think your blog would look a lot more polished if you did nothing other than change the color scheme as indicated above.
Thanks for your comment and I hope this helps!