onSite Reviews: bigsandygilmore.com

[CorvusErebus]

All right class, this week we're going to mix things up a bit. Rather then a list of faults, I'll be showing you some great examples of web design done right. This is partially due to the nature of the website, and partially me finding my "Style" so bear with me. Today we'll be reviewing Big Sandy Gilmore on. . .

All right. First thing first. Matt stout, you have a great website. I mean it, it looks good, reads well, navigates easily. It's wonderful. And that's why we'll be doing things a little differently. I have one or two nitpicks I'll mention over the course of the article, but for the most part, I really can't offer too many ways to improve this website without completely changing it's style.

So instead, we'll examine what they did right, why its right, and why others should apply the same techniques. I'll also be breaking the review up in to categories, and rating each one on a scale of One to Five. Tell me what you think of this method in the comments thread!

ABOVE THE FOLD– 5/5

First and foremost, the Above The Fold review. They do a great job at keeping things compact! This is partially due to the size of the comic, and partially because they keep their header fairly compact. The result is that I could read the whole Comic, navigation buttons and all, at a scant 990 pixels wide, by 750 pixels tall. those are some really good numbers all told!

Some common problems with Above the Fold are excessively large banners, large ads crammed ABOVE large banners, large navigation buttons, and poor Div management (an HTML Term) leading to a lot of Dead Space between elements. There's none of that here. The logo and ads are balanced well, the buttons are decorative without being over sized, and there's no dead space to be found. Remember, if you have large chunks of space without content, or with very little content, then that space isn't working for you, and should be considered "Dead Space". You want to cut as much dead space as you can, without making the design feel cramped.

USE OF COLOUR- 4/5

A big mistake many new comics make is in their colour scheme. Too many times I open a website to bright eye searing neon pinks and greens. Big Sandy however has none of that. The colours consist of a very subdued brown and white scheme, that matches the comic palette quite well. And that's very important when designing you're site. Your primary colours should be neutral and subdued, so the eye can easily ignore it while focusing on important information (such as your comic!). Meanwhile the important bits, such as the Navigation Buttons, should be bright and attract the eye. Inverting this formula, using bright eye grabbing colours in unimportant parts of your site, can really damage your readers ability to notice key elements. You want to use temperature control to "pull" the eye along your website, from element to element. That means cool colours in unimportant areas, warm colours where you want the reader to focus.

And that's my only complaint here. It might be a bit too subdued. There aren't really any bright accent colours to grab the eye on key elements. To solve this, the orangeish tan (RGB 237, 181, 103) used on the navigation buttons could be a bit brighter, to stand out. Still, this isn't a huge problem really, as the dark brown is different enough that, even if it doesn't instantly pull the eye, it does it's job fairly quick.

BANNER – 4/5

The banner is GREAT! I don't have much to say on this one. This is how you do a banner folks. Well, one of a few ways, but we'll talk about those another time. This is your standard Sidesaddle and Adbar banner, and they fit well. Neither is competing with the other for space.

My only Nitpick is that the logo could probably be a bit bigger. There's a bit of leftover room up there, and it just feels really tiny. Remember, Don't sacrifice your brand identity for advertising. If you have a really wide logo, it might be better to consider an alternative layout. But that's not actually why they aren't getting a perfect score. While executed nearly perfectly, the design does little to stand out or innovate. It's a fairly mundane design. While that's not a bad thing per say, simply executing a standard design well will not earn a perfect score here.



NAVIGATION & LAYOUT – 3/5

The navigation is actually really Good. The design is really straightforward, and easy to use, if not a bit cliché. Remember kids, clichés are not a bad thing! A well executed cliché is better then a poorly executed revolution! I have absolutely no complaints here. The design may be a standard, but it's done well.

I like the Button design as well. It's straightforward, it doesn't take up a lot of space, and looks more unique then the standard undecorated text links. However there are a few things that keep these from being anything more then average.

First of all, all the buttons have these one pixel wide lines between them. While hard to notice, it does break up the top buttons. Secondly, the text feels really cramped in some of the buttons, and the font isn't really working in my opinion. It feels entirely separate from the Logo text or the text used in the comic and website. Third, as I said, the colours are doing very little for you. The secondary tanish orange is far too white. Consider making it a brighter orange, and having the top icons change on hover, like the arrows.

And that brings me to the last problem, the arrows. While not bad, the text feels redundant, and the shapes very basic. I would advise dropping the text, and spreading the two arrows farther apart on the "First" button. Perhaps play with the shape a bit.

SOCIAL TOOLS - 3/5

