First noticeable difference for me has been its speed. It rocks — blazing fast.

The bag of goodies for Web Developers is surely going to take Firefox 3.5 another leap into the future. However, to be fair to Safari I must point out that Safari had passed Acid Test 2 ages back. Its good to see GrApple Yummy(theme for Firefox that makes it look like Safari) working on the new release of Firefox 3.5. Go get your copy!

Microsoft have just confirmed they plan on using the crippled Word rendering engine to display HTML emails in Outlook 2010.

This means for the next 5 years your email designs will need tables for layout, have no support for CSS like float and position and no background images. Not to mention the long list of bugs and quirks that break the simplest of layouts.

Outlook 2010 is still in beta and Microsoft have confirmed they want to hear your feedback on this decision. It’s time for the email marketing and design community to rally together and encourage Microsoft to embrace web standards before it’s too late.

What’s the best way to do that? Twitter of course.

Visit fixoutlook.org to see how you can help and what the community is saying right now.

If you think fixoutlook.org is a good idea, why not forward this to your friends.

Photostream: http://www.flickr.com/photos/18741535@N00/ (RSS)
Web Directions 06 Group Pool: http://www.flickr.com/groups/86022183@N00 (RSS)
Web Directions South: http://wd06.com, http://www.webdirections.org
Social Networking: Web connections

Download the nightly build from http://webkit.opendarwin.org/blog/?p=41 and run the followinf in Terminal.

defaults write com.apple.Safari \
WebKitDeveloperExtras -bool true

And you should be set to go. You’ll then see a new “Inspect Element” contextual menu item on any web page. This will open up the Web Inspector and refocus to the node under your cursor.

HTML

<ul id="sitemap">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#" class="open">item 4</a>

<ul>
<li><a href="#">sub-item 1</a></li>
<li><a href="#">sub-item 2</a></li>
<li><a href="#" class="open">sub-item 3</a>

<ul>
<li><a href="#">sub-sub-item 1</a></li>
<li><a href="#">sub-sub-item 2</a></li>
<li><a href="#" class="open">sub-sub-item 3</a>

<ul>
<li><a href="#">sub-sub-sub-item 1</a></li>
<li><a href="#">sub-sub-sub-item 2</a></li>
<li><a href="#">sub-sub-sub-item 3</a></li>
<li><a href="#">sub-sub-sub-item 4</a></li>
</ul>

</li>

<li><a href="#">sub-sub-item 4</a></li>
</ul>
</li>

<li><a href="#">sub-item 4</a></li>
</ul>
</li>

<li><a href="#">item 5</a></li>
<li><a href="#">item 6</a></li>
</ul>

CSS

ul#sitemap{
border:none;
margin: 0;
list-style-type: none;
background-color: #fff;
padding: 0;
width: 175px;
font:normal 93% verdana,sans-serif;
border-right: 1px solid #f3f1ed;
color:#333;
float:left;
margin:0 0 1em 0;
}

ul#sitemap li{margin-bottom: 0;}

ul#sitemap li a{
background:url(arrow_black_r.gif) right no-repeat #DFDBD5;
color: #000;
font-weight: bold;
display:block;
padding:7px 7px 7px 0.5em;
text-decoration:none;
width:auto;
}

ul#sitemap li a.open{
background: #f3f1ed url(arrow_brown_d.gif) no-repeat right;
color: #6a2b04;
font-weight:bold;
}

ul#sitemap li li a.open{
background: #e3e0db url(arrow_brown_d.gif) no-repeat right;
color:#6a2b04;
font-weight:bold;
}

ul#sitemap li li li a.open{
background: #dfdbd5 url(arrow_brown_d.gif) no-repeat right;
color:#6a2b04;
font-weight:bold;
}

ul#sitemap li li li li a.open{
background: #dfdbd5 url(arrow_brown_d.gif) no-repeat right;
color:#6a2b04;
font-weight:bold;
}

/* second level */

ul#sitemap ul{
margin: 0 0 0 0;
padding: 0;
list-style-type: none;
}

ul#sitemap li li{ background: url(dot2.gif) no-repeat; }

ul#sitemap li li a{
background:url(arrow_or_r.gif) 5px no-repeat #F3F1ED;
color: #000;
font-weight: normal;
display:block;
padding:7px 7px 7px 1.3em;
text-decoration:none;
width:auto;
}

/* third level */

ul#sitemap ul ul{
background: url(dot.gif) repeat-y 30px 0;
}

ul#sitemap li li li{
background: url(dot2.gif) no-repeat 30px .5em;
}

ul#sitemap li li li a{
padding: .5em 0 .5em 2.5em;
background:url(arrow_or_r.gif) 18px no-repeat #F3F1ED;
}

