The Files

I thought I’d write up a short post outlining the discussion we had at Barcamp regarding building your CSS Framework (or template).

I’ve been using a standard three column template (both css and HTML) for a couple of years now. I wrote a post back in Feb ‘06 outlining my CSS Methodology (named rightly or wrongly…) I’ve refined and tweaked that set of tools a fair bit and have cut it down to only one main CSS file (if you exclude the IE CSS overrides and the print CSS)

What I now have are these two files:

• The base HTML file
• The CSS template/framework/whatever

Linking to those files means that you’re welcome to download and use as you see fit. I have decided to license them under Creative Commons (Attribution-Share Alike 3.0 New Zealand License) so please don’t be a dick - if you use it credit me somewhere (in the comment will be fine) and if you change/alter/make better please be sure to release it back into the wild. These files are what I use and I would love you all to help make them better - remember: this isn’t a competition - this is for the greater good!

The Holy Trinity of IE hacks

Note: these are IE6 hacks

During my talk I mentioned the holy trinity of IE hacks. I need to clarify and correct an error in that statement. I was too pepped up on coffee and didn’t list them correctly. So here is what I call the holy trinity of IE hacks:

• display: inline; this removes the 10px margin issue that floated elements tend to have
• position: relative; this fixes random issues (too many to name)
• height: 1%; this also fixes random issues (too many to name)

And as an added bonus here’s another one (which I listed at Barcamp instead of the above height:1%; one)

• overflow:hidden this forces IE to respect block level widths and/or heights set to an element. If this is omited the layout it likely to ‘blow-out’ if the content of the block-level element is too wide/tall

Please use the comments section below to ask any questions or pass on any other advice/tips/etc you may have.

I’ve always found doing print stylesheets a chore. Just so many steps in order to check your work.

Those days are over! I’ve found a very easy way to edit your print CSS live in your browser and get instant visual feedback.
(more…)

Thank-you Mozilla.

The wonderful people who brought you Firefox and Thunderbird have just released probably the best Firefox addon: Operator.
(more…)

PNG24’s are the answer to all our prayers. Now I know what you’re thinking: “PNG’s have been around forever…what’s the biggie?” Well the biggie is that IE 7 is now supporting PNG24’s which means that we can start doing some awesome stuff without having to hack our code to shit! Unfortunately it’s still going to take a wee while for IE 7 to filter down to most users machines so we’ll still have to do a little bit of hacking for our dear friend IE 6
(more…)

This snipped was taken from the New Zealand Herald

Can you believe it?! In this day and age how dare any website decide that they’re not going to serve to a fairly large (and growing stedily) userbase?! Damn you Air New Zealand. I take this as a personal attack!

Disclaimer

What follows is a mind dump. I’m fully into my job. In fact, it’s more than just a job. The web is a way of life for me. I love, love, love it! Tight markup makes me feel good down there and CSS makes me shout ‘w00t!’ several times a day. So before you read this just know that most of what follows is passion driven. If some facts are incorrect please let me know and I’ll endeavor to correct them.

This is going to be a multi-part post as there is simply too much to chuck out in one go so keep an eye on your RSS reader for updates.

Introduction

The next few posts will be dedicated to what web standards mean to me. I’ll be covering five main topics:

• validating code
• accessible and semantic code
• user centered design
• web applications and apis
• the new paradigm (aka conclusion)

The phrase Web Standards is a bit of a broad one…well at least it’s becoming that way.

About two or three years ago Web Standards were simply a set of guidelines (or standards) that browser vendors would use to help build a more standardized browser. They were also a set of guidelines that web site authors would use to to build more standardised code that would ultimately work in these standardised browsers. It’s wasn’t always this way…

The good ole days?

Back in the early days - the days of Netscape 3, 4 and Internet Explorer 3, 4 - browser vendors would make up their own tags willy nilly. Some of these tags you know only too well: <center>, <blink>, etc…Some others have moved into non-proprietary standards, like <div> and <span>. That in itself wasn’t a problem…the problem was what each of these browsers did with the rendering of these tags…Some browsers wouldn’t show blinking text (and good on ‘em for that!), some browsers wouldn’t know what a div tag was…there had to be some sort of governing body to get some standards in place.

So along came the W3C (World Wide Web Consortium).

“Wait wait!” I hear you say, “the W3C has been around for AAAAAGES!”
“Yes,” you’ll hear me say in response, “but who the hell even knew what it was back then?!”
I’ll tell you - TBL. (I’ve got confused with all this first person/third person thing so I’ll just keep it simple from now on.)

Slowly the voice of the standardites grew louder. More and more people started to realise that standards in this fast growing fledgling industry was a must! Not only for browser vendors but for us HTMLers. Collectively people got fed up with the silly browser wars. It seemed way simpler and smarter to build to a global standard, not a browser vendors standard.

The validating revolution

If you haven’t heard of this revolution then it’s about bloody time you VALIDATE YOUR CODE! Probably the most important part of Web Standards is the physical act of writing code that complies to the standards provided by the W3C.

The first step to writing standards compliant code is to choose a standard to build to. I cant tell you how many web pages I’ve seen that don’t contain a Document Type Definition (DTD). This is step one! These wonderful things tell the browser what markup language you’re writing in. There are several options here, all of which have their pros and cons. I’m not going to get into those - that’s an entirely different blog post.

One should also validate your CSS. This is a sightly different kettle of fish…A vast majority of CSS out there wont validate. The reason for this is because of the CSS hacks people use to get non-compliant browsers to behave. Most of these take advantage of browsers lack of compliance, most of the time that means using some wack combo of comments, made up properties and weird characters.

Valid code makes it so much easier to debug down the line. Most rendering mishaps occur due bad markup. Validating your markup will easily help find those unclosed tags, those incorrect nesting issues and incorrect attributes.

In the next episode…

The next post in the series I’ll be talking a little more about markup and the beauty thereof. In particular I’ll be going over semantic markup, accessibility concerns and source ordering your markup.

Please remember to leave your comments. Tell me what web standards mean to you!

So here I am back in Auckland, trying to get my shit together. The past week has been such a high but now I’m finding it quite a challenge to get all my thoughts in check…

I’ll briefly go over what I enjoyed on day two of the conference. I wont cover all the speakers, just the ones that I was enthused enough to take notes about. As you may remember day one ended at a restaurant with 13 hardcore geeks. Needless to say getting up the next day was a bit of a struggle (thanks to the kingfisher!) but there was a lot of coffee and redbull to keep up going.

• Russell Brown (one of the few NZ speakers) opened up day two with an excellent talk on content and community. Russell Brown has been in the ‘content’ industry for ages, working as a journalist, radio personality and founding Public Address. He started his speech with an audio clip of David Lange’s 1985 Oxford Union debate speech and ended with an excellent video of a Starwars/LoTR mashup. In between he spoke about how content creation is slowly moving away from the mass media and how there’s been a huge turn towards citizen journalism. All in all, a very good talk with a lot of excellent references!
• Russ Weakley who is the founder of the Web Standards Group was next up with a funny and passionate talk entitled: Let go and allow users to control their own experience. For me this was one of the best talks of the conference. Not only is Russ quick-witted and dry, but he really knows his shit. His whole speech was based around this hypothetical situation: “Image you were in control of a large website with inconsistent and unwieldy structure. What if you had total freedom to redevelop the website from the ground up? What would you do?” Russ covered a lot of really interesting and out-there ideas that challenge the way we structure website content. He gave us a whole new paradigm to web design and information architecture. Throw out hierarchy; tag everything (images, text, audio); have users search for the content they’re after and return all the tagged media that related to that search term; allow users to control what they see; allow user submitted content (wikis, comments, tags). A really great way of looking at IA…a little Utopian, but fucken rad, none-the-less.
• Dori Smith - author of several books, magazine contributor, speaker and leader of the Web Standards Organisation’s DOM Scripting task force - a geek extraordinaire gave a brief introduction to unobtrusive javascript. This was a good (albeit entry-level) talk on progressive enhancement and how it pertains to javascript. She showed us how easy it is to convert nasty looking attribute event handlers to beautiful, unobtrusive javascript. The only bad thing about this talk was the fact that there were idiot ego-centric geeks who felt it necessary to point out minor unimportant errors in markup and semantics. FFS!!! Those dicks should have their hands chopped off. Dori, if you happen to read this. I thought your talk was excellent and I look forward to any others you may give in the future!
• Donna Maurer - an amazing speaker from Australia who gave a captivating presentation on usability for rich Internet applications. There are a few basic guidelines that any application should adhere to (including RIA’s.) These are: it should be efficient, effective, satisfying, easy to learn, have good error management and good feedback. Donna went through several screencasts of popular ‘web2.0′ applications and discussed several positive and negative things about them. It was really informative to see these things pointed out. Some thing were as basic as making sure buttons look 3D - this is something computer users learnt years and years ago and keeping these common design/usability trends going really makes for a far superior user experience!
• The rest of the day went in quick a blur…Tony Chor from the IE7 team gave us a demo of IE7 and talked through some of the new features. The thing that struck me about this presentation was the passion and sense of humour Tony exuded. The final presentation was by Kathy Sierra entitled Now Go Change The World. This was an awesome show. She really had the audience in the palm of her hands. At the end of it I was more inspired and psyched about web design than I’ve been in bloody ages. It was great to end on such a high note as it made for an awesome start to an evening of drinking, dancing and schmoozing. Give the geeks some beer and they’ll dance the night away!

An amazing experience! The organisers did such an amazing job. Big big-ups to Mike Brown and the team for pulling off such an awesome event! I cant wait for next year!

technorati tag: webstock

Feedview is an extension for Firefox that converts RDF into a more readable format. It uses a simple stylesheet to style the content. You can also provide a custom stylesheet if you so desire.

I know Safari has had this for a while…but who actually uses that browser?

Microsoft is being quite cagey about the details of IE 7 but are quietly letting their partners know a few things.

This article at Microsoft Watch explains it in more details.

This is the browser that saved the World Wide Web. In a time where mediocre, non-standards compliant browsers are the norm, someone somewhere decided to pick up the old Netscape source code (which was released to the open-source community) and develop a browser that would comply to the W3C standards.

Background

Back in September ‘02 the very first version of Firefox was released to the world. Since then there have been releases every few months - each version getting closer and closer to the perfect browser.

Firefox grew out of the desire to make the best browser available , bar none. Ex-Netscape browser developers decided to show the world what a browser could look like if it were developed using the Gecko engine. Using the core Netscape code, they stripped out all the unnecessary UI and functionality, tweaked what was left and ended up with a speedy, easy-to-use, standards-compliant browser.

As it turns out, this is exactly what the web world wanted - and why not? I feel the team at Firefox says it best: The target market for Firefox includes all users who wish to use the Internet safely and efficiently.

Extensions

This is probably Firefox’s biggest selling point for me - extensions allow the user to customise the browser as they need.

Want to add some development tools? Why don’t you try Web Developers extension? How about a GMail mail notifier, or perhaps you want to try your hand at the mouse gesture extensions?

Those are just three of hundreds and Firefox has a good looking extension manager to help manage all the extensions you’re likely to end up with. Most extensions come with advanced preferences - so don’t forget to see what else your new extension can do!

Note: Not all extensions are going to work with Firefox 1.0(PR) right away. It always takes a week or so for the extension developers to release new versions. To make sure you’ve always got the most recent version of an extension just click the blue Update button located at the bottom of the extension manager.

User Interface

This is a difficult topic to discuss as the interface is VERY customisable. Not only can you download themes for Firefox, you can modify the the menus, toolbars, and tabs.

The latest version of Firefox has a few very smart tweaks to its interface and usability.

Tab close buttons

Earlier versions of Firefox haven’t had close buttons that were worth mentioning, but now they do :)

Find as you type

Find as you type is a handy little feature that has always been in Firefox. The only difference now is that they’ve given it an interface. To see it in action simply surf to a webpage and start typing. You’ll notice the Find as you type bar appear at the bottom of the browser window. Firefox will automatically search the text on a page the moment you start typing. Cool, huh?!

Popup blocking notifier

Thanks to internet scum, browsers are coming with built in popup blockers. A popup ad is one of those annoying windows that invades your screen most of the day if you use IE. Firefox warns you that the page you’re viewing is trying to popup a new window. By right-clicking on the notifier you are able to chose what you’d like to do about it: block all popups, allows all popups; etc…

RSS Autodiscover

This is a long awaited addition to Firefox. Native RSS and ATOM feed reading capabilities. Firefox looks for the inclusion of a <link rel=”alternate” type=”application/rss+xml” title=”RSS” href=”atom.xml”> tag. If it finds one it shows the RSS icon in the bottom right hand corner of the browser. More about this below.

RSS Feed Options

There are two ways to feed your RSS aggregation needs.

1. Built in Live Bookmarks

   This is a great new feature I’ve been looking forward to. Firefox has approached RSS aggregation from a nice angle - it lets you view RSS feed headlines in the Bookmarks Toolbar or Bookmarks menu. You simply click on one of the headlines and it takes you directly to that article.

   Firefox will autodetect an RSS feed on a site and notify you by showing the orange RSS icon in the bottom right corner of the browser. Clicking on this icon will bring up the Subscribe To RSS dialog. Click OK, and away you go!

2. Sage (A lightweight RSS and ATOM feed aggregator)

   Up until the addition of Live Bookmarks Sage was the only way to read RSS feeds with Firefox. I’ve been using it for a while now. It is my preferred method for reading feeds.

   Sage will read RSS feeds that are in a Bookmarks folder that you predefine so make sure to keep all your RSS feed URLs in the same Bookmarks folder.

   Sage makes use of the side bar and the browser window (as you can see in the image below.)

   

   Sage takes an RSS feed and generates a simple CSS-styled XHTML file with all the RSS content nicely displayed. There is an awesome option that allows you to use a custom style sheet so you can have your RSS articles look any way you wish.

And…?

Firefox has saved the web - the only problem is not many people know that. As an avid web surfer, and web developer, I see Firefox as the best thing since the internet itself. I’m able to build websites according to a set of rules and know that Firefox will render the websites perfectly. The Firefox crew have, indeed, created the best browser!

If you want any more information about Firefox check these links:

• Get Extensions and Themes
• Spread the Word!
• Support Forum
• Firefox Forums
• Firefox Help