For the last couple of days, I have been busy cleaning up the theme of this blog. Incidentally, D$ is using a free WordPress theme that was designed by the Daily Blog Tips team and I had to change a few things here and there before rolling it out initially. This time around, a couple of changes had to be done based on the feedbacks received from DP and SP forums’ website review sections.
After completing the style changes and reorganizing the components, I did some smoke test based on what I learned during my user interface development times. To my surprise I found that not only my particular theme but almost all WordPress themes available today do not conform to basic usability guidelines! A simple test of changing the text size (Large, Medium etc) via the web browser options did not have any positive visual impact!
Based on my experience so far, I thought of putting together some guidelines that could be of help to whoever searching for new blog themes.
Theme factors that matter
Cross-browser compatibility: Your blog is like a person and its theme is a like his clothing. So while putting on the new dress the looks should be the same regardless of where the person goes. Similarly, your blog should look much the same while viewing it within any web browser application – well, at least with most popular browsers.
Extensibility: A good theme should be easily extensible via widgets and otherwise. There could be things that you cannot manage with widgets and in those situations you should be able to easily add additional code/components to the theme without much difficulty.
Accessibility and ease of use: The various components within the theme should be easily accessible and well organized. With a keyboard alone (ie. Without the mouse) the links, input fields and buttons etc should be accessible. This accessibility concept is mostly forgotten these days, but really something really nice to have.
Support for various screen sizes: The theme should be designed in such a way that its minimum screen size requirements should be something like 1024×768 and no more than that. At the same time, it should be able to use the real estate accordingly while wide screen monitors are used.
Support for text sizes and standard fonts: The theme should ideally run on standard font families (Arial, Verdana etc). Never use a theme that needs the fonts to be installed unless it is a non-English or oriental/exotic font. Also, the theme should behave as expected while the user chooses text sizes from via his browser options. The standard themes (Wordperss classic and Default) provided by WordPress platform behave very well in this test.
Performance: The theme’s rendering performance should be very good and the download time should be within an acceptable limit. One could avoid themes that have very heavy graphics.
Standard sidebar, main content sizes: The theme’s sidebar, header area, main content etc. should have standardized sizes so that they could support popular widgets and ad-sizes.
SEO factors: The theme should be having certain amount of Search Engine Optimization features built into it so that the content running on the same is easily indexed by the search engines. For example, the blog title should be ideally within an H1 tag and images should have their alt properties set. Individual posts (single post) and pages when viewed should have their post titles within the H1 tag as well.
Uniform styling: The styles of anchors, headings, input boxes etc should be uniform across all pages. Also, the number of colors used should not be too high.
How to quick-test a theme?
Having mentioned the things to look for, the question arises as to how easily one can test a new theme. The following are some quick tests that you could perform on your theme after enabling the same in your test landscape (You should never test a theme on your live blog)
- Do a basic test for uniform appearance with three or four popular browsers. i.e. Internet Explorer, Firefox, Opera etc. Ideally, the font size, position and style of images and various blocks on the theme should look similar on all browsers
- Select a different text size from the browser options and see if the content is still rendered well with the change in text size. If the text size does not change at all or partly changes, the theme may not be conformant to the standards. Also in this case, it may be hard to read your content on huge screens and/or with smaller font settings. Also if possible do a screen resize test by changing the browser window size to available standard sizes
- Try adding your stock widgets in various sidebar positions and make sure that they are rendered well
- Do a save page, of your blog homepage, using the appropriate browsing options and check the size of the whole page along with its images, script etc. The smaller the size of the whole homepage files combined, better the performance of loading and rendering of your blog. I personally have set a goal of 100KB for the home page and its dependencies without any ad banners
- View the page source of your home page and search for H1 tag. On the homepage this tag should be around the blog title (It is okay if it is also used for main posts). A view source on individual post or a page should have the H1 tag around the post title. For archives, it can be H1 or H2. Also, make sure that for all IMG tags, there are appropriate ALT properties defined
- Check for alignment issues, overflow or underflow of screen elements by manually going through images, bullets, blockquotes, widget boxes, comment boxes etc.
- Browser clear-cache test: Clear your browsers temporary files and cookies and then try to load your blog with the new theme. The blog should render properly and if you are testing it on a hosting space (rather than your home computer) you can also do a performance test by using a clear-cache test.
The above mentioned are some of the tests that I do while changing the theme or modifying the same. Of course, this is not a complete list, but could definitely help you to preempt difficult situations post rollout.
And, I did not mean that my current theme conforms to all those standards discussed above. In fact, I am in the process of identifying that special theme for my blog. In the meantime, it would be really great if you could provide your feedback on the current state of my theme, readability of the blog content etc.