Re: [WSG] New site - looking for feedback
pretty slick, I like it.. - with a few little coding tweaks you could probably eliminate most of your CSS IE width hacks. - Rollover colours on top nav could have more contrast - difficult to read dark on dark.. - It seems weird to me that the underline disappears on mouseover of regular links.. well done. B * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] New site - looking for feedback
- with a few little coding tweaks you could probably eliminate most of your CSS IE width hacks. Hi Ben, I'm assuming you're refering to the use of padding divs (which is the method I normally use). If not, then please let me know. I chose to use the IE5 box model hack this time around as I want to keep the html as clutter free as possible. It also comes back to the fact that this will be a dynamic website (Coldfusion CMS based) meaning pages won't necessarily be cached, but the CSS will. Therefore, I want to keep as much of the workarounds/hacks in the CSS as possible. - Rollover colours on top nav could have more contrast - difficult to read dark on dark.. Duly noted. Ill bump the brightness of the orange. - It seems weird to me that the underline disappears on mouseover of regular links.. Agreed. Link styles are always an after thought for me. We actually have a generic template (html and css) that our designers use to define their content styles. Which is excellent (when they actually use it - unlike this instance) as it means the designers get a bit of insight into what can/cannot be done with html/css. Cheers, James Silva Web Production Gruden Pty Ltd Tel: +61 02 9956 6388 Fax: +61 02 9956 8433 Email: [EMAIL PROTECTED] Web: http://www.gruden.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ben Smith Sent: Tuesday, 30 March 2004 3:23 PM To: [EMAIL PROTECTED] Subject: Re: [WSG] New site - looking for feedback pretty slick, I like it.. well done. B * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] New site - looking for feedback
I can't contribute anything on the mac side, but I have to say I like it. I like the graphic device of using the fine white lines across the page and down. Nice effect. And the transparent effect in the heading looks great too. Very smooth. I think it's a clever way to use boxes as wide as the whole screen to overlay one colour over another so it looks like there is a LOT more work in the different sections than there actually is. Screen background in the dark red, then the middle wrapper box overlayed with the olive colour, then the white lines through it looks like you have a gazillion table cells there, but in fact there aren't any. Can you tell us a bit about the design process? Did the graphic designer start out with standards compliance in mind or did you take the sketch/gif/PDF design or whatever and force it into compliance? How much does your designer take CSS techniques into account when designing? The home page must have been a challenge - all those boxes to line up. How will you keep them more or less in balance once they start adding content to it?Are you having a CMS back end on it? I know you're looking for html/css comments, but to tell the truth, the site just looks brilliant in my browsers. If it was my work I'd be telling everyone in the world. Cheers Mike Kear Windsor, NSW, Australia AFP Webworks http://afpwebworks.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of James Silva Sent: Tuesday, 30 March 2004 3:00 PM To: [EMAIL PROTECTED] Subject: [WSG] New site - looking for feedback Hi guys, Just looking for some feedback on our latest job*... Feel free to tear it a new one :P Sample homepage: http://www.gruden.com/dev_sites/blacktown/templates/homepage.htm Sample content page: http://www.gruden.com/dev_sites/blacktown/templates/content.htm CSS is at: http://www.gruden.com/dev_sites/blacktown/templates/styles/styles_main.css http://www.gruden.com/dev_sites/blacktown/templates/styles/styles_content.cs s http://www.gruden.com/dev_sites/blacktown/templates/styles/styles_homepage.c ss (excuse the long URLs, DNS changes haven't come across yet) Basically, im looking for some design/accessibility/UI comments that I can pass on to our graphics department. Also, could someone run it through the usual Mac browsers for me (and provide feedback)? Our little iMac is playing up. I'd be more than happy to discuss any html/css decisions I made. *Obviously this is just a quick knockup of the initial design, as the client wants to see it in HTML form. Thanks in advance, James Silva Web Production Gruden Pty Ltd Tel: +61 02 9956 6388 Fax: +61 02 9956 8433 Email: [EMAIL PROTECTED] Web: http://www.gruden.com * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] New site - looking for feedback
Very nice indeed James, thanks for passing me the links otherwise I would've missed out on seeing it... The first word bold, second word normal thing seems to be gaining momentum amongst the various CSS sites I've seen lately, understandably as it is a nice effect for titles. The first thing I though was 'oooh, how did he get the Go buttons to align so nicely with the form fields?', coz I had been trying to do it without resorting to a table or the deprecated align=absmiddle parameter. Then I realised you're using images which gets around the problem, however this will eventually become an accessibility issue as the only way to submit the forms will be via href=javascript:submit() on the image, no good for screen readers. As soon as you replace the img with input type=image I'm pretty sure you'll have the same alignment issues I had. If anyone knows of a solution for this I'd love to know! That's that only thing I could find in what is an aesthetically pleasing design that is a credit to the WSG. Maybe it's time for a WSG Member's portfolio? MT. -Original Message- From: Ben Smith [mailto:[EMAIL PROTECTED] Sent: Tuesday, March 30, 2004 2:53 PM To: [EMAIL PROTECTED] Subject: Re: [WSG] New site - looking for feedback pretty slick, I like it.. - with a few little coding tweaks you could probably eliminate most of your CSS IE width hacks. - Rollover colours on top nav could have more contrast - difficult to read dark on dark.. - It seems weird to me that the underline disappears on mouseover of regular links.. well done. B * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] New site - looking for feedback
There is: http://webstandardsgroup.org/go/resourcecat12.cfm Feel free to add your own work to this section, as that is what it is for! Russ That's that only thing I could find in what is an aesthetically pleasing design that is a credit to the WSG. Maybe it's time for a WSG Member's portfolio? * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] New site - looking for feedback
Hi Mike, I can't contribute anything on the mac side, but I have to say I like it. I like the graphic device of using the fine white lines across the page and down. Nice effect. And the transparent effect in the heading looks great too. Very smooth. Well, I'm just a lowly coder, but on behalf of the designer, thanks :) I think it's a clever way to use boxes as wide as the whole screen to overlay one colour over another so it looks like there is a LOT more work in the different sections than there actually is. Screen background in the dark red, then the middle wrapper box overlayed with the olive colour, then the white lines through it looks like you have a gazillion table cells there, but in fact there aren't any. Horizontal line work is actually quite simple with CSS. Just use top/bottom borders and wrapper divs that span the entire width of the page. Vertical line work (that spans the entire height) can usually only be done with background images. And become a right pain when dealing with fluid layouts in particular. Can you tell us a bit about the design process? Did the graphic designer start out with standards compliance in mind or did you take the sketch/gif/PDF design or whatever and force it into compliance? How much does your designer take CSS techniques into account when designing? Well, to be honest, its been an on-going battle with the designers (which Mark Stanton and I are slowly winning). The bottom line I guess, is getting your designers to think in terms of boxes. We try to educate our designers as much as possible as to what can be achieved with CSS. Once they get a grasp of the box model, they tend to design sites which are usually relatively easy to code for. Meaning very little input from us programmers during the design phase :) The biggest issues I come across are vertical repeating background images; images that span multiple boxes and content that requires mixed padding. Especially when a designer wants headings to begin inside a padding area. Always a pain in the rear as you then either need a single redundant div to contain the rest of the content (if we're talking about a H1) or setting up multiple rules for ALL the possible html elements (ugly). I must say one thing at this point, background images are your friend. It is WAY easier to achieve a complex *looking* site using background imagery than it is using inlines images and excess html/css. The home page must have been a challenge - all those boxes to line up. How will you keep them more or less in balance once they start adding content to it?Are you having a CMS back end on it? I've tested it with various amounts of content in all columns (nav and side bar included). It all works fine regardless of the amount of content. The amount of content really makes no difference since all columns are float:left and the footer set to clear:both. I think I threw in a hr or br with clear:both for good measure. As for a CMS, yes, it will be completely CMS driven. We're currently using ShadoMX built by our parters Straker (http://www.straker.co.nz/shado). Heres a couple of our other (largely) CSS based ShadoMX sites: http://www.ccfa.org.au/ http://www.thegeorgeinstitute.org/ /shameless_plug I know you're looking for html/css comments, but to tell the truth, the site just looks brilliant in my browsers. If it was my work I'd be telling everyone in the world. Much appreciated :) Cheers, James Silva Web Production Gruden Pty Ltd Tel: +61 02 9956 6388 Fax: +61 02 9956 8433 Email: [EMAIL PROTECTED] Web: http://www.gruden.com * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] New site - looking for feedback
Hi Miles, The first thing I though was 'oooh, how did he get the Go buttons to align so nicely with the form fields?', coz I had been trying to do it without resorting to a table or the deprecated align=absmiddle parameter. Then I realised you're using images which gets around the problem, however this will eventually become an accessibility issue as the only way to submit the forms will be via href=javascript:submit() on the image, no good for screen readers. As soon as you replace the img with input type=image I'm pretty sure you'll have the same alignment issues I had. If anyone knows of a solution for this I'd love to know! Nope. It's a input type=image I know exactly what you mean though. I spent more time on that silly search form than any other element on the page. It basically came down to a balancing act of padding, IE box model hack, vertical-align, height and font size. I just kept fiddling with each untill it appeared ok in most browsers. Using IE6 and my goal for perfect. Unfortunately, I don't have any hard/fast rules for inline form elements. Every browser seems to treat them differently. That's that only thing I could find in what is an aesthetically pleasing design that is a credit to the WSG. Maybe it's time for a WSG Member's portfolio? As Russ mentioned, there is a Built by members section at: http://webstandardsgroup.org/go/resourcecat12.cfm Thanks for the feedback. James Silva Web Production Gruden Pty Ltd Tel: +61 02 9956 6388 Fax: +61 02 9956 8433 Email: [EMAIL PROTECTED] Web: http://www.gruden.com smime.p7s Description: S/MIME cryptographic signature
RE: [WSG] New site - looking for feedback
Oh ffs... Sorry people (about the sig... again). Heres the original... Hi Miles, The first thing I though was 'oooh, how did he get the Go buttons to align so nicely with the form fields?', coz I had been trying to do it without resorting to a table or the deprecated align=absmiddle parameter. Then I realised you're using images which gets around the problem, however this will eventually become an accessibility issue as the only way to submit the forms will be via href=javascript:submit() on the image, no good for screen readers. As soon as you replace the img with input type=image I'm pretty sure you'll have the same alignment issues I had. If anyone knows of a solution for this I'd love to know! Nope. It's a input type=image I know exactly what you mean though. I spent more time on that silly search form than any other element on the page. It basically came down to a balancing act of padding, IE box model hack, vertical-align, height and font size. I just kept fiddling with each untill it appeared ok in most browsers. Using IE6 and my goal for perfect. Unfortunately, I don't have any hard/fast rules for inline form elements. Every browser seems to treat them differently. That's that only thing I could find in what is an aesthetically pleasing design that is a credit to the WSG. Maybe it's time for a WSG Member's portfolio? As Russ mentioned, there is a Built by members section at: http://webstandardsgroup.org/go/resourcecat12.cfm Thanks for the feedback. James Silva Web Production Gruden Pty Ltd Tel: +61 02 9956 6388 Fax: +61 02 9956 8433 Email: [EMAIL PROTECTED] Web: http://www.gruden.com * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
