Re: [WSG] Structuring CSS

2008-06-09 Thread Peter Ottery
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]
***



Re: [WSG] Structuring CSS

2008-06-09 Thread Peter Ottery
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  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

2008-06-09 Thread Peter Ottery
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] Best way to clear a float

2007-11-12 Thread Peter Ottery
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  (*if* its a meaningful
separation of content) and then applying
{clear:both;visibility:hidden} to the  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] ABC News Online have a new website

2007-06-18 Thread Peter Ottery

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] Map of Australia Image Map

2007-05-24 Thread Peter Ottery

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] Map of Australia Image Map

2007-05-24 Thread Peter Ottery

have a look at the front of http://www.domain.com.au/


actually thats changed quite a bit since i did it. for one, i'd use a
UL for the state links in the markup rather than spans and br's. ouch.


***
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

2007-05-24 Thread Peter Ottery

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] IE hacking.

2006-03-20 Thread Peter Ottery
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] .net question

2006-03-17 Thread Peter Ottery
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] maximum backward compartible to mobile phone (WAP) users? Which XHTML DTD?

2006-03-16 Thread Peter Ottery
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] tableless layout stuff

2006-03-06 Thread Peter Ottery
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
**



[WSG] Mollio

2006-03-05 Thread Peter Ottery
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] flash z-index conflict

2006-02-18 Thread Peter Ottery
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:

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
**



Re: [WSG] suckerfish menu and position:relative woes

2006-02-07 Thread Peter Ottery
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; 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] suckerfish menu and position:relative woes

2006-02-07 Thread Peter Ottery
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
**



[WSG] suckerfish menu and position:relative woes

2006-02-07 Thread Peter Ottery
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] Call for a new (scalable) business case for web standards.

2006-02-05 Thread Peter Ottery
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
**



Re: [WSG] css/html snippets

2006-02-01 Thread Peter Ottery
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] css/html snippets

2006-02-01 Thread Peter Ottery
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
**



[WSG] css/html snippets

2006-02-01 Thread Peter Ottery
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] Sitecheck: 7 Sunrise Family website [sunrisefamily.com.au]

2006-01-31 Thread Peter Ottery
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
**



Re: [WSG] Font resizing

2005-11-09 Thread Peter Ottery
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
**



[WSG] injecting an extra hook with javascript

2005-11-01 Thread Peter Ottery
just say i have markup like this:

--











-

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  tag.
is it possible to use _javascript_ (1) to insert a  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] hidden link to webstandards page 4 older browsers - how does it work

2005-10-26 Thread Peter Ottery
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
**



Re: [WSG] Complex form - markup help?!

2005-10-20 Thread Peter Ottery
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] Complex form - markup help?!

2005-10-20 Thread Peter Ottery
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] Re: digest for wsg@webstandardsgroup.org

2005-10-16 Thread Peter Ottery
>> 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] css for ie4/ie5

2005-10-13 Thread Peter Ottery
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] css for ie4/ie5

2005-10-13 Thread Peter Ottery
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
**



[WSG] clean forms with javascript injected for a site demo

2005-10-13 Thread Peter Ottery
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] Placement of company logo

2005-10-09 Thread Peter Ottery
>> What do others think?

1 vote here for always making the logo a regular  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
**



Re: [WSG] Big Websites that turned Accessible

2005-10-04 Thread Peter Ottery
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] WE05 - who's going?

2005-09-26 Thread Peter Ottery
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] Standards based visual design guidelines

2005-09-14 Thread Peter Ottery
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] Re: digest for wsg@webstandardsgroup.org

2005-07-20 Thread Peter Ottery
>> Hope that made sense,
nup. youre definately going to have to show us an example. if you havent got a live example 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 



[WSG] text alignment on form submit buttons

2005-07-18 Thread Peter Ottery
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:







(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] web standards detection - is it possible?

2005-07-13 Thread Peter Ottery
>> 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 interesting stats 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) user visits 
smh.com.au gets per 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 layouts which enabled a 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/
 
 
 


Re: [WSG] web stanards detection - is it possible?

2005-07-13 Thread Peter Ottery
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
 


[WSG] Accordion style script behaviour

2005-06-23 Thread Peter Ottery
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 know this is a 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] Page structure - navigation

