Thesis Theme Site Review: SIO SISM – Dark Theme

SIO SISM Blog @ http://blog.siosism.com/

The main website http://siosism.com/ is powered by Gallery, a child theme of the FREE WordPress Theme – Thematic.

Thematic is a free, open-source, highly extensible, search-engine optimized WordPress Theme Framework featuring 13 widget-ready areas, grid-based layout samples, styling for popular plugins, and a whole community behind it. It’s perfect for beginner bloggers and WordPress development professionals.

The SIO SISM Blog is powered by Thesis Theme…

What is the blog all about?

This is the official blog for SIOSISM. Here is where its audience is provided with a little more insight into what SIOSISM stands for: Thought, Wisdom, and Creativity. Its purpose is to enlighten and engage you with this one, of many, unique paths to self-mastery. Hopefully, it will contribute to your path as well.

Screenshots of Home Page and Post Page

The screenshots highlight…

• great web design elements (in green)
• elements that might be great but could be better ( in orange)
  
• and areas for improvement (in red)

Great Web Design Elements

There are 3 main design elements that really work well on Sio Sism – the logo in the header, the headline typography and the sidebar font colour and titles.

1.  Logo / Header - it is very distinctive, a great element shared with the main site.

• Perhaps work on increasing the visual appearance of the underline under the ‘S’ in ‘Sio’ like it is on the main site.
• The yellow color used in the middle of the ‘O’ could be used more often – instead of introducing additional shades of yellow. If you like the gold more on the dark background – perhaps change the yellow in the ‘O’ to gold.

2. Headlines - the headlines are very distinctive with their crisp light font on a dark background; definitely eye-catching.

• Perhaps leave the headlines as is on the teaser page (home page and archive pages) but for individual pages, consider using a light background with dark, big and bold headlines.

3. Sidebars - The titles are great, witty and friendly. You probably don’t need anything else in the sidebars except perhaps a search box!

• If you have a multimedia box appear more consistently (that is every post), then your sidebar is pretty full with large images, the two text widgets of recent and popular posts and perhaps a few paid or affiliate ads.
• I would suggest moving the widget for Facebook out of the sidebar. It’s different colors, shape and appearance break the serenity of your color scheme. Ask yourself, “Does it really add value in the sidebar?”
• Perhaps move the Facebook widget to the bottom into the fat footer or leave it for a page of its own that you link to from the nav menu or link to in the footer. This way, it’s not slowing down the loading of your page unless people want to see it (and then they can visit the social page or wherever it is at).

Nearly Great but Could Be Better

4. Feed Email and Twitter Icons - the design is very nice; the gold gloss brings out the yellow font in the sidebar, and bold yellow accents and hyperlinks throughout the rest of the page.

• However, the home page of the main site centers the logo / header and the rest of the site falls below the line of the logo / header. The main site has great symmetry that is lost with the blog because the logo/header is off-center, the nav menu is hidden and to the far left and the RSS icons too high and large.
• I think the icons invade the logo / header space and should be moved to directly above the sidebar below the line of the logo / header or even into the sidebar right at the top.
• Consider reducing their size so that the bulk of the sidebar still appears ‘above the fold’. Then, center the logo / header.
• As they are now, they seem to be the second most important element on the page, whereas the headlines of the post should be the second main element together with post images or images in the multimedia box.

Areas for Improvement

5. Navigation menu – Two things to improve with the nav menu:

(1) The yellow hover color is great but you aren’t encouraged to use the nav menu because it is too small and hidden up the very top to the far left. It looks like an after thought. Make it a bit thicker (more height to nav menu) and move it right more, centering  it above or below the header / logo so that its far left edge runs parallel with the content’s left edge.

(2) Add a link back to your home page of the main site either in the footer or the header / nav menu or even the sidebar.  Consider a screenshot of the main site in the multimedia box as a default image to drive more traffic to your main site on your home page or on pages without a custom multimedia image.

You can uncheck the Thesis options box that says ‘include link to home page’ and add a link in your nav menu to the home page of your main site and call it ‘home’ OR keep the home tab for the blog home page but also include a tab link to ‘main site’ or something like that.

(3) Get rid of the little default Subscribe RSS button in the top right corner. Another check box to uncheck in the thesis design options. You have the beautiful RSS, email and twitter icons above the sidebar. The default looks like an after-thought all by its lonesome, squashed together with the word ‘subscribe’.

6. Post Excerpt Images – Consistency is the key here. It will look more balanced to always include a thumbnail image (or not). Always including a thumbnail will give the reader another reason to click on an interesting image / headline link to see what the article is about – sometimes even without reading the headline. Consistently adding a thumbnail will also assist with keeping excerpts about the same height/length and balancing the look of your teasers.

Same again with the multimedia box. Adding a great image to the multimedia box really makes the page interesting and makes it a pleasant place to be while reading. I also think your bounce rate will drop if you add a multimedia box with interesting images. It won’t look like a page of words and will look less daunting and more beautiful.

