Web design, standards, the universe, etc..
Ozcranes is a fully volunteer site. We wanted it to look good, but with fast enough loading and efficient navigation for all our users. Thanks to the amazing help offered by the Web Standards community worldwide, we discovered it's possible (in time) to learn good design, on no budget, and keep learning. Here's some of the outstanding resources that helped on the way, and (at the end) our ‘to do’ list of future tasks.
- Standards & Sites
- Why Standards?
- Outstanding sites
- No budget, no drama
- Coloured scrollbars
- It's fun (true)
Standards and sites
Web Standards offer just what Ozcranes needed – good usability with maximum design possibilities. Roger Johanssen says it all so well.
Outstanding standards sites Australian companies and designers making a difference worldwide – Max Design, Webboy, westciv, the Web Standards Group. Indispensable sites overseas include: A List Apart, Position is Everything, Mezzoblue and 456 Berea Street. Visit them to view superb and workable designs and discover why web standards matter.
No budget, no drama: the easy road We didn't spend heaps and get bogged down in elaborate WYSIWYG software. We took the easiest path: no tables except for tabular data, no JavaScript, no ActiveX, no Flash! Hand-coded in xhtml 1.0 and css, validated at W3C, the Web Design Group or Nikita the Spider.
Disclaimer: coloured scrollbars As mentioned, Ozcranes checks code with free validation tools, but the scrollbars are a slight exception to web standards. They're only visible in IE. Prediction: readers like scrollbar styling, the standards will change..
Coding is fun Hand-coding and mark-up really is fun: don't you always like to know what's under the hood? Why not, as a small (or one-person) team on your project, watch with interest the interaction and sometimes conflicts, between you the designer, you the client, you the perfectionist, you the web user, you the writer, you the artist, you the coder..experience the satisfaction when things work and look good, and when there's great feedback from users and contributors. Then, move on to improve it all..
TOPResources
Couldn't have started without..
- Wonderful free tutorials at key Australian sites with international web standards impact: westciv, Max Design (css, lists and layout) and SitePoint. Overseas, css and html articles from Your Html Source and Html Dog. (A person planning a career in web design would look seriously at westciv's paid on-line courses and StyleMaster program).
- Full standards documents from the World Wide Web Consortium (W3C), for xhtml 1.0 (xhtml1.zip), html 4.01 (html40.zip) and css2 (css2.zip): Total 1.49MB.
- Free online code validation service (W3C) for CSS2.1 and xhtml/html. Validation also available free at html-help and Nikita the Spider. These checks are fast even at rural internet speeds. And how nice to get the ‘all clear’ message (except for the coloured scrollbars, of course)..
- Keep links up-to-date: The Web Design Group (html-help: Link Valet) and Nikita the Spider also offer free and absolutely invaluable link checking. We use them regularly to check the whole Ozcranes site for changed or problem links.
- Troubleshooting advice; advice; tips; and two sites with excellent forums, Site Point and the Web Standards Group. A third forum site css-discuss is again a key resource now they seem to have solved the spam problem.
- Accessibility sites starting with links from the Web Standards Group and Juicy Studio. Excellent: Joe Clark's book on-line and this summary piece from 456 Berea Street. And some good stuff from Trenton Moss, plus typography advice at Web Style Guide, Usable Type or at SitePoint. Again the excellent Joe Clark on web accessibility and pdfs. And here's the WASP (Web Standards Project) with a business case for accessibility. Yes, shouldn't this apply to non-profits as well as business, eh?
- To make a favicon – from Chami (the Html-Kit people), a wonderful free resource. Make a 64px by 64px (72dpi) image for your favicon, then visit Chami's favicon page and they will convert it to your favicon, on-line.
Using every day..
- A Text Editor: Ozcranes started with Notepad (free with Windows), it's a clear and simple format for editing CSS files. All our html files are now coded and saved as UTF-8 with HTML-Kit. This excellent and customisable editor from Chami is free for personal use (download 2.8MB) and includes HTML-Tidy
- Essential browsers – IE7, IE6 (still), Mozilla Firefox and Opera
- Great tools with Mozilla Firefox, add Chris Pederick's Web Developer extension (donationware, 145 KB)
- For IE: free Web Accessibility Toolbar with links to many tests, validations, text and screen resizing etc
- The Hex: Web colours (forget ‘safe’ but remember accessibility) eg from here
- Special characters and symbols (called ‘Character Entity References’) from the unzipped W3C xhtml/html standards or a helpful site
Reading often..
- 456 Berea Street and A List Apart – regular interesting articles
- Adactio – regular articles. And, no less than nine completely different designs for the same content (you choose the ‘skin’)
- Zen Garden – the same html file presented in hundreds of (stunning) different designs, varied by each designer's css and graphics
- The Web Standards Awards – not adding new sites but remains as a showcase for good standards-based design
- The Web Standards Group ongoing ‘Ten Questions’ series: interviews with leading Web designers, accessibility experts and others, fully archived
- Veerle's Blog – graphic design blog with tutorials
Start-up Library..
Check these links for reviews, contents, and discussions on recommended books. And – in today's cost-cutting publishing world, where technical books routinely have a few errors in the first edition – links to errata are also listed, where available
- CSS in 10 Minutes, by Russ Weakley of Max Design (Sam's Teach Yourself). News, contents, errata from the author at Max Design
- Build Your Own Website the Right Way using Html and CSS, by Ian Lloyd (SitePoint: first 4 chapters available free on request). Review and discussion at 456 Berea St
- Bulletproof Web Design by Dan Cederholm (New Riders). Contents, samples, errata at the author's site; review at 456 Berea St
- The Zen of CSS Design – the book of the Zen Garden site, by Doug Shea of Mezzoblue and Molly Holzschlag (Peachpit Press). Discussion and errata in the Autistic Cuckoo archives
To Do..
- MathML (with a link for IE users to download MathPlayer from Design Science). And how to serve pages as xhtml+MathML, when needed for accessible html pages with stats formulae..meanwhile anything with lots of stats will need to be in pdfs
- Search function?
- A Contact form. Meanwhile, email or write to Ozcranes Contacts
- Alternative layouts: A Zoom – really large fonts; and something minimal for hand-helds
- Gazeteer: A list of places mentioned on Ozcranes, with their locations
« Return to Ozcranes Help