/* fourth level */

ul#sitemap ul ul ul{
background: url(dot.gif) repeat-y 60px 0;
}
ul#sitemap li li li li{
background: url(dot2.gif) no-repeat 60px 0;
}
ul#sitemap li li li li a{
padding: .5em 0 .5em 3.5em;
background:url(arrow_or_r.gif) 31px no-repeat #F3F1ED;
}
a:link{
color:#000;
background-color:transparent;
}
a:hover{
color: #b64908;
}

Event: Sydney Web Standards Group Xmas drinks
Date: Friday 16^th of December
Venue: Bungalow 8
Map: http://www.bungalow8sydney.com/sections/map/map.html
Time: 6 pm onwards…
URI: http://www.bungalow8sydney.com.

See you there!!

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 Australia’s 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 compromises 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

Peter Ottery as some of you would know redesigned the SMH site. The first of its kind, huge Web Standards and CSS implementation in Australia (think that is right). However, Peter is no longer with Fairfax Digital but do drop him a line if you like his mycareer rendition in the new design, HTML and CSS. Well done Pete! Congratulations! hope you read this.

We generated a few pages after having built the Content Entry Form followed by the Presentation Template. The HTML layout of the pages are in


tags as this site was built sometime back. But TeamSite did prove that it produces valid code. So contrary to a lot of myth TeamSite does produce Valid code!

Example pages generated through TeamSite and the validation results

view example 1 | Validation result

view example 2 | validation result

view example 3 | validation result

I see your next question coming, so here goes:

Why use Teamsite as your enterprise CMS?

Interwoven TeamSite is a powerful content management application designed to empower non-technical and technical staff to manage Web site content and metadata. It can be modelled around business processes to effectively deliver content using the Web.

In a nut shell TeamSite does some things extremely well in comarision to most CMS software out there today:

• Multiple Branching
• Virtualisation
• Robust Search
• Whole Site Versioning
• Comprehensive File Versioning
• Easy Templating
• Advanced Metadata Support
• Tools Compatibility
• Automated Advanced Workflows
• Multi-Lingual Support

• What legal issues do government and education developers face?
• Are you doing everything possible to ensure the widest accessibility to your content and services?
• Learn how easy it can be to improve accessibility, while saving development time and bandwidth costs
• How visible is your site to Search Engines such as Google?

You just cannot thank them enough for the good they are doing to the society at large, the results may not be seen rightaway but this will(is) usher(ing) Australia and very particularly Sydney, Melbourne and Brisbane to a very Web conscientious user base.

Some results are gradually starting to show and given another year or thereabouts it is no doubt these cities will scale right up in the Web Standards world thereby promoting education, information, knowledge not only to the average Joe but also to the disabled — to one and all.

Isn’t this such a beautiful cause to fight for. Isn’t this something to stand up for. And there is enough love in the Web Standards Group to help others out… all you need to do is ask…

If you haven’t been to any of the WebStandardsGroup meetings in Sydney here is your golden opportunity ..come along for the Sydney September meeting this 16^th September,

(Corner of College and William Streets – entry via William Street entrance)
Map and parking info

Thank you all for making this effort to bridge the difference, for helping many out there get on the standards curve and for sharing your knowledge with the world.

Presentation links

• The benefits of Web Standards to your visitors, your clients and you!
• Web Standards Checklist
• Universal Accessibility — with some very interesting demonstrations
• Web Standards in Education and Government

What is W3Sites?

W3 Compliant Sites is a collection of web sites that were created by designers that conform with the W3C standards. It provides the opportunity for them to display their work and ideas in a community that shares common interests. W3 Compliant Sites is not an initiative of the World Wide Web Consortium (W3C), but rather an inspiration that came out of it. The site has one goal. The same goal that responsible web designers all share. That is to promote web sites that are designed to comply to the web standards.

Do you have a complaint site that you created or know of? Why not add it in? And if you live in Sydney you would love to meet Sean, he is one of the nicest, down to earth designers!

Dan Cederholm has written a book ‘Web Standards Solution – The Markup and Style Handbook (Pioneering Series)’ — ISBN: 1590593812.

This was inspired by the format of SimpleQuiz — If you wish to read more about the book, stay tuned. This book is due to be released early June 2004, under the Friends of Ed series and contains stacks of Questions and Answers on Markup and Styles and Web Standards.

PreOrder at Amazon.

Amazon Product Details are:

• Paperback: 300 pages
• Publisher: friends of Ed; (June 7, 2004)
• ISBN: 1590593812
• Amazon.com Sales Rank: 4,606