8 replies [Last post]
filosof
Offline
newbie
Czech Republic
Last seen: 17 years 46 weeks ago
Czech Republic
Joined: 2005-01-14
Posts: 2
Points: 0

Hi,

I have redesigned my blog recently. What do you think about it?

http://blog.filosof.biz/

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Filuv blog

Remove this:

<?xml version="1.0" encoding="iso-8859-2"?>

It's throwing IE into quirks mode.

Verschwindende wrote:
  • CSS doesn't make pies

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 16 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Filuv blog

Hi, filosof and welcome.
Despite IE quirks mode the site renders the same in IE6/Win, FF and Opera. The html/css code is clear and concise - the css doesn't validate but the faults do not seem to be relevant to the way the site looks and behaves i.e. incorrect properties for screen media. A proper print style sheet, that works well.

And as if that's not enough :!:
Good range of accessibility features:
- accessibiity policy statement
- skip link
- content first in code
- access keys
- not just tab ordering but search box input first in the order
- colour changer
- relative font sizes

There are just two accessibility features missing, to my mind:
Sighted keyboard-only users may not be able to see which link they have tabbed to without a: focus, * html a: active styling. The default markee is not readily discernable against some backgrounds, particularly if they take advantage of the colour changer. The same people will not see the skip link unless you bring it back into the viewport with a:focus, * html a:active styles.

Now to the visuals. I think the design is stunning and one of the most professional looking personal blogs I've seen in a long time. Just two minor items. When text is enlarged it spills into a second line in the footer which seems to be fixed height. There is also a 100% width, 1px solid white line just above the first menu item, but maybe that was your intention.

A shining example of combining css with graphic design and showing that accessible sites do not have to be dull or look like it's a site just "for the disabled".
Congratulations =D>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Filuv blog

Whilst I agree with Lorraine on the need for some highlighting of the tabindex focus and that the default dashed marquee is inadequate for this, one thing puzzles me - forgive me if I'm being dense- but I see no displayed assignment values for the 'accesskeys', which if the case would make their inclusion to some extent redundant or have I missed an explicit default assignment that is being used now? I notice that numerical values are used rather than the pitfall of using alt key combinations already set by the UI and that at least the value hasn't been included in the 'title' attribute string which always makes me laugh.

Otherwise a nice implementation of the WP Blog, nice not to see the usual problems with the default WP layout!

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 16 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Filuv blog

Hugo:

Quote:
I see no displayed assignment values for the 'accesskeys'

They are in the accessibility policy, first link in footer. Common practice nowadays as access keys are not widely used by screen-reader users. This is because, unless the combinations are chosen wisely, they will conflict with keyboard combinations used by the screen-reading software and browsers.
Quote:
I notice that numerical values are used rather than the pitfall of using alt key combinations

They are, actually alt-key combinations (in IE and FF - forget Opera - ugh!) - alt + 1 + enter. In Netscape just alt + 1 will do the trick. The reason for using numerical values is that 1 - 0 are rarely used by other software. The point to understand is that the numerical values have to be input in the numeric part of the QWERTY keyboard, not via a numeric keypad. Screen-reading software usually takes over the numeric keypad, throughout the whole session, for its own purposes.
Quote:
at least the value hasn't been included in the 'title' attribute string which always makes me laugh.

Ah-but, no-but, yes-but. When is used in the way you imply the title attribute is one way to let screen-reader users know what the keyboard combination is. It's only visible if you *happen* to hover over the link area or if the skip link itself is actually visible in all states. I prefer to use *apparently* invisible links in all states except: a: focus, * html a: active when the link reads visually and aloud: general menu : access key 1, as in:
<li><a id="jump-to-general-menu" href="#genmen" accesskey="1" >general menu : access key 1</a></li>
'cos I design for it. Wink
[edit] ps this last bit is not on my current site which is over 2 years old, but is in the iteration I am working on now [/edit]

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Filuv blog

Yes but, no but, yes I meant to say alt + numerical rather than alt + F as already defined in the UI which I've seen.
With the assignments defined on another page does that not still leave a problem of knowing how to reach that page, how do I know that I use access key 6 for that link ?

Is it not still practice to at least either underline the first letter of the link or embolden it ?

Didn't think about screen readers reading the title string, makes sense.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 16 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Filuv blog

Quote:
With the assignments defined on another page does that not still leave a problem of knowing how to reach that page, how do I know that I use access key 6 for that link ?

Point taken, I should have mentioned it in my first post. But, why not hover for a while (come up and see me sometime) over the links on my current site to see one of the techniques often used.
Quote:
Is it not still practice to at least either underline the first letter of the link or embolden it ?

This works if the link is visible, but alpha characters should not be used for access keys for the reasons I gave earlier. Probably not visually acceptable to the design junkies to have:
1 Home
2 About
or
1 Home
2 About

I wouldn't like it on my site, either :!:

filosof
Offline
newbie
Czech Republic
Last seen: 17 years 46 weeks ago
Czech Republic
Joined: 2005-01-14
Posts: 2
Points: 0

Thx

Thanks a lot.

CSS - it doesn't validate, because of underscore hack, that is used to remove some disabilities of IE in quirks mode. Underscore hack itself IS VALID, but validator doesn't accept it.

a: focus, * html a: active are now OK

footer - will be fixed soon

accesskeys - I have inserted them into the titles of corresponding links..

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 16 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Filuv blog

Thanks a lot for the information about the underscore hack. I must confess I have not come across wellstyled.com either :oops:
That'll be a happy afternoon experimenting with something new (to me) then.