feedback on current implementation and layout

hi taskforce,

i have now compiled my feedback regarding issues, accessibility and 
layout. as discussed before i would not change the layout completely but 
i think the page needs a more professional touch. i should have 
business-quality. and this is currently not the case. (and i have to add 
this is definitly not eric's or anybodies fault in the team, but has 
it's reason that most participating people do not have enough time, like 
me for example!)

i think most of the issues can be fixed with little or medium effort, 
but maybe a few more iterations might be needed.

Note: everything was tested only in FF3 / Win XP


= HTML

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

* [FUTURE IMPROVEMENT] include WAI ARIA landmark roles

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


= HEADER

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

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

* [LAYOUT] are the inactive tabs too light?

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

* [BUG] #skipnav link is broken


= 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!"

* [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)

* [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)"

* [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

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

* [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

* [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

* [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

* [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)

* [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

* [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 ;-)

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

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

* [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

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

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

* [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).

* [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.

* [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.

* [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.

* [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?


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

/michael

-- 
Michael Stenitzer | WIENFLUSS information.design.solutions
fon +43 650 9358770 | fax  +43 1 23680199

Received on Sunday, 11 January 2009 16:01:55 UTC