Re: feedback on current implementation and layout

Hi Michael,

thanks for your efforts. Just a small note: Most of the changes could  
have gone into the site weeks ago, it is really no fun going through  
everything again and again. Even a W3C Taskforce may be efficient from  
time to time ;) There is even a downloadable ZIP file to play with and  
incorporate changes by yourself. We haven't any version control, but  
most of the changes wouldn’t require that much feedback from the group.

In detail:

> = HTML
>
> * [BUG] duplicate BODY elements
>  http://ericeggert.net/badtf/index/
>  http://ericeggert.net/badtf/info/

Will be fixed.

> * [FUTURE IMPROVEMENT] include WAI ARIA landmark roles

Do we need that? Please provide detailed information which landmark  
role goes where, that would be helpful.

> * [IMPROVEMENT] use of Classes and IDs is not optimal.
>  div.contentmain, div.contentright should be IDs instead.

Minor issue as there may be more than one div classed .contentmain  
or .contentright ob the page, hypothetically.
(And that issue was present in previous iterations when there was only  
one file to change.)

> = HEADER
>
> * [LAYOUT] margin-top: a bit too much for me (for smaller screens  
> the content will be shifted out of the viewport)

margin-top where? #page div? I don’t think so.

> * [LAYOUT] we might change my icons to the much nicer ones proposed  
> by jan sjoerd: http://commons.wikimedia.org/wiki/Category:Nuvola_SVG_stock

Which icons exactly? http://commons.wikimedia.org/wiki/File:Gtk- 
stop.svg and http://commons.wikimedia.org/wiki/File:Gtk-ok.svg ?

> * [LAYOUT] are the inactive tabs too light?

Probably a slightly darker border would be nice.

> * [LAYOUT] maybe we can reduce the font-size of ul#servicenav to the  
> size of the tab-nav

No problem with that suggestion.

> * [BUG] #skipnav link is broken

That should point to #page. Will fix.

> = DEMO CONTENT
>
> * [ACCESSIBILITY] do we need a (hidden) note to tell where the demo  
> page
>  starts?
>  in my template it was a hidden paragraph "Inaccessible demo content
>  from here!"

If we add something like this, we should do it as a heading, I think.  
I don’t believe it would be that necessary. (I was confused and  
decided not to include that as it said inaccessible version but the  
navigation showed the accessible version.)

> * [ACCESSIBILITY] split long paragraphs
>  http://ericeggert.net/badtf/info/
>  increase readability and scan-ability of text.
>
> * [USABILITY] link logo to the home
>  except on home page
>
> * [ACCESSIBILITY / LAYOUT] font style (Impact) of headings: neither a
>  particular good nor nice font-face. it's also not very readable IMHO.
>  Alternatives: Lucida Sans bold, Trebuchet MS bold with reduced
>  line-height (1.2)

How do you describe that change to visitors? People won’t like that  
you have to change your fonts because of accessibility. Lucida and  
Trebuchet are boring, too. :)

> * [ACCESSIBILITY] increase line-height of paragraphs for better
>  readability (1.4)
>
> * [LAYOUT] margins before and after h2 headlines are too close to
>  preceding paragraph
>  (margin-top < margin-botton)
>  eg http://ericeggert.net/badtf/info/
>
> * [LAYOUT] image or block div.box:
>  font-size of captions are inconsistent
>  eg http://ericeggert.net/badtf/info/
>  - "Berlin Zookeeper (no Sun-Sun)"
>  - "Your Shout"
>  - "Brain donations at city hospital (by month)"

div.box is in it’s whole not very reusable although I think there are  
some things the taskforce wanted to demonstrate here. I think it looks  
rather weird and the HTML is ugly, too.

> * [LAYOUT] image or block div.box:
>  increase vertical margins (>= p)
>  eg http://ericeggert.net/badtf/info/
>
> * [LAYOUT] image or block div.box:
>  should align right and left with paragraphs of column
>  ie. same width as column
>  eg http://ericeggert.net/badtf/info/
>
> * [LAYOUT] mainnav #nav:
>  drop dashed border at the right