2005-06-23 Thread Peter Ottery
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 list at the top of every page load (if you have a massive navigation list and no 'skip to content' link).

 
on a kinda related note - when we 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 for  http://webstandardsgroup.org/See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help**


Re: [WSG] Background image in not showing in IE

2005-06-19 Thread Peter Ottery
Cole wrote:>> I've got a small background icon that I've hooked to a few '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] Fixing the position of a page footer

2005-06-16 Thread Peter Ottery
>> Is it possible to fix the position of a page footer to the bottom of thepage, no matter the page size.  

 
this is one of those topics that can go round and round in circles with heaps of if's and but's...
 
this article...
http://www.alistapart.com/articles/footers/
... has a method that may work for you. the resulting discussion after it probably has a bunch of ideas aswell.
 
and theres also some good reading to be had here:
http://css-discuss.incutio.com/?page=FooterInfo
at the end of the day though, youve got to ask yourself is all that *really* necessary just for the sake of a footer. for some clients/projects it may indeed be. good luck with it. :) 
 
pete ottery
 


Re: [WSG] Accessible form test

2005-06-09 Thread Peter Ottery
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 this article 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 after specific 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 for  http://webstandardsgroup.org/See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help**


Re: [WSG] elements and what they can contain

2005-05-26 Thread Peter Ottery
Damien wrote: 
> As to your question about  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] elements and what they can contain

2005-05-26 Thread Peter Ottery
re:  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
**



[WSG] label tag wrapping around checkbox

2005-05-22 Thread Peter Ottery
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...



Add thumbnail image:


path to image:



...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] Cleaner two column float left?

2005-05-04 Thread Peter Ottery
Tee wrote:
>>  Is it possible to make it this way and make IE happy at the same time?
>> 
>> item 1
>> item 2
>> item 3
>> item 4
>> item 5.
>> 
>> 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  to be a smidgen
less than half the width of .

eg, make  20em wide, and  41em wide (i'd
leave 1em buffer space just to allow for slight rendering differences)
and then the  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
**



Re: [WSG] Re: [WSG Announce] Web Essentials 05 Launched

2005-05-03 Thread Peter Ottery
> 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] Mystery connection of css and non-liquid design

2005-05-02 Thread Peter Ottery
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] Padding tables in IE

2005-05-02 Thread Peter Ottery
Andreas Boehmer  wrote:
Gee, that's a new one to me! Is  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] Padding tables in IE

2005-05-02 Thread Peter Ottery
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:

.1st-column {padding-left:25px}
blah blah blahblah blah blahblah blah blah     [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 for  http://webstandardsgroup.org/See http://webstandardsgroup.org/mail/guidelines.cfmfor some hints on posting to the list & getting help**

Re: [WSG] new mycareer.com.au design

2005-04-27 Thread Peter Ottery
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



[WSG] new mycareer.com.au design

2005-04-26 Thread Peter Ottery
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] a required field marker in forms

2005-04-22 Thread Peter Ottery
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] a required field marker in forms

2005-04-21 Thread Peter Ottery
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] Disjointed Rollovers in css

2005-04-19 Thread Peter Ottery
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
**



RE: [WSG] cutting and pasting content

2005-03-03 Thread Peter Ottery



did you try this?http://www.ravnwood.com/archives/004286.php(no idea if it works, just found it via google)bit of 
a _javascript_ hack - but may be an option> Are there> 
any suggestions for allowing a block of content to be selected in IE and> 
not having it try to select the entire page?


RE: [WSG] navigation using arrows for location

2005-03-03 Thread Peter Ottery



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 - had a 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 the many, 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 
site they 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/


[WSG] navigation using arrows for location

2005-03-01 Thread Peter Ottery



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:
 

By Expertise
    
    

    Architecture
 
    
    
WoodCentre
    
250 Latin 
Street
    El 
Changeo
    2 
Changed 
Ave
    
Changewood 
Facilities
    Active 
Project
    
Park in 
Perth!
 
    11 
Smith 
Street
    58 
& 88 Changed 
St
    

 
    

    Interior 
Design
    Urban + landscape 
design
    Heritage 
conservation
    
Consulting
    

 

By 
Location
Archive

 
any thoughts or help 
appreciated,
pete
 
 
[1] - http://www.alistapart.com/articles/dropdowns/


