Web design, SQL, and .NET for the young, up-and-coming developer Dot Net Yuppie

Maki, the author of an internet marketing and social media blog called Dosh Dosh, recently revamped his website with a completely new design, which received both positive and negative feedback on his blog post announcing the new theme. Being a long-term subscriber of his website, I would like to provide a review of his new theme. As a developer, I’ve found that one of the best ways to improve my own skills is to evaluate the skills of others.

If you haven’t heard of DoshDosh.com, I highly encourage you to visit — he has phenomenal content related to blogging, freelancing, marketing, etc. that would be extremely useful for any web developer.

Overview
DoshDosh’s theme was designed to give “precedence to the content” — the design is minimalistic, with a two-column fixed-width (948px) centered layout. The content takes up almost 2/3rds of the width of the page, and the sidebar allows for two 125×125 ads to be placed side-by-side.

Color Scheme
The color scheme is very minimalistic — it is essentially black, white, and gray with a hint of #993333 (scarlet red). Because of the simple color scheme, the sidebar’s advertisements bring extra attention to themselves due to their color variety. The links are all colored in the same #993333 red color, which brings a good consistency to the layout.

Logo
David Airey, the designer of the logo, has an excellent post regarding the logo’s design from conception to implementation. David mentions that the final selection of a logo was between the current logo (“H”), and logo “B”, as seen below. I would have much rather had the more complex “B” logo instead of the current logo. Additionally, the gray/white/black color scheme for the logo is dreary. A splash of color would have made the logo much more effective. On the upside, the current simplistic logo degrades very nicely into favicon.ico.

Header
The header takes up 55px, which is quite short for a header, but the intention of the new design was to bring focus to the content. I don’t mind the header/logo, but I don’t think it’s optimal for the design — it’s almost too simplistic and too monochrome.

The worst design faux pas committed by the new design is the fact that there is no tagline, description, or explanation of what doshdosh.com is within the header. The first sentence of the website’s “about” page describes doshdosh.com as, “Dosh Dosh is a blog offering internet marketing and blogging tips, alongside social media strategies”. The downside to his minimalist header is that it doesn’t describe his website at all — a simple sentence in the header could improve his new visitor retention.

Header Navigation
I’m very happy to see the use of color with the navigation menu, but I’ve never been a fan of keeping the navigation highlighted respective to the current page. For example, if you go to the “About” page, the “About” navigation icon will appear red by default. While it adds some needed color, it isn’t entirely accurate. If you navigate to any specific article, the “Home” navigation item still appears red, despite the fact that you are not at the “Home” page.

SEO
To the writer’s credit, all the <TITLE> tags are optimized for search engines. Even on his home page, which is rare for blogs to do, he puts a description of his blog ahead of the title of his blog (“Internet Marketing and Social Media: Dosh Dosh”). Because of his domain name, he will easily score well on search engines for the words “dosh dosh”, so it isn’t necessary to have a title tag that only displays the name of the blog. By putting a description of his site first, he has attained a #2 rank for the term “internet marking social media”.

Based on the HTML comments hidden within the design, it appears that the All in One SEO Pack is installed, but it isn’t being used to its fullest extent. By not manually specifying a description and series of keywords for each post, he is getting stuck with poor-SEO terms. For example, in his post announcing the new theme, his keywords are “general stuff” and the description is made up of the first thirty words of his post. I realize that there is some debate regarding the lack of beneficial effect to well-formed <META> SEO tags, but it can’t hurt to spend an extra minute to hammer out a few keywords about your post.

Sidebar
I’m very impressed with the sidebar design. Its width is enough to allow for two ads per row, but it’s not so wide that it receives more attention than the content. All too often, web designers get greedy and overtake their websites with gaudy, animated ads that distract from the beauty of their design.

I fully understand the need to make money through advertisements, and the more money the better, but eight ads at the top of the sidebar promotes ad blindness and doesn’t make any one of the advertisements unique. A design of four advertisements (at twice the advertising cost) would both decrease ad blindness and allow for each individual ad to stand out more.

I don’t like the placement of the rest of the items within the sidebar. Below the advertisements include: “Recent Posts”, “Categories”, “Top 10 Most Viewed Articles Today”, “Google Custom Search”, “My Twitter Updates”, “My Digg Submissions”, and “My StumbleUpon Profile”. I’ll address the google custom search below, but I feel like “Recent Posts” and “Top 10 Most Viewed Articles Today” would be better placed within the footer, rather than in the sidebar. I could be wrong, but it seems like a reader is more likely to notice both sections if they were placed in the footer because they get lost in the clutter of the sidebar. Conversely, the three social networking website feeds could be placed in the footer instead to reduce the sidebar clutter.

Google Custom Search
I can’t imagine the search box gets used very often because it’s knee-deep in sidebar clutter. I understand that you can make Adsense money by using Google’s search feature, but WordPress has excellent search functionality that trumps Google’s ability to display blog posts. Again, I understand that some sacrifices can and should be made in the name of website revenue, but you could place your own, small Adsense advertisements at the top of a search page if you wanted while still retaining a WordPress-driven search page.

Aside from the fact that the search functionality uses Google, I can’t understand the reason for its placement. For the most part, a visitor, who wants to search for a term on your website, is probably going to hope to find the search box somewhere in the header or at the top of the sidebar. Again, it seems that revenue has trumped good design practices — while the search box should probably go at the very top of the sidebar, it has been pushed down by the RSS/e-mail subscription sign-up (which increases traffic and subsequent revenue) and by the advertisements.

Accessibility
Because of the minimalist design, the page degrades very nicely when CSS is not enabled. The sidebar’s text is placed after the content, which makes it easier for visitors with screen readers to get directly to the content. Normally I would suggest an invisible “Jump to Content” link, but because he has four navigation links before the content, I don’t think it’s necessary.

Conclusion
Dosh Dosh’s new design is clean and minimalistic, specifically focusing on content over fancy web design. The design is almost too simplistic, particularly the logo and color scheme, but the biggest fault is the cluttered sidebar. I appreciate the desire to have a minimalistic design, and the designer accomplished this goal, but as a frequent reader, I would have liked to see a fancier CSS or artwork built into the design.

Leave a Reply