16 replies [Last post]
thedooropens
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT-7
Joined: 2008-10-02
Posts: 81
Points: 2

Hey all,

Validates fine... curious to see your thoughts...

http://www.students.signalflare.ca/bjolin/TimeToEat/index.html

Thanks!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I'm not a graphics designer

I'm not a graphics designer but a web developer. That means I see a lot of sites, but it doesn't mean I can design them. These were my impressions of the site, feel free to ignore them or not as you please.

I found the style a little confusing. It doesn't jump out at me as a food site. I think that is mainly due to your banner, just a single pot on a racing flag background.

The menu rollover colour doesn't stand out on my monitor. I normally expect a rollover to bring that element "up" rather than take it "down".

The we shop, we cook, we clean graphics look like buttons. Why not make them buttons, each of which take the visitor to a page which describes that service.

For me your line-spacing is tight (FF/OSX). I would go for 1.3 or maybe even 1.4 for the general text elements (ie, the headings probably don't need the extra space).

Your contact form seems cramped. I would think you could make its column wider and the right column narrower. Also consider adding some vertical padding to the input elements to give the text a little more space. I'd expect you'd get more "questions" than "comments" via the contact form, it could make sense to have "type your questions here". In OSX the "comments" label is too long for the space available and the "s" runs slightly behind the textarea.

I like the organisation and the uncomplicated nature of the design (banner aside), the comparatively large font-size (compared to many other websites) and the consistent colour scheme.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 13 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Dont hate me, love me.

1. well for one, you state it's a "business card site", but indeed it's a "home-cooked meal" site.

2. Code should be more symantec. I do not see any tags anywhere. Using an tag for your heading can illuminate the use of a banner div.

3. inline styles should be avoided...

4. You dont need so may divs for the area. If you have to use a div, just use one to contain all of this area.

5. The area really should be able to expand and adjust with the content inside. The "more like this" link falls outside the box.

6. I do like the design and how simple it looks.

7. I'd rather there wasnt bold text, it interferes with the headings. maybe make the heading a larger size, or diff. color. Just makes things look messy and crowded. ]

8. Why is the "contact us" heading look different then the others in the site?

9. The round images at the top-right, should not be made to look like buttons if they do not go anywhere. The shopping card graphics should not be used in this sense. It is the universal icon for shopping carts, and this isnt one.

10. I dont like the top level menu hover state. There is not enough contrast and very hard to read.

11. You should add line-height to you css under body.

This is enough to keep you busy for a while.

rejamesuk
Offline
Regular
uk
Last seen: 10 years 40 weeks ago
uk
Joined: 2009-01-10
Posts: 38
Points: 0

CupidsToejam wrote: 3.

CupidsToejam wrote:

3. inline styles should be avoided...

that's not an inline style!

it's bad to say "bold" or "green" but it's not an inline style

thedooropens
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT-7
Joined: 2008-10-02
Posts: 81
Points: 2

Thanks all!

Excellent feedback! I have fixed some of the issues and reuploaded in case you are curious.

Still trying to figure out what to do with my teaser boxes (or pans if you will) on the homepage... I want them to be uniform in size so it looks nice, but I want it to be accessible as well!

RE: the inline style... actually a span is an inline element so it is technically an inline style - but not the bad kind. I'm told it's bad to have a class called "bold"... but how can something so simple be bad?

Thanks again.

Triumph (not verified)
Anonymous's picture
Guru

thedooropens wrote:... I'm

thedooropens wrote:

... I'm told it's bad to have a class called "bold"... but how can something so simple be bad? ...

If all it does is make the text bold then why not just use the tags?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 2 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

thedooropens wrote: RE: the

thedooropens wrote:

RE: the inline style... actually a span is an inline element so it is technically an inline style - but not the bad kind. I'm told it's bad to have a class called "bold"... but how can something so simple be bad?

If the bolding serves the semantic purpose of emphasizing the text strongly then it is part of the meaning of the content and should be marked up with the appropriate semantic BOLD tag.

If it is purely decorative then it should be done in the CSS. This latter seems rather unlikely.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I'm not sure what you're

I'm not sure what you're saying there Ed as there isn't a BOLD tag.

For the OP, as Triumph says, if you want to strongly emphasize the text, use STRONG, which by default is shown with a heavier font-weight, colloquially known as bold. However, you can style it anyway you please. This allows other user agents (i.e. web browsers), esp. non-visual ones to apply their own methods of strongly emphasizing the content.

Your updated link no longer works - at least not for me.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 2 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Chris..S wrote:I'm not sure

Chris..S wrote:

I'm not sure what you're saying there Ed as there isn't a BOLD tag.

Yikes!

My fingers betrayed me! I meant STRONG of course.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thedooropens
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT-7
Joined: 2008-10-02
Posts: 81
Points: 2

Thanks!

I guess I just got excited about doing everything in CSS... can you blame me?

Anyhow, the link is updated here (forgot I added an SSI!)

http://www.students.signalflare.ca/bjolin/TimeToEat/index.shtml

Cheers!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 2 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

thedooropens wrote:I guess I

thedooropens wrote:

I guess I just got excited about doing everything in CSS... can you blame me?

Well but CSS is intended to be limited to style and positioning. HTML is for semantic markup and the idea is to keep these two concerns separated. HTML for marking up the meaning of a document and CSS to style and position that html.

So the STRONG tag in html is meant to imply only that the text within is to be "strongly emphasised" and not anything about how that emphasis is to be applied. It's true that most browsers render it in boldface, but you can change it to, say, red and italic without changing the sytactic purpose of the tag.

This implies that different browsers with different default style sheets might do the emphasizing differently without violating the purpose of the STRONG tag. Which is another reason for the aphorism that the Web is not paper.

Of course if the reader is hearing the page with a talking browser the strong emphasis will be delivered in and entirely different way, but the STRONG tag will still mean what it means.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I like the changes. Menu

I like the changes. Menu and text spacing now work better, for me at least.

One side effect of the change, the image towards the bottom of the right column on the home page is now pushed along way down, perhaps so far as to be not visible on many peoples screens. You may want to rethink that page in some way so that image will be visible.

In Camino/OSX, the text overflows your "panels" at the bottom of the home page. Possibly you can reduce the spacing at the top (say padding-top 35px rather than 50px). The text does seem to have quite a bit of spacing between it and the top panel graphic. Another option with these is to split the graphics into three and use faux columns. That way the panel can stretch to fit the text. Unfortunately, you need a simple vertically repeating graphics for the sides which would mess up your current look.

The labels on the contact form are now slightly out of line with the input boxes (FF/OSX, Camino/OSX) that maybe an OS or browser specific thing, but could be because you have 5px margin-top on the label and 10px on the input control.

On longer pages where content is likely to be off-screen, consider some method of telling the visitor what's on the page - especially the bit that is hidden. E.g. the services page, gift certificates is going to be off most people's screens. You could use a summary para at the top which mentions the three headings and links to them, or a TOC in the sidebar, or something else.

On this post, I've said "consider" with everything. As the site gets more complete, changes will have side effects. Sometimes you'll reckon the side-effect is a bigger negative than the issue you are trying to correct. E.g. adding something to tell the user about other headings may clutter things up too much or end up pushing other more important content below the fold.

purewebdesigner
purewebdesigner's picture
Offline
Enthusiast
Washington DC
Last seen: 1 year 3 weeks ago
Washington DC
Timezone: GMT-5
Joined: 2007-04-22
Posts: 234
Points: 95

Link is broken, I can't

Link is broken, I can't review it.

CSSExpression EngineHTMLWordpressCoffee

Personal Website: curtisscott.com
Follow Me on Twitter: twitter.com/curtisscott_com

thedooropens
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT-7
Joined: 2008-10-02
Posts: 81
Points: 2

Right you are

Been redesigning and moving about!

Look here (but not in IE 6 or lower! - I'll fix it I promise):
http://www.students.signalflare.ca/bjolin/1850/timetoeat/

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hmmm, just looking at the

Hmmm, just looking at the site now... I agree about the "buttons" on the top right. I understand having a three-block motto thingie... I think the reason many people keep thinking they should be clickable isn't just the button-y graphic, but also because it had become a trend in web design to have a little menu up there in that area. So, it's become a "navigation area" in many people's minds and having something looking like buttons or links reinforces that. However, I'm not sure what you could do-- maybe keep three boxes (there's a name for three-part mottos, what are they called again?) but have them larger, centered vertically, and maybe without the drop-shadow graphic... oh yeah, it's called a "tricolon". Three-part motto thingies.

Your :focus styles don't mimic :hover styles. Dunno if that was intentional?

I only looked at the first page. Overall design looks nice, the text is inviting and easy to read, so even though I already have a hubby who cooks, it makes me want this company to come do it all for me.

Some fresh-healthy-colourful food imagry wouldn't be misplaced here, like a plate with some inviting-looking hot pasta or some veggies like carrots and bell peppers to add some non-reds... but those are just things that occurred to me, dunno if that could be done without destroying the style.

I'm no expert, but I fake one on teh Internets

thedooropens
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT-7
Joined: 2008-10-02
Posts: 81
Points: 2

Thanks!

Thanks for the look - and the feedback. I plan on adding pics of the food, but I have to take them first (the best perk of this project as I'll get to eat the final product).

I agree about the banner, I think my desire to design a particular way trumped what was actually needed - a poor mistake!

I put the focus styles in my non-hover state just to get rid of them, truth be told I'm not sure if that is semantically/accessibly correct?

Thanks Again,

PS- Where you been, havent seen you post for a while!

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

:focus is pretty important,

:focus is pretty important, just not generally for mousers. I always (no exceptions for me yet so far... who knows, that could change) do them together with :hover

a:focus, a:hover {
styles;
}

sometimes also :active if I have no :active styles and want IE6 to :focus (it thinks :active is :focus).

:focus is for the keyboard what :hover is for the mouse-- they are related.

I'm no expert, but I fake one on teh Internets