16 replies [Last post]
flashlight
Offline
Regular
toronto
Last seen: 17 years 9 weeks ago
toronto
Joined: 2004-10-03
Posts: 32
Points: 0

Hi, I've recently completed a re-re-redesign of my personal site, Almost Cool, and would love your feedback.

Thanks!

I really should be working...

www.flashlightdesign.com

flashlight
Offline
Regular
toronto
Last seen: 17 years 9 weeks ago
toronto
Joined: 2004-10-03
Posts: 32
Points: 0

Site launch - Almost Cool

I suppose a url might help: http://www.peterflaschner.com

I really should be working...

www.flashlightdesign.com

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Site launch - Almost Cool

First - a cool looking site and content worth reading and links that have lead me to all sorts of good stuff. You are bookmarked - I can't give a higher compliment than that. Wink

On the other hand, I do question 10 - count them - 10 screens length on your homepage. Are we trying to save on coding a navigational system, perhaps? :roll:

Regarding the 43 folders article on the paper PDA. It is amazing how people come back to that paradigm again and again. One of my favorite concepts is Xtreme Programming and how they use CRC cards for working out object relationships prior to coding. Paper will always have its place and it is where I start every project - yellow flip pad and a 1H pencil and I am off . . .

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

flashlight
Offline
Regular
toronto
Last seen: 17 years 9 weeks ago
toronto
Joined: 2004-10-03
Posts: 32
Points: 0

Site launch - Almost Cool

Thanks DE. High praise indeed! Thanks also for the extreme programming link - looks like an interesting read.

I really should be working...

www.flashlightdesign.com

Anonymous
Anonymous's picture
Guru

Site launch - Almost Cool

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 19 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Site launch - Almost Cool

flashlight - I have mixed feelings about your site. As we a standards-pushing lot on this forum, I am disappointed to see such messy code from a professional web designer, albeit that you do admit this in your html and css notations. I would at least expect your site to validate, but it fails to do so in a spectacular way!

At 960 pixels wide, your site is a pain for anyone using an 800x600 monitor. 99% of designers work to a width of about 760 or less, but you don't. Having to scroll so far in TWO directions is not good. Why not move your nav links across the top; or at least reduce the width of your left column?

The text in the right column is a little too small for my liking. It's readable, but only just and I've got good eyesight. Your main nav links are too light when viewed on a Mac with an LCD screen. It's because Macs use a perfect gamma setting whereas PCs darken everything up. They need to be a little darker.

For someone that understands usability issues, your page degrades badly in respect of basic semantics. Try wrapping your titles in header tags (and style them accordingly) instead of just using css classes called 'title'.

On a positive note, I like the overall look to the site. The distressed green side contrasts nicely with the neat white side, which is obviously intended given the 'almost perfect' nature of the site. A good concept well executed. Well done.

I like the site header and the main header logotype is set in a particularly nice font (what is it?). I also like the section headers - the font size combined with the solid and dotted lines works very well.

Design wise the site works well, but you need to think more about usability and validation IMHO.

HTH Smile

Life's a b*tch and then you die!

larmyia
Offline
Elder
London
Last seen: 13 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Site launch - Almost Cool

roytheboy wrote:
Your main nav links are too light when viewed on a Mac with an LCD screen. It's because Macs use a perfect gamma setting whereas PCs darken everything up. They need to be a little darker.

I can barely see the nav on my pc LCD screen.

larmyia

flashlight
Offline
Regular
toronto
Last seen: 17 years 9 weeks ago
toronto
Joined: 2004-10-03
Posts: 32
Points: 0

Site launch - Almost Cool

Thanks gang. I'm keenly aware of the validation issue. In its initial state, it did validate 1.0 transitional, but I admit that I've added a TON of stuff on the fly, and haven't been particularly careful about maintaining the cleanliness. I've even used inline styles (gasp!). I hang my head in shame...

I've actually given myself the liberty to let the site just grow without a need to keep the code clean. It's quite refreshing actually, to just throw something up and see what sticks. I'd never do this with a client's site of course, but then that's half the fun. Getting your feedback is the final stage before I firm things up and clean up the mess.

roy: your comment about the width is well taken. My target audience with the site are my fellow designers, almost all of whom work at 1024x768 minimum. I know I may be annoying the odd person with a lower resolution setting, but that's a chance I'm willing to take. Ah, the freedom of a personal site!

The idea about moving the navigation to the top is excellent. I'm going to take that advice and do it.

I'll also make the change from .title to <h2>, per your advice.

Finally, the font is called Kontrapunkt. It's available for FREE!!!!! from http://www.kontrapunkt.dk/ I found it via the very excellent fontleech: http://www.fontleech.com

I really should be working...

www.flashlightdesign.com

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Site launch - Almost Cool

I perhaps threw flowers too soon Tongue

A run through HTMLTidy with the output XHTML flag on wouldn't hurt - that would fix up a lot of the tag problems ( missing /> on metas and all that stuff). There are other systemmatic problems with img alt text and improper nesting of form elements that you are getting beaten up on.

As for the nav - it looks OK on my LCD monitor but I have done some careful calibration on mine - stock factory settings or monitors with a more limited color gradient may have problems so you might want to increase the contrast.

As for the width concerns. It would be possible to make the #content and .right-col share a proportional width if the right-hand side of the screen had a container div and then the two columns were in a ~2/3:1/3 ratio. The wavy border would be on the container div and positioned horizontally with the same %age so it would move to remain between the columns. You would still need a min-width but the page could be viewed down to 800x600. Your only caution would be image widths - there would be smaller max sizes for each column than currently.

I still really like the page - it has a fresh sophistication to it - and is worth bringing up to CSS-Creator standards :oops:

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 19 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Site launch - Almost Cool

flashlight - As a designer, I work with two monitors; one set to 1600 and the other to 1280. But that does not mean that I have my browser window to full width, so your site is too wide for me. I work with two browsers open side-by-side (each to 800) so that I can monitor my servers at all times whilst also browsing the web, or I can check a site in different browsers at the same time (using the second monitor as well if needed). So just because your audience are designers with big monitors, don't assume that they browse at full width (geez, that must be horrible reading 1200px measures!)

I've checked out the font and do not like it when set in uppercase only as per the designer's website. Neither do I like it at body copy size although it probably looks much better in print. But the way you have used it for your logotype looks wonderful (from a typographer's perspective).

As DC says: you really ought to bring the site up to spec. You know it makes sense and the high standard of design is crying out for an equally high standard of coding Wink

DC - Macs use a different gamma to PCs, regardless of the monitor type, but LCDs tend to be brighter still, even when colour calibrated (if you can call it that where LCDs are concerned).

Life's a b*tch and then you die!

flashlight
Offline
Regular
toronto
Last seen: 17 years 9 weeks ago
toronto
Joined: 2004-10-03
Posts: 32
Points: 0

Site launch - Almost Cool

DC: that's brilliant. I never would have thought of that solution. I'll do it tonight.

roytheboy: True enough. I'm going to implement DC's solution, which will fix the 'too wide' issue.

all: I'll clean up the code in the process!

As an aside: your feedback has been spot on, and very much appreicated.

I really should be working...

www.flashlightdesign.com

flashlight
Offline
Regular
toronto
Last seen: 17 years 9 weeks ago
toronto
Joined: 2004-10-03
Posts: 32
Points: 0

Site launch - Almost Cool

I've run up against rather a brick wall with validation, and I'm hoping you can give me some guidance. The code itself is valid xhtml 1.0 transitional. There are a number of links to my amazon associates items that are NOT valid. These links are directly from amazon, and I'm hesitant to start changing them [aside: don't know why, they have earned me exactly nothing so far].

What would you do?

DC - I've chosen to go with a fixed width, as I don't really have the time I'd like to fiddle. I'll change the units over to ems shortly so that the proportions scale with changes in default font size.

I also haven't made the semantic changes yet - I need to spend SOME time with my family, after all!

I really should be working...

www.flashlightdesign.com

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 19 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Site launch - Almost Cool

