A Little Light Reading

If you're thinking of dipping your toes into the standards compliance/css development pond (come on in, the water's fine!), and you aren't able to afford some of the swanky courses available out there, a good alternative is to read some books by well-respected practitioners in the field, at least to get you started.

Here's a small selection which I've read recently, and have found to be extremely useful. I'll try to add to the list on an ongoing basis, so you might like to come back and check it again later.

I no particular order (other than the order I've read them in!):

• 
  The CSS Anthology - Rachel Andrew, pub Sitepoint
  Excellent all-round introduction to using stylesheets for layout and positioning, with practical real-world examples. Good for people relatively new to CSS - I knew how to change fonts etc but was pretty green regarding CSS for layout until I'd read this and digested it thorougly.
• 
  Build Your Own Standards Compliant Website Using Dreamweaver 8 - Rachel Andrew, Sitepoint
  Invaluable for pointers on getting the most out of Dreamweaver 8 and making sure your code validates nicely, is properly semantic and doesn't suffer from coad bloat. Good chapter on layout of forms without tables.
• 
  Dreamweaver 8 Unleashed - Zak Ruvalcaba, SAMS
  A big, thick wedge of a book (I've actually read most of it but not quite all yet). Excellent advice on using Dreamweaver for dynamic projects. Gives code and method examples for ASP, ASP.NET and PHP server models, which is great as some books limit themselves to one flavour. I currently do most of my dynamic projects with ASP.NET, but in future I'll be getting to grips with some PHP too, so it's great not to have to buy another book right from the start.
• 
  The Zen of CSS Design - Dave Shea & Molly E. Holzschlag, New Riders
  The book of the website. Dave and Molly take a few of the excellent examples from the CSS Zen Garden site, and deconstruct them, with explanations about each technique explained along with copious screenshots (full colour). Yes, you can look at the site directly and try and work out what the stylesheets are doing, but that's pretty hard if you are a novice, and these succinct explanations are a great help in developing your understanding of how to apply the theory to real-world examples.
  
• 
  DOM Scripting (Web Design with JavaScript and the Document Object Model) - Jeremy Keith, Friends of ED
  A great introduction to the scary world of JavaScript for anyone who is thinking about delving into unobtrusive JavaScript which can add progressive enhancements to your site, whilst degrading gracefully if a browser does not support JavaScript (or has it turned off).
  
• 
  CSS Mastery, Advanced Web Standards Solutions - Andy Budd, Friends of ED
  Definitely not for beginners, but takes the examples and techniques to the next level for people who have some experience with coding standards-compliant (X)HTML/CSS. Two chapters at the end, written by Cameron Moll and Simon Collison, bring together lots of the techniques described earlier in the design of two case studies.

That's it for now, although I have a big fat PHP book sitting on the pile to read. I'll add more when I've had time to digest that.

@media, Hot Topics Panel

Closing panel for the conference. Just a mixture of random thoughts and questions.

• CSS is still an undiscovered country - progressive CSS should come. IE7 is playing catchup with a lot of the other browsers.
• Evangelising on the use of CSS is done - it should be a given (ha ha ha in some places)
• We're now waiting for the next leap forward in what we can depend on as far as browser support for the standards.
• Tantek demonstrated cutting edge css in Safari - a honeycomb pattern (yes, hexagons!) with rollover change of state - done entirely with CSS and not a graphic in sight. Blimey! That man has an enormous brain...
• Wireframing applications with XHTML/CSS is the only way to test fluid and changable size of text etc.
• What's missing from WebUI - Tantek would like an "undo" analagous function - plus CTL-S to save text in a form as you're going along (how many times have forms bombed on send, much to our cussing?) Or even better, persist it in the browser so its still there when you come back next time.
• Yahoo Libraries - no idea why I wrote this down, will have to Google for enlightenment ;-)
• Can Ajax be made accessible? Questioner wondered whether inaccessibility was a fundamental problem of Ajax, or just how it is implemented on any given site. User Agents are not really fully Ajax capable. Refs, Derek Featherstone/Joe Clarke basecamphq.com
• According to technorati.com 's user stats, 15% of users have Javascript turned OFF!
• It's best to specialise, but be aware of the designer/developer "trench" :-)

What's Coming Up?

• We need real, practical solutions for web designers
• Best practices
• Microformats, iCal
• OpenData - µ-formats, mashing, GoogleMaps release API, giving us frappr.com
  
• hCards hCalendars and RSS
  

There should be podcasts of the seminars out in due course, available from the @media website.

@media, Strategic CSS Management

Panel with Roger Johansson, Rachel Andrew and Dave Shea.

Always use basic vanilla CSS and HTML files as your starting point for any project. Then work on repurposing this to suit your bespoke application. This gives you a basic framework on which to build each time. Ref: undohtml.css (google for it or go to the end of this page) zaps all of the default browser formatting. Tantek developed it. Use to copy and paste into all new projects.

Next, stuff in the markup and some greeked content and validate

How to break up multiple CSS files
Several ways to do it, including:

• by typography, colours, layout (clear:left does this I think)
• Rachel puts most of her css in one file and pulls out the hacks into a separate one.
• Divide the sheet up with comments when its more complex.
• If its a very big sheet - put a Table of Contents at the top with these sort of comments /* page:=Header */ - as CTL-F will find "=name" very easily (equals not otherwise used in the CSS markup so you won't end up with spurious finds).
• Dave breaks it up into sections: global nav; sidebar nav; basic html; then will use a separate file for a specific section such as the shopping cart function - he finds it easier to find things again afterwards.
• List colours @ top of stylesheet in a comment - that way its much easier to do a global search and replace if needed.
  

One problem arises when you edit a stylesheet - you might rid the markup of a div, but rarely do you then weed out the associated css in the stylsheet - so it can end up rather bloated with old stuff you're no longer using. Try and use some sort of methodology to see if you can rid yourself of the extras.

Using Dreamweaver & Contribute in a collaborative environment
Some partcipants have DW and Contribute, and break the CSS up so that the typography is in one sheet which the dumb users can see - Contribute users will be able to apply these styles when choosing from their CMS, and so won't apply a page structure style to something that would blow up. The human factor has to come into play - there's no right or wrong way - you may choose to have one stylesheet for a small site, but split it up for a CMS-driven one.

COMMENT the CSS so you know what's what - its boring but very necessary when you come back (or someone else does) six months later and you can't remember what you did! Dave also finds it useful to comment the markup with div ends such as as you're not always sure which is the closing </div> tag (felt smug as I've already started to do that!).

• ALWAYS ALWAYS comment Hacks so you remember why they're there. Useful to include the download/explanation URL in there too, for your future reference.
• IF you use comments to break up the CSS, use lots of TABs to shift them over to the RHS - they are much easier to scan for quickly that way.
• If you are a large team, comment the CSS with your name and the date when you make changes
  

Class/id Naming Conventions
Stick to a scheme, be consistent across projects so you are not left looking for something months later (also stems from using one vanilla template to seed each project). Use names such as .sidebar, #navigation, .menu ie keep the name structural rather than related to how it looks. If there were rigid or ideal naming conventions, it would be great for accessibility as users could then more easily override a given style on a page - but that's Utopia, it ain't gonna happen.

You can (if you're clever) use Server-side scripting to change styles on the fly, but none of the panel had much experience of that.

Code Order
Within your CSS, try and be structural about your layout order - start with wrapper, header, then the rest.
Pick an order that makes sense for global sheets, or global, generic then section-specific.
Within a rule, try and stick to a set order for properties (its just good organisation, doesn't make any difference); position, float, colour, text align etc.
Specifity- when using rules which override previous ones directly, try and put them near each other, if possible, so you're not hunting all over the stylesheet. - you can still see the styles which will override the properties.
Or group by elements - H1, H2,... Li...<a href> etc.

Tools
Text editors are OK! Or Topstyle, Firefox Web Developer toolbar (switch sheets on and off stupidly easily) .
Testing
Browsercam - its just like having multiple boxes running different browsers (VM ware?)

@media, Bulletproof Web Design

Accessible ways to bulletproof your website, by Dan Cederholm.

If you are using an image background for any element - apply colours as a fallback too.
Bulletproofing applies to:

• Content - text size, content amount (overflows don't cause your design to blow up)
• Editing - content changes and maintenance
• Environment - what happens in various device/browser senarios (turn off CSS, JAvaScript etc
  

Ref: John Allsop - "The Dao Of Web Design"

How to make an icon with text and arrowhead the easiest way?
You could use an image (not editable easily), or CSS styled text and b/g colour and a "sliding door" type arrowhead as a b/g image element applied to the div.

Site headers used to be easy with tables - how do we have a logo aligned left and tabs/links aligned right?
Use one div for the header b/g (and perhaps use img as b/g to that) then float:left the div surrounding the logo, and float:right the div surrounding the nav/tabs/links. Reference: Positioning Is Everything - Easy Clearing

Also, use Modules (divs) which can be placed on the page. Fixed height modules will break with larger text sizes - you need to employ a Vertical Sliding Doors type technique.

Accepting The Box
The box model obviously leads us towards a mor rectangular layout, but you can break out of this visually by applying subtle b/g images to corners (one per element so if you want two, you might have to apply one to div b/g and one to h2 or p background) - to give the impression that things are rounded off or turned over at the corners. Refs: Hicksdesign.co.uk, Odeo, Vivabit (two rounded corners), cameronmoll.com (fancy top and bottom gifs for headings).

Reusable Ornamentation
Effective additional styling elements can be useful for breaking up the boxiness of a site. Eg for h4, give it a top border, text+b/g colour, then img b/g aligned to below and centred 50% - which iif its larger than needed will also suffice for long headlines. See some of the stuff on csszengarden for more ideas.

Pimp Up My Navigation!
Use a gradient b/g image to underlay text, then give the list item a two-sides + top border. Use CSS to style with different colour on mouseover. The only drawback - the :hover pseudoclass only works on anchor links in IE - but you can set li:hover for browsers like FireFox which know what to do with it - it'll just look heaps better in a standards compliant browser without breaking in IE6. You can attach icons to links easily by using a href="blah.htm"
class="edit" and then in the css, a.edit {background-image: url(edit.gif) } or whatever. Refs: haveamint.com, joyent.com, uncorked.com

Layouts - Fixed vs Fluid?
Fluid is better for increasing text sizes and accessibility, but can have major knock-ons for designs. Ref: rollyo.com - used mix and match: Home page is fixed width, but fluid on search results centre column. This is great, but the max-width CSS declaration is not supported in IEWin (dammit), eg #wrap {max-width:1200px;}
Refs: vertua.com uses %-tage width cols on either side to resize the central column.
simplebits.com

Variable Fixed-Width Layout
Wide layout for most browsers (four columns) - but then some clever DOM scrupting with JavaScript switches a stylesheet or class when the browser window is narrow, such that you now get four rows instead! Neat. Ref: cameronadams.com

Bulletproof Tools - Take the 10-second Usability Test:

• Take away the design (css) - is the site still understandable (a lot to do with semantically correct HTML and source order)
• Validation - keeping valid code 100% of the time can be difficult to maintain, but key while designing a site is constant validation of Markup and CSS - avoids lots of aggro when stylesheets don't work for silly reasons.
• Turn off images and see what happens
• Text size - pump it up a few sizes and see what ballooning text does to your design

Concepts - embrace flexibility - you will never get a site looking identical in in all browsers, but if it's still functional and usable, across a wide range, that's OK: Let go of pixel-accurate design constraints.

Issues
Print CSS - still a problem to be able to print out images used as backgrounds to any element. Refs: collylogic.com, muffinresearch.co.uk (drop coloumn site with pure css)
Hacks - Keep IE-specific hacks in a separate stylesheet; keep your main stylesheet clean. Refs, Molly H's article, "Strategic CSS Hack Management".

@media, Eric Meyer's Keynote Speech

A write-up of some rough notes I made during the 2-day @media2006 conference. I hope they make sense after the event!

Eric went through a brief history of web development in relation to CSS etc. I missed the fiirst few minutes (due to transport problems) but came in at Todd Fahrner suggesting the use of the Doctype declaration for switching rendering engines to Tantek Çelik, who was at Microsoft building IE5 for the Mac. This was launched in 2000. Tantek invented the Box Model Hack (which is valid CSS, even if it doesn't look obvious!) in 2001/02, when using CSS for layout began to catch on. People sat up an took notice when wired.com went table-less CSS for layout in October 2002 (design by Douglas Bowman). Then Dave Shea waded in with the CSS Zen Garden and layed down the gauntlet to challenge perceptions of what can be done with pure CSS. Today, the real world still has source-order dependencies; some things are still hard to do, eg easy alternation of row colours which was fairly trivial with tables. Printing with CSS has been improved with CSS3.

Other links/references:

• www.cssbeauty.com
• In search of One True Layout - article at Postinioning Is Everything

Introduction

I thought it would be useful for me to start a professionally-based blog rather than polluting my Rugybmadgirl blog with stuff about XHTML, CSS and web technologies, which is for entirely different audiences. So here goes...

I'm a web designer and developer with 10 years experience of coding sites - I started with Notepad back in '96 and have progressed quite a lot since then! My current weapons of choice are:

• Dreamweaver8 - Macrodobe's latest offering (I've been using DW since version 4) which has much better support for CSS layout, XHTML and .Net than its predecessors
• PhotoshopCS - essential for graphics preparation and photographic retouching
• Firefox 1.5 with various plugins, notably:
  

1. Web Developer Toolbar - turn off css or javascript at the flick of your mouse, outline block level elements, debug scripts, and heaps more.
2. Tidy HTML validator - great as it runs on your localhost and immediately validates any page directly in the browser. Especially useful if you are developing offline or for intranet apps when you can't get the W3C validator to play ball - its the same validation engine
3. IE Tab - allows you to open tab in Firefox which uses the IE rendering engine - dead handy if you have a pathalogical fear of using Internet Explorer :-)
   
4. Foxytunes - for keeping you supplied with music, this plugin gives you all the basic controls over your media player of choice in the status bar of the browser, and takes up much less task-bar real estate than the minimized Media Player
   

• XHTML - usually 1.0 transitional, but sometimes 1.0 strict. Essential if you want to improve your standards-compliance and accessibility for your content
• ASP.NET - I have developed a few sites driven by .net, and have found it to be resonably easy to get to grips with. Examples are:
  

1. www.cazphoto.co.uk - an online portfolio site for my general photography
2. www.rugbypix.com - specialising in my rugby photography
3. www.johnflood.co.uk - electronic publishing for John Flood, professor of Law & Sociology
   

• Access2000 - so far, the sites I have developed have not needed the extra scalability required by mySQL or SQL Server, but I do intend to build sites with mySQL in the future.

I'm also looking to develop my PHP skills in the near future.