RE: [WSG] Is XHTML harmful?

2004-10-06 Thread Peter Ottery
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








RE: [WSG] Is XHTML harmful?

2004-10-06 Thread Peter Ottery



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  tags, or no  
tags, no headings, unclosed tags, lists using '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  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] Table-style admin layouts

2004-10-04 Thread Peter Ottery



>> 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] CSS for a map?

2004-09-06 Thread Peter Ottery
Title: RE: [WSG] CSS for a map?





yep, can recommend that alistapart article that others have mentioned aswell.


weird timing, that very article inspired this map i did a week or so ago for a project yet to see the light of day.
http://www.c41.com.au/map/


the sprite image it uses is here:
http://www.c41.com.au/map/map_australia.gif


Mike,
this works well but I'd be hesitant about committing to it if you have a detailed map with heaps of properties. it could get overly complicated very quickly due to the shear number of hotspots. and when combined with irregular shapes call for duplicate versions of the graphic to factor in overlapping & display correctly (hence the 4 versions of the map in the above linked gif example).

of course the great thing is when it's viewed (or heard) without css. its just a straight text list.


hth,
pete


> 
> On Mon, 2004-09-06 at 09:33, Mkear wrote:
> > Has anyone used CSS to do colour changes over areas in a map?   Is
> > that a practical way to do it?
> >
> > I have a prospective client who wants a map of a subdivision he's
> > doing and wants to have the housing blocks coloured differently
> > depending on sale status, availability etc, and to change colour when
> > you roll the mouse over it.   I was thinking of setting the inital
> > state of the area based on a dynamic value pulled from the database
> > (i.e sold, available, holding deposit) and with hover state for the
> > mouseover.
> >
> > Is it a practical thing to be thinking about CSS for this, given that
> > the areas aren't rectangular?
> >
> > Or can anyone think  of a better way to do it?   (My intial thought
> > was to use flash but we've crossed that idea off for a number of
> > reasons)
> >
> > Cheers
> > Mike Kear
> > AFP Webworks
> > Windsor, NSW, Australia .
> >
> >





RE: [WSG] Best Aussie and Kiwi web standards designers

2004-08-25 Thread Peter Ottery
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






[WSG] [OT] Employment opportunity in Sydney - Reply off list

2004-08-24 Thread Peter Ottery



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] list item markers disappear behind floated image

2004-08-17 Thread Peter Ottery
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 http://www.smh.com.au/. which uses a css layout. see. on topic ;-)




[WSG] list item markers disappear behind floated image

2004-08-16 Thread Peter Ottery
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] RE: Image replacement techniques for linked elements

2004-08-15 Thread Peter Ottery
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?
>> 
>> 
>> 


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] RE: Image replacement techniques for linked elements

2004-08-08 Thread Peter Ottery
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:block like 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 
loaded what we could into 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] 4-column layout

2004-07-29 Thread Peter Ottery
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

   


RE: [WSG] Div CSS VAlign

2004-07-15 Thread Peter Ottery
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] Redesigning smh.com.au & theage.com.au with css

2004-06-21 Thread Peter Ottery
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
   
    pasted smh css was 
  here 


RE: [WSG] Redesigning smh.com.au & theage.com.au with css

2004-06-21 Thread Peter Ottery
Title: RE: [WSG] Redesigning smh.com.au & 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










[WSG] position:absolute problem

2004-05-31 Thread Peter Ottery



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 its inside 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


[WSG] about that new way to clear floats

2004-05-24 Thread Peter Ottery



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  
(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 like a godsend 
for some situations but has come unstuck as a method as time went 
by...)
 
Pete
 


RE: [WSG] CSS solid lines and Opera

2004-05-23 Thread Peter Ottery



>> 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 

  
  
  
   


RE: [WSG] SMH launch

2004-05-02 Thread Peter Ottery



sorry, bit 
late,
re my question of 
>> any ideas of 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 out a 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 ideas of a way to make these browsers 
keep the background image 
> aligned hard left and not adversly affect anything 
else?
>  
> pete
 


RE: [WSG] SMH launch

2004-04-28 Thread Peter Ottery



when we launched theage.com.au last week Justin pointed out a 
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 ideas of a way to make these browsers keep the 
background image aligned hard left and not adversly affect anything 
else?
 
pete