My, you have been busy! You have solved the width problem but in so doing have given yourself a 'conceptual interpretation' problem in that someone with a wide monitor will now see too much green (almost uncool?). Obviously, DC's suggestion of a fluid layout is the answer but in the meantime have you tried aligning the site to the right? I have never done or seen such a thing before but I think it might suit your site well, especially if the '97' were to stay top left. Just a thought!

This may be deliberate but your 80% 'sticker' is cropped at the top and looks odd because of it.

As for the ads: I personally would not bother with them as they will be 'leaking page rank' but only you can decide what to do about it. One other thing to consider is that if a potential client ever looks at your personal site and they happen to know about validation checks, they will see hundreds of errors and you might lose a job because of it. Is it worth the risk?

Life's a b*tch and then you die!

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Site launch - Almost Cool

My thoughts on the validation are this. Clean up your own house and then look at the types of validation errors that are left. If they are because the google code is HTML4.01, then make that your doctype. Providing IE is not in quirks mode, I'm not sure what you really miss in a practical sense other than losing bragging rights that your code is XHTML compliant. I suspect the google code will become xhtml compliant over time, but only so far, since they use iframes to display some of their content. I defer to the doctype experts on this one, however.

I did a little CSS tweaking, basically converting it from an absolute postitioned to a relatively positioned float design with a 65:35 split between content and right column. The background on the body is also relatively positioned but the graphic would have to be extended in width to keep from exposing the background color.

Currently the limiting width factor is the small thumbnail matrix toward the bottom of the right column - It is too wide for a less than 820px width overall. A lot of fixed width would have to be changed to relative widths, taking their sizes from the parent container.

The neat thing is I was able to make all these live changes using EditCSS without touching the HTML. So the variable width thing is doable. However, I would wrap everything in a 1280px maxwidth wrapper and give IE a conditional comment style:

<!--[if IE]>
#wrapper {
width:expression( 
    document.body.clientWidth > 1280 ? "1280px": "auto" )
}
<![endif]-->
You could also set a minwidth in a similar fashion. With everthing in a wrapper, the wrapper could be centered or positoned left or right on the canvas.

Anyhow, stay encouraged, but you are quite right - families are important as well.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

flashlight
Offline
Regular
toronto
Last seen: 17 years 9 weeks ago
toronto
Joined: 2004-10-03
Posts: 32
Points: 0

Site launch - Almost Cool

As always gentlemen, excellent points.

DE: editcss is quite possibly the most handy tool I have ever come across. I've been using it for about a month, and in that time my understanding of css has quadrupled. There's nothing like looking at a site, wondering "hey' how'd they do that?", then hitting cmd-shift-e to start fiddling. I haven't opened my editor in weeks, instead doing all my work in editcss...

roytheboy: I'm working on an intersting solution to the "too much green" issue, and may have it up by this afternoon. I'll let you know.

I really should be working...

www.flashlightdesign.com

flashlight
Offline
Regular
toronto
Last seen: 17 years 9 weeks ago
toronto
Joined: 2004-10-03
Posts: 32
Points: 0

Site launch - Almost Cool

I've added a neat little javascript trick that will load an alternate style sheet based on window width. Try resizing the browser window (it needs to go more than 900px wide to see the change).

This doesn't address the "too much green" issue directly, but it will shortly...

I've got to do some site optimization, as its turning into a bit of a hog.

I really should be working...

www.flashlightdesign.com

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Site launch - Almost Cool

Its a neat trick, yes, but graphically you need to reconsider. You have a lot of horizontal embellishments in your right col and if the column doubles up the horizontals get very busy. I liked the original page because it had a really nice graphical balance with a fair bit of whitespace (although far too much vertical content)

Story my grandfather told me:

Quote:

Man wanted to build a boat so started to put one together in his front yard. Friends dropped by with all sorts of suggestions and by the time he was half done the thing looked like an outhouse on its side and would probably sail like one as well.

He moved into the back yard and started another boat. Friends started dropping around back with suggestions again.

He responded, "fellas, this here's MY boat, YOUR boat is out front."

Moral of the story - in the end it is your page. You can do some incredible stuff Peter and, however right our suggestions may be regarding details, you have to use your aesthetic sense to determine if, as a whole, it will float, or better still, sail.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS