3 Elements of Your Blog Design That Need Simplifying

WordPress is one of the most versatile blogging platforms out there with tons of options to not only customize the look and feel of the experience but also the interactions that your users have with your content.

That’s why it’s one of the most widely used platforms as well! But a constant challenge that you have is “bloating” your WordPress blog with too many features because the options are near infinite. Sometimes the best thing that you can do is simply add the elements that are the most important to your core experience for your end-user and reader and skip all the excess.

For example, some of the top blogs out there present their content first and foremost both from a stylistic perspective as well as a user-interface one. Take for example ZenHabits.net that really takes it to the extreme in terms of design.

But make no mistake about it – ZenHabits is one of the largest blogs out there and is growing and highly profitable!

So what can someone learn from ZenHabits as an archetype for good usability and a focus on the simple elements that matter? Here are 5 things that you can do to make sure you capitalize on your user’s experience and make an impact:


1.Overall Blog Design

The most obvious is the simplicity of the design. If you’re content is going to make your blog grow and attract an audience then you have to make sure that the design complements your content every single time.

Even the blog here at DailyBlogTips.com sports a simple design and structure that no one would scoff at. In fact, many people have remarked how visually refreshing it is to simply have the content first and all the other stuff second.

Make sure you use a WordPress Blog theme (I use Standard Theme) that highlights your content first so that you users can get what they came for! I feel (like you do) that your blog commenters and readers are worth it!

2. Comments

Your comment area, for many, is the lifeblood of interaction and engagement and yet it’s confusing why so many people have so many different plugins and features that crowd the comment space.

For example (and you’ve probably seen it yourself) some comment fields are so messy that you don’t know exactly where to begin! You see “calls to action” all over the place and advertisements surrounding the comment area and you’re simply not sure where the “reply” button is!

DailyBloggingTips has one of the easiest and out-of-the-box comment areas out there and this blog is doing just fine for engagement, right?

Why make it more difficult than it needs to be? The native comment box is beautiful just the way it is (and that’s why I decide to use it) but if you do choose to use another 3rd party platform it might be worth spending some time cleaning it up and simplifying those services too

3. Social Sharing
 Social networking and social media is everywhere – you simply can’t avoid it. And to a certain degree this is a great thing! You want people to engage with your content but you want even more for them to share it with their networks and with other interested parties!

But you have to make it easy to use and simply to share! Again, as I scan the many blogs that I walk through daily I see a complete mess of social sharing etiquette as there’s 20 social sharing icons (and repeats) both in the front of the blog, on the single post layer, and even near the comments!

The best option to simplify and to prettify your blog is to keep one set of social sharing icons on your single post layer (this also speeds up the front page of your blog tremendously) and do it with taste. For example, I use a persistent sharing tool that scrolls with the user unobtrusively to the side of the content so that it’s always there (but never in their way of reading the content).

Choose wisely and you will be rewarded! There are other great plugins that do this as well and another one to check out is part of the JetPack system that WordPress themselves has released.

When you spend the time necessary on making these small but effective changes you will see more people engaging with your content and even find profitable results in more traffic and perhaps even more advertising revenue as you open up space for more opportunities (and more high converting space).

Read More

Google’s Page Speed Service Wanna Make The Web Faster

How would you like to have Google grab all your site files, host them on a Google server, optimize the loading time with several tweaks, and then allow your visitors to visit your site directly on Google’s servers all around the world?

I sure wouldn’t mind (except maybe for the aspect of losing control).

The good news is that soon this will be possible, as Google just announced a new service called Page Speed Service. According to the announcement post:

Page Speed Service is an online service that automatically speeds up loading of your web pages. To use the service, you need to sign up and point your site’s DNS entry to Google. Page Speed Service fetches content from your servers, rewrites your pages by applying web performance best practices, and serves them to end users via Google’s servers across the globe. Your users will continue to access your site just as they did before, only with faster load times. Now you don’t have to worry about concatenating CSS, compressing images, caching, gzipping resources or other web performance best practices.

The service is being offered to some beta testers right now, and soon it will be available for all web publishers. Right now what you can do is to run a simulation here to see how much your website would gain from Google’s service. In my case it wasn’t a huge boost. The “Page Load Time”, which is the main metric, improved by 19%.

