DarkShadow-Designs.com
Ok folks, another site up for critique.
I did this more out of fun to see if I could make a decent Gothic site that is still accessible. Also for the critics who point at my minimalistic style and claim it shows that accessible web designs means boring ugly sites with no creativety.
So appreciate you opinions and if any major problems I missed exist.
Planned still is a stylesheet switcher to allow the switching to dark on light in the content box as well as other designs as I have time to create them.
The site has been tested by Mac and Linux users for me. Thumbs up. I assume any 4 or 5 generation browsers are likely to have problems, may adjust that later as time allows and I figure out how.
Only reall problems still in are IE. I am not good at identiying IE bugs is not my strong point. In IE the orange container box seems to repeat itself lower down by the footer and I do not know why.
Also at lower resolutions (built at 1280 x 800) the content box breaks out of the container and causes side scrolling.
That the RSS Feed is in the content in IE does not bother me, still debating where to leave it officially.
Thanks for your opinions ahead of time.
DarkShadow-Designs.com
DarkShadow-Designs.com CSS
Kyle
--
[size=9]Kyle J. Lamson
Analyst/Programmer III, State of Alaska
Last edited by lsw on 14 Jun 2005 11:02 am; edited 1 time in total
Share: 
At first glance really just a few problems with IE rendering.
Content div seems to break the orange border
Position of XML feed changes between IE and Firefox
The only other thing is the breadcrumb doesn't seem to always follow the navigation (or isn't there - home), where the main-info page isn't available from the navigation.
Otherwise although Gothic isn't my favourite, nice site.
Share:
Bounce
Any other comments? It this another error free web design from me?
--
[size=9]Kyle J. Lamson
Analyst/Programmer III, State of Alaska
Share:
Hi Kyle 
I'm looking hard at the Goths with IE6 800 x 600, and have a few points.
No change to the colour of links on hover, I think this is important as it shows the link is active. Just noticed some do i.e. the link to your e-mail address, does this mean you have just missed it out
The main text box sits to the right and cannot be fully read without using the scrollbar. I think this is what Richard mentioned as it sits over the right border and also the bottom border
Have you checked the colour contrast, text/background, looks poor to my mk1 eyeball.
Your header guy looks a bit like one of the old King Crimson album covers, and as for the lady, is tonight a dark night
Mike Abbott
Accessible to everyone
Share:
LOL - see, it is always the little things...
Hover - yes the color was designed to change and you will see this if you hover over a link already visited. Seems is playing around with it I set the hover in either the same color or very close, should be more yellow on rollover like in the footer. My mistake. Thanks.
Content box - yes I am aware of the spillover.I mentioned that in the original posting. Cannot figure out what is causing the trouble, clearly a IE bug just I am not so far where I can identify the bugs by name to fix it. So if anyone has a suggestion I am all ears. Just got word as well that Safari seems to overlap it as well... Hmm, so code problem and not IE Bug?
Contrast - that is the biggest problem with a Gothic site in my mind. Light text on dark background is against what our eyes expect so is hard reading, add to that contrast. I do not want a bright color as it tends to bug the eyes as well, at the same time not to bleached out as to dull down the design. Part of the reason I posted here, to see if others felt it is to contrast weak or works. Also as mentioned I will be adding a style switcher to allow the user to choose another design or at least dark on light text f they find this hard reading.
So Mikea thinks contrast is a little to weak. 1:0 on contrast so far. Thanks.
--
[size=9]Kyle J. Lamson
Analyst/Programmer III, State of Alaska
Share:
You can always try my favourite colour checker http://www.juicystudio.com/services/colourcontrast.php @ JuicyStudio
The colour problem may be related to my colour vision rather than the actual colours themselves, so it shows as a cognitive disability not a page problem. If this is true then you will need to think about different colour combinations.
I think you overlap problem has something to do with the margin settings, I copied your CSS and page, altered the .Content margin from 190px to 150px and it moved left missing the right border altogether. Some palying around required methinks
Kutgow
Mike Abbott
Accessible to everyone
Share:
Great, didn't know Juicey was back up... guess I need to reset my live bookmarks, thought he was still looking for hosting.
Ok, thanks, will try it.
<addition> The contrast is Ok, but the colors are to similar for the W3C but fine for HP. Guess I may have to go more orange or yellow.</addition>
--
[size=9]Kyle J. Lamson
Analyst/Programmer III, State of Alaska
Share:
Gez can be found at http://www.juicystudio.com/ Mike Abbott
Accessible to everyone
Share:
A very interesting design. I'd have to say that the hover contrast is too little because even on my 1600x1200 flatscreen monitor running at 85Hz with 32-bit colour depth, the difference is virtually imperceivable. Since links should be easily distinguishable from normal text, you shouldn't really be using orange for links and orange for body text as well, imho. Why not use the same link styles in the sidebar as you use in the main content?
Alternatively, you could show off your talents by using anchors with display:block in the sidebar list elements. A simple implementation of this can be seen on my GTA modifications site, in which I use background colours to distinguish between the different link states. I also add a class="current" to the anchor for the section the user is currently in so that it can be distinguished from other areas. That is a useful navigational aid, since the content on my site has more than one layer.
On the subject of navigation lists, how come you are using <ol> instead of <ul>? There doesn't seem to be any meaning to having numbered item beside each option when viewing the page without CSS enabled, especially since the numbers get repeated before they even get out of single digits. It's also a bit odd that the RSS list item is all on its unordered lonesome.
Using colons for breadcrumb seperation isn't particularly intuitive and my understanding is that colons should be set out like this: No space before, two space after, with first-letter capitalisation. Using » would give the French right-hand quite character, which should suit the Gothic style of the site better than a plain old colon.
Having the updated dates at the start of the article is a great idea; since the Web acts like a huge archive with most pages getting more views when they are a couple of months old, showing the update time gives the user a much better idea of how relevant the article is.
Interesting that you include the user's "habits" as an accessibility concern...it's a valid point I havn't seen mentioned elsewhere. In making interfaces for programs it's second nature to provide duplicate methods, such as a toolbar item, a menu item, a dialogue window, in-built title menus for the same operations, keyboard accelerators and so on to cater for everyone's preferred method of interaction. Websites are sorely lacking in this, mainly because of the limitations on markup when compared with binary applications.
| Code: |
| <abbr title="Quick and Easy Content Management System." lang="en">QnECMS</abbr> |
It isn't bug-free but it's definitely a solid site. These are only faults when one is being really strict, which is only necessary if you are concerned about miniscule detail.
Share:
might be worth spliting this off somewhere?
| Cerbera wrote: |
| Using colons for breadcrumb seperation isn't particularly intuitive and my understanding is that colons should be set out like this: No space before, two space after, with first-letter capitalisation. Using » would give the French right-hand quite character, which should suit the Gothic style of the site better than a plain old colon. |
Interesting that you should suggest that. Why suggest a character that would confuse the French? surely they would expect that it was part of a quote?
I don't think I have ever heard that there should be 2 spaces after a colon, so again I am surprised by this. Can you cite any reference?
Breadcrumbs come in all shapes an sizes, bu the 2 most common separaters I see are : and >. The second one certainly isn't correct, but is perhaps accepted due to its look. Is there a truly acceptable breadcrumb navigation divider?
Share:
| Cerbera wrote: |
| A very interesting design. I'd have to say that the hover contrast is too little because even on my 1600x1200 flatscreen monitor running at 85Hz with 32-bit colour depth, the difference is virtually imperceivable. |
Yea, as I said that was a mistake on my part, just switched the color in the wrong place somewhere along the line. Will be correcting things tomorrow including that.
| Cerbera wrote: |
| Since links should be easily distinguishable from normal text, you shouldn't really be using orange for links and orange for body text as well, imho. |
Will have a look.
| Cerbera wrote: |
| Alternatively, you could show off your talents by using anchors with display:block in the sidebar list elements. |
I do this often, but didn't find a way I liked for this design, found simple text links looked better over the background.
| Cerbera wrote: |
| I also add a class="current" to the anchor for the section the user is currently in so that it can be distinguished from other areas. That is a useful navigational aid, since the content on my site has more than one layer. |
All pages use one template with the Nav, no way to mark any one page as being current unless the nav is on each seperate page.
| Cerbera wrote: |
| On the subject of navigation lists, how come you are using <ol> instead of <ul>? There doesn't seem to be any meaning to having numbered item beside each option when viewing the page without CSS enabled, especially since the numbers get repeated before they even get out of single digits. It's also a bit odd that the RSS list item is all on its unordered lonesome. |
I recently read a article that made a very simple statement that most peple layout a list from most important to leats important. So if you are laying out your Nav in this comon form then a ordered list makes as much if not more sence then and unordered list. It made sence to me. The RSS is in fact one of 4 items, the Jump link is commented out till I decide if I will add it or not as my content now comes first. Then there are two links for a German and English version. I have not decided if I will do a German version of this site or not so the English is commented out as well leaving only the RSS Feed.
| Cerbera wrote: |
| Using colons for breadcrumb seperation isn't particularly intuitive and my understanding is that colons should be set out like this: No space before, two space after, with first-letter capitalisation. Using » would give the French right-hand quite character, which should suit the Gothic style of the site better than a plain old colon. |
Honestly the bread crumb is part of the CMS script written by Jim. I have not nor see any reason to modify it. As Elfin said, ">" is common but not really corect semantically either so ":" is likely the best of the two, unless "|". I really don't care either way unless someone can offer me a better choice. Sounds like an idea for a thread here as well.
| Cerbera wrote: | ||
|
Carefull, that is a can of worms here. I agree with the crew that feels that one should design for standards and not a browser. It is a IE problem they need to fix. The language attribute is for english a bit extra, but as I may be doing a German version... then it is there for them. It is being served as tag soup so the XHTML version is really not needed.
--
[size=9]Kyle J. Lamson
Analyst/Programmer III, State of Alaska
Share:
| asaxton wrote: | ||
| Could you not just assign each navigation item an ID on the <li> and then assign a class to the <body> of the docuement?
Then you could use:
|
Hmmm, I don't think so as the body too is part of the template. Only certain sections are added in.
However in theory it maybe could work with a Div within the content frame for the content on each different page... but having that effect the Nav elements... good questio, I have no idea if it would work. intersting idea if not a bit complicated.
--
[size=9]Kyle J. Lamson
Analyst/Programmer III, State of Alaska
Share: