Bobby Wilson

Quick Note

I thought it would be fun for me to do a critique of a website that I found in a “review my site” forum. I didn’t pick this site for any reason in particular, and I don’t personally know the designer/developer. I am going to try and do these semi-regularly to keep myself sharp, and to provide constructive feedback to those looking for reviews.

Site Introduction

The website I found to critique is http://www.townofgrandfallswindsor.com/. I found the site in the “Review My Work” category of the Freelance Switch forum. link

Standards

The first thing I always check when critiquing a website is standards validation. I don’t necessarily care what standard the designer chose to use, but I hold web standards in high regard. I go right to the W3 Validator to validate the site. The designer in this case chose XHTML 1.0 Strict, a fine choice. The site does not validate as of today, with one error, “there is no attribute “target”". In all of the “strict” specifications there is not an attribute of “target”. However, in XHTML 1.0 Transitional specifications there is. The way to stay strict in this case would be to use some javascript to open the link in a new window. That was the only standards concern, so we can move on to the next section.

Information Architecture

Information architecture is the bread and butter for SEO. To get a good idea of information architecture I turn off the style sheet. Doing so lets you see a nice hierarchical view of the site as far as information goes. If the site is well designed from an information architecture point of view, it should be organized and easy to read. This is also a good time to see the content by itself. This site starts pretty well, you get an <h1> of Grand Falls Windsor, which is the town that the site is about. I expected there to be a hyphen between the “Grand Falls” and “Windsor” because that’s how it is everywhere else. You a <ul> of navigation, pretty standard. Moving down, you get a teaser of copy, then an <h2> of “Reasons you should visit Grand Falls-Windsor”, followed by another <ul> of four reasons. Then, something very disappointing happens. Without any sort of separation from the reasons to visit Grand Falls-Windsor, there is a giant <ul> of links that have to do with different aspects of the town. I would have like to seen categories, or something to break down this large list of links. Below that there is “August 2008″ followed by all of the dates in august. I would have opted for a table in this case, because this is one situation where I would want the data represented in tabular form. After that there is “Upcoming Events” with an event underneath that, perfectly fine. “Latest News” with a news item. An “About Us” with some copy, and a “Links” section with a few links. Lastly a copyright notice. Nothing to complain about at the bottom, I sometimes wonder if “links” could be a more descriptive name in these cases, but it is very minor.

Layout and Design

Header Graphic

The first thing I notice when I arrived at this site was the large feathered image at the top. The page loads a random image/collage every time you refresh the page as well. After a few clicks on refresh I am undecided about whether I like this or not. Generally I don’t like the feather effect, and I think it goes back to looking at my high school yearbook with a feathered collage of pictures every other page. This is one of the better examples of feather I have seen though. The other comment I have about this header is the varying quality of photography. Some of the photos are interesting, high resolution (for the web), and colorful, while others are either pixelated, dreary, or just not very interesting. Another thing I noticed about this header graphic is that sometimes there is a translucent gray bar underneath the typography and other times there isn’t. I think it should always be there especially when using white text. The crest next to the type is also blurry, low quality, and doesn’t stand out like I think it should.

Navigation

I like the design and color choice of the background of the navigation bar. The pinstripes are a nice touch, what I don’t like is the cut-outs in the corners that look like they were done with a small eraser tool in Photoshop. I think I would like the cut-outs if they were a clean sharp curve. I also notice that there is no indicator of which page we are on with the menu items, clicking “HOME” also reloads the page even if you are home. The navigation is also somewhat deceiving, the only thing that changes upon click is a sub menu on the right hand side. This is somewhat odd behavior to me because I expect new content, especially from primary navigation. I noticed that this was an XHR request, so I turned off javascript to see if he was degrading gracefully, and BAM! exactly what I was initially looking for. Individual pages per navigation link, this couldn’t have made me happier. As well as there being a separate content page, we also get to know where we are. This is awesome, I would like to see similar behavior with the XHR requests, make me feel like something happened when I click a link, and tell me where I am once I do that. I think even minimally adding a header to the top of the sub menu would make me happy, telling me what the category the links are.

Calendar