RE: [WSG] SMH launch

2004-04-28 Thread Peter Ottery



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 prominent the amount of content that is updating constantly), make 
space for different ad formats, be able to make special 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 of articles. 
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 a 1 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 did do 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 meeti

RE: [WSG] theage.com.au: new design

2004-04-20 Thread Peter Ottery
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:

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] theage.com.au: new design

2004-04-20 Thread Peter Ottery
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

2004-04-19 Thread Peter Ottery
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

2004-04-19 Thread Peter Ottery



Hi 
Chris,
 
re>> I dont know 
if its your intention, but some pages i loaded wern't centered...Like articles 
etc...
 
ah 
yes, i should've mentioned that. articles like this 
one:
http://theage.com.au/articles/2004/04/19/1082326118737.html
 were actually published yesterday (and in the old format) - so all 
articles published from today onwards *should* look like 
this:
http://theage.com.au/articles/2004/04/20/1082395823193.html
let me 
know if you spotted a new article that had a non-centred problem 
though.
 
as an 
aside, the print css isnt currently working either, it'll be fixed 
shortly.
 
it 
appears the current call to the print stylesheet...

...was being ignored & when i changed 
that to...

...it fixed the problem (removed the title and 
made the rel="stylesheet")
 
anyone know if thats a bug or an expected 
behaviour?
 
cheers,
pete
 
 


[WSG] theage.com.au: new design

2004-04-19 Thread Peter Ottery



hiya,
we relaunched 
theage.com.au today with improved markup and a css 
layout.
http://theage.com.au/
 
a couple of 
points of interest:

  a big part of the 
  redesign was improving the markup - ie: obviously using  
  tags and  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 css layout (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 
  month theage.com.au has had 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 spotted appreciated -  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] Relative Fonts

2004-04-06 Thread Peter Ottery
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] dreamweaver

2004-03-16 Thread Peter Ottery



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] Open source Relevant CSS tab?

2004-03-16 Thread Peter Ottery
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






RE: [WSG] Open source Relevant CSS tab?

2004-03-15 Thread Peter Ottery
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






RE: [WSG] New CSS site

2004-03-11 Thread Peter Ottery



 >>  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] Purpose of this mailing list

2004-03-09 Thread Peter Ottery
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





[WSG] classguide

2004-02-26 Thread Peter Ottery



hiya,
 
I noticed that the 
much publicized new qantas airline - http://www.jetstar.com/ - 
launched their site 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] A new standards based smh.com.au/technology

2004-02-25 Thread Peter Ottery
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,  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 designe

RE: [WSG] A new standards based smh.com.au/technology

2004-02-25 Thread Peter Ottery
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,  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 

RE: [WSG] double quoting

2004-02-24 Thread Peter Ottery
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






[WSG] double quoting

2004-02-24 Thread Peter Ottery
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...




...becomes... 





...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] Opera

2004-02-18 Thread Peter Ottery



>> 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 look fine 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] text size controls

2004-02-16 Thread Peter Ottery
Title: text size controls





so I need some text size controls on a news article page, and while I can easily comprehend the method behind the style switcher method that is everywhere to switch between a few preset sizes - like www.wired.com - I'd like to use the " + / - " method that you see around the place.. say , like here: http://www.sacbee.com/content/business/story/8273039p-9203704c.html that allows you to bump up the size progressively and limits you at either extreme of sizing.

question is, the options for the  " + / - " method I've seen use _javascript_ that seems a little excessive - in saying that tho I know next to nothing about writing _javascript_ (i'm a copier and paster in that department :). 

Can anyone point me to a particularly ellegant execution or tutorial for a " + / - " text size method? obviously keen to keep it all on track & standards based aswell :)

should also mention my site css uses keywords to define the base font size and %'s for variations. I like the idea of the wired.com method cause i can specifically target the article body copy and have it enlarge it quite a bit, but limit the 'enlarging' (?) of navigation to a smaller increment so as not to break it. i'm not sure the " + / - " method is going to allow me that much control...?

any help appreciated.


pete





RE: [WSG] CSS Rules - Naming Conventions

2004-02-15 Thread Peter Ottery
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: Opening pages in new windows... was Re: [WSG] XHTML (OT??)

2004-02-08 Thread Peter Ottery
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





  1   2   >