If you like the results and to become a beta tester, though, you can apply using a link on the official announcement post (I linked to it above).

Read More

Dress Your Blog for Success

Have you ever heard the saying, “You should dress for the job you want, not for the one you have?” Obviously the point of this familiar line is that you need to prepare yourself and present yourself for the future that you want.

In a way, this saying should apply to your blog as well. Of course we’re not talking about a suit and tie, but rather the appearance of your blog that visitors are presented with the moment they arrive. This first impression can help readers to see you as the successful blogger you aim to be, or it can set you back if they see an unattractive look.

Dressing appropriately for a job shows that you are aware of your appearance, that you take your job seriously, and that you’re intending to go places. If you were starting a new job and your goal was to eventually be an executive of the company, you wouldn’t show up to work in jeans and a t-shirt. In order for others to see you for who you want to be, you have to present yourself as if you’re already there.

Go with the Flow: The Top Blogs

Take a look at some of the top blogs in your niche, and then look at some that get very little traffic and have few readers. You’re almost guaranteed to see some major differences. Sure, the more successful blogs may be able to spend more money on their appearance, but that’s not likely to be the most significant difference. In fact, with all of the blog themes available and resources for learning how to customize your own blog theme, money really doesn’t need to be a factor.

Now, take an objective look at your own blog. Does its appearance belong in the category of a successful blog or an unsuccessful blog?
 If you could improve the appearance how would it affect your level of success? Obviously, blog success is far more dependent on content than on design and appearance, but the visitor’s first impression is more likely to be based on the attractiveness of your blog. Just like your ability to perform a job is determined by other factors than your appearance, but a sloppy presentation will kill your chances.

If your goal is to be among the top blogs in your niche, looking like you belong is a great start. Visitors are likely to immediately classify you according to your look. Yes, you can overcome a bad first impression with great content, but why not take advantage of the first impression? An attractive, professional-looking blog design will give you the look of a blog that’s on its way to success, and visitors are more likely to want to be a part of that.

The top blogs almost always have a very clean, professional look. The design of the blog should enhance the content, not distract the visitor’s attention away from it. Even the advertisements on successful blogs are chosen and placed strategically.

Free themes with no customization are rarely used by top tier blogs. Having a unique look is crucial to standing out to new visitors. The design doesn’t need to jump out and grab visitors; in fact, most good blog designs are subtly stylish. But it helps if your visitors are not seeing hundreds of other blogs with the same theme.

If a visitor arrives at a new blog for the first time and their initial impression is “amateur,” that blogger will have a hard time convincing the visitor that the blog itself is high quality.

So, what factors can help a blogger to create a great first impression? As most of us know by now, flashy ads that distract attention are an unwelcome sight for most readers. Harsh color combinations are also rarely used by successful blogs. Choose your ads and color combinations wisely when choosing a design.

Images and Theme Customization

Images can also be important, although many blogs don’t even need the use of photos to accomplish a good look. If you’re looking for free stock photos, try stock.xchng, FreePhotosBank, or FreeImages.co.uk. There are also a number of places to get very affordable, quality stock photos including Stock Xpert, iStockPhoto, and Big Stock Photo.

If you’re using a free theme (particularly WordPress users), try learning about themes from the WordPress Codex and forums. You’ll find plenty of information and help for making changes to a free theme. In many cases even small changes will help to make your blog more distinct.

If you’re not interested in doing the coding yourself, you may be able to find help for less money than you may expect by checking places like Craigslist and Elance. These services may cost you a little bit now, but how much will a new look help you in your journey to being a more successful blogger?

Take a look at your blog and see how you might be able to “dress it” for the level of success that you want to achieve. Focus on providing a clean look that that tells your readers you’re serious about your appearance and you’re ready to take your blog to the next level.

Not just anyone can be an executive at a large company. Likewise, not just anyone can be a successful blogger in a crowded market. Give yourself the appearance of success and you’ll be one step closer to achieving it.

Read More

Widen Your Blog for Goodness Sake

The current number of websites that still cater to the 800×600 crowd is staggering. I will be the last person to condemn those who maintain that size (I’ve been one for a long time!) since at its heart the idea is to serve as many visitors as possible. It’s not the worst problem one could create.

But it’s about time to consider other alternatives, and here’s why.

01--800×600 is dying. It is. More and more statistics are showing numbers for 1024×768 as becoming the new standard for browser sizes. Thank God. So take a look at some of the numbers, and see if that convinces you to change.
 
02--Breathing room. White space is your friend. Widening your blog can give you much more room to work with, as well as more white space to show off for your visitors.
 
03--Emphasize your content. If you widen your theme you will also widen your content. I wouldn’t suggest widening your sidebar as much, odds are it is as big as it needs to be. Give the extra width to your content. Since the feature presentation of your blog is your written word, it should have the most emphasis anyway.

How big should it be? If you were operating at an 800×600 page size before, I would guess you were at about 760px wide. I would up that number to 960px wide. This still gives ample room for your background to show on the margins as well as give some breathing room between the scroll bars and your page.

If you have a decent WordPress theme, it shouldn’t be a problem to up your size. Literally, it should be as easy as changing two or three numbers. If your theme doesn’t let you do that, you should contact your theme designer and have it adjusted.

What has your experience been with your blog widths? Have you tried different options and had different results?

Read More

11 Principles to Design a Great WordPress Theme

After a couple weeks of reviewing WordPress themes (and countless weeks prior judging designs in general) I have established the following guidelines for creating an awesome WordPress theme. At the very least, following these guidelines will get a stamp of approval from picky designers.

At the same time, pay attention to these things when choosing a theme. If the author went through the trouble to follow certain standards, I’ll bet it is quality work.

1. Validate your code

I can’t emphasize this enough. Honestly, for how easy it is to validate your work, the lack of proper validation is evidence of a lazy theme author that doesn’t bother to run a couple checks. Validate your HTML. Then validate your CSS. Think of it as using good grammar. Everyone will appreciate it.

2. Make it work across browsers

Firefox, Internet Explorer, Opera…the big boys are important. According to Jakob Nielsen in Prioritizing Web Usability, best practice is to wait six years after the release of a new browser before ignoring an old one. Thankfully we can forget about IE5. But IE6 is still out there. Prepare for all browsers, and if you can’t make it work, add in fixes so your theme degrades gracefully. A very useful tool for this purpose is Browsershots.org.

3. Comment your code

For some themes this is not a big problem. If you don’t modify much from the default WP theme, it probably isn’t a big deal. Use this principle: if you won’t be able to follow your code in two years, no one else will be able to tomorrow. Comment more than you think you should.

4. Be yourself. Be unique

Nothing is more annoying than to hit that Test Run link and see, basically, the same default WordPress theme wrapped in a big image. Go through the trouble of making your theme original. More people will use it.

5. Prepare for the test run

The Test Run is extremely important. Format your content code to be able to handle all of the default content the WordPress Theme Viewer will drop into it. If your theme looks bad in the test run, very few people will think it will look good on their site.

6. Make the content king

Sort of goes with the above. Leave plenty of room for people to dump content into your theme. Yes, you are an artist. And yes, your work is (sometimes) beautiful. But no one else is concerned with displaying your art on their site. They are concerned with their stuff. How will your stuff make their stuff look. Make their stuff look good, and you will have a popular theme.

7. Make it widget-ready

If your theme isn’t widget ready it’s way behind everyone else. Get into the habit of including this with every theme you make. Users love Widgets because they’re easy. So do the work for them.

8. Customize the 404 page

It’s amazing how many themes either don’t bother formatting this page or completely leave it out of the theme files. This is (aside from the landing page) the most important file in your theme. A user experience can be made or broken by the “404″ experience. A more in depth look at this, over at Theme Playground.

9. Customize all the easy-to-forget pages

Start a checklist. Start with the easy ones. Main index template (check). Page template (check). Single post template (check). Attachment page template (whoops). Search results template page (whoops). You get the idea. Don’t leave anything out, or it will frustrate your users down the line.

10. Provide quick response and support

Anyone who installs your theme is a customer. Treat them that way. Subscribe to your pages on the Theme Viewer. Pay close attention to user response. Your goal is to keep your tag in the footer on their site as long as possible, right? One way to do that is to make servicing your theme a priority.

11. Would you use it?

Probably the easiest test of all. Some of the most successful themes downloaded today are those that were once used by the big guys (for instance, DailyBlogTips). There’s a reason for this. If your theme is tried and true, people will see that. Using it yourself, you will work the kinks out. You treat your own design very well. do the same for the themes you create, and you will see a huge response.

Read More

43 Web Design Mistakes You Should Avoid

There are several lists of web design mistakes around the Internet. Most of them, however, are the “Most common” or “Top 10” mistakes. Every time I crossed one of those lists I would think to myself: “Come on, there must be more than 10 mistakes…”. Then I decided to write down all the web design mistakes that would come into my head; within half an hour I had over thirty of them listed. Afterwards I did some research around the web and the list grew to 43 points.

The next step was to write a short description for each one, and the result is the collection of mistakes that you will find below. Some of the points are common sense, others are quite polemic. Most of them apply to any website though, whether we talk about a business entity or a blog. Enjoy!

1. The user must know what the site is about in seconds: attention is one the most valuable currencies on the Internet. If a visitor can not figure what your site is about in a couple of seconds, he will probably just go somewhere else. Your site must communicate why I should spend my time there, and FAST!

2. Make the content scannable: this is the Internet, not a book, so forget large blocks of text. Probably I will be visiting your site while I work on other stuff so make sure that I can scan through the entire content. Bullet points, headers, subheaders, lists. Anything that will help the reader filter what he is looking for.

3. Do not use fancy fonts that are unreadable: sure there are some fonts that will give a sophisticated look to your website. But are they readable? If your main objective is to deliver a message and get the visitors reading your stuff, then you should make the process comfortable for them.

4. Do not use tiny fonts: the previous point applies here, you want to make sure that readers are comfortable reading your content. My Firefox does have a zooming feature, but if I need to use on your website it will probably be the last time I visit it.

5. Do not open new browser windows: I used to do that on my first websites. The logic was simple, if I open new browser windows for external links the user will never leave my site. WRONG! Let the user control where he wants the links to open. There is a reason why browsers have a huge “Back” button. Do not worry about sending the visitor to another website, he will get back if he wants to (even porn sites are starting to get conscious regarding this point lately…).

6. Do not resize the user’s browser windows: the user should be in control of his browser. If you resize it you will risk to mess things up on his side, and what is worse you might lose your credibility in front of him.

7. Do not require a registration unless it is necessary: lets put this straight, when I browse around the Internet I want to get information, not the other way around. Do not force me to register up and leave my email address and other details unless it is absolutely necessary (i.e. unless what you offer is so good that I will bear with the registration).

8. Never subscribe the visitor for something without his consent: do not automatically subscribe a visitor to newsletters when he registers up on your site. Sending unsolicited emails around is not the best way to make friends.

9. Do not overuse Flash: apart from increasing the load time of your website, excessive usage of Flash might also annoy the visitors. Use it only if you must offer features that are not supported by static pages.

10. Do not play music: on the early years of the Internet web developers always tried to successfully integrate music into websites. Guess what, they failed miserably. Do not use music, period.

11. If you MUST play an audio file let the user start it: some situations might require an audio file. You might need to deliver a speech to the user or your guided tour might have an audio component. That is fine. Just make sure that the user is in control, let him push the “Play” button as opposed to jamming the music on his face right after he enters the website.

12. Do not clutter your website with badges: first of all, badges of networks and communities make a site look very unprofessional. Even if we are talking about awards and recognition badges you should place them on the “About Us” page.

13. Do not use a homepage that just launches the “real” website: the smaller the number of steps required for the user to access your content, the better.

14. Make sure to include contact details: there is nothing worse than a website that has no contact details. This is not bad only for the visitors, but also for yourself. You might lose important feedback along the way.

15. Do not break the “Back” button: this is a very basic principle of usability. Do not break the “Back” button under any circumstance. Opening new browser windows will break it, for instance, and some Javascript links might also break them.

16. Do not use blinking text: unless your visitors are coming straight from 1996, that is.

17. Avoid complex URL structures: a simple, keyword-based URL structure will not only improve your search engine rankings, but it will also make it easier for the reader to identify the content of your pages before visiting them.

18. Use CSS over HTML tables: HTML tables were used to create page layouts. With the advent of CSS, however, there is no reason to stick to them. CSS is faster, more reliable and it offers many more features.

19. Make sure users can search the whole website: there is a reason why search engines revolutionized the Internet. You probably guessed it, because they make it very easy to find the information we are looking for. Do not neglect this on your site.

