[WSG] ordered list for events
Hi all, I've got a simple list of events with dates and am trying to keep it as a simple ordered list. http://www.c41.com.au/test.htmlshows my example with everything else stripped out. (the css is inline just for ease of creating the example.) I thought I had it sorted until I realised that it goes a bit out of whack when the event name is long and wraps back down underneath the date. I'd like to have the event name wrap - but just under itself - basically the same as a simple but ye olde table structure would where each date/event name were in a different table cell. any ideas on how to get this working nicely or a better way of doing it? pete ottery
RE: [WSG] ordered list for events
Title: RE: [WSG] ordered list for events thanks everyone! in response to a few of those questions: Gary wrote: I realise you have said you want to keep it as a simple ordered list - but I am not sure of the reason why. glory ;-) nah, I guess I'm just getting a real kick out of not using tables wherever possible. I still use them (tables) every day for anything tabular more complex than this, ie: we're still friends ;-) Scott wrote: why did you use an ol? to be honest (and a little embarressed), i didn't know any better. there, i said it :) i havent used DL's before, but i will be now. Russ wrote: Many ways to skin a cat. A standard table is acceptable but so is a definition list: http://www.maxdesign.com.au/jobs/css/peterottery.htm many, many thanks. that fits my needs exactly and i even got a file named after me! ;-) thanks all, extremely helpful. pete
RE: [WSG] big trouble...still!
Title: RE: [WSG] big trouble...still! Can someone please check again for me? yep, its good to go, it did crash my IE6 on Win2k before, but all is fine now. pete
[WSG] a horizontal ol drops the numbers..?
gurus,
can anyone tell me
why this code...
-
style
type=text/cssli {display: inline}/style
ollisome
text/lilia little more text/lilianother
bit/lilieven a bit
more/li/ol
-
...drops the numbers
from the start of each list item as soon as you make the list run
horizontally?
I want to keep the
numbers at the start of each item(its for a horizontal 'step by step' type
indicator) so if anyone has any insights on how to achieve that, that would be
tops,
cheers,
pete
RE: [WSG] What Causes Selection Problems In IE.
Title: RE: [WSG] What Causes Selection Problems In IE. Russ wrote: Here is a test page to show you. Check it with Win/IE6: http://www.maxdesign.com.au/jobs/css/try-and-highlight-me.htm mmm, interesting, without wanting to sound like an IE fan ;-), I can select that text no problem using Win (XP) with IE6. i can drag and select, double click selects a word, triple click selects all the words... no probs pete
RE: [WSG] Second try with [a name]
Title: RE: [WSG] Second try with [a name] Taco wrote: my suggestion was to put nbsp; between the tag, and then set its style to not display so it does not take up any space, something like a name=c44 class=anchor/a If you set display:none on the links opera and mozilla wont recognize them to be on the page and therefore the links *to* them dont work. you might be better off making font-size: 1px with a colour to match the backgound so they are still there, just invisible. or doing this as was suggested earlier i think can avoid all this... a name=c44 class=anchor / pete
RE: Opening pages in new windows... was Re: [WSG] XHTML (OT??)
Title: RE: Opening pages in new windows... was Re: [WSG] XHTML (OT??) p.s. I don't work for f2.com.au i do :) although before i look at the code behind that example (*preparing to grimace*) I'll let you know we have got a fair way to go with standards in general. we are on it though. right now in fact! :) and this list is helping bigtime. cheers, pete
RE: [WSG] CSS Rules - Naming Conventions
Title: RE: [WSG] CSS Rules - Naming Conventions yeah I'm known to use id=wrap id=masthead id=nav id=sidebar id=footer etc etc all the time trying to keep the names non-specific to the layout (like id=lefthandnav) cause when/if it changes later to a horizontal nav across the top i'd feel a bit silly :) having a standard set is particularly handy if you have a bunch of sites that use the same convention. makes for easier changes later... i'd be interested to hear if there were problems with hyphens in names? i use them little. i knew underscores were no good, and i think i remember reading somewhere that names that *started* with a number were also problematic.. all ears if someone has some conclusive info.. cheers, pete -Original Message- From: Stumpy [mailto:[EMAIL PROTECTED]] Sent: Monday, February 16, 2004 4:24 PM To: [EMAIL PROTECTED] Subject: [WSG] CSS Rules - Naming Conventions Just wondering what peoples thoughts/methods are when naming your DIV's, ID's, etc. I vaguely remember IE4 not supporting underscores or hyphens, and therefore use camel case, but I'm wondering if people use various standard names like container, body, header, footer, etc... Cheers, Craig Try the new improved Yahoo! Australia NZ Search at http://www.yahoo.com.au * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Opera
I'm curious - does anyone really think that getting things spot on for Opera is important? I'm not sure (someone else on the list may be) but I think Opera is *very* close to adhering to all the CSS2 specs - meaning if you get your page looking sweet in Opera (and mozilla/firebird) everything goes well from there... so yeah, Opera is pretty important from my perspective.. I find IE is pretty forgiving, so your page may lookfine in IE - but it still may have little errors here and there without you knowing. pete o -Original Message-From: Universal Head [mailto:[EMAIL PROTECTED]Sent: Thursday, February 19, 2004 8:45 AMTo: [EMAIL PROTECTED]Subject: Re: [WSG] Opera I'm curious - does anyone really think that getting things spot on for Opera is important? Hasn't this browser got a miniscule user base? And Opera seems to give me almost as many problems as IE anyway. Interested ... Peter
[WSG] double quoting
Title: double quoting Hi guys, theres a CMS (content management system) I'm dealing with that is converting some double quotes to single quotes, so this... div id=content ...becomes... div id='content' ...when published. this is on a XHTML transitional page. Now, I'm a bit removed from the CMS itself, but the dev guy (i'm just a front end guy) thats dealing with it said it may take a little while to correct this but in the meantime he didnt think it was a problem for any browsers so it would be low priority. Can anyone shed some light on whether this is true or whether some browsers will choke on single quotes? I'm a little sceptical about the low priority and am worried about crucial bits of content like this going screwy... cheers, pete ottery
RE: [WSG] double quoting
Title: RE: [WSG] double quoting James wrote: So, as far as I can tell, single quotes on your attribute values are perfectly acceptable (for xhtml1). Havent done any real testing in browsers, but I'd say it is a non-issue. nice! hey thanks for digging that up :) very appreciated. wow, the dev guy here was right. wonders will never cease. ha! kidding. very very kidding :) *slowly walks out of room backwards* pete
RE: [WSG] A new standards based smh.com.au/technology
Title: RE: [WSG] A new standards based smh.com.au/technology Hi Tim, thanks for yr kind words :) I was going to send a note around to the list when we fixed a few things up with it but just havent had time... ok, so few points: * yep, the new tech section is our first live site using css for layout. any site we build from scratch from this point will be using css for layout. if we're ammending old sites we'll probably use the existing (table) layout, but it'll be a case by case thing. * we were all quite stoked in the design team when we got to the end of the first day and hadnt recieved one email from a user saying the layout was funked up or they couldnt read the text or any of the other usual emails we get when we launch something of a decent profile * the validating thing is difficult - for the reasons you pointed out mostly. I think wired had some similar issues with ad tags etc when they launched. There's probably some other bits of code that arent validating either that we can improve on as we go. the projects move so fast that its very difficult to do anything past making sure it looks decent in IE5, 5.5, 6, Opera, Mozilla, Safari - and then we're away. We value the importance of validation bigtime, but we dont kill ourselves over it. hence we've chosen the 'transitional' approach. * we've learnt more about css layouts since the design was locked down (first week of jan) and while the positioning of the left and right columns are floats in this design, we'll be using absolute positioning for those columns in the future. mainly to get the main content further up in the markup. * to answer How were the 'forces of power' in f2 convinced to invest in web standards and what commitment by management was needed? question: a) we illustrated how much money we'd save on serving costs due to lighter pages. Its hard to predict an exact figure but I think it'd run into hundreds of thousands of dollars once we convert the whole network over to css. b) we are obviously very focussed on budgets etc - its a commercial business - so as sites are needing quicker and quicker redsigns to keep up with the market and advertising needs we had to standardise and make redesigns as simple as possible. c) better markup = better chances of ratings on search engines d) at the moment our 'network' of sites doesnt look much like a network. css is going to help standardise elements and the look feel. e) easier implementation for the dev guys. now that the pages are cut up into little bit size chunks (divs), they arent fooling around with our non-breaking spaces, br tags, col/rowspans in tables other stuff. and that one has just been proven. easiest and smoothest implementation of one of our designs yet. f) pages load faster We're also lucky to have a great very persuasive manager ourselves who was able to put all this into a message that was even more attractive to the wider Management who really just want to know does it look great? and how much did it cost?. In short, we're pretty excited. And a little nervous. Youve gotta understand, this is pretty nerve racking putting such a high profile design up, (i think its over 400,000 unique users a month now for just this section) and having the design community/this list check it out :) you know that feeling you get when you preview something in opera and your heart jumps up into your throat as youre waiting on it to load.. :) anyway, thumbs up to Andrew Coffey, one of our 4 designers (including myself) here that was the lead designer on this one. Let us know if you can spot any major display errors or anything. In saying that, we've learnt a lot since this design got locked down (as is the way with this css game - its so hard to keep up! :) so keep an eye out for some major improvements across the whole smh/age sites proper over the next few months. if anyones got any other questions, let us know, i could talk underwater about this stuff ;-) pete Pete Ottery Lead Designer f2 - fairfax interactive network P: 02 8596 4450 E: [EMAIL PROTECTED] -Original Message- From: Tim Lucas [mailto:[EMAIL PROTECTED]] Sent: Thursday, February 26, 2004 1:00 AM To: [EMAIL PROTECTED] Subject: [WSG] A new standards based smh.com.au/technology Just received an email[1] from my SMH subscription stating they've launched a new website, SMH.com.au technology: http://www.smh.com.au/technology I have to admit. I was a little cynical and was preparing myself for an onslaught of presentational markup and zilch semantic markup. Off I went and viewed the source of the new website and... low and behold... its semantic markup laid out purely with CSS (otherwise known as a CSS-P layout). Hats off to the f2 network web team (I know you're on this list!) for moving SMH's policies toward a
RE: [WSG] A new standards based smh.com.au/technology
Title: RE: [WSG] A new standards based smh.com.au/technology I'd certainly like to use them if you have no objections. of course not, its an important message. gotta get it out there :) we're going to try to put together a whats new about the design page on the site with some more concise detail on it for future designs. that'll hopefully be a good page to point those clients to aswell :) pete -Original Message- From: Nick Lo [mailto:[EMAIL PROTECTED]] Sent: Thursday, February 26, 2004 11:20 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] A new standards based smh.com.au/technology Hi Pete, Funny, I was going to mention this to the list but I hesitated. However, after your reply below I'm glad Tim didn't hesitate. I don't know about anyone else, but your reasons why, coming from such a high profile site, are a great advertisement/example to Australian clients of reasons to use web standards. I'd certainly like to use them if you have no objections. Nick Hi Tim, thanks for yr kind words :) I was going to send a note around to the list when we fixed a few things up with it but just havent had time... ok, so few points: * yep, the new tech section is our first live site using css for layout. any site we build from scratch from this point will be using css for layout. if we're ammending old sites we'll probably use the existing (table) layout, but it'll be a case by case thing. * we were all quite stoked in the design team when we got to the end of the first day and hadnt recieved one email from a user saying the layout was funked up or they couldnt read the text or any of the other usual emails we get when we launch something of a decent profile * the validating thing is difficult - for the reasons you pointed out mostly. I think wired had some similar issues with ad tags etc when they launched. There's probably some other bits of code that arent validating either that we can improve on as we go. the projects move so fast that its very difficult to do anything past making sure it looks decent in IE5, 5.5, 6, Opera, Mozilla, Safari - and then we're away. We value the importance of validation bigtime, but we dont kill ourselves over it. hence we've chosen the 'transitional' approach. * we've learnt more about css layouts since the design was locked down (first week of jan) and while the positioning of the left and right columns are floats in this design, we'll be using absolute positioning for those columns in the future. mainly to get the main content further up in the markup. * to answer How were the 'forces of power' in f2 convinced to invest in web standards and what commitment by management was needed? question: a) we illustrated how much money we'd save on serving costs due to lighter pages. Its hard to predict an exact figure but I think it'd run into hundreds of thousands of dollars once we convert the whole network over to css. b) we are obviously very focussed on budgets etc - its a commercial business - so as sites are needing quicker and quicker redsigns to keep up with the market and advertising needs we had to standardise and make redesigns as simple as possible. c) better markup = better chances of ratings on search engines d) at the moment our 'network' of sites doesnt look much like a network. css is going to help standardise elements and the look feel. e) easier implementation for the dev guys. now that the pages are cut up into little bit size chunks (divs), they arent fooling around with our non-breaking spaces, br tags, col/rowspans in tables other stuff. and that one has just been proven. easiest and smoothest implementation of one of our designs yet. f) pages load faster We're also lucky to have a great very persuasive manager ourselves who was able to put all this into a message that was even more attractive to the wider Management who really just want to know does it look great? and how much did it cost?. In short, we're pretty excited. And a little nervous. Youve gotta understand, this is pretty nerve racking putting such a high profile design up, (i think its over 400,000 unique users a month now for just this section) and having the design community/this list check it out :) you know that feeling you get when you preview something in opera and your heart jumps up into your throat as youre waiting on it to load.. :) anyway, thumbs up to Andrew Coffey, one of our 4 designers (including myself) here that was the lead designer on this one. Let us know if you can spot any major display errors or anything. In saying
[WSG] classguide
hiya, I noticed that the much publicized new qantas airline - http://www.jetstar.com/- launchedtheirsite with a css layout. I havent had a real look at the code, but my question is more about class and id names. when you have a pretty complicated site and you end up using some sort of naming convention for classes/ids like they have on jetstar such as: class="c1FsFc" ...that classname obviously means something to the web team at jetstar but no one else. does anyone put together a document on handover detailing what everything means in their css to aid any changes down the track that someone else may have to make? kinda like a "classguide" as opposed to a styleguide? it'd involve layout classes and stuff aswell - so wouldn't be as easy as just a page with an example of each style applied to a bit of text ... interested if anyone has this sort of thing or similar built into their process and any experiences youve had.. ? pete
RE: [WSG] Purpose of this mailing list
Title: RE: [WSG] Purpose of this mailing list David wrote: I don't know if I'm for splitting the mailing list up into several lists. Are others in favour of doing this? Or not? I'll put my hand up for not splitting the list and also for leaving as-is. I can deal with the volume and think the continual cross-over between standards opinion/theory and practice is pretty valuable for all the reasons mentioned. the pointers to succinct explanations on Russ' maxdesign site (http://webstandardsgroup.org/resources/) or elsewhere on the web seem to work well and keep the repetitive 'how-to' emails (that are always going to come up no matter what you do) to a minimum thread length. pete Peter Ottery Lead Web Designer f2 network - www.f2.com.au 02 8596 4450
RE: [WSG] New CSS site
http://www.cinema4duser.com
Comments and crits
most welcome.
first
impression: looks lush! very slick. easy to scan/understand whats going
on..
some
real quik thoughts that may relate to the css but also some general stuff (take
with a grain of salt and all that ;-)
with
yr standards alert message("NOTE: You are using an outdated
browser"etc) -you could maybe link to a page in the message with
some links to the browser makers sites - otherwise youre basically saying
"download something better - you work it out" ;-)
I'd
expect the big main pics for the feature article, feature artist to link to
those sections aswell as the "go" button. gotta make those graphics work for
themselves :)
i got
the 'fouc' when i first loaded yr site (http://www.bluerobot.com/web/css/fouc.asp)you could add a print css to avoid the 'fouc' and also
remove some of the graphics from the printer version...?
the
font sizes in some areas are pretty tiny, and i cant re-size them in IE... you
could maybe include a font size re-sizer thing? even if just for the big areas
of text like articles...?
pete
ottery
RE: [WSG] Open source Relevant CSS tab?
Title: RE: [WSG] Open source Relevant CSS tab? El lun, 15-03-2004 a las 04:04, Tim escribió: Sounds to me like the 'Show computed styles' bookmarklet http://www.web-graphics.com/mtarchive/000846.php i tried that but the link to the actual favelet seems to be broken. i eventually tracked it down on this page: http://www.pixy.cz/blog/favelets/ titled List computed (cascaded) style, and while I can get it to work on *that* page, i dont seem to be able to work on other pages after i drag the 'favelet' to my links toolbar or add to favourites and try using it from there...? am i missing something? using WINXP IE6. looks like a handy tool but.. brain..not.. working ;-) pete
[WSG] dreamweaver
anyone using dreamweaver? as far as 100% valid transitional and strict xhtml sites go, can dreamweaver have its preferences etc manipulated enough to be to produce markup and css exactly the way you want? I've always used homesite religiously to handcode sites but may need to look to dreamweaver to satisfy some more complicated templating needs and sharing them across several designers (which dreamweaver looks like it can handle) - i just need to ensure dreamweaver can be whipped into line to produce squeaky clean standards based markup. (and yeah, i've read the macromedia site blurbs - but I was hoping to hear from anyone that has a lot of first hand experience with it - particularly on large scale sites maybe sharing templates between workmates etc) pete
RE: [WSG] Relative Fonts
Title: RE: [WSG] Relative Fonts Kay wrote: we just decided to politely educate each user who complained about what their problem was and why it was better the way we'd done it. Time consuming, but after the first couple it was all cut and paste anyway. ditto here. i had a similar experience once and fired off a standard reply to a few hundred readers. the response to that from readers was unanimously bordering on overjoyed for passing on that info. made my day :) incidently, and this may be common knowledge, but if you assign your font sizes with em's the font size controls in IE have a compounding effect - often making smallest unreadable and largest absolutely massive. if you use %'s to define font sizes the extreme variations are reduced and you may find you dont get as many compaints. pete Peter Ottery Head of Design f2 Network (02) 8596 4450 [EMAIL PROTECTED] www.f2.com.au
[WSG] theage.com.au: new design
hiya, we relaunched theage.com.au todaywithimproved markup and a css layout. http://theage.com.au/ a couple of points of interest: a big part of the redesign was improvingthe markup- ie: obviously using h tags and ul tags etc. still have a ways to go and it'll be a learning process for the many editors etc that maintain the site (which is why you may come across some irregularities in parts of the site). the pages pass thru s many sets of hands to make it to the live site (so be gentle :) eg: - information architects - design (me) - CMS/tech guys - editors the layout is centred and fixed width - mainly for editorial reasons/requests for tighter control over positioning and relationships between elements on the page (eg: pictures relating to headlines). the default css is for a layout that fits at 800 wide, then a script detects if you are browsing at 1024 wide or higher and loads a 1024 csslayout (which just overrides some of the width values etc). this was to satisfy the need for tight control over the layout but to also try to optimise the layout for the ever growing 1024+ audience (stats below). some interesting stats: in the last monththeage.com.au hashad 1,718,644 unique visitors browser stats for the last month IE6 - 73% IE 5.5 - 9% IE 5.5 - 9% IE 5.0X - 7% Mozilla - 1% Firebird - 1% Safari -0.7% screen res stats for the last month 1024x768 - 55% 800x600 - 27.4% 1280x1024 - 7% 1152x864 - 3.3% 1400x1050 - 1.35% (those %'s wont add up - they are just the main ones :) page weight (markup only) yesterday - 65k today - 37k any thoughts/feedback/problems spottedappreciated - as long as they're relevant to this list of course (if they're not feel free to email me directly). pete Peter OtteryHead of Designf2 Network(02) 8596 4450[EMAIL PROTECTED]www.f2.com.au
RE: [WSG] theage.com.au: new design
Title: RE: [WSG] theage.com.au: new design hi, Justin wrote: Firefox loses it's navigation bar (left) when resized down from 1024 to 800 wide and place a 1px border or padding on the left edge of the layout, which will force your layout to disappear off the right edge of the window only (not the left), which will mean the behaviour is normal for a 1024 layout viewed at 800. Martin wrote: strange behaviours happening with overlaps and the left column disappearing out of the viewport at sizes smaller than 800x600 I did see this before but figured it was something we'd (unfortunately) have to live with - but i've just implemented your suggestion Justin (HUGE thanks obviously! :) of a 1px padding on the left of the #wrap and firefox now looks to be behaving correctly, with no adverse affects on anything else : http://theage.com.au/ one thing though, as you scale your window down in Firefox, below 800 wide, you'll see the adverts keep drifting - and still cover up some content... any ideas let me know ;-) how good is this list! pete
RE: [WSG] theage.com.au: new design
Title: RE: [WSG] theage.com.au: new design Hi Tim, re I noticed, was in the print style sheet where you've set a 600px width for #content. Shouldn't you be letting the UA set it's own margins for printing? yep, guilty as charged, in a mad rush i put that in as a quick solution (opera seemed to chop off the last word or so on the right when i didnt specify a width..?) but i'll be looking at that today to get a more scaleable solution re have you considered including a rule in the print stylesheet for those using CSS3 capable browsers to print the URL of links? i will now ;-) cheers for yr feedback, pete -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]]On Behalf Of Tim Lucas Sent: Tuesday, April 20, 2004 6:04 PM To: [EMAIL PROTECTED] Subject: Re: [WSG] theage.com.au: new design Peter Ottery spoke the following wise words on 20/04/2004 10:27 AM EST: hiya, we relaunched theage.com.au today with improved markup and a css layout. http://theage.com.au/ Peter, once again my hat goes off to the f2 team. One interesting choice , I noticed, was in the print style sheet where you've set a 600px width for #content. Shouldn't you be letting the UA set it's own margins for printing? Also, have you considered including a rule in the print stylesheet for those using CSS3 capable browsers to print the URL of links? -- tim lucas www.toolmantim.com
RE: [WSG] theage.com.au: new design
Title: RE: [WSG] theage.com.au: new design James wrote: It's great to see such a large site being discussed openly on the list. agreed. feels a bit weird - but hey, we're one big happy family right? ;-) Other than what has been discussed, the only I thing I can see is the markup: p class=standardsNote That will be visible to your search engines... it would be better to put this behind a help link on the site. also agreed. to be honest we were worried about the NS4 crowd (and other similar browsers) seeing the unstyled page and hoped that this message would ease the shock and provide some useful info. what has occured is not ONE such email, (which is obviously great) so we are ripping it of shortly. thanks James :) pete
RE: [WSG] SMH launch
sorry, bit late, re my question of any ideasof a way to make these browsers keep the background image aligned hard left and not adversly affect anything else? (on http://smh.com.au/) and Justins alternative ideas: Alternative #1"attach the background image to something other than the body (like #wrap)"i wouldve - but the layout that we settled on has the left and right columns "position:absolute" for a few other reasons so when the left or right cols are longer than the centre column, the background doesnt tile all the way to the bottom of the page. tried various methods of adding a height to the #wrap but all options seemed to have a 'gotcha' :) (a bad side effect) Alternative #2"perhaps the line effect you're trying to achieve can be done some other way, negating the need for the image at all"for reasons related to the above absolutely positioned columns, a background image was the only way to go Alternative #3"Ignore what's happening, and put a solid white background behind that left nav bar, so that when the BG image goes under, it doesn't obstruct the navigation."bingo. actually made this change last thurs after yr email made the bg the same colour as the nav (light grey - actually, get this, its #F2F2F2, as in,F2 is where i work :)that degrades much better for opera and mac ie now. thanks again Justin. thats 2 for 2 ;-)cheers,petePeter OtteryHead of Designf2 Network(02) 8596 4450[EMAIL PROTECTED]www.f2.com.au On 29/04/2004, at 1:27 PM, Peter Ottery wrote: when we launched theage.com.au last week Justin pointed outa way (adding 1px padding to the left of the main "#wrap" div) to make Firefox keep the background image aligned hard left with the content when your browser window was narrower than the content - and stopped the background image becoming mis-aligned with the content. Even tho that fixed it in Firefox the problem still exists in Opera and mac ie. Heres a screenshot of the new smh site with a browser window set narrower than the content (note the body bg mis-aligned with the left nav): http://www.c41.com.au/test/opera7_2_squished.jpg any ideasof a way to make these browsers keep the background image aligned hard left and not adversly affect anything else? pete
RE: [WSG] SMH launch
hi y'all, yep, http://www.smh.com.au/went live this morn. For anyone who has ever read both http://theage.com.au/(launch mentioned last week) and smh will know they have used the same basic page templates for a few years. The css redesign of both sites has obviously continued that common base - hence the major similarities in layout but some different colour/graphic treatments. annnyway, thanks for the early compliments - appreciated - I think there are some unrelated network problems happening at present so if you cant see the site right now that'd be why. hopefully will be fixed shortly. in the meantime I'll take a shot at answering these questions Benvolio:) ~ How you identified a redesign was necessary from a business point of view: they had a long list but briefly, we needed to improve "breaking" news ( making more prominentthe amount of content that is updating constantly), make space for different ad formats,be able to makespecial sponsored sections in a short turnaround, make the whole site faster. from a design point of view: the site was becoming a bit of a rabbit warren. heaps of content that, at times, was unfindable. the markup was old and we figured we could speed the whole site up using css/xhtml. the visual design was also a bit "loose" - meaning a bit free and easy with lots of differences between different pages. we wanted to achieve something more structured and of a higher quality. ~ How you got buy-in from the key stakeholders that a redesign was necessary it was almost the other way around. the key stakeholders have been after a redesign for a long time. resources and many different departments looking for different things in a redesign meant it took a long time to finalise. ~ What were the target areas you wanted to improve and update Breaking News: The perception from users was they were unaware when and how often our site updates during the day.sounds like basic stuff but a ticker, a clock, more prominent links to breaking news, and rotating pics are the main improvements here. Dead ends: article pages also had some major problems in that they had 'dead ends' when you finished reading the article (nowhere to go but scroll back up the page or go to another site), so search/more news links/main section links have now been added to bottom ofarticles. Graphics: consistent style/sizes were needed to tighten the design up More logical navigation: as mentioned, the old site was a bit of a rabbit warren. we've tried (and there's still room for improvement here) to organise these in a more logical fashion ~ What kind of usability // surveys // focus groups // lab // eye tracking testing you did basic goal orientated usability testing / focus groups / online surveys / user testing with regular cameras and also groups of users using the site with us watching from behind a1 way (?) mirror like CSi miami ;-) ~ How you migrated the templates (you guys use Fatwire as the backend yeah?) had to ask the tech guys about this one :) Fatwire? yes. templates weren't migrated as such. they were rebuilt from scratch. and the the templates are broken up into little blocks and are common across sites (smh/age) ~ How you went about browser testing and what browsers you promised the stakeholders you would test for we have a person dedicated to testing once the page is in the final stages of dev. We do our own testing before a design reaches dev though. we drew the line at IE5 earlier this year- so we promise/support/test in IE 5.0, 5.5 6, Moz 1.5, Firefox 0.8, Mac IE5+, Safari, NS7. Its basically just a numbers game. eg: we dropped support for IE4 because the numbers got low enough and not supporting it means we can be more adventurous with the design/css and concentrate on providing enhancements to the larger % browsers noted above. ~ How rigorous was your test plan the dedicated testing person basically has a running sheet of things to test and probs found. its pretty comprehensive but things still do slip thru - that's just web page making :) my testing is basically the same as Russ' and many others on this list recommend - build a small bit - test across browsers, move on in a modular fashion. you end up with a great knowledge of the reasons behind the errors and can pinpoint probs quickly. In saying that, probs still come up. things like a problem that has just come up for Moz/FireFox that *don't* have flash installed on the frontpage have unfortunately become apparent after launch and are being fixed shortly. apologies if you are one of those crew. the (flash) breaking news ticker didn't render and caused the layout to do funny things - and yes, we do need to improve the flash code. ~ How many releases and iterations you diddo before final release there was probably about 15 or 20 decent increments in the initial design phase. can bring some of these to the WSG meeting. In between these though were
RE: [WSG] SMH launch
when we launched theage.com.au last week Justin pointed outa way (adding 1px padding to the left of the main "#wrap" div) to make Firefox keep the background image aligned hard left with the content when your browser window was narrower than the content - and stopped the background image becoming mis-aligned with the content. Even tho that fixed it in Firefox the problem still exists in Opera and mac ie. Heres a screenshot of the new smh site with a browser window set narrower than the content (note the body bg mis-aligned with the left nav): http://www.c41.com.au/test/opera7_2_squished.jpg any ideasof a way to make these browsers keep the background image aligned hard left and not adversly affect anything else? pete
RE: [WSG] CSS solid lines and Opera
How do I show solid lines in a table with CSS to properly display with an Opera web browser? that example code you've supplied makes a border on all 4 sides of a TD in my copy of Opera (v7.22 on PC) Could it be that other classes on your project are causing the prob? Like a negative margin/padding on the outer table or something? At this point many others on the list would probably say "post and example online so we can see the prob in context" :) pete
[WSG] about that new way to clear floats
so you know how there's that new way to clear floats... http://www.positioniseverything.net/easyclearing.html just wondering how everyone is gauging that method? I mean,the "hack" used up until now of adding a div style="clear:both"/div (or similar) to properly clear floats when needed is pretty straightforward, albeit a bit of code that always felt unnecessary... But this new method has the _javascript_ requirement to fix mac ie5 and uses the "holly hack" anyway. to me, at least initially, it feels like a bit of a "rabbit warren" style of fix, meaning it seems more convoluted than the problem its solving... I guess I just wanted to know if everyone is going to jump in and start using that new method or wait and see if it has some pitfalls? (similar to the whole image replacement technique thing or the box model hack that initially sounded likea godsend for some situations but has come unstuck as a method as time went by...) Pete
[WSG] position:absolute problem
hiya, this is hopefully a simple little problem - but my brain is refusing to work today :) on this test page... http://c41.com.au/test/position_test.html(yep, validated) ...is the example of the problem (i've stripped out all the extra html/css to make it easier for you to peruse) I want the blue box to appear at the bottom left of the red box (so itsinside the red box) - and i want the text to overlap it. In IE6 PC, the blue box appears at the bottom of the content - so, outside the blue box altogether, not good. In Mozilla the blue box appears in the right spot but it overlaps the text. I need it the other way around so the text overlaps the blue box. Now, I'm aware of a little "hack" if you add "width:100%" to the ".main" div the blue box pops up into the desired position in IE, but a) I'd rather not apply a width and b) that hack still leaves the blue box overlapping the text (and i've tried fiddling with z-index, see the example) ideas? pete
RE: [WSG] Redesigning smh.com.au amp; theage.com.au with css
Title: RE: [WSG] Redesigning smh.com.au amp; theage.com.au with css Nancy wrote: This seemed like a very interesting meeting, would it be possible to publish the actual CSS files? Hi Nancy, thanks for yr interest :) By 'actual CSS files' I assume you mean for the sites discussed - smh.com.au theage.com.au..? Point your browser in the direction of those URL's and dig away :) I should mention, in a recent development (since the presentation), we've inlined the CSS on the homepage - primarily for performance issues. Granted the nature of CSS makes so much more sense when it comes from a central linked file/s - but the situation with these news sites and the amount of sustained traffic they get at peak periods meant inlining the CSS made a noticeable difference in load time over a modem (and even a small difference could be observed over a network connection). All other pages (articles etc) have a linked css file as normal. pete Peter Ottery Head of Design f2 Network (02) 8596 4450 [EMAIL PROTECTED] www.f2.com.au
RE: [WSG] Redesigning smh.com.au amp; theage.com.au with css
Title: RE: [WSG] Redesigning smh.com.au & theage.com.au with css Hiya, sorry, dont mean to add to the list traffic too much but just wanted to point out that your Mozilla extension added in some of its own styles etc when used to copy and paste those styles Amit. (changed colour values to rbg and added things like "border: medium none"...) cheers, pete I was just going to say that Pete :) use firefox/mozilla and dig out the CSS with the 'web developer extension. Here you go Nancy. Regards, Amit Karmakar www.karmakars.com snip pasted smh css was here/snip
RE: [WSG] Div CSS VAlign
Title: RE: [WSG] Div CSS VAlign Can someone help with how I align a DIV Layout made with the x and y scale vertically and horizontally a google search for vertical and horizontal css centered div gives the following urls that may help you out - tho I'm not sure I've nailed your specific problem... http://www.hicksdesign.co.uk/journal/30/vertical-centering-with-css http://www.hicksdesign.co.uk/journal/62/vertical-horizontal-centering-2 and those pages eventually led me to this example: http://www.wpdfd.com/editorial/thebox/deadcentre4.html hope this helps, pete
RE: [WSG] 4-column layout
Title: 4-column layout is there any examples that allow for a mixture of fluid and fixed divs? can you have any of the columns position:absolute or do they all have to be floated? (maybe you have a requirement for a footer to run right across the bottom of the 4 cols etc?). just thinking it may be easier if the extreme left and/or right columns could be position:absolute... pete
[WSG] RE: Image replacement techniques for linked elements
Title: Re: [WSG] sitecheck on Mac (Safari, IE5) and Win (IE 5/5.5) please? Scott wrote: Has anyone had any luck with an image replacement techniques that leaves the link available? Hi Scott, We use a variant of image replacement for the section headings on the homepage of www.smh.com.au ie: the section headings in the main centre column start about 800px down the page - "WORLD", "NATIONAL", "SPORT" etc in the blue font - all caps. these are still linked. the actual (non graphic) heading is just using the technique [1] of making the font size 1px and white (so its not visible on a white page) leaving the background image visible. the link that contains the heading is given a width height and display:blocklike your example so that the link "hotspot" is forced to stay big enough and cover the desired area. That has worked for us pretty well. Haven't had any complaints about weird display or anything the css is all inline on the homepage so its easy to "take a look under the hood" :) I dont mind it. With css disabled the heading is just a linked heading. I should say I'm not a fan of image replacement techniques in general but in this case for us we had the need to use a graphical heading font (to match the offline product) and didn't want to bloat the page with lots of images. (we used sprites and loadedwhat we couldinto sprites [2]) cheers, pete [1] http://www.maxdesign.com.au/presentation/headings-as-images/index.cfm#option4 [2] http://www.alistapart.com/articles/sprites/ Peter OtteryHead of DesignFairfax Digital Level 3 Wharf 7 Pirrama Road Pyrmont NSW 2009T: 02 8596 4450 F: 02 8596 4466 M: 0403 192 858E: [EMAIL PROTECTED]www.fairfaxdigital.com.au
RE: [WSG] RE: Image replacement techniques for linked elements
Title: RE: [WSG] RE: Image replacement techniques for linked elements James wrote: I have my minimum font-size set to 12px, so websites can't set text I can't read (or see for that matter) - like 6px :D. I think this is rendering your (ed: smh.com.au) plain text headers to be 12px - and they are appearing over the image headers on the smh.com.au home page ... making both types of headers unreadable. GOLD medal to James in the advanced font setting relay! :D you are the 1st person *ever* to pick that up. seriously tho, cheers for that, a valid point indeed, and noted. James then wrote: I've done this on one of our new websites (text changed to make more sense in this context), and it works quite well with images turned off or on. Or am I missing the point of image replacement techniques? h1a href="" title=link to the sport page img src="" height=60 width=470 alt=sport / /a/h1 nah i dont think yr missing the point. looks like a solid method. The major benefit for us at present for the method we used is the lower strain on the server. ie: having the image as a background image that is part of the sprite image and called once, used repeatedly for a bunch of other images, and eases the load on the servers a fair bit. Can someone out there in accessibility guru land tell us if an image (only) used as a h1 heading is as good as regular text used as a h1 heading? ie: does the alt text on the image (in James' example above) become the defacto heading and get used in the methods the screenreaders use to scan headings on a page? At the WSG meet earlier in the year that David Woodbridge from the Royal Blind Society came to and demo'd that shortcut used that popped up a box with all the headings on the page listed... just wondering if an img's alt text would show up in that list - and other similar scenarios/readers...? James wrote: not sure how it works with search engines i dont know if anyone would know for sure (other than the search engines themselves). Google reads alt text on images - but whether it finds that alt text within a h1 tag and then assumes that's the heading and applies the same points to it when the googlebot scans the page is another thing... pete :)
[WSG] list item markers disappear behind floated image
Title: list item markers disappear behind floated image Hi, I have a problem with images that are floated left and then when a list wraps around that image the list bullet points themselves dont get pushed out by the floated image and instead remain behind (or on top of) the image. to help explain i've put a simple demo page together to show the problem in its most basic form explain in a bit more detail: http://c41.com.au/test/ul_test.html the css is all inline very basic. the img tag has an empty src on purpose. this is just an *example* of the prob. dont fear, the execution looks better than the example :) basically what I'm looking for is if there is a way to make the list item markers always obey the floated image, but just behave as normal when the image doesnt appear. any help greatly appreciated. hope i've explained this well enough... pete ps: apologies if my emails arrive in your inbox as html or rich text. I send them as plain text and i think the mail server here forces them to be plain/rtf on the way out. please dont reply to this list about this problem.
RE: [WSG] list item markers disappear behind floated image
Title: RE: [WSG] list item markers disappear behind floated image
Russ wrote: This may sound insane but the problem is fixable by floating the ul element.ul { float: left; }
that does sound weird but on reflection of the finer points of the behaviours of floats, does make sense. fix a float with a float...
this method should do the trick for my situation as the next thing after the ul will need to be clear:left anyway. so thanks! :)
drew wrote: Try giving the ul list-style-position:inside. No need for additional p or div.
ah ha! so thats what list-style-position:inside is for. have often wondered. the only drawback i can see from that is that when the list item text wraps, it wraps right back underneath the marker (and your text isnt all nicely aligned left). Again, in my situation this wouldnt affect me cause the text is of a gauranteed length and wont wrap (in all but the most exteme cases of text sizing, and I'm not concerned about alignment in those instances) so I can use this method aswell.
thanks guys! not 1 but 2 workable solutions. great stuff.
cheers,
pete
ps: in breaking news (sorry, cant help myself) please dont reply to this list about this, but there are 2 whales outside my window *inside* darling harbour (past the bridge in sydney harbour). theres a bunch of people taking photos so hopefully one will end up on shameless plughttp://www.smh.com.au//shameless plug. which uses a css layout. see. on topic ;-)
[WSG] [OT] Employment opportunity in Sydney - Reply off list
Below is a job opportunity at the company I work for.Please reply directly to me off list if you are interested.Permission was granted for this off-topic post by the list organisers. Apologies for the outlook formatted html email. oh the irony ;-) cheers, pete=Fairfax Digital is looking for a highly experienced full-time Web Designer to join the Creative Services team, located in Sydney. Fairfax Digital is one of Australia's largest online publishers with a network of 35+ sites that includes: http://www.fairfaxdigital.com.au http://www.smh.com.au/ http://www.theage.com.au/ http://www.mycareer.com.au/ http://www.domain.com.au/ http://www.drive.com.au/ We want to speak to you if... You are first and foremost a standout visual designer. You have a demonstrated ability proven track record to design large and/or commercial web sites that are attractive, simple and functional. (Include links to examples of your work in your resume). We are looking for a heavyweight Photoshop addict. You are extremely fluent in taking your designs hand coding them using web standards (html, xhtml, css) efficiently in a production environment to produce templates ready to be passed onto backend developers. You have a very strong demonstrated ability with css feel completely at-home using css to its limits to construct page layouts that realise your intended designs, and are accessible valid. You will need to be a heavyweight Homesite, BBEdit, Dreamweaver (code view) or similar user. (We are a PC based team.) You thrive in a collaborative team environment with other designers and information architects. We are looking for a dynamo communicator that expresses themselves well in a team, can follow art direction can also work autonomously with clients/stakeholders on large projects. Your communication collaboration skills will be as highly regarded as your technical skills. You have a demonstrated awareness of business and marketing issues and understand their relationship to web design You have a proven understanding of accessibility usability and their relationship to web design Bonus skills that would be highly regarded: _javascript_, Microsoft Visual Studio .NET, XML, vector graphics (adobe illustrator etc) Salary: In the range of $60,000 - $65,000If you meet the above criteria, please apply by: Sending an email with a cover letter (within the body of an email is fine) telling us why you would like to work for Fairfax Digital and how you meet all the above criteria, along with an attached resume (word doc or PDF no bigger than 1Mb) detailing your qualifications, work history capabilities. Important: You must include examples (or links to examples) of your web design work in your resume. Showing us live sites is going to help. Send the email to me (pottery at fairfaxdigital dott com dott au) by 6pm Friday 17th September '04. note: email address formatted this way to avoid (ok, reduce :) spambots. Peter OtteryHead of DesignFairfax Digital Level 3 Wharf 7 Pirrama Road Pyrmont NSW 2009T: 02 8596 4450 F: 02 8596 4466 www.fairfaxdigital.com.au
RE: [WSG] Best Aussie and Kiwi web standards designers
Title: RE: [WSG] Best Aussie and Kiwi web standards designers Andy asked However I'm always on the lookout for more cool, standards compliant sites, so wondered who you guys felt which companies and individuals were turning out the best work down under? 2 that i'm pretty sure are on this list: http://www.freshweb.com.au/ http://www.glassonion.com.au/ and http://waferbaby.com/ which is related to: http://www.segpub.com.au this is just a quick blurt from my short term memory and i'm in no way affiliated with any of these. anyone else? pete
RE: [WSG] Table-style admin layouts
Is there a best-practice way to build an item display with multiple columns, but without using tables? Name Price Quantity Edit Delete Apple $5.00 25 [edit] [delete] Pear $4.00 3 [edit] [delete] Banana $12.00 5 [edit] [delete]1 vote for "thats table data - use a table"and your bananas are very expensive.:) pete
RE: [WSG] Is XHTML harmful?
Kim wrote: Now I would like to know what your arguments would be for using xhtml.Hi everyone,have heard and understand all the good responses on this question. As usual the decision can vary depending on your needs.I'd like to offer one reason why it has been a good decision for us here at Fairfax Digital (or potentially the better known smh.com.au [1] theage.com.au sites).When we proposed and pushed the idea of using css for layouts, it was (and still is) a radical change for many parts of the business and the way the sites are developed. Many hands work on our sites. We still run into lots of problems with markup errors due to that amount of content that comes from different areas/hands. The fact is we have many people within the organisation that are still coding ala 1998 style. missing /p tags, or no p tags, no headings, unclosed tags, lists using br's, unencoded entities, etc etc. probably every sin in the book.When we started spreading the message of CSS and standards internally we knew that if it succeeded it would take a long time then stick for a long time. We have lts of sites that often don't get a code revamp for years. Hence we wanted a plan that had some legs.The reason we chose xHTML had a lot to do with speading the message that xHTML stands for. ie: tidy, lean, valid code etc. yeah i know its a lot more than that but for these people, thats the point that concerns them. We needed to get people realising that its important to close your tags, its important to make your tags lower case, its important to use a hx tag for a heading. (yeah its probably a heading 'element', not tag, but you know what i mean ;-)So when we 'sold' the CSS concept internally, we 'sold' xHTML along with it, and everything that goes along with it to focus attention on better coding practices.So yeah, that may sound crazy for some, but its a real world situation for us, and its something that has seen massive benefits. Its working. The xHTML doctype and standards mode (as opposed to quirks mode) is helping to focus attention internally on the need for better markup. We aint perfect, but its a big organisation and these things take time. Product managers (who have no idea what CSS even stands for) now want to know if their new design will use xHTML and sprites. funny, but true.I'm glad we jumped in though and am comfortable with our stance on the subject. If we waited till our sites were valid before doing anything, I fear we would never even get into the game. [1] I did a preso at a WSG meet a while ago on the redesign of this site using css, heres the link if yr interestedhttp://webstandardsgroup.org/go/resource210.cfm cheers,petePeter OtteryHead of DesignFairfax DigitalLevel 3 Wharf 7 Pirrama RoadPyrmont NSW 2009www.fairfaxdigital.com.au
RE: [WSG] Is XHTML harmful?
Title: RE: [WSG] Is XHTML harmful? Lachlan wrote: On use of validation: valid code is not difficult. Pete, I'm assuming from your comments that you aim for valid code by changing institutional practices rather than programmatically? Agreed on both. The reality in big organisations is developers have a long list of things to do and correcting code that may not be causing a problem for the business right now, today, in $ terms, usually doesn't get a high priority on that list. and pages consequently sit there, invalid. Of course its the purpose of this list and all of us on it to re/educate people/clients, highlight the benefits, reverse that practice so we get this thing right. pete
[WSG] navigation using arrows for location
so I've designed myself a nice looking navigation scheme that displays visually whereabouts you are within a site. Now I just need to work out how to sort out the css :) Here's what I want it to look like: http://c41.com.au/test/sample_nav.gif I'm *not* after any dynamic or popout (suckerfish [1]) type functions. Essentially the tricky bit is going to be the light red lines/arrows and working out how to get them in the right spot. ie: so they'll adjust to line up with the section you are in. There's also going to be content below this navigation, so if one of the lists grew really long it should push down the content (ie: may rule out absolute positioning) Wondering if anyone has some immediate ideas or even has a similar example..? Ideally I'd imagine the html should look something like this: ul id="nav" li class="active"By Expertise ul li class="active"Architecture ul liWoodCentre/li li250 Latin Street/li liEl Changeo/li li2 Changed Ave/li liChangewood Facilities/li li class="active"Active Project/li liPark in Perth/li! li11 Smith Street/li li58 amp; 88 Changed St/li /ul /li liInterior Design/li liUrban + landscape design/li liHeritage conservation/li liConsulting/li /ul /li liBy Location/li liArchive/li /ul any thoughts or help appreciated, pete [1] - http://www.alistapart.com/articles/dropdowns/
RE: [WSG] navigation using arrows for location
hi there, Pete originally said:so I've designed myself a nice looking navigation scheme that displays visually whereabouts you are within a site.Now I just need to work out how to sort out the css :)http://c41.com.au/test/sample_nav.gif then Rob said:That's pretty. Pretty smart stuff.I've some things in my head. Give it a shot, and if you don't succeed,don't hesitate to ask. thanks - hada chat to some of the guys at the WSG Sydney meeting last night. If you put an ID on every li you could achieve the result I'm sure, but themany, many, background images and overly complicated css would make the solution not very workable. Starts to feel like a ye olde table building method. If it is used on a clients sitethey should be able to add some extra li's and it should still hold together. I've had a play with some css and arrived at this: http://c41.com.au/test/nav_test.html (shows gif original concept and the new html version using 1 'sprite' [1] gif for the arrows/lines) As you can see, the vertical lines are the catch am trying to think 'outside the square' to solve the prob but I cant see how you could do it without an id on every and li. I made "Archive" active in the first list to show how the need for the vertical line to go up *or* down to point to the next list complicates the issue. I'm not going to kill myself over this one. Potentially the best solution is to put some background images on the parent div that just show vertical lines that go all the way from the top to the bottom between the lists, which would still give the impression of "drilling down through a hierarchy" type of thing. Would be sweet if we could get it working tho :) any ideas, wacky or otherwise, appreciated. pete [1] http://www.alistapart.com/articles/sprites/
Re: [WSG] Disjointed Rollovers in css
Jackie wrote: i would like to be able to make a disjointed rollover in css, you know rollover the text and the image nearby changes colour or whatever. Hi Jackie, I think youre after something like this (on eric meyer's site): http://www.meyerweb.com/eric/css/edge/popups/demo2.html (mouseover the left nav) Also, Doug Bowman highlighted a double rollover technique he used on the adaptive path redesign [1] a while ago, but it seems to have disappeared from the live site for some reason. be interesting to know if it was removed due to a bug or if they just decided to remove it for non tech reasons... [1] http://www.adaptivepath.com/ anyway, hth, cheers, pete ~~ Peter Ottery ~ Designer Daemon Pty Ltd www.daemon.com.au ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] a required field marker in forms
I've set up a base standard form layout to use as a starting point for projects requiring a form - with text input boxes, check box's, radio buttons, a select menu, and a text area that could all be swapped in or out or duplicated relatively easily. here's the page: http://skunkworks.farcrycms.com/wsg/forms.html 2 questions, 1) I'm curious if the use of an asterix to indicate a required field, and the way I've done it, is ok accessibility-wise or if theres anything else i could/should do...? 2) theres also an error message placement that would flick on if you've missed a required field: http://skunkworks.farcrycms.com/wsg/forms_error.html the error message seems to be displaying fine across a wide range of browsers (courtesy of browsercam: http://www.browsercam.com/public.aspx?proj_id=157477) except good ol mac ie5. if anyone can see an easy fix for mac ie5 that'd be most welcome. cheers, pete ~~ Peter Ottery ~ Senior Designer Daemon Pty Ltd 17 Roslyn Gardens Elizabeth Bay NSW 2011 www.daemon.com.au ** 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] a required field marker in forms
Dmitry wrote: Hi Peter, I am not shure about asteri, but I think it is not very usable that if I click on the text near checkbox, checkbox doesn't change its state. for sure. that behaviour (thanks to using labels) works for me in PC IE5+ and Firefox (which is a pretty large slice of users) in this example. what browser are you looking at it in? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] new mycareer.com.au design
very proud to say the new mycareer site launched today: http://mycareer.com.au/ its the next major site from the Fairfax Digital network to take on css layout as part of a redesign. the site gets hundreds of thousands of visitors a month and is one of australias largest job ad websites. check it out, be good to hear any feedback/ideas for further improvement. as always with a large scale commercial project there are comprimises made in some areas, but for the most part i'm pretty darn happy with the design. css was a huge part of the redesign (which also overhauled some of the information architecture). all the developers were keen on the benefits and the business people love the agility of the design and the speed. cheers, pete ottery ps: i'm no longer at fairfax digital but designing the site was the last major project i did before leaving. rest assured i'll pass on any feedback to them :)
Re: [WSG] new mycareer.com.au design
hi, thanks for your kind words and feedback peoples. have tried to quickly answer those main questions below: re Just curious to know what the many lines of CDATA code achieve and the reason for putting them inline? no idea personally :) , but the dev guy says it's definitely something we want to move to an external file at some point in the future re With Firefox I went to Job Alert and selected some industriesmy cursor appeared somewhere above the textfield. Must have something to do with the css positioning of your fields. ugly indeed. forwarded. re Hate to be the bearer of bad news dont worry about that. if i was worried about the possibility of bad news i'd never get anything done ;-) re The time it takes to load the home page on dial-up is awful ... I guess agility of the design and the speed is a relative term, but it took close to half a minute to load the page. half a minute is actually better than i thought it'd be first time load over dialup. seen far worse. the css file is hefty, and theres several large 'sprite' images that hold navigation/tools/icon graphics. hopefully you'll find subsequent page loads much speedier with the obvious caching benefits. re home page doesn't even pass automated Section 508 accessibility checks well spotted! forwarded. re The design doesn't quite fit at 800x600 in my browsers (Firefox and IE6 on Win2K Pro) - a little too wide. are you using one of those 'sizer' apps that changes your browser window to a certain size that emulates a 800x600 display? be warned, browser chrome has changed in the last few years and often their calculations for width are out by a few pixels. try physically changing your screen res and maximising the window. you may not get a horizontal scrollbar. re In Firefox, if I click on the dropdown for maximum salary, it does not let me select (it appears, then disappears immediately). I have to hold my mouse down and drag to make a selection. Annoying. ugly indeed. forwarded. re When you click on ADVERTISE. You only are left with a HOME tab.Just a little thing that threw me off a bit :) bit off topic for this list but very on topic for the site. cheers, forwarded :) re I would love to know whether the actual careers engine was an in-house thing or third-party. in house re if your concerned about my obsolete browser--the layout breaks in ie5 mac theyre working on it - thanks again for all the other feedback, techy stuff forwarded on i'm sure they'll look into it :) i'll buy yous a beer at the wsg meeting tonight. oh hang on, theyre included in the cover change arent they? :) ok, i'll open it for you ;-) pete
Re: [WSG] Padding tables in IE
Andreas wrote: I am having difficulties getting IE to give a table a padding-left.
I dont think adding padding to the table itself is going to be reliable - as youve found out :)
I'd say that what you want to do is add padding to the cell/s of the table.
If you want to add padding to one column of the table (in your cae the left column), apply a style to a col tag [1] like this:style type=text/css
.1st-column {padding-left:25px}/styletable border=1col class=1st-columncolcol
trtdblah blah blah/tdtdblah blah blah/tdtdblah blah blah/td/tr/table
[1] more info: http://www.w3schools.com/tags/tag_col.asp
hope this is of some help,
cheers, pete ottery
On 5/2/05, Andreas Boehmer [Addictive Media] [EMAIL PROTECTED] wrote:
I am having difficulties getting IE to give a table a padding-left. I can'tfigure out why this doesn't work, but perhaps somebody else can see my
mistake:http://www.adictivemedia.com.au/clients/gta/home2.htmlYou can see on the Drafts Table that the text overlaps the left side of
the background-image. This only seems to happen in IE - Firefox acknowledgesthe padding I gave the table and moves everything 25px inwards:#draft table{padding:0 15px 0 25px;}Any ideas on how this could be fixed?
Thanks heaps!Andreas BoehmerUser Experience ConsultantPhone: (03) 9386 8907Mobile: (0411) 097 038http://www.addictiveMedia.com.auConsulting | Accessibility | Usability | Development
**The discussion list forhttp://webstandardsgroup.org/See
http://webstandardsgroup.org/mail/guidelines.cfmfor some hints on posting to the list getting help**
Re: [WSG] Padding tables in IE
Andreas Boehmer wrote: Gee, that's a new one to me! Is col a HTML 4 tag? I've never come acrossit. absolutely, a quick googling turns this article up - looks like quite a good rundown... http://www.yourhtmlsource.com/tables/tablesaccessibility.html or theres always the w3c spec if youre up for a really invigorating read ;-) http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.4 Andreas Boehmer wrote: Then again: haven't worked with tables in a while. nothing wrong with a good ol table when its used appopriately! :)
Re: [WSG] Mystery connection of css and non-liquid design
On 5/2/05, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Andreas Boehmer [Addictive Media] wrote: Something I find really strange is that a lot of people who put emphasis on Web Standards suddenly found their way back to non-liquid, 800px, centered design. I am wondering why that is? i really admire a well made fluid width site. I think a fixed width site is potentially easier to maintain and set boundaries and limits for people who may be providing content to a site (like a definte size for a feature picture whos size may form a strong element to the page layout). I dont see the argument of if your site layout is a clone of someone elses its not as good as a completely unique layout as a valid one. Site design is becoming mature. Design patterns (or dare i say 'standard') that make sense and work (like fixed width and a top nav strip) emerge and these patterns are reused simply because they work, not because someone is lazy and copied. (I'm talking about layouts in general here, not outright copying of graphic design - thats obviously not an admirable quality.) As with lots of things in this game, it comes down to what your situation is. of course the beauty of a css layout is if you and your client change your mind, you can easily change your site to behave differently with a few css tweaks :) anyway, thats just my 2c :) pete ottery
Re: [WSG] Re: [WSG Announce] Web Essentials 05 Launched
Maybe a specific topic addressing the commercial benefits of Web Standards at WE05 could have been included. I believe there is. 1.30pm, day 1... Brett Jackson, John Horner, David McDonald Panel: Moving your organisation to standards Theme: Strategy Audience: Managers http://we05.com/program.cfm Brett Jackson was my boss at Fairfax Digital for a while. He can translate the business benefits to management until they're begging to throw money at a web standards project :) And then along with John David, that session looks the goods. i cant wait personally. like the blurb said, its a great way to catch up with a lot of people in the industry and exchange these ideas. its not just the presenters i'm paying for when i purchase a ticket. pete ottery ** 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] Cleaner two column float left?
Tee wrote: Is it possible to make it this way and make IE happy at the same time? div class=twoCol labelitem 1/label labelitem 2/label labelitem 3/label labelitem 4/label labelitem 5/label. /div So that I don't need to put a spacer class in between every two items. there may be other issues affecting your problem, but on the surface it looks like you'd just set the width of the label to be a smidgen less than half the width of div class=twoCol. eg, make label 20em wide, and div class=twoCol 41em wide (i'd leave 1em buffer space just to allow for slight rendering differences) and then the labels would stack on top of each other in 2 columns. get me? hth, pete ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] label tag wrapping around checkbox
sports fans, if you had part of a form that had a checkbox that when checked enabled a file upload input, how would you mark that up? the result should look something like this: http://skunkworks.farcrycms.com/wsg/label/label.gif but i wasnt sure what the label tag/s would/should wrap around... i'm thinking something like... label for=addthumb input name=addthumb id=addthumb type=checkbox value=1 / Add thumbnail image: /label label for=path path to image: input id=path name=path type=file disabled / /label ...and then hide the path to image text in the css so its audible to a screenreader - but maybe not needed otherwise. thoughts welcome, pete ottery ** 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] a elements and what they can contain
re: a elements may only contain other inline elements hang on, so if i have an anchor tag wrapped around an image (display:inline by default), its deemed fine by the validator, but if I make that image display:block via the css, (for design purposes, which must be a pretty common practice on many, many sites - including many i've designed) would that practice be frowned upon if the validator could validate your markup *and* the corresponding css at the same time? possibly some bigger questions there - one being, why shouldnt you be able to wrap a anchor around a block level element? i know the difference between inline and block, and the fact that block elements cant be inside inline elements - but this particular anchor question seems a bit shakey pete ** 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] a elements and what they can contain
Damien wrote: As to your question about a tags for block level elements, can you give an example when you would use this? not a good one, no :) i had a fleeting thought like what if, for some ungodly reason, you wanted to link an entire sidebar div to another page - but it was fleeting. just me being too questioning :) john wrote: In terms of the document tree, and as far as a validator is concerned its still a block or inline element as defined by the DTD. a, ok. cool. explains a few things. silly me. see you at the pub :-) pete ** 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] Accessible form test
Hi Erwin, there'd be other people on the list that could comment on the use of access keys etc i'm sure. At a stretch I'd kinda consider some aspects of the visual presentation part of the broad spectrum that is accessibility though - or at least usability. i like thisarticle that looks at the pros/cons of form layout, label positioning alignment: http://www.lukew.com/resources/articles/web_forms.html applying some of those presentation ideas would enhance the ability to quickly grasp the different parts to the form (i'm getting some mis-alignment with some of the form labels in the enquiry details part of teh form). browser cam results here: http://www.browsercam.com/public.aspx?proj_id=168943 I havent read Joe's book. does he specifically recommened the use of definition lists for layout? sounds like a decent enough idea. theres potential to go without the dl though, and use the form tag itself and the label tags as the hooks to define styles alignment. theres a bunch of examples for form layout which youve probably already seen, i often go back to Cameron Adams' article and examples: http://www.themaninblue.com/writing/perspective/2004/03/24/ but yeah - as mentioned,you're probably afterspecific feedback on the use of accesskeys etc - hopefully some of the gurus will chime in :) cheers, pete ottery On 6/10/05, Erwin Heiser [EMAIL PROTECTED] wrote: Hi all,I'm sorry for sending this againg but the link for the new form was wrong,that's what happens when you've been staring at a screen for too long... I¹m pretty new to marking up forms so I decided to ³get it right² right fromthe start.I¹ve recoded a contact form they are using on a website I¹m working on.The old form (the one currently in use) is here: http://www.pixelsandtext.be/tests/oldform.htmlThe new form is here:http://www.pixelsandtext.be/tests/newform.html Both forms validate to their respective DTD.The old one is marked-up using tables, the new one uses a definition listand a few CSS-rules for the layout. I've read Joe Clarks book building accessible websites and applied most of the stuff in the Forms chapter.(Funny thing, even when adding all the CSS rules and the accessiblityextra's to the HTML the file size is roughly the same as the old form) Would some of the WSG accessibility gurus please have a look at this form?I'd welcome any comment and/or suggestions...Thanks in advance,Erwin Heiser** The discussion list forhttp://webstandardsgroup.org/See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help**
Re: [WSG] Background image in li not showing in IE
Cole wrote: I've got a small background icon that I've hooked to a few li's. Displays as planned in FF, but doesn't display at all in IE6.
Any ideas how I can fix this in IE?not sure if youve solved this by now but often i find if you specify a background colour (instead of transparent), IE will play along nicely.
so instead of :li.signInOptions {background: transparent url(../../admin/i/info.jpg) 0 5px no-repeat}try
li.signInOptions {background: #fff url(../../admin/i/info.jpg) 0 5px no-repeat}
of course, then thats a pain if you have a background image that needs to sit on varying background colours. you may end up needing to feed specific colours to certain uses, eg...
#nav li.signInOptions {background-color:#ccc}
...if the li's needed to sit within a navigation area that has a background of #ccc
the other thing to try when IE isnt displaying a background image is to specify a width on the li.
hth,
pete ottery
Re: [WSG] Page structure - navigation
Hi Ian, I dont think its a massive issue to do that (put the navigation at the end of the source and position it at the top of the page visually). Theres probably some people that would say this is potentially better for screenreaders, in that they aren't confronted with a massive navigation listat the topofevery page load (if you have a massive navigation list and no 'skip to content' link). on a kinda related note - whenwe designed http://www.smh.com.au/we decided to put the left hand navigation last in the source order (although there is still some ad tag and site stat stuff after it) so that the center column would load first - hopefully speeding up the load time over dialup of the content you want to read. there were never any problems or concerns that came from that decision. the search engine optimisation argument probably does have some weight behind it - in that if your content is higher up the page (above a load of navigation code) then you may be index'd better than a very similar site that had its content lower in the source. thats starting to split hairs though - and to a large extent not worth worrying about too much - in my opinion anyway :) pete ottery On 6/24/05, Ian Main [EMAIL PROTECTED] wrote: Good morning group,I have a question regarding page structure and hierarchal order.I have a client who insists making me place the site's navigation at the bottom of the page structure and than positioning it at the top via CSS.His reasons of doing this is for search engine optimisation?Quite frankly, this doesn't make sense to me as I thought indexing the site's pages is pretty important stuff. Also explaining the issue aboutscreen readers and CSS off didn't persuade is discussion.Does anyone have any links to this subject or help me explain to him theright way of doing this? P.S. Hope this isn't off topic, I'm asking help on page structure not SEO.Thanks guys,Ian Mainhttp://www.e-lusion.com** The discussion list forhttp://webstandardsgroup.org/See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help**
[WSG] Accordion style script behaviour
i really like this accordion show/hide script... http://openrico.org/demos.page?demo=ricoAccordion.html .. and am thinking it might be useful for a really long list of FAQ's on a page. this particular example relies on the quite sizeable 'rico' _javascript_/s (which contain a whole bunch of other behaviours - and looks amazing) but i really just need this one show/hide behaviour. I knowthis isa pretty common behaviour - but the speed at which things develop in our community makes me think there is a great example out there somewhere that does *just* this. anyone got an example to share? pete (i know next to nothing about js, hence being on the lookout for examples by the pros :)
Re: [WSG] web stanards detection - is it possible?
re: php sniffer script Splash Page that degrades (though ... can't degrade too much) Sam, i gotta agree with what Michael said earlier: Did we just hit some kind of crazy-ass time warping worm-hole thatlanded us in 1995?I beg of you, wherever you are, go out and pick up a copy of this book: http://www.wpdfd.com/editorial/wpd1203review.htm#review2 its got some great high level principles in it that may help clear things up. I know it changed the way I think about creating sites. good luck mate, pete
Re: [WSG] web standards detection - is it possible?
it may be best if Peter (a list member) confirms or denies this. Peter? well, hello there :) re received heaps of feedback heaps is a stretch. if i said it, i was exaggerating apologise. but dont sigh curse yet! theres a better story behind it :) While its true when we redesigned http://www.smh.com.au/and http://theage.com.au/in 2003 (?) the helpdesk received some (like a handful) of emails along the lines of I've found your website now looks very plain on my old computer at home compared to my work computer, which is good, its much faster to load now, good job. I stress it was a few, and I dont have records of these (I've since moved onto a new company). In saying that, I found some much, much, more interestingstats recently (in the last 3 months) that showed that of the 5 or so million (thats a rough figure, not exaggerated, growing month on month, dont quote it) uservisits smh.com.au getsper month, 25000 (Twenty five thousand) are still Netscape 4 users. How excellent is that! They get a totally unstyled page and they are still coming back for their news fix. True, its sad they are stuck with an old browser - but to me, this is a clear example of why web standards are the way forward. Those sites have seen real, tangible benefits for the move to css layoutswhich enableda richer experience for users of the latest browsers - while managing to not completely alienate the old browser crew. And those sites are getting a bit old in the tooth now (ie: theres problems with them - dont think I'm preaching they are perfect :). Any site that Fairfax Digital does now improves on the last, and leaving the content unstyled for old browsers like Netscape 4 is just the norm now for them - and certainly anything i design here on in. Hope this helps, its kinda weird quoting stuff from an old job. While we're talking about big picture issues I dont think I'll get into trouble. hopefully ;-) cheers, pete ~~~Peter Ottery ~ Creative DirectorDaemon Pty Ltd 17 Roslyn GardensElizabeth Bay NSW 2011 www.daemon.com.au/
[WSG] text alignment on form submit buttons
hi, I'd like to left align the text in a form submit button. The following seems to work in IE (5.5+), but not in Firefox: form action=whatever input type=submit value=Submit style=width:20em;text-align:left / /form (simplified and made inline for the sake of an easy example) while realising styling form elements with css is a hit miss affair, is there a way to make Firefox play along and left align that text? any help appreciated, cheers, pete ** 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] Re: digest for wsg@webstandardsgroup.org
Hope that made sense, nup. youre definately going to have to show us an example. if you havent got a liveexample to show, make a really simple example by stripping out everything else and just include some html css within your post. help us to help you! :) On 7/21/05, Josh Rose [EMAIL PROTECTED] wrote: Hello, Does anyone know how to get rid of whitespace at the bottom of the page when using relative positioning on a page that has more than 1 column? Hope that made sense, Josh. Yahoo! Messenger NEW - crystal clear PC to PC calling worldwide with voicemail
Re: [WSG] Standards based visual design guidelines
On 9/15/05, kvnmcwebn wrote: I'm looking for some examples of standards based visual design guidelines and wondering if you can point me to anything you've seen or personally use in your design process...? hiya, not sure I get where you are coming from. As in, i cant think of any instances of where visual guidelines for 'standards based' design would be different from visual guidelines for a non-standards based design. A brilliant, intuitive visual design is completely possible with standards, or not. Same goes for a terrible design :) I'll take a punt at providing some help anyway :) The biggest things I concentrate on when designing a page are: - defining a clear visual hierarchy. making the most important things (according to the brief) have the loudest 'volume' - and designing tiers of importance around that. Its often a balancing act, finding the right balance between elements that allow the eye to quickly grasp what the page is aiming to convey. - providing visual separation between elements where the content is not directly related, and conversely providing a visual link between content that is related. this can come in the form of things like lines, background shades or just varying amounts of space. - clearly indicating the 'action points' on a page, whether they be links, buttons forms etc. they're the big picture considerations i think of when approaching a design. If you're talking about some actual hard recommendations like sizes, spacing, colours I don't think you'll find it. I've often dreamt about such a project - but when it comes down to it, every brief/project is different and I think the best approach is to keep your guidelines very high level - something like those 3 points above. hth, ~~~ Peter Ottery ~ Creative Director Daemon Pty Ltd www.daemon.com.au (yeah yeah, redesign coming :) ** 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] WE05 - who's going?
Andrew wrote: Or how about everyone interested just bites the bullet and posts their photo contact details like I just did? i'll be there. here's me: http://c41.com.au/ the secret password is youve been on this list *how* long and your site still uses tables? oh. the. horror. :) ** 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] Big Websites that turned Accessible
On 10/5/05, Zach Inglis wrote For an article i'm writing I need a list who have turned their website into Web Standard compliant websites. there are many lists scattered around already compiled - like this one: http://www.meyerweb.com/eric/redesignwatch/ hth, cheers, pete ** 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] Placement of company logo
What do others think? 1 vote here for always making the logo a regular img and part of the html markup. reasoning for me is a pretty simple one. its content! :) cheers, pete ~~~ Peter Ottery ~ Creative Director Daemon Pty Ltd 17 Roslyn Gardens Elizabeth Bay NSW 2011 www.daemon.com.au ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] clean forms with javascript injected for a site demo
I need to demonstrate the design/structure of a website that will later house dynamic content - but at the moment it is plain static xhtml/css templates. In particular I'd like to highlight the site search facility and how searching for different terms can give you very different results. I'd like to keep the xhtml markup completely clean though - so i dont want to temporarily hardcode form submit details into a bunch of pages. The idea is to link to a javascript file in the head of the page that automagically enables the search box for the purposes of a walkthough demo, so if you searched for car you'd go to search_results_1.html and if you searched for truck you'd go to search_results_2.html. The site would only be demo'd by me - so I'd know what terms could be entered. The idea then being when it comes time to cut the pages up and implement them into a CMS the only thing that needs to be done is to rip out the link to that javascript. The other benefit is while design of the templates continues I have clean untouched form elements that are easy to work with and do global find/replaces etc as all instances of the form will be the same across multiple pages. I consider this to be definately in the realm of best practices and at a stretch good xhtml practice, in terms of keeping the xhtml markup clean. (ie: i hope very much this isnt too off topic for this list :) anyone do/done this type of thing or can link to a resource? I tried searching but to no avail. cheers, pete ~~~ Peter Ottery ~ Creative Director Daemon Pty Ltd 17 Roslyn Gardens Elizabeth Bay NSW 2011 www.daemon.com.au ** 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] css for ie4/ie5
Rhys wrote: But with the implementations in ie6 and the ones to come in ie7 perhaps its time to finally stop worrying about ie 4/5 you're the only one that can take on that issue and make a decision for *your* site. Different sites require different decisions. Examine your logs and weigh them up against the site objectives (user + business). fwiw, I forgot about testing in IE4 about 3 years ago. I still like to make things look ok [1] in IE5.0 but if some text is butting up against the edge of a container due to it not supporting some float issue or something, i dont worry about it. Its usually a better story with IE5.5. [1] give an example of ok to your client early on and explain why spending 99% of your time on 1% (percentages always make your argument sound good ;-) of their audience is not spending their money in the right place. cheers, pete ~~~ Peter Ottery ~ Creative Director Daemon Pty Ltd 17 Roslyn Gardens Elizabeth Bay NSW 2011 Web: www.daemon.com.au/ ** 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] css for ie4/ie5
Peter Firminger wrote: Not at all recommended on any machine you care about. Just for my own peace of mind tho - they're only a security issue when you have launched the program right? so if i'm launching them (old standalone IE5 5.5) once a month to *only* test pages that I've created - I'm not leaving my system open to some rogue security breaching action right? pete o ** 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] Re: digest for wsg@webstandardsgroup.org
On 10/15/05, Stefan wrote:
How can I make the Table fill the full width of the column in FireFox and
IE 6?
same thing happened to me with that type of layout.
I added the following rules to the tables and it sorted it for me:
table {width:100%;float:left}
cheers,
pete
**
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] Complex form - markup help?!
Hi Rachel, before you dive into the markup ( i'm not sure if this is much help to you) but if you can simplify the proposed visual design you may be able to save yourself some pain in the css layout (cause agreed, it would be fairly complex) it took me a while to understand the form and what columns related to what. i think it has some usability problems. are you able to lay it out a bit simpler? something like this maybe? http://skunkworks.farcrycms.com/pot/temp/complexform2.gif going with something like that would require much fewer hooks to get everything aligning right. i realise this is off the topic of standards but it all fits in together at some point cheers, pete :) On 10/21/05, Rachel Radford wrote: I am completely stumped as to what the best way to attack the markup for this form: http://www.heliocell.com/complexform.gif It isn't a data table and yet there are headers there and it is in columns... so not sure if it warrants being in a table or if everything should be divs. But then also unsure how it would all fit together as a form. It is an internal application for a limited number of people, and accessibility therefore isn't a major concern - although obviously I would like to make it as accessible as possible in case there is need for it in the future. Anyone able to give me any advice on how to tackle this one?! ** 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] Complex form - markup help?!
adam wrote: So, the idea of context is quite important here, which is where, i believe, a table would come in handy. ditto. i'd feel comfortable using a table if i were you Rachel :) if you were going to use css you'd probably need to repeat the Discipline split % within each fieldset - and then it just starts overcomplicating things i reckon. if you do go with a table - use the learnings provided in rogers article about ids and headers: http://www.usability.com.au/resources/tables.cfm pete ** 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] hidden link to webstandards page 4 older browsers - how does it work
It was a good idea at the time - but probably not a hot idea any more. Read The Web Standards Project's line on it now: http://www.webstandards.org/act/campaign/buc/ --- I like this idea and wanted to implement somthing similar, but was wondering what was going on here since the text is being hidden. Does this only show up for older browsers (eg: Netscape 4.0), and if so how is that being implemented? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] injecting an extra hook with javascript
just say i have markup like this: -- div id =utility ul lia href="" Item/a/li lia href="" Item/a/li lia href="" Item/a/li /ul /div - and for one reason or another I *dont* have access to the html markup. Then an intricate design comes along that requires an extra hook (a span tag) to be inserted inside each a href/a tag. is it possible to use _javascript_ (1) to insert a span tag inside each a href on the fly so its not in the markup - but would be there if you were able to view the rendered source? you know what i mean - dynamically changing the dom... or something can you tell i know nothing about _javascript_? :) any help appreciated. cheers, pete (1) - of course, without _javascript_ list items would still be accessible - they just wouldnt have the nice design inticacies
Re: [WSG] Font resizing
Andy wrote: The icons themselves I cannot speak for Pete is on the list I think and can step up and enlighten you as to why they were chosen... prob at the request of our Editorial people. er - thanks Andy ;-) I think I just borrowed the idea (for the different sized A's) off the wired.com site at the time. hey they are still there now! :) The screen real estate available on a news article page is generally very precious, and if you do want to have something like that on the page (from memory it was probably a joint design/editorial idea/request) you've got to work with a pretty small space. Agreed they arent perfect. I like news.com.au's bigger/smaller icons on their article pages : http://www.news.com.au/story/0,10117,17199443-13762,00.html ha! so yeah, The icons are far from perfect, I think they are helpful for the reasons discussed earlier, And tomorrow is friday. pete ~~~ Peter Ottery ~ Creative Director Daemon Pty Ltd 17 Roslyn Gardens Elizabeth Bay NSW 2011 Web: www.daemon.com.au/ ** 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] Sitecheck: 7 Sunrise Family website [sunrisefamily.com.au]
Joshua wrote: Launched a website [ http://yahoo7.com.au/sunrise/family/ ] and the BIGGEST problem (so far as I'm concerned) is with Firefox 1.0.x on the Meet the Family page [http://sunrisefamily.com.au/current/content/meet/ ] I cant replicate it here using firefox 1.0.2 and win xp. you may have fixed it..? i think the design is awesome. a really stunning overall look - so pass on the congrats there. and you're coding looks like youve bent over backwards to retain the really tight visual treatment. awesome stuff. another high profile site gets some serious quality applied. bravo! :) the *only* thing i could find of any decent feedback (i, like many others on this list lurk in the shadows unless i have something to add :) is that the yahoo logo uses a transparent background to sit on that black background, and the logo is reversed out as white. the result when printing is a white yahoo logo on white paper complete with jaggies. or seen here: (http://au.i1.yimg.com/au.yimg.com/i/mh/2/y7mh_def_1blkbg_2.gif). why not lose the transparency just sit it on a black background? then it'll print out as intended while still displaying fine on the site. my .075 cents worth, really only as an excuse to say awesome work :) ~~~ Peter Ottery ~ Creative Director Daemon Pty Ltd 17 Roslyn Gardens Elizabeth Bay NSW 2011 Web: www.daemon.com.au ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] css/html snippets
on the topic of css patterns and re-usable chunks of code, there's plenty of whole css page layout resources that you can use as a starting point for your own stuff right, like the 'ol classics http://glish.com/css/ or http://www.bluerobot.com/web/layouts/ what about the insides of those layouts? with every subsequent design i do i gather more and more html associated css chunks that i reuse over and over. if you were using dreamweaver you'd call them snippets. things like: a login box a search box a search results pagination bar a set of search results a contact us form etc... you get the idea. just the really common stuff. obviously customisation of these would be/is required in almost all cases as soon as you paste them in but at least a starting point is handy are there resources/collections of these snippets out there? i cant find anything decent. ie: clean / semantic / sensible / 2006. if not, maybe there's a need for something...? ~~~ Peter Ottery ~ Creative Director Daemon Pty Ltd 17 Roslyn Gardens Elizabeth Bay NSW 2011 http://www.daemon.com.au/ COMING SOON webDU - the web technology conference http://webdu.com.au/ Sydney, March 2/3 2006 ~~~ ** 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] css/html snippets
Joshua wrote http://webpatterns.org/ *checks it out* ok, so the term patterns is potentially a too far advanced term for what i'm thinking of. all that microformat and machine readable data stuff is certainly interesting (Allsopp - i can hear you screaming about it from here ;-) but... I *think* what i'm talking about it different. i'm just thinking more along the lines of a library of cut'n'paste chunks of re-usable code.. maybe i'm trying to jump to the result of what the web-patternists are aiming to investigate. pete ** 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] css/html snippets
Joshua also wrote: That web patterns thing people were bouncing around in here a month or so back? I've lost the address... if someone else doesn't post it, it's in the archives somewhere... oops. yeah ok: http://www.mail-archive.com/wsg@webstandardsgroup.org/msg24333.html it was a good thread. i missed it. guilty as charged. *mental note - check the archives before posting* in saying that. i think i still have a hankering to put something together. pete ** 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] Call for a new (scalable) business case for web standards.
Jay wrote: So here is the question: What are the benefits of web standards for small business that can be sufficiently measured in results for the business both in the long and short term? Jay, been thinking about this for a few days. As youve pointed out, youre really interested in small business short term. the long term benefits are clear. The only tangible benefit to small businesses (in my experience) is that you should be able to knock out something for a small business quicker than an old skool developer. i did a site for a small company a while ago and i didnt even mention to the guy i was planning to use standards. all he needed to know was it would be fast to load, and it looked good. heres the site for the heck of it: (NOTE: do *not* click on this website if the odd swear/curse word offends you. its just a surfboard store website, theres no offensive imagery, but there is the odd swear word in the stores blog/commentary :) Feedback about this aspect is not required on this list. http://sixounceboardstore.com.au/ Only reason i link to this is that it was essentially a markup template i had used for a previous site and then knocked this out in 4 or so hours. it might have taken someone else using tables a lot longer to wysiwyg up all the tables fiddle with all the nav rollovers and stuff. the client was just happy it looked good and was done quickly. your 2nd question: How do we, as a group start to bring the message to the masses? its already being delivered well to big business. but for small business, I dont think we need to. I agree with Ben. Small business generally speaking do not need to know. unless of course they flat out ask. they're going to be a lot more interested in simple costs and looks. *We* know web standards are the best thing to apply. They are just another tool in our toolbelt. in the words of a multinational, Just do it. At the end of the day, web standards are just a small % of what goes into a good website. Ease of use, aesthetic appeal, compelling content an accurate portrayal of the brand all play just as big a part if not more than simply web standards. If theres competition out there that are doing a better job of all those latter qualities they are going to win the job even if they employ tables for layout. and quite rightly i think. dont take that the wrong way, i think theres a better option than tables for layout - but we need to keep web standards in perspective. they're not the be-all and end-all. small businesses only need a small story when hiring someone to do their site, and in my experience, web standards just arent a big enough story to make the cut. i just do it. now, spreading the word to developers and designers. thats where the action is :) pete ~~~ Peter Ottery ~ Creative Director Daemon Pty Ltd 17 Roslyn Gardens Elizabeth Bay NSW 2011 http://www.daemon.com.au/ COMING SOON webDU - the web technology conference http://webdu.com.au/ Sydney, March 2/3 2006 ~~~ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] suckerfish menu and position:relative woes
hiya, i dont like flyout menus as much as the next guy/girl but i have a situation that requires them, so i'm using the son of suckerfish menu [1]. i'm having a problem with adding position:relative to items below the menu, and those elements appearing on top of the flyout menus in IE. i've whipped up a barebones example with further explanation here: http://skunkworks.farcrycms.com/pot/temp/test.html the css js is wihtin the head of that page to allow easy copy pasting. as that page details, anyone got a tip that allows me to keep position:relative on that box but keeps the flyout menus on top (when they flyout) ? any help appreciated, cheers , pete [1] = http://www.htmldog.com/articles/suckerfish/dropdowns/ ** 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] suckerfish menu and position:relative woes
Samuel wrote: have you tried setting the z-index on them? yeah, tried all sorts of z-index combinations (that i could think of) but still cant get it working. theres a short note at the bottom of that example page i put together... ** 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] suckerfish menu and position:relative woes
success! housecleaningSam wrote:-- Are negatives supported in the z-index?
yes, more about z-index at pages like: http://www.echoecho.com/csslayers.htmRic wrote:
-- Personally I don't like the suckerfish menus much.--I found these much more to my liking--http://www.tanfa.co.uk/css/examples/css-dropdown-menus.asp
interesting, and thanks - although when this problem is thrown at them, they fail in the same way. example:
http://skunkworks.farcrycms.com/pot/temp/test2.html
.
Kenneth wrote:-- I had the same issue before and had to add one line to the js code for-- the drop-downs to hover on top. The extra line is commented.
Gold. worked like a charm. giant hat tip to you Kenneth :)My script was slightly different, but adding that line in what i thought looked like the right spot fixed the problem.
working example here:http://skunkworks.farcryc
ms.com/pot/temp/test3.html for the record the suckerfish js ended up looking like this below with that extra line added
many thanks. crisis averted! :) pete
sfHover = function() {
var sfEls = document.getElementById(nav).getElementsByTagName(LI);
for (var i=0; isfEls.length; i++) { sfEls[i].
) { this.className+= sfhover;
this.style.zIndex=200; //Add this line to your _javascript_ Code }
sfEls[i]. { this.className=this.className.replace(new RegExp( sfhover\\b), );
} }
}if (window.attachEvent) window.attachEvent(onload, sfHover);
Re: [WSG] flash z-index conflict
Ted wrote: -- my lovely flash movie thinks it's the coolest thing on the planet and wants to sit on top of my lovely dropdown box. in the html code that calls your flash movie, add this: param name=WMode value=transparent let us know how you go pete ottery ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Mollio
heya, I presented a session on CSS at the WebDU conference in Sydney last week. Part of the preso was the idea of having some simple pre-built CSS/HTML templates to use as a project *starting point*. a toolkit of sorts So I've put my own toolkit (called Mollio) up for public consumption in the hope that others will add to it, as I will continue to... http://www.mollio.org/ I've set up a new google group to discuss the templates. Its linked from the site. As we know, when it comes to CSS there's always more than one way to skin a cat so please keep in mind these templates are not intended to be the absolute best way of structuring your CSS/HTML. That always depends on your specific project. I do find these Mollio templates are useful to use as a starting point tho because the CSS/HTML has been constructed with robustness (is that a word?) in mind - to allow chunks of the code to be copied pasted between projects and your layout/content remains intact or requires little editing. Anyway, enough of the gabbing, drop by and check out Mollio if you get a chance. If youve got any thoughts about Mollio that would be of interest to the wider WSG group, I guess post back here on the WSG list - if not, drop by the Mollio Google Group and provide some feedback/suggestions/contributions there. cheers, pete ~~~ Peter Ottery ~ Creative Director Daemon Pty Ltd 17 Roslyn Gardens Elizabeth Bay NSW 2011 www.daemon.com.au ** 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] tableless layout stuff
Jack wrote: But does anyone have any idea how to put that alongside the title and image etc without using a table? or should i just use a table? Hi Jack, There shouldnt be any need for a table here. just mark your list up as a list and float your image to one side. something like this: http://c41.com.au/test/delphinus_example/index.html (css in the head so just view source) hoping thats what you meant :) pete ** 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] maximum backward compartible to mobile phone (WAP) users? Which XHTML DTD?
re - My question is what is the best practice? What kind of DTD to choose? XHTML Basic? XHTML MP? i can offer a good link! :) http://www.cameronmoll.com/archives/000398.html not sure if it answers all your question. its a 3 part series. the guy (cameron moll) is one of those rockstar designers that makes you sick with envy ;-) (ie: he's great) hth, pete ** 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] .net question
Peter Goddard wrote:-- I would even suggest that you-- consider picking up the basics of aspx page development, not the code,-- but the web controls that are available in .net and see if you can -- suggest how you can work more closely ...a great informative post Peter.Another vote here for the collaborative approach.I was in a similar situation with a .NET dev guy and took the what can I do to make this easier for you approach to the meeting. He ended up installing Visual Studio on my machine, pointed me in the direction of the templates repeatable elements, and I looked after all the html/css framework for him. the collaboration had other knock-on positive side effects and he's now an avid css advocate :) cheers,pete o
Re: [WSG] IE hacking.
re Perhaps this could be forwarded to Microsoft as I am a customer and have asked them to build a standards compliant browser and yet they have chosen to ignore me. I for one think Microsoft deserve massive kudos. They *are* doing all they can to make IE7 a decent standards compliant browser. Yeah, it was a while coming, but things could be worse. pete o ** 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] Map of Australia Image Map
re - Has anybody seen or created way of displaying States on hover using CSS only? Hi Felisimina, have a look at the front of http://www.domain.com.au/ i worked on a previous version a while ago (so dont shoot me for any other code on the site ;-) it uses a sprite image for the hover - check it out - http://www.domain.com.au/stylesheets/ImagesZeus/mapAusSmall.gif basically the technique described under Irregular shapes in http://alistapart.com/articles/sprites hope this helps, pete *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Map of Australia Image Map
Paul wrote: Of course the problem was made easier by the fact that most of the borders between Australian states are on the horizontal or vertical, but you handled the major exception between NSW and VIC excellently by expressing ACT as a strategically-placed and -sized rectangle. Good work! ha :) thru the wonders of archiving tho I dug up my original which left the state borders as-is: http://c41.com.au/map/ yep, its not perfect, the hover doesn't crossover exactly on the borders because we've only got rectangles to work with in a box model - but i thought this worked pretty well considering. pete *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] ABC News Online have a new website
Brad wrote: Really enjoying the new ABC News website here in Australia. http://abc.net.au/news/ ditto - love it. an amazing achievement to get that up and out. i particularly like the nice little attention to detail like the css hovers/icons on the links and the inline video. the video section itself is hot too - the my playlist thing is very slick. although the play playlist link could scream out a bit more. someone out there on the list must have been involved :) surely give us the goss about how it went/is going. congrats. pete ottery *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Best way to clear a float
re - using the 'clearfix' fix... as a way of clearing floats by
not adding any additional markup
i've always thought that argument was a bit of a stretch. You are
adding extra markup - and its hardcoded presentational markup. What
happens when you have class=clearfix all through your code and then
you have a bit of a design makeover and some areas that were
previously clearing floats are now doing something different? not only
do you have to change the css, you've also got to change html to move
some of the clearfix classes around.
As others have said there's not one best solution - it'll depend on
your situation.
Using divs that are already there to do the clearing is, i think,
best. My second favourite is using a hr (*if* its a meaningful
separation of content) and then applying
{clear:both;visibility:hidden} to the hr to do the clearing.
as a last resort if i had to add some extra markup to do it, i'd
favour an empty clearing div over an extra class on a parent div (the
clearfix method). Yeah its a little dirty, but in some cases i've
found its easier to maintain when handed over to other
teams/developers/cowboys.
just my 2c :)
pete ottery
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Structuring CSS
re - How are you guys structuring your CSS files?
for me, multiple css files for different parts of the page is harder
to manage. I'm pretty old school keep everything within the 1 css
file (within reason). this also means 1 http request which is good.
exceptions are if you had a massive admin section or something you'd
probably create a separate, additional, css file just for those pages.
to make it easier to find stuff in a css file i tend to structure my
css roughly like the html...with tabbed in sub sections
so:
#header {stuff here}
#logo {...}
#nav {...}
#content {...}
#main-column {...}
.featurebox {...}
#sidebar .featurebox {...}
i find this helps me when revisiting a file after a while. i also
format my css so they dont wrap for each attribute or whatever...
meaning each rule takes up 1 line. the tabbed formatting really comes
into play there and you can very quickly scan down the doc to find the
section you need... much like you scan a html structure.
an example of mine (albeit not meticulously formatted):
http://www.mollio.org/css/main.css
of course firebug makes finding stuff so much easier these days,
giving you a filename and line number! its almost cheating... ;-)
my 2c
pete ottery
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Structuring CSS
Anton wrote... - In regards to I'm guessing this sort of structuring comes at a cost because a number of requests need to be made to the server. this is generally untrue. In principle this is exactly how download accelerators work. They split a large file into smaller segments and sent multiple requests. Since the browser environment is completely multi-threaded it should actually boost performance. (Note: I am not 100% certain if this is the fact, but there is no evidence to suggest otherwise either). - If its a small site, with not much traffic I think you'd be hard pressed to notice the difference. For large news sites that get smashed with traffic, I've sat there with a stopwatch and timed the difference (over different speed connections from dialup to broadband) between separate css files, and all in 1. And just having 1 file is definitely faster. in some cases it would bring the initial [1] load time [2] from something like 6 seconds down to 3 or 4. and then bringing all the css into the head of the page rather than a linked file chopped another second off. as i said - only applicable if extreme performance/optimisation is an issue - but it *does* make a difference. [1] - with an empty cache [2] - the time taken for the page text to appear, the page might continue loading for 10 or so seconds after this so loading in pics etc. mileage varies pete *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Structuring CSS
re - Out of curiosity, it wasn't an actual physical stop watch was it? of course not - it was an abacus! ;-) nah in all seriousness, it was before the time of firebug, and around the time of the birth of this mailing list. yes it was literally a stopwatch - which was enough for me at the time. i timed a bunch of different page structure scenarios a bunch of times and used averages. it was enough to get some basic findings and tweak the project. in this age of broadband the amount of time yr saving gets less significant as an overall %, but its still nice to look after the country folk ;-) pete *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
