14 replies [Last post]
egone
egone's picture
Offline
newbie
Munich, Germany
Last seen: 18 years 13 weeks ago
Munich, Germany
Timezone: GMT+2
Joined: 2004-06-30
Posts: 5
Points: 0

Hello everyone,

While I have used CSS for several years (often incorrectly), I have mended my ways after reading Eric Meyer's O'Reilly book on CSS 2 and 2.1 as well as his "More Eric Meyer On CSS". This has changed everything for me, in both how I code and how I design. What better way to try and use those new insights than on one's personal website. I have also been using these new ways in the professional arena, designing all my sites using XHTML 1.0 transitional as well as a mixture of CSS 1.0 and 2, depending on browser importance.

So please take a look at my personal website. The site design and coding is all done by me, including photography. I'd like to point out that all the pages and CSS pass the W3 test, with the exception of the blog pages I have on the site, which also includes the main page. I make use of Blogger's writing tool, including my site design as the base template in posting articles. The W3 does not like some of the characters that Blogger includes in some of its links, and if anyone knows a way around this (I think not, actually), please let me know. The only errors that the W3 reports on these blog pages are the Blogger links, nothing else, which is enough of a pass of the W3 test for me. The rest pass though.

I'd be curious for anyone's insight on how I designed the site and if anyone has any suggestions on how to better the site.

The URL is:

Arrow http://www.glinka.com

Enjoy!

Daniel