7. Post content - the light font on a dark background can be difficult to read, especially for articles longer than about 100 words. I would suggest trying one or more of the following – only for the content box where posts appear (not sidebars, backgrounds, etc):

(1) making the font larger

(2) bolding in yellow more often (the yellow is a great accent color)

(3) increasing the line height

(4) writing shorter sentences or including more yellow links or yellow bold words

(5) using more line returns / breaks so that paragraphs are only about 2 – 3 lines and giving more space within the article, or

(6) using a light background and dark font (perhaps the bluish-grey background color of the site) for the text boxes to really draw the reader’s eye to the content box (and have the sidebar as a second thought).

Experiment using Firebug in Firefox or other programs that let you try color changes without actually changing your live site.

You can see what Sio Sism with a light content area would look like using Firebug (screenshot above). I admit it loses that dark theme’s attraction – so perhaps just by doing (1) to (5) you will see a marked improvement in your post’s readability.

Check out the average time spent on the site (cpanel stats) and ask yourself how much of this is because it is too hard to read article and visitors just leave?

All of these things will assist the reader maintain their focus and not lose sight of where they are up to, enjoy reading more and stick around longer to enjoy at least one page, preferably more!

And a few other little improvements…

• Google search engine results say Sio Sism is…

Isms of Siosi — Pathfinding through the web, design, and animation
A blog extension of SIOSISM on web design, animation, blogging, social media and personal development.

While the footer has a section “what is this about?” it is a little obscure. Stick with your wording used as your site description for consistency. Your tag line Isms of Siosi is intriguing – perhaps add it to the header area?

• The footer links when you hover over them disappear because they go to black on dark blue. Change the hover text to yellow or white or keep the Thesis Theme affiliate link yellow all of the time.
• The site loads quite slowly, possibly because of the Facebook widget and some of your other plugins. I found that images for posts sometimes didn’t appear and the page timed out without displaying the images. I had to refresh the Avatar article 3 times to see the image (I’m an Avatar fan so I was okay with that… but others may not be…)
• The comment area is difficult to focus on with lots of bits and pieces of light boxes and shapes on a dark background. Perhaps give the comment area a more solid background?
• Not sure about the green hover color on headlines in posts. I’d stick to yellow or another color you already have e.g. light blue.
• I notice the multimedia box is used infrequently. You could use a screenshot of your main site (with a link to it) as the default (the only image that appears in your rotator folder) and turn on the multimedia box. Mentioned above, I know, but one of the most simple and best options in Thesis Theme. You can then just add custom images to the multimedia box for each post where you want to have something appear other than your rotator images. I actually felt a bit ripped off after the XMen image when the next post I clicked on didn’t have an image at all apart from a little square light colored thumbnail and the tweet button.
• In my opinion, the WP Greet Box plugin is visually ‘nasty’ wrapped around an image, especially making it white against blue/black. It is also a bit of a pig on your page download. (Neytiri dodesn’t deserve to be cluttered like that :-) )

Structure and functionality

• I like the two column structure and the use of the full-width look. It’s spacious and calming.
• The fat footer is great to add that extra content some people like (and bother to read). The yellow hover color is also very nice.
• The sidebar is simple with catchy sub-titles of Just Arrived and People’s Choice.
• The various plugins may be slowing the site loading – something is.

Best content

My favourite image and post content is the article 5 Kick-Ass Weblog/Portfolio Designs. This is where the multimedia box is awesome.

You have worked out that you can have a vertical aspect ratio - many Thesis Theme users don’t and their images bleed across or they don’t take advantage of vertical images.

The Thesis image rotator (multimedia box) works best with images that fit the most common aspect ratios, including:

• 3×2
• 2×3
• 4×3
• 16×9
• 4×5

Your Thoughts?

What do you think of this dark theme customization of Thesis Theme?

* * UPDATE * *

Sio Sism revamp following review! Check out the before and after screenshots.

Click on the images for larger shots and visit Sio Sism in person.

Sio Sism Before…

Sio Sism After…

What’s Different

Looking quickly, this is what I notice…all great improvements:

• Centered and lighter, more noticeable and unique nav menu.
• Centered header / logo
• Using multimedia (rotator) box with a different (to usual) aspect ratio
• RSS, email and twitter buttons de-emphasised and moved to sidebar space, out of header space
• Font is larger and easier to read
• Awesome typography in content styling. Great use of ‘dark’ space!
• Added great, brightly coloured (and nicely integrated) tag line.
• Facebook plugin/widget gone = more harmony in sidebar
• Awesome big, bold and beautiful yellow teaser headlines
• Added thumbnails for all teasers

Well done George. I personally think it is great. Keep up the great content (love the Wolves!)

Related Posts

1. Customising Thesis Theme: Great Dark Thesis Blogs
2. Free WordPress Theme Review: Igloo News
3. 6 More Examples of Unique Thesis Theme Sites
4. 30 Thesis Site Examples: 30 Different Designs
5. Thesis Theme Site Reviews @ Thesis Theme HQ