Dan Cederholm - Bulletproof Web Design ====================================== Family visit to London - had plans to travel the world, but he arrived early so he's at home Will be talking about flexibility in design and worst case scenarios. Email - "I love your site, Dan - but I can't read it". He'd turned off images in his browser to save bandwidth. At the time I was using Faux Columns - putting a tiled background image behind columns on page. Background color was a dark grey - turned off images and the sidebar text was the same color as the background and the main content area was hard to read. Embarrassing, hadn't tested without images on. Apply background colors to any background images - now works better. What happens when images are turned off? Bakers Dozen - what happens if one is removed? So they put a 13th in there. What happens if something is taken away? Building in Salem Massachusetts, went up about a year ago, storage facility, wonder why they put window openings in then cemented over it. Maybe one day it won't be a storage facility and they'll want windows. Future proofing. "Bulletproof pants" - comfort equipped, have panels on the side that slide out. There's an extreme, but they have give and take. Three ways we can be bulletproof: - in terms of content, how does the components of the page handle different text sizes or content amounts. - in terms of editing - is the page easy to change or maintain. If I hand a page to a client, can they edit it? - in terms of environment - what happens if css/images/javascript are off? "The journey begins by letting go of control and becoming flexible" - 'A Dao of Web Design' by John Alsopp Simple Arrow I created one day - box with arrow point on one side and some white text. 4,362 ways to do this (approximately). Choices I made in creating this arrow can be applied to anything on a page. Ways that work, ways that are better, ways that don't. 1. Could just create the arrow as an image, but want the text to be editable. 2. Could use CSS to do this - create the arrow in photoshop, use it as a background image, place text over top, but if you increase the text size it spills over. If you turn images off, the text disappears. DugDug test of increasing text size, heard nobody increases text size, evaluating with text size. I use it and I have decent eyesite. Acts as a flexibility barometer - not just t ext size by content amount. Allows us to use relative text sizes with confidence. 3. Bulletproof - green background, arrow point and white text. Markup is

this way

The background image has a transparent area. The CSS has padding in ems and the background is vertically centered. Can also change background color as image is transparent. Can apply flexibility like this to other parts of a webpage. Cork'd has a couple of bulletproof areas - starting with header. Logo on left, tabs on the right. Could use absolute positioning but when you increase the text size or if the tabs area becomes larger than we expected it can spill over, it's outside flow and so doesn't affect rest of page. Use opposing floats, and think of header as self contained module that affects the rest of the page. Self clearing floats - common to have a floated element that sticks out the bottom. Could clear floats after the section, but better to self clear so it's independent - whatever comes afterwards we don't need to worry about it. Box uses :after to put a period after the content, then hide it. Then there's a line for IE5 mac - using inline-box. Then there's some voodoo for IE. http://positioniseverything.net/easyclearing.html Keeps everything independent. You can think modularly, can move them around. Netflix.com - DVD sharing site. Have a lot of rounded corner boxes, were thinking in fixed heights when they built this, bump up the text size and it spills over. Can recreate this in terms of being bulletproof - two areas that need to be flexible - like a vertical sliding doors, use background images that are bigger than they need to be. There are breaking points, but a little bit of breathing room is better than none at all. Don't want to make images so large they drown the page. Using a border-bottom - combining borders and background images is useful to making things flexible. Accepting the box ----------------- Like to think about things we can do to the box that are simple, don't require extra markup, don't require extra markup. Screenshot of clearleft.com - dogear background image in the corner - it's a box but it's very simply not a box, subtle addition there. Hicksdesign - sidebar has a rounded corner on the bottom right of each box, background color combined with one background image. Subtle modifications. Fit into design, easy... Odeo - sidebar box design I did for odeo - two rounded corners - background image on div with background color, then a subtle gradient fade image on heading. Start to see shape with two rounded corners a lot. See it on conference website. 2 rounded corners is very easy. Cameron Moll's portfolio. Sidebar box is not a box - has ornamental cap, tiled background image, cap on bottom. It expands, it's a box but more than that. Reusable ornamentation - heading style - border on top, then a background image underneath, image was much wider than it needed to be - in the css we set it as the background image and have it centered. The reuse it in the sidebar. Great as I can change column widths or reuse it in other areas that aren't as wide. Tundro - heading style with a line that sits behind text, heading tag with a span (don't kill me) - image that's two pixels tall, centered vertically, span has same background as page, get an effect where it's floating above the line. Bulletproof navigation ---------------------- ESPN - Wanted to do google tab interface, originally did them as images, but they wanted the number of results on the tab, had to use CSS, gradient background. Microformats site navigation - had two elements -
  • and - had two corners. For hovering, had an li:hover, in IE you get a square box, which is a fine compromise. Haveamint.com - has hyperlinks that look like buttons, just background color and border on 2 sides, simple, flexible. joyent.com, similar effect corkd.com - can attach icons to hyperlinks - toolbar at the top of each page, knew I wanted to attach icons, knew I wanted to be able to remove or change them. Added a class to each type of action - add, recommend etc, then added icons to each class. Then can change it all in the CSS. Bulletproof Layout ------------------ Not going to go into fixed vs fluid. When executed well a fluid layout can be betterproof. Can have drastic effects on page design, each has a place. Rollyo - fixed width homepage, not a lot on page so no need to be flexible. For search results when for fluid width center column. One of the problems with fluid width is line length - when browser is stretched to the max, columns can be hard to read. Can use max width to contain that. Currently unsupported in IE/Win. Vertua.com - nice technique that uses percentage margins on either side - as you change the window size the side panels change. Nice alternative. Do something similar on my own site - simplebits.com - margins made with percentages, but also a max width for browsers that support it. When max-width isn't supported this is a nice alternative. Variable fixed width layouts - wider layout for wider browsers, uses javascript to use an alternate stylesheet or changes a body class. Cameron Adams and Simon Collyson both use this on their sites. Bulletproof tools ----------------- 10 second usability test - take away the design, is the page understandable with the default styles? mlb.com - turn CSS off and it becomes pretty unreadable. Not using it for layout, things just fall apart. mcafee.com - turn css of and you can see the document structure. Well thought out and well structured. Easy test, unscientific, not really usability testing Validation as a tool - true validation on an entire site is difficult to maintain, but validation during construction is key - eliminates head scratching css problems. Web Developer extension for firefox, dashboard that allows you do do a lot of things - turn off images, styles, validate. Safari Tidy - automatically validates the page you're looking at using tidy, error icon in bottom right, really handy. Bulletproof dashboard, take away css, turn off images, validating markup, dig dug text test (need more buzzwords) Bulletproof is: - a catchy phrase to sell books and get speaking engagements - the positive power of buzzwords embrace flexibility, let go of pixel precision, think in terms of the web as its own medium. Plan ahead for worst case scenarios. Making your great design a great web design. Not necessarily always the same. http://simplebits.com/publications/speak/atmedia/bpwd-atmedia.pdf Q&A --- Techniques of flexibility are useful when doing internationalisation.