Why? The before site has it. (I have no problem with those changes,  
but people will ask why the after pages don't look like the before  
pages.)

> * [LAYOUT BUG] mainnav #nav:
>  a:active has an anti alias effect (white pixels on the red  
> background)
>  we might use the sliding door technique

Is that really an issue? And how would the sliding door technique help  
us with that? Probably going to proper PNG8 files would be nicer, but  
I don’t think that we need to do that.

> * [LAYOUT] hover in right margin teasers (#contentright h2 a:hover)
>  http://ericeggert.net/badtf/index/
>  due to the red border-bottom an the white bg-col at the top text  
> there
>  is a irritating visual shifting effect. also the headline text gets
>  some visual de-emphasizing

Actually that whole teaser should be clickable, proposals for that  
issues are very welcome. Another issue you raised was that text and  
header and everything in those teasers don’t look like they belong  
together, which should probably be fixed first.

> * [LAYOUT BUG] active in right margin teasers
>  (#contentright h2 a:active)
>  http://ericeggert.net/badtf/index/
>  on active the h2 gets an visual right and left border overlapping the
>  column
>  Proposal: remove active effect

That is the desired outline effect, what’s the alternative to make the  
current position of the cursor visible?

> * [LAYOUT] more links (a.more)
>  eg. http://ericeggert.net/badtf/index/
>  i don't like the layout of the more links.
>  Proposal (maybe somebody has better ideas):
>  always two lines (with linebreak), first line story name, second line
>  "read more" or "full story", no dash between, arrows bottom aligned

Why? The before site has it. That is an minor issue to me, they look  
quite okay and there is no need to overhaul those. (If we do I’d  
prefer plain read more links, story title in the @title, only one line)

> * [LAYOUT] hover more links (a.more)
>  eg. http://ericeggert.net/badtf/index/
>  i think the bright blue arrows do not fit to the general color scheme
>  of the site.
>  proposal: make the arrows dark red (link color)

One could do that, this must be changed in the before pages, too, if  
we do it as there is no accessibility concern which would explain that  
change.

> * [LAYOUT] active more links (a.more)
>  eg. http://ericeggert.net/badtf/index/
>  i think the active effect with the red background block is to bold.
>  it also has some white antialiasing effects on the background image.
>  Proposal: remove active effect

Not an issue. (And just removing the effect is no solution to me.)

> * [LAYOUT] elsewhere on the web (ul.elsewhere)
>  eg. http://ericeggert.net/badtf/index/
>  little more vertical whitespace between the LIs
>  less horicontal whitespace between list images and text
>
> * [LAYOUT] footer
>  vertical whitespace below copyright is needed
>
> * [ACCESSIBILITY] footer
>  provide a TITLE for KEIO to indicate what this might be. it's
>  not that famous among ordinary users ;-)

People are able to access the web page, so no need to describe what’s  
behind it.

> * [LAYOUT] columns
>  http://ericeggert.net/badtf/info/
>  more padding between the columns (shift right column to the right)

Those have an old width. Should be fixed.

> * [LAYOUT] improve quality of image
>  http://www.w3.org/WAI/EO/2005/Demo/after/pix/chart1.jpg

Thad would not damage anything. (Should be fixed in the before page  
also.)

> * [ACCESSIBILITY] long description of image needed
>  http://www.w3.org/WAI/EO/2005/Demo/after/pix/chart1.jpg
>  provide a long description of the image either as (visible) link or  
> in
>  the text below the image

No. The alternative text is sufficient and the graph is just for a  
quick glimpse not for detailed investigation. We shouldn’t give the  
impression that we need longdescriptions even for such images with  
just spare information.

> * [LAYOUT ???]
>  Note: i'm generally not very fond of dashed borders as they render  
> not
>  very nicly on many browsers.

Which are "many browsers"? They render just fine here. (But they are a  
bit overused here, I can admit that.)

> * [LAYOUT] inconsistent formatting of tables on different pages
>  http://ericeggert.net/badtf/info/
>  http://ericeggert.net/badtf/data/
>  background colors, spacing, ...

If anyone wants to do improved tables, we can create an action item  
for sure.

> * [BUG] tables
>  http://ericeggert.net/badtf/data/
>  capitalize names correctly in table summary and abbr attributes
>
>
> * [ACCESSIBILITY] inappropriate use of tables: concert dates
>  http://ericeggert.net/badtf/data/
>  i would implement this a little bit different in a list.
>  maybe we should write the dates in a different more non-ambiguous
>  format (I18N).

No issue. The table has correct th and is easy to grasp. The date  
format should be of the date format that is used in our city.

> * [LAYOUT] buy tickets ... (p.sfbuy)
>  http://ericeggert.net/badtf/data/
>  harmonize different margins right and left and bottom.
>  harmonize also with second occurance of this sentence below ticket
>  prices.
>  second occurance should not belong to the terms and conditions  
> section
>  but to the prices table.

Not an issue for me.

> * [BUG] table ticket prices
>  http://ericeggert.net/badtf/data/
>  harmonize lettercase of subheaders in the tables (ADULT)
>
> * [ACCESSIBILITY] improve readability of terms and conditions
>  use nested lists for subitems (a), (b) ...
>
> * [LAYOUT] improve paddings of h2-headings
>  http://ericeggert.net/badtf/form/
>  harmonize padding of icons to the top, left and bottom. increase
>  padding to the text on the right.
>  increase top-padding of text.

The form page will be overhauled by Liam, it makes absolutely no sense  
to go into those details now.

> * [LAYOUT] horicontal aligning / width of content
>  http://ericeggert.net/badtf/data/
>  http://ericeggert.net/badtf/form/
>  width of main content should be equal on every page and should align
>  with h1.
>  ie. i would include a horicontal padding into div.contentmain rather
>  than in child-elements.

This produces inconsistencies when .content-right is used.

### The next issues are issues for the survey pages Liam has to look  
into. ###


> * [LAYOUT] button positioning and size
>  http://ericeggert.net/badtf/form/
>  shift submit-button to the right.
>  increase size of submit button.
>
> * [LAYOUT] fieldsets
>  http://ericeggert.net/badtf/form/
>  maybe we can style the fieldsets in a less obtrusive way, eg. with
>  thinner borders and lighter background with a slow fade-in at the top
>  to avoid the edge behind the legend.
>  example:
>  http://am.wienfluss.net/mitgliederbefragung2007/questions.html
>
> * [USABILITY] reconsider text and form of
>  http://ericeggert.net/badtf/form/
>  "Rank your favourite forms of transportation" in section 2.
>   - i'm not a native speaker, but i think a ranking should bring those
>     items in an order?
>   - consider using a different form than drop-downs, maybe  
> radiobuttons
>     as they are generally easier to use (single click)?
>
> * [USABILITY???] Rank your favorite forms of transportation
>  http://ericeggert.net/badtf/form/
>  aren't numbers (1,2,3) generally easier to read and understand
>  than the words (one, two, three). maybe this is only true for bigger
>  numbers.
>
> * [ACCESSIBILITY] form
>  just a few notes for the subsequent discussion ...
>  * lenght of legends
>  * indication of required fields
>  * drop reset button?
>  * include error message?
>

### End of survey issues ###

> so this might be enough for now. let's discuss it on wednesday in  
> our teleconf.

Please let’s discuss most of the things here in the mailing list, we  
probably don’t want to have an five hour long teleconf!

Best Regards,
Eric

PS: I so wish we had an issue tracker :)

Received on Sunday, 11 January 2009 18:09:13 UTC