Notes: Please add your name, if you contribute, to the 'Authors' section at the bottom of this file. DO NOT COPY AND PASTE THIS FILE WHOLESALE. IT MAKES IT SLOW. Export it or save it as text. 16/06/2006 09:00 - 10:00 Bulletproof Web Design by Dan Cederholm "Love your site, Dan - but I can't read it." - Frustrated reader He'd been turning off images in his browser to save bandwidth and have it load more quickly. I was using Faux Columns to create the illusion of full-height columns. The background colour was a dark grey. Turning off the image caused the sidebar text to disappear (it's the same grey as the background), and the text is hard to read. Simple fix: Specify background colour equivalents in CSS to anything you're using background images on anything. What happens when images are turned off? Work on a baker's dozen principle: if someone wants 12 cookies, and one is bad, that's a problem, so cook 13 so there's one over in case. Bulletproof pants: Comfort Equippedª (expandable waistband) Bulletproof paths: * Content * text size * content amounts * Editing * Content changes * maintenance * Environment * device/browser * scenarios "The journey begins by letting go of control, and becoming flexible" - John Allsopp "A Dao of Web Design" He's talking about being flexible - letting go of control - but as a designer, we want to be in control of our page. Creating an arrow (saying 'this way' and pointing left): * We could create an image, and in some cases that's fine but the client might need to be able to change the content * We could use CSS with the arrow as a background image, but then text scaling breaks it because the content goes outside the arrow. If we turn images off, we see nothing (unless we specify a colour bg) [Evaluating with text size * I use it, and I have decent eyesight * Acts as a "flexibility barometer" * Not just text _size_, but content amount * Use relative text sizes with confidence] Solution #3: Bulletproof Heading with link in the middle for text. Background image of a knocked-out point with extra space. More of the arrow shape is revealed as the text size increases. Cork'd header: Typical scenario: logo on the left, something (tabs) on the right. We could use absolute positioning to position the things on the right, but when we increase the text size on the tabs or the tab area becomes larger than we want, it will go outside the document. Instead, use opposing floats (float the logo left and tabs right). Self-clearing floats are useful for bulletproofing. Netflix.com modular, rounded corner boxes Thinking in fixed-height Headers of boxes designed for one line of text, at a fixed size. Bulletproofing: semantic markupÉ Two areas need flexibility. Vertical sliding doors technique. Accepting the box Thinking about things that we can do to the box that don't require a lot of markup or CSS. clearleft.com Plain box with subtle corner addition hicksdesign.co.uk Subtle rounded corner on the bottom right of each sidenote box. Cameron Moll's portfolio sidebar Really not a box, ornamental caps, tiled, internal background. Layout Fixed vs. Fluid * Not going to go there * When executed well, fluid layouts can be _better_proof * Can have drastic effects on page design One problem with fluid is line lengthÉ When browsers are stretched out, we get crazy line lenghts Use max-width Use percentage-based padding Variable fixed-width layouts * Wider layout for wider browser windows * Javascript swaps class or serves alternate stylesheet when window is narrowed * Predictability for designers Bulletproof tools 10-second usability test * Take away the design * Is the site still understandable? * Like an x-ray of the document * Does the structure make sense? MLB.com CSS off becomes unreadable, obviously not using CSS for much Mcafee.com CSS off document is well structured and semantic Uncientific! É but easy (and helpful to add to your workflow) Validation as a tool * 100% validation is difficult to maintain * Validation during construction is key * Eliminates head-scratching CSS problems Web developer extension for Fx Safari Tidy Bulletproof dashboard * 10 second usability test * Turn off images (still readable?) * Validate markup and stylesheets * DigDug Text Test (DTT) - make text big to test structural integrity The bulletproof concept * A catchy phrase to sell books and secure speaking engagements * The positive power of buzzwords * Embrace flexibility * Let go of "pixel precision" * Plan ahead for worst-case scenarios Great design is not always equal to great design Questions: 1 thing I've found is the habit we have of taking parts of the pages and moving them aroundÉ How does this fit with bulletproofing? DC: We can source-order things to a certain extent, but it's hard. Maybe Shaun Inman's absolute clearing could be useful. Generally, taking anything out of the flow is a problem. You specified a max-width of 1000pxÉ Would it not be better to use ems? DC: Using ems isn't as easy as percentages. With ems, things are relative to the font-size. If we're talking specifically _just_ at one level, that would be fine. What about printing? What if the client wants to be able to print and see backgrounds et al.? DC: I ran into that recently. I think this is a printer/browser issue. Audience: Can hack this with a 1px img and then position/stretch that. Looking at JS driven layouts on CollyLogic and Man In BlueÉ Has anyone done that with pure CSS or floats? DC: Can do that with floats, setting specific widths. See CSS3 media queries. Stu Colville: I did this with pure CSS, as on muffinresearch.co.uk Any concerns about futureproofing with CSS hacks? DC: I'm a big fan of seperating hacks into seperate stylesheets. Standards-aware browsers have a clean file, others have both. Molly wrote an article on strategic CSS hack management or something. We have a large problem in transporting older sites to bulletproof style. For example, if you have tables, having things in a long line is easy. With CSS, it's not. DC: IT's tough. Maybe they don't line up: maybe that's ok. -------------------------------- Authors: Steve Marshall: http://nascentguruism.com/