Once again, Big Sandy scores decently here, but not above average. The social network buttons are great, but their location isn't. They could stand to be closer to the comic, above the navigation arrows if possible. Furthermore, the Facebook, Twitter, and Original Art buttons aren't very well placed either. Midway down the second column makes them very easy to miss. Ideally you should put the facebook and twitter buttons at the top of the "My Works" column, and Original Art, being a huge potential money maker, needs to be at the top of the main column. If you can, it would be even better for the button for each strips art to appear bellow said strip. Over all, it's great that you're using these tools, but their site placement is less then ideal.

SECONDARY CONTENT – 4/5

So now we come to Secondary content. This is all the other pages and menus in your site. I have to say, they are all really well done. The cast page is informative but brief, and the rest are all fairly straightforward. Everything is here, nothings missing. Even the contact button is present. That may sound odd, but you'd be surprised how often I see a website with no contact info!

My only major complaint is the right sidebar. It feels as if a lot of content was crammed on here. But moving the social buttons would certainly help with that issue.

TOTAL – 3.5 out of 5

Over all Big Sandy Gilmore is a great site! There are some tweaks that could be made to improve the navigation and organization, but for the most part, this site scores just above the average webcomic site. It presents the most important items in a neat and timely fashion, looks good doing it, and doesn't overwhelm the reader. A few minor modifications (Maybe a day of work in all) on the icons and social tool layout, would have this puppy sporting a solid 4 stars. Congratulations Matt Stout, and I hope the rest of you learned a thing or two along the way!

NEXT WEEK: We review Sacred Grounds! Stay Tuned! Same Bat-Time, same Bat-Website!

[mattstout]

Thanks for the kind words about my website!  I really didn't expect it to be quite as nice!  I've got a site redesign in the works, and I'll make sure I address the issues you brought up when I do.

One of my problems with my site is that I don't have a good eye for color.  I think my current color scheme is really boring, but every time I try to correct it, it becomes garish.  I'd rather have it be boring than an eyesore, so I stay with the toned-down colors.  I like your point about keeping the toned-down background, but adding some more bright highlighting colors.

Some of the things you suggested, I'm aware of but don't know how to fix.  The one-pixel border between my menu buttons baffles me.  If I knew what was wrong, I would fix it but I can't figure it out.  The same for my social networking buttons.  I use the Sociable plugin for wordpress, and I've looked for an option of changing the placement, but I can't find it.  If anybody has a tip for how to change it, I'd like to put it directly under my comic.

Anyway, this article has given me a lot to think about.  It was very constructive and has inspired me to work hard on a redesign that's a little smoother and less plain and boring!

[Dr. BlkKnight]

Some of the things you suggested, I'm aware of but don't know how to fix.  The one-pixel border between my menu buttons baffles me.  If I knew what was wrong, I would fix it but I can't figure it out.  The same for my social networking buttons.  I use the Sociable plugin for wordpress, and I've looked for an option of changing the placement, but I can't find it.  If anybody has a tip for how to change it, I'd like to put it directly under my comic.

I'd say you either have a pixel of dead space in your image files, or there's something not matching up in the CSS (extra width, border, etc).

[Alectric]

Just a note about the Contact link - having it go directly to Outlook can be a bit annoying.  Especially for me, since I don't use Outlook.  And then the only way I can determine your email address is to read it from the link's address when I hover over it.  I prefer when the address is simply given, along with perhaps a policy for responding to emails, or some inviting words to keep people from being intimidated.

[Rob]

Just a note about the Contact link - having it go directly to Outlook can be a bit annoying.  Especially for me, since I don't use Outlook.  And then the only way I can determine your email address is to read it from the link's address when I hover over it.  I prefer when the address is simply given, along with perhaps a policy for responding to emails, or some inviting words to keep people from being intimidated.

The only problem with that is keeping the spambots from getting it. Which usually means you have to put the e-mail on the page as an image or insert some kind of contact/email client into the page itself. I feel your pain on the outlook thing. I don't care for that either. But if you hover over the "contact" button, right click your mouse and choose "copy link address" then you can paste the address into your own e-mail client and all you have to do after that is erase the "mailto:" from the e-mail address that is pasted into your client. So there is a way around it. A bit clunky but better than opening Outlook over and over.

[Alectric]

The only problem with that is keeping the spambots from getting it.

I'm kind of wondering about that whole situation.  I'd never posted an email address on a website before my webcomic, so I couldn't figure out why people always did the "myName [at] thisEmail [dot] blah."  I went ahead and just posted my email address normally, and I haven't received any spam.  But...maybe I've just been lucky?  Or maybe my site's not popular enough to attract spam emails (although I do get a fair helping of spam comments).  I figure I'll leave it as is, and just change it if I ever do get spam.  It's a shame, because it's a lot more convenient to be able to copy and paste it.

[Dr. BlkKnight]

If you google e-mail obfuscation, you can use it to safely post your e-mail address. It's worked for me in the past.

[Alectric]

It seems to be for links, though, and my posted address is not a link.  Maybe that's why it hasn't been giving me any trouble.