I think that calendars can be very useful, if they are used. I do find the background graphic of the calendar distracting. It bothers me when something should be a bit distorted because of it is on a curved surface but isn’t, like the dates to the lower right corner. To me the graphic somewhat cheapens the calendar because of its low quality.

“Idea Garden”

There is the second feather job I have seen, and this one I don’t appreciate as much as the first one. The first thing I notice is that the white box below show be above the feathered image, not below it. The copy also doesn’t makes sense to me, it seems it should just be a contact us, like the page title says when you arrive there. This link could also fit into the primary navigation at the top, as it is a something that people come to look for. I also question the choice of the green in the link color, I don’t know where it fits in, in the color scheme.

“Reasons to visit Grand Falls-Windsor”

I think this section is pretty effective. The title is bold in color. The points have nice spacing and typography. The added detail with the unique bullet is nice.

Footer

The footer is another feathering. I am over-feathered at this point and I don’t think the translucent gray box helps at this point. The three columns isn’t bad, and I think it works here. The yellow headers are a bit much, and I don’t think they compliment the background color. White text as body copy is a tough call, it is always hard to read especially in a seriffed font, on top of an image. The email address link in the copy is unreadable to me. I think the photography feels a little forced, and I am fine with just plain text. When there is text my first concern is reading it, don’t put it on top of an image please.

Overall

I think this site is a strong, pretty effective design. I like the general color scheme, tan, red, blues, white. There is a few single instances of colors that I question, and I would like to have been something that fit a little better in the scheme, but nothing major. The typography is nice, it left me wondering what it was, and I think it fit the style of the site. The feel was classic, symmetrical, rich, with nice details. I am just noticing that I might have like to see what the menu looked like with a detail either side of the text instead of just the left. The site was also very close to being strict XHTML 1.0, with a minor change it will. I like the progressive enhancement with the javascript, without the javascript the site is still intact. I think the people of Grand-Falls Windsor will be very happy with their new site.

Further Critiques

If you want me to critique your site, leave a comment letting me know that you are interested. I will contact you and get you on the list for next time.

Introduction

Historically when a piece of open source software, a framework in the case of Rails is released people get fired up about using more open source software in their everyday workflow. Some may switch to Vim or Emacs, others install Linux. This hasn’t been the same for Rails, Rails developers bought expensive Apple hardware, and picked up a commercial text editor. What gives?

Apple Hardware

Most people I know that are Rails developers work on a MacBook Pro. All of the user groups, training classes, and meet-ups I have been to people sport Apple hardware. Most also carry an iPhone (myself included, it has been totally crappy lately). I know that Apple hardware just recently started to get popular since OS X came out, but this isn’t just the normal popularizing of a new technology this is something deeper. Go to a PHP, Perl, web design, or internet users groups, and you won’t see near the saturation of Macs. There is something about the Rails way and the Apple way that goes together. I think that Rails people find Rails because they want something that is elegant, powerful, and doesn’t make you mess with the low level things you don’t want to mess with. I think people like Apple for the same reasons.

My Apple Experience

I jumped on the Apple bandwagon back in 2004 when I was going to school for photography and web design. I was using Photoshop, Illustrator, After Effects, and Flash, and they all seem to run much more stable on the schools high powered Macs. So I bought a 17″ Powerbook, and I loved it, it was solid and I didn’t have to restart it all the time. The OS X interface was leaps and bounds better than Windows XP. Apple does something with their human interfaces that is second to none in my opinion. I now have a little MacBook that I bought in 2006, and it has been really great for the most part. The only thing that sucks about it is the discoloring of the plastic below the keyboard on either side of the touch pad, some plastic also cracked but I am hard on stuff and don’t blame Apple for that. Apple usually makes a good product and I can’t deny that.

TextMate

In the first Rails screen casts that were produced, there was a text editor that was being used that seemed amazing. Code just seemed to stream onto the screen. Snippets here, and code completion, a basic blog was finished in 15 minutes. I couldn’t believe it, I needed TextMate, I don’t know how I did anything without it. TextMate is many developer’s dream editor, there is a bundle for just about every programming language, and markup out there. A bundle has code completion, and snippets for whatever sort of developing you may be doing. The Rails bundle is very robust, and a lot of very savvy Rails developers use it. It definitely embraces the Apple/Rails style of simple yet powerful. If you think Rails and Apple go together, well consider Rails/Apple/TextMate the holy grail. The only catch is that TextMate isn’t open-source, and it isn’t free either. If you don’t have a Mac forget about it. To many that doesn’t matter, it has been starting to wear on me.