P.S. I am still tinkering with the site, and you may come across a few broken links (pages don't exist yet), but that tends to be a bit deeper into the site, not from the main front pages. Also, I largely target the following browsers: IE6, Firefox, Opera, Safari. The site works in IE5.5, with the small exception of a line alignment with the left-side menu.

Mælstrøm
Offline
Regular
Germany
Last seen: 15 years 23 weeks ago
Germany
Timezone: GMT-1
Joined: 2005-01-02
Posts: 46
Points: 0

Let Me Be The First...

At first glance, i really have to say it looks great!! Simple yet elegant design, quick loading. Good css, all in all, great job. Smile

- How many Sith does it take to screw in a light bulb?
- Only two a master, and an apprentice!

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

Converted my personal site to CSS

Daniel

I agree with Maelstrom - it's a classy site and the pictures are stunning.

But have you seen what happens when the text is resized upwards in Firefox and IE? Caused by an unhappy marriage between fixed width divs and font sizes in ems.

Sorry to p**** on your parade. Crying

Lorraine

egone
egone's picture
Offline
newbie
Munich, Germany
Last seen: 18 years 13 weeks ago
Munich, Germany
Timezone: GMT+2
Joined: 2004-06-30
Posts: 5
Points: 0

ems and px

No problem Lorraine for p**** on the parade. That's the one area I can't really seem to come to grips with, the use of em and px. I know that px is not expandable in IE as it is in Firefox and the other real browsers. I am just a bit uncomfortable using em, as it's not quite as predictable in size as I would like it to be.

Does anyone have anything to say on using em, so that it will expand nicely? Just not use fixed widths in divs? I suppose I have to use a fixed width for the overall wrapper, as the flower image at the top is fixed. But what about the rest?

Daniel

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

Converted my personal site to CSS

Daniel

Quote:
I know that px is not expandable in IE

True, px is not expandable just by View, Text size. But - not a lot of people seem to know that by going to Tools, Internet options, Accessibility and checking Ignore font sizes specified on web pages, website visitors can change the text size. It could be argued, then, that using px for font-sizes will not affect people who have sufficient sight loss to know about the Accessibility options. I dare not advocate that as I work for a charity for blind and visually-impaired people!
In IE once visitors start changing font sizes on your site, there is a huge difference in size between the five options. In particular anything less than Medium is very difficult or impossible to see. You can control this better by specifying font-size: 100.1% in the css body element. The smaller sizes should still be legible and the larger ones will not wreak such havoc in the page. This font sizing approach is recommended by Dave Silvester on the css-discuss mailing list. "the .1 is important".

Quote:
I am just a bit uncomfortable using em, as it's not quite as predictable in size as I would like it to be.

I always use % for font-sizes, much more predictable. I use em for widths in the structural divs of fluid/elastic layouts, but not for much else. A lot of the unpredictability comes when em for fonts is used on, say <h*> elements - not only is the width unpredictable but you also get uneven heights and vertical text alignment problems across 'columns'.

Quote:
I suppose I have to use a fixed width for the overall wrapper, as the flower image at the top is fixed. But what about the rest?

Probably best to stick to your fixed width for this iteration of the design and live with the text-resizing issue. But, by using a combination of fixed, liquid and elastic techniques, it is possible to produce a design that will 'look' exactly as it does now yet will still accommodate text resizing. The following article may be of interest : http://www.autisticcuckoo.net/archive.php?id=2004/07/21/fixed-liquid-elastic

All the best
Lorraine

egone
egone's picture
Offline
newbie
Munich, Germany
Last seen: 18 years 13 weeks ago
Munich, Germany
Timezone: GMT+2
Joined: 2004-06-30
Posts: 5
Points: 0

Converted my personal site to CSS

Thanks Lorraine! This is a huge help. My sister-in-law, while not completely blind, is legally blind, as she has a severe form of cataracts. This is very useful information!

Daniel

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

Converted my personal site to CSS

Daniel
You're very welcome.

By the way, if you go back to the autisticcuckoo site referenced above, you will see it 'seems' to be fixed width which 'appears' to be constrained by the top graphic(Drunk, in particular the background image. Now enlarge the text and watch the top graphics. Works in IE and Gecko - it's not magic but a combination of graphic techniques. So, your next design does not have be constrained in width purely on the basis of images.

All the best
Lorraine

egone
egone's picture
Offline
newbie
Munich, Germany
Last seen: 18 years 13 weeks ago
Munich, Germany
Timezone: GMT+2
Joined: 2004-06-30
Posts: 5
Points: 0

Converted my personal site to CSS

Well, I've already been at work on a new site, using your ideas as well as some of the techniques that I've seen on other sites. Here is one I am working on now:

http://www.sweon.com

On that, the text enlarges very nicely both in Gecko and IE (when I tested IE yesterday) up to two enlargements before the top menu breaks to another line. Even then, the text still holds throughout the rest of the page. What I did was set in the <body> an overall font-size of 'small'. Then throughout the rest of the CSS, I indicate % for different sizes. And in some sizes, paddings and margins, I've set em instead of px, although I do use px in a few places, such as left-margin and so on.

I did stick some text in the image at the top and will eventually change that, but I think it's okay for now.

Am I on the right track?

Daniel

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

Converted my personal site to CSS

By George... I think you've got it... what else did you do with your weekend?
Just a few comments:
It may be better visually if you center everything in the viewport;
Try to stop the main background extending below the footer. This is not noticeable when the content extends below the bottom of the screen, but it would be a 'pain in the butt' on shorter pages;
The very top image doesn't work, as I think you've realised, because the dotted line and 'eCommunications Architect' is not visible until the image is enlarged in image editing software.

Other than that we are in the realms of accessible web design, which may well be off-topic for this forum. I don't want to have my wrists slapped by the moderators so I've sent you an email.

Lorraine.

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

Converted my personal site to CSS

Wrist slapping never, on this forum Shock
As a moderator I would say that discussing web accessible design is not of topic for this forum it's primary role may be to discuss matters related to CSS but I think that associated topics such as 'Semantic Markup', 'Web Standards', 'Accessibility' etc are always worthy of open discussion. In fact I know a few Regulars and Mods that welcome such discussions and it does make a change from "Put a full DTD in your page" Smile. share with us Crying

We can always move a Topic/post to the 'Off Topic' area.

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 6 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Converted my personal site to CSS

Hugo wrote:

Quote:
share with us

All rightee, then.
This is the email to Daniel. It is for a novice to web accessibility (not that he'll be one for long). It's a subject almost as big as css, html, standards et al. so there's reams more information out in cyberspace for those who really want to optimise their sites and make them accessible to the largest audience possible. I would be happy to offer some insights (no pun intended) on the accessibilty level (or potential accessibility drawbacks) of sites in Site Checks, or elsewhere, if the poster requests it.

email to Daniel

Quote:
As promised, or threatened, here is some accessibility stuff.

Your base font-size of 'small' seems to work remarkably well. Opera and some older browsers will struggle a bit and ‘small’ is actually an IE thing I think, so to understand the genesis of 100.1% you might like to read Dave Silvester’s comments and follow through some of the links/references (Zoe Gillenwater in particular) on: http://archivist.incutio.com/viewlist/css-discuss/42297

Check out also skidoo too and gargoyles on: http://webhost.bridgew.edu/etribou/layouts/skidoo_too/index.html
This chap is very good, but, not just because he is a disciple of 100.1% (well commented on css). There are several layouts on this site and the source is free (notice - copyright Nobody) but the skidoo too one features source ordering, which is explained in the content on the layout. Getting your content first in the source code is important for search engine optimisation (particularly as you are in the business of producing sites for clients). It is also very important if you want to get into accessible web design. If you can produce accessible web sites for your clients, then they can be sure their site will comply with the various Disability Acts around the world and not fall foul of the legal people. It is a strong marketing point and an important beneficiary could also be your sister-in-law. Keep the ladies happy, I say.

Web Accessibility is a big subject. It took me about a year to really get to grips with it. On your track record so far, I'll give you, umh, a month Wink) In my opinion, the best site for this is http://www.accessify.com and the forum at http://www.accessifyforum.com . You'll notice Tommy Olsson - Toolman - figures a great deal on the forum. He is the 'autistic cuckoo'.

Have fun - but try to get some sleep occasionally.
Regards
Lorraine

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

Converted my personal site to CSS

True accessibility is a large subject, but one that we should all be aware of and plan into our designs from word go.
I think that a lot of people may labour under the false idea that it is something new though, as basic accessibility is or should be a by-product of good 'standards' Design things such as ensuring that one checks the design text mode without any CSS styling to ensure from an early stage that the fundamental markup is semantic and makes sense in the original method intended.

But it is a deeper subject than that nowadays especially with the new legislation in the U.K.
Maybe I need to add Cynthia or Bobby to my sig Smile
Dam that's made me realise a glaring omission from the notes I did on 'Validating' should have mentioned 508 etc :roll:

From what I remember keyword font-sizes are not recommended to be used due to there cross browser variances. percentages to set the overall size in the body (to keep IE happy) em or percentages for every thing else.

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 6 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Converted my personal site to CSS

Hugo wrote:

Quote:
But it is a deeper subject than that nowadays especially with the new legislation in the U.K.

You can say that again and the US legislation is a rabbit warren too. Of course accessibility is not just for people who are blind or don't see well, but also for those have to use a keyboard to navigate, people with learning and cognitive disabilites and... I won't go on. It is fascinating, however, and very fulfilling when you get positive comments about your site from people who have rarely had a good surfing experience.
Quote:
Maybe I need to add Cynthia or Bobby to my sig

Did you just say Cynthia and Bobby :?: Those are "red rag" words to the accessibility people. Automated accessibility checkers can only take you so far, after that it's down to the subjective decisions of the developer as to whether the site reaches any level of accessibility. Now, if the developer is being paid to produce an accessibile website by a client who wouldn't know one from a ****, the developer could easily fool himself into thinking he has done a terrific job. If he has not, it may only come to light when the site owner is taken to court.

We digress and I really must get some beauty sleep.

Lorraine

PS I hope I won't need a sig that says "forget Cynthia and her playmate Bobby".

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

Converted my personal site to CSS

Oops, hit a raw nerve Smile
Didn't mean that accessibility validators were the last word and 100 % authoritative in this area it was more a quip. but point taken, I shall never utter their names again, even in jest.

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 6 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Converted my personal site to CSS

No offence taken, whatsoever. You've excused yourself with your customary panache. Cool

My post - just to point out to noobies to accessibility that there are serious drawbacks to automated accessibility checkers. Though whether any notice is taken in another matter entirely, Mr DTD.
Lorraine