Friday, April 01, 2011

Re-coded & Re-loaded.

With new crunchy bits of HTML5.

Please critique.


Don Jason said...

Webmaster! I rub the lamp of summoning . . .

Could you please remove the entry "Atelier Kunstst├╝ck" from the sidebar, this is project no longer exists. And the descriptive word "paintings" from the Jason Benedict link? And maybe "Post-Art Bulletin Board" which has not been updated since Fall of 2009, if no one protests?

Pete said...

Processing . . . .

Pete said...

Hi, Jason.

You have cleanly executed job-one of web design: The information is presented coherently and in an easy to use way so as to not to obscure the content.

I think the layout and banner choice is good. While the text fits well in the design in terms of color, content, brevity and placement, I have a few gripes about your font selection: Arial / Trebuchet are somewhat blocky and not easy on the eyes at your normal paragraph size. Also, I think the heading heirarchy could be stronger in a couple of places. I think you should use the yellow headings on your 'Exhibitions' page, especially. These aren't big problems, at all, and didn't or wouldn't keep me from appreciating the artwork.

Embedded fonts are finally an option in web design. Check out the Google Font API I have not tried this myself, so consider this suggestion as experimental. It might be fun to try a few fonts.

That's really cool that you got a curatorial degree. That'd be great fun.

Also, I really like "Lost, with no direction, and floating in a sea of protoplasm". It's quite funky and has a lot of gnarl.

Don Jason said...

1. I am glad the informational structure comes across as clear and simple. I thought a lot about that but it is often a subjective point for people.

2. Fonts: In the interest of simplicity I have stuck with Arial/web-safe sans-serif until now. TehGOOGLE(tm) thingy looks interesting, but if I was to continue with the simple solution would you suggest bumping the paragraph size up, or maybe switching to Verdana or Courier New?

3. Headings: Added to the TODOLIST. Anywhere else this is an issue?

Don Jason said...

The curator course was great. I got to listen to a rotating cast of all-star German institution directors ramble on, took lots of notes, sometimes got art tours, and some direct professional advice.

Pete said...

Sweet. The curatorial program sounds like it was a great idea.

Bumping up the font sizes helps tremendously, for me. Here's a diff on your 'jmb.css' from a couple of minutes ago.

*** cut here ***
< font: 16px "Trebuchet MS",Arial,sans-serif;
> font-family: "Trebuchet MS",Arial,sans-serif;
> font-size: 85%;
< font: 10px "Trebuchet MS",Arial,sans-serif;
> font: 0.83em "Trebuchet MS",Arial,sans-serif;
< font-size: 13px;
> font-size: 1.08em;
< font-size: 13px;
> font-size: 1.08em;
< font: bold 20px Arial,sans-serif;
> font: bold 1.66em Arial,sans-serif;
< font: bold 16px Arial,sans-serif;
> font: bold 1.33em Arial,sans-serif;
< font: bold 12px Arial,sans-serif;
> font: bold 1em Arial,sans-serif;
< font: 12px "Trebuchet MS",Arial,sans-serif;
> font: 1em "Trebuchet MS",Arial,sans-serif;
< font: italic 9px "Trebuchet MS",Arial,sans-serif;
> font: italic 0.75em "Trebuchet MS",Arial,sans-serif;
*** cut here ***

Save the patch to a text file (clipped.txt). Back-up your css file first. The use patch.

$ cp jmb.css jmb.css.orig
$ patch jmb.css clipped.txt

I recommend using 'em' sizes, which I've shown here.
This might be a bit big for your taste. To get to your original sizes, set text-size: 12px; in your body style, and it will propagate down through your styles. The 85% I have there is equivalent to 13.6px (100%/1em is 16px in most browsers.). Small increments make a big difference in typography.