There are so many subtle little things that go into the design of a good blog that you may not even realize. Taking a little time on your design can make a big impact on user experience, and that can translate into longer and more frequent visits to your little corner of the web.
For today’s “15 Minutes” tip, Im tackling one of my biggest pet peeves: unaligned sidebar widgets.
I really cant think of one thing that grinds on my nerves more than left justified, right justified and center justified sidebar buttons all jumbled up together. Pick one and stick with it! Its a subtle thing, but it makes a huge difference in the overall visual aesthetics.
Lets look at my example sites again…
Here’s my “bad” design, sporting un-aligned widgets:
And now for a “better” design with widgets all lined up and pretty:
Much better, right?
So…
How to fix it: If you want to center all of your widgets, its as simple as adding this…
<center>
before all of the HTML code in a widget, and this:
</center>
after. So, a blog badge or button ad code might look like this:
<center>
<a href=”link.html”>
<img src=”imagelink.jpg”>
</a>
</center>
Now, there are some widgets that will not center so easily. Some of the default widgets in WordPress, for example, are left justified and it takes a little more fancy coding to change. But those are usually text widgets (categories, recent posts, etc.) and visually don’t make a difference in my opinion.
Sometimes widgets like Google Friend Connect, Facebook Like box or affiliate ads use Javascript and are not always easy to center. One option is to try adding the <div align=”center”></div> instead of the <center></center> tags. Sometimes that will do it…sometimes not, it just depends on how the widget is coded.
If all else fails and centering doesnt work on all your widgets, you can always left justify everything, essentially removing the <center> tags on any widget that includes it. By default, most widgets on most platforms are left justified.
That’s it! Painless and easy, yes?
Questions? Please ask!