20. Avoid “drop down” menus: the user should be able to see all the navigation options straight way. Using “drop down” menus might confuse things and hide the information the reader was actually looking for.

21. Use text navigation: text navigation is not only faster but it is also more reliable. Some users, for instance, browse the Internet with images turned off.

22. If you are linking to PDF files disclose it: ever clicked on a link only to see your browser freezing while Acrobat Reader launches to open that (unrequested) PDF file? That is pretty annoying so make sure to explicit links pointing to PDF files so that users can handle them properly.

23. Do not confuse the visitor with many versions: avoid confusing the visitor with too many versions of your website. What bandwidth do I prefer? 56Kbps? 128Kbps? Flash or HTML? Man, just give me the content!

24. Do not blend advertising inside the content: blending advertising like Adsense units inside your content might increase your click-through rate on the short term. Over the long run, however, this will reduce your readership base. An annoyed visitor is a lost visitor.

25. Use a simple navigation structure: sometimes less is more. This rule usually applies to people and choices. Make sure that your website has a single, clear navigation structure. The last thing you want is to confuse the reader regarding where he should go to find the information he is looking for.

26. Avoid “intros”: do not force the user to watch or read something before he can access to the real content. This is plain annoying, and he will stay only if what you have to offer is really unique.

27. Do not use FrontPage: this point extends to other cheap HTML editors. While they appear to make web design easier, the output will be a poorly crafted code, incompatible with different browsers and with several bugs.

28. Make sure your website is cross-browser compatible: not all browsers are created equal, and not all of them interpret CSS and other languages on the same way. Like it or not, you will need to make your website compatible with the most used browsers on the market, else you will lose readers over the long term.

29. Make sure to include anchor text on links: I confess I used to do that mistake until some time ago. It is easier to tell people to “click here”. But this is not efficient. Make sure to include a relevant anchor text on your links. It will ensure that the reader knows where he is going to if he clicks the link, and it will also create SEO benefits for the external site where the link is pointing.

30. Do not cloak links: apart from having a clear anchor text, the user must also be able to see where the link is pointing on the status bar of his browser. If you cloak your links (either because they are affiliate ones or due to other reasons) your site will lose credibility.

31. Make links visible: the visitor should be able to recognize what is clickable and what is not, easily. Make sure that your links have a contrasting color (the standard blue color is the optimal most of the times). Possibly also make them underlined.

32. Do not underline or color normal text: do not underline normal text unless absolutely necessary. Just as users need to recognize links easily, they should not get the idea that something is clickable when in reality it is not.

33. Make clicked links change color: this point is very important for the usability of your website. Clicked links that change color help the user to locate himself more easily around your site, making sure that he will not end up visiting the same pages unintentionally.

34. Do not use animated GIFs: unless you have advertising banners that require animation, avoid animated GIFs. They make a site look unprofessional and detract the attention from the content.

35. Make sure to use the ALT and TITLE attributes for images: apart from having SEO benefits the ALT and TITLE attributes for images will play an important role for blind users.

36. Do not use harsh colors: if the user is getting a headache after visiting your site for 10 consecutive minutes, you probably should pick a better color scheme. Design the color palette around your objectives (i.e. deliver a mood, let the user focus on the content, etc.).

37. Do not use pop ups: this point refers to pop ups of any kind. Even user requested pop ups are a bad idea given the increasing amount of pop blockers out there.

38. Avoid Javascript links: those links execute a small Javascript when the user clicks on them. Stay away from them since they often create problems for the user.

39. Include functional links on your footer: people are used to scrolling down to the footer of a website if they are not finding a specific information. At the very least you want to include a link to the Homepage and possibly a link to the “Contact Us” page.

40. Avoid long pages: guess what, if the user needs to scroll down forever in order to read your content he will probably just skip it altogether. If that is the case with your website make it shorter and improve the navigation structure.

41. No horizontal scrolling: while some vertical scrolling is tolerable, the same can not be said about horizontal scrolling. The most used screen resolution nowadays is 1024 x 768 pixels, so make sure that your website fits inside it.

42. No spelling or grammatical mistakes: this is not a web design mistake, but it is one of the most important factors affecting the overall quality of a website. Make sure that your links and texts do not contain spelling or grammatical mistakes.

