Http://www.skiffie.com

Hi,

Would like a review / critique for my site: http://www.skiffie.com

Have asked for review for the site before (about 6 months ago) but
it underwent a major overhaul at the beginning of the year.

The aim of the site should be fairly obvious

It uses a mobile module for Drupal so content is rendered according to browser capabilities.
Please let me know if it detects wrong....

I have screen-dumps of the major browser already (browsershots http://flickr.com/photos/jabba_29/s...57603915417089/),
so it is usability, design and general content I am really interested in.
Usability is the number one.

Thanks for your time....

skiFFie - Making Drupal Mobile

Had a quick look around, looks nice and clean from a content view.

I would suggest on thing, the top graphic is quite tall containing only a logo grpahic, taking up valuable page real estate, I would suggest maker it shorter. It makes for a lot of scrolling down to read your page which is not a good thing for user interest.

Thanks. That is exactly the kind of thing I am looking for.

The idea behind the logo, in it's defense was you still get the first paragraph on the front page even in 800*600.

But I will have a play around and see if I can remember how I made the logo in the first place and try to make it a bit smaller....

More comments welcome.

The logo itself is good, just need to look at ways to better utilise the page space. You could make it a little smaller move it to left or right and have the signature that is underneath next to it.

It looks very good.

I agree that the top graphic could be shortened and the top nave bar moved up. This could be done by using just the normal logo and text and then setting the mirror reflection part as the background under the slogan text. (it's really good how you've used text rather than an image). For my browser (firefox 1024 by 768) I felt that the left hand nav column could have been thinner.

One other idea is to move the search box over to the right hand side of the nav bar, just to keep in with consistency of where users normally see it.

Regards,

Watters

The site looks nice. I'm not an artist or a designer by any means, but for what its worth, here are my comments:

- The top graphic is very large. I recommend and merging it into the top-right corner of the header bar. Perhaps you can remove the drop-shadow from the image, which would cut its size down by a 1/3.

- The navigation bar at the top of the page is difficult to read. Instead of dark gray text on a black and gray background, I think you should make the text white so it has better contrast.

- The navigation bar in the middle of the page (with the google search) is 50 pixels high, but the text is 12 pixels high, which makes for a whole lot of unnecessary gray space.

- The menu on the left side of the site is 400 px wide. My eye is drawn more toward the menu than the other content; you could probably cut it down to about 300 px to emphasize more on the content.

- Smallcaps are ugly.

- Why do you have "Served as: text/html" at the bottom of the page? Is that just a tinge of postmodernism?

- Your page validates as XHTML Strict, good job

Thanks for the feedback - will review in due course.

A few comments:
The logo image: is smaller than the original - am working on reducing further but
I am trying to make it look a bit web 2ish.

The navigation bar: well, I do not see that part as vital to the page,
but I think you are perhaps right -
wasn't wanting to draw attention to the links especially.

The menu on the left side of the site is 400 px wide: well it is 31% plus padding so it depends on your screen size
but very interested to see that it drew your attention over the actual content.
Will look at this in more detail - I was thinking about switching to 3 column layout again -
perhaps this would be an improvement.. screen-shot attached.
This version isn't complete yet, but more for layout idea...

That is because the content type is controlled by the Drupal module that the site supports.
If you were viewing in Firefox you would have gotten

Thanks again for your comments..

Its a nice site Jabba, good layout.

A few comments I would suggestand I hope I'm not too picky, is:

1. When I first loaded the site, your navigation on the left drew my attention immediately. It's the darkest area being surrounded by white background colors. Possibly switching the content bg with the nav bg may draw more attention to your ideal target area on the site.
2. On the header and footer bg-images, those 45° lines are very distracting and pull away from the text. I almost feel like I'm looking at one of those "Focus" images. I'd reduce the opacity to 30-50% so the text on top is easier to read.
3. On the middle nav with the search. The "Search box and text" are aligned higher within the div than the nav links which are centered vertically. Plus the 'Search' text sits aligned to the top of the search box. I'd try and center the text with the box, then center all those elements vertically in that bar just like the Nav text links are.
4. TBH, I think the first set of links on the top are erroneous and not needed. The menu and content jump to the same position on the page and I'm not sure why link to the footer. (Just thought, if thats there for mobile users, are you able to hide it for non mobile users?)
5. For the logo, two different opinions
   1. To give it nice Web 2.0`ish feeling, you want to create more of a hidden mirrored effect. I would mask out 75% of the image so it looks like the logo is fading into the text below. I made a simple example, based off a screen shot, it's not exact. See the attachment
   2. If you are going to keep the height of the logo, then possibly add some JS or AJAX to collapse that logo bar so users on mobile devices can see more info, and less header.
6. On the first content paragraph, you have "accessibility module" in a block background, to me I see that as a link to somewhere, but it's actually not. A little misleading or confusing could be a better word for it.
7. Can I ask how you came about with your logo? The 'i', the circle with the bevel and line coming up from the bottom? Only reason I ask is because to me, its always helpful to be able to explain all the elements of my logos and why it was used other than it "looks cool" I always get asked those question when doing logos for clients, so its a habit of mine.
8. This could be just me, but the words in the search box "Google this site" confuse me. (I understand what you are saying, but someone else might not) So looking at it from a lamens perspective... i see that and think, "I dot need to Google his site, I already found it" But using my web knowledge, I know you mean "search" this site. A little picky, I know.
9. Your borders are inconsistent. Your top nav is bordered by a gray bar. The Logo is bordered by a black line. Your nav headings are separated by dotted lines, AD box surrounded by an orange box, and your pagination links surrounded by gray dashed lines, and your bottom footer is separated by a gry bar. All in all thats 5 different border styles. I always try to stay with 2 border styles to keep uniformity. It helps all the content flow well and in the right directions.
10. On your favicon, I'd remove the black border so it flows nicely with tabs and the URL bar.

But all of these are minor small changes which shouldn't take too long to change, if you go in those directions. Hope they are all taken as constructive criticism, I'm def not knocking anything at all.

HTH's man!

Thanks for your feedback, more for me to work at and consider.
Will give a bit of feedback on your feedback

1) Yeah, I am going to have to really re-consider this
2) This is seems to be consensus - however I don't feel that these parts of the page are particularly important.
3) This varies a bit between browsers, I have only just changed this slightly recently and need a bit more tinkering with obviously..
4) I could hide this with CSS
5)
a - investigating again
b -they do not see the logo part at all .. and using ajax would not be an option anyway
6) All "accessibility module" text has a specific background, link or not. More to give emphasis.
If you find it confusing this need to be addressed of course..
7) The "i" was loosely based on the "i" you get in information icons of PC or
tourist info signs in the UK for example.
8) Very good point.. changed already
9) Agree in principle, though each border is meant for a specific purpose.
I would have the "grey" borders for logo for example too, but
it just blends in with the gradient so unless I pick a completely different color for all this doesn't work.
10) Yeah, problem I have is white background on the icon,
perhaps I could make that transparent too......

Thanks again for your comments,
coupled with DG's post I still have quite a bit to touch up on...

Hi Jamie.
Haven't been around much recently, but thought these browsercam shots might be useful:

1

2

(Won't all be ready straight away)

(Also, I'm just noticing not all the page downs are working on 2 - let me know if you want me to re-capture any)