Information Squid

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Looking nice in every browser is, of course, appreciated.

Back to main AEAChicago2007 post

the 800 pound gorilla is awake again! (King Kong pic)
IE was dead, rolled into the operating system, but now it's back
"if it steps on me, I'm going to be a small raspberry stain."
tower biplanes played, in this case, by Firefox and Safari and so on
IE's group program manager announced 100 million installations
	after a couple months
at first there was a question about whether people would install it at all
making IE upgrade part of a Windows update was one of the best things
	Microsoft had done in years
WebSideStory reported 25% of people using IE7, but their statistics
	aren't really great
really you care about the browsers visiting *your* sites
was in charge of Netscape DevEdge editorial (and some development)
	for two years
initially assumed could design for Firefox and Gecko
but IE accounted for 60% of their traffic
IE7 advances in CSS
	fixed positioning
		things static with respect to the viewport (browser window)
		i.e. fixed footers at the bottom
		legal teams will probably want to make copyright visible all the time
		but you can also use for navigation elements, etc.
		make sure to put padding on the bottom of the body so it doesn't
			get hidden behind
		another good use was a blog's comment form fixed in the sidebar
			(since redesigned)
		idea: JavaScript so you could click a paragraph and have it quoted
			into comment
	min-width, max-width, min-height, max-height
	attribute selectors
		div[class] is any div that has any class
		div[class~="val"] is any div with a class attribute containing val,
			like div.val
		div[class|="val"] is any div with a class attribute starting with val
		img[alt|="figure"] would be all images with alt tag figureX
		CSS3 has more: [attr*="val"] will find anywhere in string, like
			[href*=".org"]
		though that will also catch www.organic.com
		also selectors for begins with and ends with
		input[type="text"]  finally, instead of making radio buttons
			hundreds of px wide
		input[value="required"] so input with "required" inside is red/bold
		then when JavaScript blanks text, when user types it's not red/bold
		can visually type PDF links, with href ends in .pdf or title has (PDF
		then add background, padding, etc to display PDF icon
		that's an example of progressive enhancement
		but is it an enhancement or does it break things for your users?
		doesn't work for IE6, so if vital the icons appear, can't do it
			this way
		but then it's probably better to make it an img tag anyway
		might not be an accessibility problem if screenreader reads URL
			of links, or might be
		similar idea for a[href^="https"] with a lock icon
		might be bad on normal sites but great on a banking site, for instance
		would be great for associations with member-only areas
		th[scope="col"] border-bottom, but th[scope="row"] border-right
		or th[scope="row"] + td (td next sibling after th for row) gets
			left padding
		could put different borders on gifs and jpgs to check that are
			using correct format
		believes values are case-sensitive
	child selector >
		can use to mark top-level so can explore:
			body>div {border: 1px solid red}
		ul.interesting>li won't get nested links
		technically a combinator, but we refer to it as the child selector
	adjacent sibling selector
	:first-child
		pseudo-class, like :hover
		body:first-child isn't right, want body > *:first-child
		body:first-child is everything below a first-child body
		since body is generally not the first child of html, that's nothing
		td:first-child will get you tds that are the first element in their row
	chained classes and pseudo-classes
	arbitrary-element :hover
	full background-attachment: fixed
	alpha channel in PNG images
	abbr tag
how they determined what to add was driven by looking at the
	design community
they tried to fix things that people had been complaining about
	for five years
positioniseverything.net
they asked the community. can't do all of CSS2, so what's most urgent?
diagnostic styles
	selecting images by types
	any div with an id, put a border on it: div[id] {border: 1px dotted red;}
	images missing alt attributes img {border: whatever}
		img[alt] {border: none !important;}
	can create diagnostic stylesheet, similar idea to a reset stylesheet
	could help with accessibility testing on a shoestring
	was hoping to publish one here, but it's not quite done
	[here it is]
Dean Edwards' IE7 script is a library to make lots of things work in
	IE5 and IE6
	used to be IE proprietary behaviors, then rewritten in JavaScript
	the IE7 team looked at it to help decide what to fix
	it's been 0.9 (alpha) since he finished it four years ago
	con: extra stuff to download
many dead bugs, dead parsing bugs
	mostly the dead bugs make it good that the parsing bugs are dead
	a fix for IE6 isn't needed by IE7, and IE7 doesn't read the parsing
		bug hack
new parsing bugs!
	*+html
	* + html
	html*
	p/**/#example
	@import url() media;
or can use conditional comments
his clients have chosen CSS hacks over conditional comments
theoretically you can use the not pseudo-class to select, say, elements
	without class foo
but it's CSS3 and no one supports it
	"and its syntax makes my eyes bleed."

Back to main AEAChicago2007 post

Derek Featherstone’s post about his presentation

ironfeathers.ca (just did triathlon, Ironman)
icanhaz.com/accessibility (new tinyurl competitor)
developers actually creating the site from its design often have
	checklist syndrome
"here's what you need to do to make your site accessible" creates
	a compliance mentality
it's something that happens at the end of building something, part of QA
should be related to the people who're using the site
used to do a lot of checklist compliance checking
then had a transformative experience on this particular site
Search Terms label is in the searchbox itself
have JavaScript so when that field gets focus, the words go away
doing user testing, tab into field, value is there so announced to
	screenreader
user types in terms, hits Tab to get to Go, then hits Shift-Tab to
	check was written correctly
and then his search terms were blanked, and he said "what happened,
	am I somewhere different?"
so two keystrokes and he was lost
Derek looked for a place to fail the site on a checklist and couldn't find one
so take accessibility beyond the checklist
patterns and techniques from real sites, interplay between
	XHTML/CSS/JavaScript
hopefully add new techniques to coding arsenal
current web trend is custom widgets
	Google Maps built own controls for zooming, moving, traffic, pinpoints
	all these are custom widgets and you can use API to place them
		on page
	they're not actual widgets that do anything, though
	so need to test accessibility
	accessibility isn't just screenreaders - task: voice recognition
		software to zoom in
	maybe each control is a link?  voice recognition command "link"
		numbers the links
	then say "twelve" and link twelve would be clicked
	no links highlighted in Google Map
	then "button" - only one button, Search Maps at top
	cannot tab to any controls in Google Map
	definitely a problem
	set out when building ironfeathers to solve this problem
	API lets you do custom pretty much everything
	voice recognition software can say "mouse grid", pick ninth of
		page, drill down
	then click control once you found it
	don't even get tooltip saying Zoom In until activate it with a
		click command
	ironfeathers built their own controls using the button element
	tabbable and recognizable by voice recognition software
	if using custom widgets, choose appropriate code to build
	provide us with more intuitive controls than HTML allows, but
		require design/code to emulate
	instead of <div onclick="doSomething()"> used
		<button onclick="doSomething()">
inline editing - Basecamp to-do list shows tools on hover
	no way to activate using keyboard
	could instead have an "expose all controls" button available
	sometimes, AJAX helps accessibility. stay in same place after editing.
live updates - think about positioning
	put "characters available" after a field
	if "updating" meter is in HTML but only sometimes shown, will
		screenreader user know when?
	if things update on other parts of the page, how does someone
		know when one happens?
	on mobile client, have "your status has been posted" message after
		update button
	should have on other clients as well
	how do we indicate the page is being updated?
	how do we alert the user that there's new content?
Amazon tagging with screenreader
	"forms mode on" so shortcut keys don't jump to headings, etc.
	when AJAX box popped up, turned forms mode off
	Add button doesn't have alt text, so reads source attribute of image
	no label for text box, so reads "Edit [whatever's in the box]"
	then reads javascript: void(0)
	box with potential completions, but it's not a selectbox so don't know
		suggestions are there
example of tree widget - need to build custom in HTML
	title attribute isn't read by default, and if it is used, it replaces the
		link text
	so had to put hidden span in the link itself
	tried to replicate what screenreader would say if reading a real
		tree (operating system)
	collapsed, expanded, number of children
error/advisory information
	each field has a label; some have additional information that needs
		to be associated
	problem with label-field-advisory is advisory is after the field
	put it all in label. <label for="uname">Username
		<em>must not contain spaces</em></label>
	he uses em for advisory, strong for error
	use JavaScript to update label, though it may not be seen
		(i.e. password strength)
form linearization
	don't put form elements after the submit button in the HTML, etc.
	put elements in order to be read, then position with CSS
	could also use tabindex, but hard to manage especially with back-end
		systems generating code
search results
	often redisplay the form, but that can push results below the fold
	repetition of the form can confuse people reading the page linearly
	create mechanisms to move around the page
	<form method="post" action="search-results.html#results">
	Found X results for <keyword> link at top that links to results anchor
	Search again link at bottom that links to form anchor
translating visual language
	United Methodist Church design of navigation example from IASummit
	color and position tell us a lot
	same color says same section
	position says main tabs are at same level, ones below are subordinate
	difference in color, style, position says tool navigation is separate
	but with styles off, not telling the same story
	tools nav nested within an item
	secondary navigation is completely separate, and not in a list
	so separate tools nav; add labels for Site Menu and In This Section
elearning course accessibility
	needed to make crossword puzzle accessible
	so had to really think about what learning objectives were
	need entry of data, removal of data, keyboard-friendly, scalable
	clues are labels for form fields
	so click on label and get focus on crossword field
	color for visual focus, typing automatically advances after each letter
	can use backspace key to remove
	actually coded as fieldsets for each clue, field for each letter
	javascript copies letters from across to down and vice versa
	labels at bottom of file
title tags aren't really useful in screenreaders or for keyboard input
likes to keep input outside the label so has another style hook
only reads first label assigned to a particular field
best resource for finding what works is local college assistive services and students
don't buy a screenreader, see real people using the technology
have skip links more often now, should AJAX pages have "no JavaScript" links?
been thinking about that, but also sometimes AJAX is better (i.e. with tree)

Back to main AEAChicago2007 post

how to approach adding behavior to your site
will give copies of his book, Bulletproof AJAX, away to good questions
be pure: separation between HTML, CSS, JavaScript
so progressive enhancement, beginning with a solid structure and then
	building on top
begin with the content, add structure, then presentation on top and
	behavior on top of that
structure = HTML, presentation = CSS, behavior = JavaScript
the beauty of this is you can strip away each layer and still have
	something useful
CSS and JavaScript are subservient to structure
DOM = document object model, the vocabulary used to talk about the
	loaded document
CSS and JavaScript are in some ways similar
for CSS, use p{}.  for DOM, document.getElementsByTagName("p")
not that different from CSS in terms of visualizing the page
page is elements with properties
English: get all the p elements
lolcat: i can has p elementz
CSS: #foo{} vs DOM: document.getElementById("foo")
CSS: #foo p{} vs DOM:
	document.getElementById("foo").getElementsByTagName("p")
on adactio.com, right-hand column has behaviors
Click on headline and content will hide
Customize choose a theme part
think about it in English first, then translate
get all the headers in the sidebar, then attach the toggleHeader
	behavior to each onclick
toggleHeader finds all the elements in the same div and hides all
	but the header
didn't touch the markup. just added the behavior. "I'm being *pure*."
in the real world, sometimes have to add extra div or class
"The standards police aren't going to come visit you in the night."
be vigilant: try to avoid mixing layers
try not to use inline styles
similarly, don't do <a href="javascript:...">  "This is the spawn
	of Satan."
because it's not a valid hypertext reference (href). JavaScript
	isn't a protocol.
avoid it like the plague, there's no good reason ever to use it
similarly <a href="#" onclick="...">  "href equals octothorpe"
it's mixing up your behavior and your markup when you should
	keep them separate
think about the semantics - is it a link, is it a paragraph
common pattern of "add your review and rating" page
can do star hovering rating with CSS
semantic purpose of star rating isn't five links, it's a select
	(or radio buttons)
so mark it up as a select, then enhance
stolen code for function selectReplacement from Aaron Gustafson
it replaces a select element with a dropdown unordered list
	you can style
new book Advanced DOM Scripting, final chapter by Aaron about
	this code
redeparede.com - started as Brazilian version of Craigslist, now spread
select category, then select related subcategory (i.e. Community
	Discussion, Art)
first semantically mark up, with subcategories related to categories
	- optgroup element
optgroups are a way of associating sets of options in a select
so just make one select for the subcategory, since can figure out
	category from subcategory
sometimes more clicks are better: subcategory list is long but only
	one click
better to click twice and have the category and subcategory
so use createSelectFromOptgroups to replace the one subcategory
	select with two
"Feel free to nitpick the code and tell me what I'm doing wrong."
JavaScript has started to be used unobtrusively instead of evilly in
	the past few years
and then AJAX came along, and people suddenly started ignoring
	separation of behavior
but can apply progressive enhancement to xmlhttprequest: he calls
	this "hijax"
"If I've learned anything from Jesse James Garrett, it's that buzzwords
	will get you everywhere."
if you want to build an AJAX website, build a non-AJAX website first
once that's all working, then go in and intercept those clicks: hijack them
use xmlhttprequest to shuttle data back and forth to the server
"Don't try to do business logic in JavaScript in the browser; that way
	lies madness."
that's creating an unnecessary technological barrier to getting stuff done
rapha.cc example - expensive cycling wear
widget on page for adding to shopping basket - just changes shopping
	basket part of page
built with full page refreshes first
request.open('POST', 'basket-update.php', true);  (true says is
	asynchronous request)
request.onreadystatechange - if ready and status done, set
	basket.innerHTML
challenges of AJAX don't lie in the code, though
tricky bit is the design challenges
you're taking the browser out of the equation (browsing model) and
	must replicate functionality
what's happening? what happened? what does the Back button do?
	what does bookmarking do?
browsers have progress bar or spinning icon to show they're working
you need to provide status information - progress bar, spinning circle, etc.
look to the Flash world because they've had to do this for years
conventions can be good, especially since AJAX is new and scary
37Signals's yellow fade indicating something just updated
if users want to bookmark a changed state, you probably shouldn't be
	using AJAX
same for using the Back button
you're changing too much of the page, and users aren't comfortable
to see whether you're changing too much, do user testing
if you're changing the markup with JavaScript, how can you say
	you're separating behavior?
create new markup, not new content in the document. rearranging is OK.
same thing Eric was talking about with
for rollover images that are links that just pop up info, what use instead
	of href="#"?
using link because links do :hover properly
would suggest using onmouseover instead of CSS
:hover and :focus are getting behavior in presentation
"Hover considered harmful" blog post
he'll use :hover for changing link color, etc., though
difference between GET and POST?
don't use GET to create, update, delete anything on the server
had Delete links in Basecamp - it's private instead of spiderable,
	but things got autodeleted
people had Google Accelerator that prefetches links, so it was
	prefetching the Delete links
because the links were GET instead of POST
no one supports PUT or DELETE requests

Back to main AEAChicago2007 post

Web 2.0 reflection of Yoda!
isindex tag? from HTML 1.0, no one's used it in five years or so.
display: table doesn't have to only apply to tables
padding on images not just text; images have backgrounds
punchouts with transparent images so changed background on rollover
	shows through
turn a table into a bar graph
	old version on Meyer's site
	table { display: block; position: relative; }
	tr, th, td { position: absolute; bottom: 0; }
	tr { width: 25% } (create columns)
	th, td {width: 100%; }
	thead tr { left: 100%; top: 50%; margin: -2.5em 0 0 5em; }
	(headers outside table)
	thead th positioned correctly - legend with border on each th
	table #q2 {left: 25%; border-right: 1px dotted #999; } etc
	table tbody th { top: .75em; vertical-align: top; }
		(Q1 label at top of column)
	start using <th scope="row"> and <th scope="col">
	tbody td.sent vs td.paid colors
	position td.sent on left of column, 40% wide
	and td.paid on right, 40% wide
	borders set so look like buttons
	outset CSS property doesn't say what colors should be
	so browsers decide (poorly)
	#q1 .sent { height: 36.9%; }
	#q1 .paid { height: 33%; } etc
	precalculated numbers here; since probably coming out of database,
		just program to produce
	or could use JavaScript
	CSS will probably never let you do math: see section 8(?) of CSS1
		but also see CSS3 proposals
	Microsoft had behavior CSS-like property, but many people hate it
	extra div/list/whatever for tick marks at each $10,000
	could use content::after if willing to lose them in IE
	could use tfooter row maybe?
	#ticks { position: relative; top: -30em; margin-bottom: -30em; }
	#ticks .tick { border-bottom: 1px dotted #999; }
	#ticks .tick p { position: absolute; left: 100%; }
		(put them to the right of the graph)
use same markup for horizontal bar graph instead of vertical
accessible and indexable
reset styles
	:focus { outline: 0; }
	table { border-collapse: separate; border-spacing: 0; }
		(need cellspacing in markup)
	blockquote:before, blockquote:after, q:before, q:after { content: ""; }
	blockquote, q { quotes: "" ""; }
Firefox package / Contents/Mac OS/res/ has Firefox's default .css files
line layout is incredibly complicated, so not getting into
can set all elements to display:block and will show head etc. in (most?)
	modern browsers
html element's background inherits upward to canvas
if html element doesn't have a background and body does, it inherits
	upward to canvas
if display html element, there can be space outside it - that's where the
	Force comes from

Better late than never. Following will be my notes from An Event Apart Chicago 2007, held August 27th and 28th. It was the AEA lineup I was most interested in seeing, and conveniently they came to my city. I’ve since moved to Washington, DC, but I’m glad I was able to bring their ideas with me. Definitely worth the price - and I was saying that after the first two talks, so the value of the full conference had to be much higher.

Jeffrey Zeldman’s event wrapup, with various links

Links to individual posts:
“Secrets of the CSS Jedi” by Eric Meyer
“Writing the User Interface” by Jeffrey Zeldman
“Design Your Way Out of a Paper Bag” by Jason Santa Maria
“Search Analytics For Fun and Profit” by Lou Rosenfeld
“The Seven Lies of Information Architecture” by Liz Danzico
“Interface Design Juggling” by Dan Cederholm
“Be Pure. Be Vigilant. Behave.” by Jeremy Keith
“Best Practices For Form Design” by Luke Wroblewski
“Accessibility: Lost In Translation” by Derek Featherstone
“The State of CSS In an IE7 World” by Eric Meyer
“Selling Design” by Jeffrey Zeldman
“Dealing With the Both of You” by Jim Coudal