43. If you use CAPTCHA make sure the letters are readable: several sites use CAPTCHA filters as a method of reducing spam on comments or on registration forms. There is just one problem with it, most of the times the user needs to call his whole family to decipher the letters.

Read More

6 Ways to Speed Up Your Site

The load time of websites is one of the most important factors affecting its usability; most Internet users will just skip a site altogether if it fails to load within a couple of seconds. Below you will find the summary of the “Speed Up Your Site” series. Those are simple yet effective ways to make sure that your website is running fast. You can click on each point to read the article with comments from the readers.

Optimize Images:
always use the “Save for the web” feature included on image editing software. Images represent the heavier load on virtually any website so make sure you are optimizing them. Alternatively you can also turn to an online image optimizer.

Image Formats: 
apart from optimizing images it is important that you choose the right format. JPEG format is suitable for photographs or true-color images. The GIF format should be used with flat-color images like logos or buttons. PNG works very similar to GIF but it supports more colors.

Optimize Your CSS: 
most websites are designed with CSS nowadays. Make sure to aggregate and clean your CSS. CleanCSS is an online tool that will merge similar selectors, remove useless properties and remove the whitespace from your code.

Use a Slash on Your Links: 
when a user opens a link on the form “http://www.domain.com/about” the server will need to figure what kind of file or page is contained on that address. If you include a slash (/) at the end of the link the server will already know that this is a directory page, reducing the load time of the site.

Use the Height and Width Tags: 
many people forget to add the Height and Width tags on image codes. Those tags will make sure that the browser knows the size of the image before loading it. The result is that it will reserve a spot for the images while loading the rest of the page, speeding up the whole process.

Reduce the HTTP Requests: 
when opening a web page every object (images, scripts and the line) will require a round trip to the server. This latency can add several seconds to the load time of your site. Make sure to reduce the number of objects and to combine CSS files and scripts together. 

Read More

Create a functional footer for your blog

If you navigate through the blogosphere you will realize that the vast majority of the blogs lack a footer. Even when they have one you will just find a copyright message there.

Most corporate or mainstream websites, on the other hand, do have a footer where you can find vital links for the site. As a result people are used to scrolling down to the footer whenever they have problems finding a particular information.

A functional footer for a blog should have at least two links:
a link to the homepage
a link to the RSS feed

You can also consider adding the following:
an email subscription box
a link to the Archives
a link to the “About” page
a link to the “Contact” page
the recent posts
the popular posts

Read More

Speed Up Your Site: Use a slash on your links

will need to figure what kind of file or webpage is contained on that address, wasting time on the process. If instead of using that link you include a slash (“/”) at the end like “http://www.domain.com/about/” the web server will already know that the link points to a directory, reducing the time to load the page.

The improvement on the loading time of links ending with a slash will not be astronomical, but when it comes to speeding up a website every small bit helps!

Read More

Remove unnecessary information from blog

The cleaner your blog the better. Most readers have a short attention span and they do not want to get distracted by unnecessary or non-relevant information. Despite that fact many bloggers forget to remove such extra data from their sidebars or from the blog posts. Below you will find some examples of unnecessary information:

Author information: Unless your blog has more than one author it makes no sense to display “Written by John Doe” after every single post. Readers that want more information about the author can visit the “About” page.

Meta data: Most WordPress themes come with a meta section on the sidebar where you can find admin links like “Login” or “XHTML Valid”. While this information might be useful for the blog owner it offers no value for the reader.

Recent Comments: The blogs that have a “Recent Comments” section usually display only the name of the person that posted it and the first two words of the comment. Readers interested in following the comments of a particular post will probably click on that post directly and not on the “Recent Comments”.

Calendar: Unless you write about time-bound content there is no reason to have a calendar on the sidebar of your blog. People blogging about a journey or a conference, for instance, should use the calendar because it enables readers to track the evolution of the event. If your blog is not in that situation, however, ditch the calendar.

Badges: Some blog directories or networks require the members to place a badge on their sites. Most of the times, however, those directories send very little traffic while creating a lot of visual pollution. Be careful to evaluate the real benefits before cluttering your blog with dozens of badges.

Overall make sure that all the elements on your blog are creating value and not just detracting from the user experience. If you are not sure about what adds value and what might disturb the readers you can ask them or use services that track where they are clicking around your blog. Do you have any other examples of unnecessary information on blogs?

Read More