My TextMate Experience

I come from a design background, and I was very used to the IDE packages that Adobe formerly Macromedia put out, namely Dreamweaver and the Flash IDE. If you read my last post, I’ve since changed my mind about that. I started using TextMate and thought it was the be all, end all of editors. I was using the code completion, and getting a handle on snippets. It was great, until I got hired at a company that uses all PCs (except for Chris). I did manage to get Linux on my box, but TextMate was not happening. No Mac no TextMate. I am web developer, I need a text editor, and I am not going to use a different editor at work and at home. Exit TextMate.

My Open Source Experience

I have always been a fan of open-source software because it didn’t cost anything, and there was always a community that would give you a hand in getting going. I would take an open-source community over commercial customer support any day. Just today I was working on something that didn’t seem to work quite right, and I was able to hop into the IRC channel for the software I was using and work through the bug with the lead developer who maintains the software. It is hard to say the same for commercial products. With open-source software you become apart of something. You may start as a user, and then look for some help on a feature, the next thing you know you are the veteran helping out all of the new people using the software. You may even contribute to the source of the software eventually. This is the sort of thing you can never dream of doing with a commercial product unless you become an employee. Open-source developers are awesome because most of them work on a project because they love it and they believe in it, not because they are lining their pockets.

Conclusion

I think that most Rails folks choose what works for them and leave it at that. It doesn’t bother them that while Ruby is open-source and Rails is open-source, and their development platform isn’t. It didn’t bother me at first, but now it has started to bother me. The biggest issue is not being in control of how things are set up, and not knowing the system from ground up. This is my new goal, completely know my system from hardware details, to operating system, to software details. I am going to start looking for a good (non-Apple) hardware vendor. Any recommendations?

Trap #1 “Baskin Robbins”

A classic trap that I have fallen victim to is the old, “I give you the freedom to make the decision.” This really means that they don’t know enough about what you are doing to have an opinion, but when it is finished, they will tell you how they really wanted it. This is usually also means that you will be fully accountable for the route you take.

Solution #1

I think the best way to work with this situation is to go 31 flavors on them, and serve them up a baby spoonful sized portion of functionality. If they like it, continue development, if not, give them another sample size. You can make it fun too, like the little pink spoons. It doesn’t cost much to pump out the small pieces of functionality to get rapid feedback from your client. With this route they are sure to get what they want, and they become accountable for helping make the decision with you.

Trap #2 “Anthony Hopkins”

This one is like the deadfall bear trap in the move “The Edge”. Your client has just come across the most awful inspiration ever, and they want you to recreate that style or functionality. This hurts especially bad, because they are so excited about site “X” it’s exactly what they were looking for, now all you have to do is recreate it.

Solution #2

I think at this point, it is important to find out what they like about it, and why they want an exact replica. The next thing to do is to educate. If the thing that inspired them is truly horrible, criticize the elements that are horrible not the entire project. It is best to stay honest on this, or it will come back to haunt you.

Trap #3 “The Odd Couple”

In almost every facet of my life, I run into a situation where I don’t know what I want. It can be features, color palate, ice cream flavors, hairdo, should I stay or should I go. I think it happens to all of us. In terms of web development, it is a tough spot to be in when you are fulfilling a request to someone who wants something but doesn’t know quite what. Clients that aren’t web savvy will often not know what they want. Clients that are web savvy can sometimes be even worse because they know the possibilities.

Solution #3

When there is a lot of uncertainty I think it is best to keep it simple and refine the clients requirements. It is much easy to find a solution to a problem when you know what the problem is. If you and the client can’t find a problem, you are already done. With the clients that are excited about all the possibilities, tell them that it is important to start small and fulfill the base requirements. Grow with the demand.

Conclusion

These are some common scenarios that I have found myself dealing with lately. The solutions are basic, and I think your client will appreciate that. When they find out that you want to build to their requirements rather than build a bunch of stuff they don’t need I think they will be even more happy with you. Web development doesn’t always have to be complicated.