- Tech Tip: Really Simple HTTP Server with Python | Linux Journal - Ever wished you could quickly fire up a webserver in your working directory (perhaps to work around a browser defect with file:// addresses)? If you have Python installed it's dead easy!
- Taking Advantage of HTML5 and CSS3 with Modernizr - Make your designs sensitive to the capabilities of the browser (eg. if drop shadows aren't supported, maybe you want a thicker border).
- SVG Tutorial - Introduction - A comprehensive look at the features of Scalable Vector Graphics.
- Adding HTML5 placeholder attribute support through progressive enhancement - Robert's talk - HTML5 adds lots of new form features but they're not yet widely supported, this post explains how you can make use of the placeholder attribute while providing fallback functionality for older browsers.
- common css mistakes - work blog - onderhond.com - Some common CSS mistakes and how to avoid them.
- Coding In Paradise: HTML5 Defined! It's Not Just a Marketing Term - So, what do you mean by 'HTML5'? A discussion of the various different meanings the term can have.
- Introducing the Google Command Line Tool - Google Open Source Blog - Use Google services from your command line, including adding an appointment to your calendar or submitting a blog post.
- WTF is HTML5 (Infographic) - Nice HTML5 reference poster.
- ASP.NET Labels with Associated Controls inside of User Controls - Travis Collins - Setting AssociatedControlID when the control you're setting the label for is a user control within which the target element is a child component.
- WebAIM: Blog - Future Web Accessibility: SVG - Unlike many other technologies coming to the fore because of HTML5, SVG has a lot of capability for accessibility built in. Unfortunately, that capability is yet to be translated into actual support in browsers and assistive technology.
- Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog - Ever wanted to have two boxes, side by side, taking up the full width of the screen between them, but both having a one pixel border? CSS3 will finally allow you to do that, in several different ways. Setting width: calc(50% -2px) will be one of them.
- HTML5 Globals and You | Nettuts+ - A look at the role of attributes in HTML and some of the new attribute based features in HTML5.
- A non-developer’s guide to building a web/iphone app « StartupCafe - If you've ever despaired at someone saying to you "I've got this great idea for a website" only to later discover all they really had was a sentence and some handwaving, point them at this article.
- Christopher Blizzard · intellectual honesty and html5 - "The most important aspect of HTML5 isn’t the new stuff like video and canvas (which Safari and Firefox have both been shipping for years) it’s actually the honest-to-god promise of interoperability."
- Export SVG from Raphael JS to create a PNG bitmap | Ben Barnett - Some server side trickery to create static images out of SVG created by Raphaël, even if the SVG is really VML in IE.
- html5 laboratory - experiments with html5 - Ian Devlin's personal HTML5 playground.
- Book owners have smarter kids - Laura Miller - Salon.com - "[A]nother study... found that simply giving low-income children 12 books (of their own choosing) on the first day of summer vacation 'may be as effective as summer school' in preventing 'summer slide' -- the degree to which lower-income students slip behind their more affluent peers academically every year."
- Perception and the design of forms – Part 1: Shape - Formulate Information Design - If your form controls don't look like form controls then you'll confuse a lot of users.
- Firefox 4: An early walk-through of IndexedDB ✩ Mozilla Hacks – the Web developer blog - Mozilla announce IndexedDB support in the upcoming Firefox 4, a 'NoSQL style' alternative the the SQLite based Web Database API already implemented in WebKit (and in Firefox, for extensions).
- JSON-LD - Linked Data Expression in JSON - This specification outlines a common JSON representation format for Linked Data that can be used to represent objects specified via RDFa, Microformats and Microdata.
Review: LWS May: Beautiful Design for Everyone at The Melton Mowbray, 18 Holborn, EC1N 2LE, London 19:00 to 20:30
This event was originally going to be a double act, but Antonia Hyde unfortunately had to pull out. We were fortunate to have someone of the calibre of Ann McMeekin to pick up the slack. Ann had some very beautiful slides and spent a lot of time talking about each one, I made some necessarily limited notes from which I will attempt to reconstruct the gist of what she said (hopefully I don't misrepresent anything too badly!) and tried to locate some of the pictures from the presentation to give the flavour of it.
Ann began by talking about her background as an accessibility consultant, which she initially thought would be her dream job but, over time, she came to realize that what she really valued was not great accessibility but great design. Great design, of course, includes accessibility, but the focus is not on a check-list of requirements but the overall experience each user will have.
While accessibility is a widely accepted goal, honest discussion about it is often difficult as many people find talking about disability uncomfortable. A common reaction when seeing for the first time the rigmarole a screen reader user has to go through to get useful information out of some websites, is to feel empathy and start thinking how terrible it must be to put up with that, which leads immediately to that uncomfortable feeling. However, to provide accessible design solutions we must get past the stage of empathy in order to develop understanding about what tools we need to provide. Disabled people are not passively waiting for us to make their lives better, they just want the tools to make a better life for themselves.
Next Ann showed us a segment from a TED talk by Aimee Mullins. Aimee, who had her lower legs amputated as a child, famously competed in the 1996 Paralympics on a set of carbon fibre 'cheetah legs' (this TED talk includes a description of her experiences at the games) and has since gained fame as a speaker, model and actress. Aimee talked about her collection of prosthetic legs and the different abilities and attributes each provided her with, like the cheetah legs for running or the set she was wearing for the talk which added six inches to her normal height:
I have a variable of five different heights. (Laughter) Today, I'm 6'1". And I had these legs made a little over a year ago at Dorset Orthopaedic in England and when I brought them home to Manhattan, my first night out on the town, I went to a very fancy party. And a girl was there who has known me for years at my normal 5'8". Her mouth dropped open when she saw me, and she went, "But you're so tall!" And I said, "I know. Isn't it fun?" I mean, it's a little bit like wearing stilts on stilts, but I have an entirely new relationship to door jams that I never expected I would ever have. And I was having fun with it. And she looked at me, and she said, "But, Aimee, that's not fair."
For Aimee the loss of her lower legs is not so much a disability as an opportunity. And the opportunity isn't just to 'be normal', whatever that may mean, she can exceed normal.
She doesn't see herself as limited, and so she isn't limited (from another TED talk by Aimee):
Good design should create this same feeling of empowerment, for everybody. It is not about ticking off boxes, but about enabling people to achieve their goals, provide tools for augmentation, not just equalization. And just because a tool serves a purpose, doesn't mean it can't be beautiful:
I loved almost everything about my time spent at this hospital, with the exception of my physical therapy sessions. I had to do what seemed like innumerable repetitions of exercises with these thick, elastic bands -- different colors -- you know, to help build up my leg muscles. And I hated these bands more than anything. I hated them, had names for them. I hated them. And, you know, I was already bargaining, as a five year-old child, with Dr. P to try to get out of doing these exercises, unsuccessfully, of course. And, one day, he came in to my session -- exhaustive and unforgiving, these sessions -- and he said to me, "Wow. Aimee, you are such a strong, powerful little girl, I think you're going to break one of those bands. When you do break it, I'm going to give you a hundred bucks."
Now, of course, this was a simple ploy on Dr. P's part to get me to do the exercises I didn't want to do before the prospect of being the richest five year-old in the second floor ward, but what he effectively did for me was reshape an awful daily occurrence into a new and promising experience for me. And I have to wonder today, to what extent his vision, and his declaration of me as a strong and powerful little girl, shaped my own view of myself as an inherently strong, powerful and athletic person well into the future.
This is where it really hit home for me -- that my legs could be wearable sculpture. And even at this point, I started to move away from the need to replicate humanness as the only aesthetic ideal. So we made what people lovingly referred to as glass legs even though they're actually optically clear polyurethane, a.k.a. bowling ball material. Heavy! Then we made these legs that are cast in soil with a potato root system growing in them, and beetroots out the top, and a very lovely brass toe [...] Then another character was a half-woman, half-cheetah -- a little homage to my life as an athlete. 14 hours of prosthetic make-up to get into a creature that had articulated paws, claws and a tail that whipped around, like a gecko. And then another pair of legs we collaborated on were these look like jellyfish legs. Also polyurethane. And the only purpose that these legs can serve, outside the context of the film, is to provoke the senses and ignite the imagination. So whimsy matters.
So prosthetic legs are not just a utilitarian accessibility tool but something beautiful in their own right, a work of art, and the same can be true of our own designs. As to how to achieve beautiful, accessible design, Ann covered that in three sections: Structure; Alternatives; and Flexibility.
The foundation of good design is structure, which implies planning. As an example of what happens when there's no structure Ann talked about the Winchester Mystery House. This was a house built by the widow of a member of the Winchester Repeating Arms Company dynasty, she believed that the ghosts of all the people ever killed by one of the rifles were out to get her and the only way to keep them at bay was to keep building the house. So it was built, 24 hours a day for 38 years with no plan or goal in mind other than to be building continuously.
Although the end result is, in many ways, fascinating, from the point of view of being a usable living space it's a complete disaster - it's almost impossible to navigate without a map, and so unusable. If you are willing to do a little planning, and from the recent boom in User Experience it seems companies are able to appreciate the value, then you can build an accessible structure without compromising your design. Ann had a number of examples, the first was these bus stops in Bristol:
The paving is raised at each bus stop, even well out into the suburbs, so that people on wheel chairs (and mothers with wheelchairs) can simply roll on to the bus - no need for leaning buses that the driver has to remember to operate, or special ramps that have to be got out and attached, slowing everyone's journey. The bus stops are a shared space, anyone can use them, there was no need for having 'normal' bus stops and 'special' bus stops. Another example of shared spaces in action is the steps at the Brunswick Shopping Centre. Ann had been walking up and down these steps for two months before noticing that they had an integrated ramp:
As we've just seen, alternatives don't have to be hidden - there doesn't have to be a ramp round the back while everyone else goes up the steps at the front, but they do have to be discoverable. An example is Braille labels - you see these all over the place now alongside the visible labels on signs and buttons, but how do these actually help blind people? Does anyone really expect blind people to walk around feeling all the walls on the off chance there'll be Braille there? Designers have ticked the box - 'provide an alternative for blind people' - but they've not really thought about what a blind person needs to be able to navigate the environment. Don't simply provide a Braille version of the menu, think about what a blind person needs to be able to independently go to a restaurant and order a meal.
One area where it's always appropriate to provide text alternatives is for pictures and videos. Captions on images can be integrated into the design fairly easily, like, for example, on the The Big Picture blog on Boston.com. Transcripts for videos have traditionally been regarded as prohibitively expensive, especially for small producers. But there are a number of cheap options these days:
- If you're sufficiently iconic, you can crowdsource your transcription, like zefrank
- Services like CastingWords will transcribe for $1.50 per minute
Not all disabilities are constituted of a fixed and unchanging set of symptoms (eg. MS sufferers can vary from day to day and hour to hour). An insufficiently flexible site, may, even for the same user, be reasonably usable one day, but unusable the next.
Also not all people who would benefit from making use of 'accessible' options will self identify as disabled. Older users are likely to benefit from font sizing and readability options just as much as the partially sighted or those with learning disabilities, but they may be unlikely to click on a link for 'disabled users' in order to find them.
When thinking about flexibility bear in mind that people don't need to have the same experience, but that doesn't pre-dispose that anyone should have a lesser experience. Ann used an example of a blind friend of hers who liked to visit the Tate Modern. You might wonder what a blind person could get out of looking at a painting, but he could listen to the painting by listening to ambient sound reflected off them, the different colours get reflected in different ways. Obviously he's not getting the same experience a sighted person would do, bet then sighted people aren't getting the experience he is and both can get a lot out of it (and, by the way, the Tate Modern has help and tours for blind and visually impaired visitors).
If you have compelling content, of course, you'll get users no matter how badly designed your site is. Amazon, for a long time, had terrible accessibility, but everybody liked cheap books. In this situation users develop coping strategies - Ann told us about one blind user who'd worked out a very detailed method of getting to what he wanted on Amazon, to the extent that it went "do this, then hit the tab key 43 times." Sure you might take comfort in the fact that someone has figured out how to use your site anyway, but did you need to make it that painful?
To finish with, Ann reminded us that while good design can be difficult, it's from solving the difficult problems that we derive the most satisfaction.
Post Talk Discussion and Questions
To conclude the talk, instead of going straight into questions, Ann asked us for examples of good design to add to her, regrettably, somewhat small collection. The first example was a blind person who went around sticking irreverent and subversive Braille messages on to signs, a sort of graffiti that few people are aware is even there. Another person mentioned some recent improvements to the riverside area in Bedford which had been done with accessibility in mind so that everyone could enjoy the river.
As counterpoint, another attendee described a lift he'd seen where they'd put Braille labels on the buttons, the only problem was - they were touch sensitive buttons! This was clearly an example of ticking the boxes rather than trying to understand what a blind person would need in order to use the lift.
There were a lot of other good examples and discussion but I'm already closing in on seven days to write up a two hour talk, so I'll leave it there. Another excellent LWS event, once again. Antonia will hopefully be able to make a future talk, in the meantime watch out for the out of 5June event on Flash vs HTML5.
- Microformats & Microdata ❧ Oli.jp (@boblet) - A presentation describing the two alternatives for embedding extended semantic information in HTML5.
- A List Apart: Articles: Responsive Web Design - Use the power of media queries to make your layout responsive to the limitations of the device on which it's viewed.
- Efficiently Rendering CSS | CSS-Tricks - CSS selector performance can be surprisingly non-intuitive.
Review: London Web May: Top 10 UX Gotchas, Conference learnings & Traffic kickstarts at Hoxton Apprentice, 16 Hoxton Square, London. N1 6NT. 19:30 to 21:30
With UX London in full swing, this month's London Web had a usability focus. Google's George Zafirovski was in town and had agreed to give a talk on the top ten User Experience gotchas. By way of introduction George talked about the user experience design team at Google. Many people with long experience of Google's products may be surprised to hear they have any usability engineers, but there is increasing focus on usability throughout the company. There are UX teams in many of Google's offices available for to engineers and product managers for consultation, and (apparently) there are adverts for their services in the toilets. As well as being the 'fluid glue' which holds the engineers and product managers together, user experience research can also initiate products such as the recently launched mobile services in Africa.
In order to assemble this talk George asked his UX colleagues at Google to nominate their own gotchas, and then compiled the top ten from their feedback:
1. "I skipped the wireframes and produced hi-fi mocks instead." - By going straight to a hi-fi mockup you lock yourself in to a single solution. Better solutions can usually be found by comparing a number of approaches, and you can produce multiple lo-fi mockups in the time it takes you to produce a single hi-fi one.
2. "We don't have time to test it." - You never get a second chance to make a first impression, don't spoil it by having a glaring issue which would have been quickly picked up in testing.
3. "Just make it a setting." - This can lead to a cascade of UX issues, both in controlling the settings themselves and in the combinatorial explosion of possible interfaces engendered by the settings.
4. "We only want to test with savvy users." - If only savvy users can use it, then you don't have a usable application. "Passengers will one day become drivers" - if you just consider the needs of the main user (the 'driver'), then the less experienced users (the 'passengers') will not choose your product even when they've gained the experitise to use it.
5. "We'll let the translator worry about it." - Issues like sizes of buttons to accommodate labels and bidi need to be dealt with in the original design, the translator can't be expected to re-design your application just to make it usable in a different language.
6. "We'll launch this and then figure out how people use it." - If you don't know how to use it when you launch, how will your users figure it out?
7. "We'll fix this in version two." - Similar to 2, if you mess up the version one then many people will not even look at version two.
8. "The target user is a late-twenties technology professional." - There's no such thing as a late-twenties technology professional. Even within that seemingly homogeneous group there is huge variety, don't kid yourself that because one late-twenties technology professional finds your application usable that anyone else will.
9. "If you build it, they will come." - If it's not usable, they'll leave again.
10. "Who is this for?" - Don't ask this question, assume it will be for everyone.
After the talk there was a Q&A, I made some notes about the ones I found interesting. The first question referred to point 8 - do they use personas at Google? George said that they don't, they try to design for everyone rather than focus on individuals.
The next question referred to a comment George had made during the talk, that Google would never compromise the user experience in order to make more money. Several people advanced the opinion that advertising decreased usability, and, since advertising is Google's primary revenue stream, there was a built in conflict of interest there. George said that people do click on the ads, so the ads are useful, and advertising is subject to usability testing the same as everything else.
There was a question about what user testing tools are used at Google, George's answer was "everything." They do wireframing, paper prototyping, cognitive walkthroughs, usability studies every one to two months during development and also, because they practice dogfooding, they get period of free user testing from a pool of ~20000 users, all of whom have direct access to the bug database, before public launch.
An audience member asked that, since Google is famous for releasing lean products, is that strategy not in contravention of several of the gotchas on the list? I think this question struck a chord with many of the attendees - George himself had said Google have an agile, "release early, release often" approach which seems to contradict at least six and seven off his list if not more.
For the second talk, Mike Martin had been drafted in at the last minute to cover 'Growing a Social Network' in place of the originally planned 'Site Traffic kickstart'. I didn't take too many notes for this one, the basic advice is:
- Pick a niche or an event to focus your site around initially, people don't want to join a site with no activity
- Provide good (link worthy) content, and provide (and consume) APIs so that others can take advantage of it
- Take part in the conversation, talk about your site, your network and your content on other social networking sites
Another good evening, interesting to see inside the UX mind of Google, a shame Mike hadn't had a bit more time to prepare his talk, but . out of 5
- Snap: A Haskell Web Framework: Home - Snap is a simple web development framework for unix systems, written in the Haskell programming language.
- Font Preview - Google Font Directory - Similar to the AJAX Libraries API, Google does all the work of hosting a collection of custom fonts for you.
- Introducing WebM, an open web media project - The WebM project blog - Google short circuits the entire Ogg vs MP4 debate for the HTML5 video element by releasing it's own codec on royalty free license terms.
- Adactio: Journal—The format of The Long Now - What format should we be storing our (textual) cultural artefacts in so that they can be understood in 10000 years time? Jeremy Keith makes the case for HTML.
- IEBlog : DOM Range and HTML5 Selection - A short tutorial on using the HTML5 text selection utilities in IE9 developer preview.
- Firefox 4: the HTML5 parser – inline SVG, speed and more ✩ Mozilla Hacks – the Web developer blog - The HTML5 parser is now enabled by default in Firefox nightly builds, this enables inline SVG and MathML and fixes a large number of long standing defects.
- TransFormr - Microformats Transformer Toolkit - Extract semantic information from web pages by URL and by URL and fragment identifier.
- Understand The Web · Ben Ward - There was a big hooha in the web standards world last week as, first, Joe Hewitt bemoaned the state of web development, then Steve Jobs took his feud with Adobe to the next level by publically disparaging the 'openness' of Flash (which some took as ironic, given the latest App Store developer agreement) and finally HP bought Palm and declared their belief in WebOS as the future. All big news for standardistas, this post does a pretty good job of summing it all up.
- IEBlog : HTML5 and Same Markup: Second IE9 Platform Preview Available for Developers - The second IE9 platform preview is released, features improved standards support and performance, support for CSS3 media queries and new DOM methods like DOMContentLoaded and getElementsByClassName.
- Color Survey Results « xkcd - Extensive survey of how people describe colours.
- Daniel Davis - The HTML5 <ruby> element in words of one syllable or less - If you've been wondering what the ruby element is for, here's a simple explanation.
- jcotton - A jQuery like library for manipulating drawings and animations on the Canvas element.
- Beautiful UI styling with CSS3 text-shadow, box-shadow, and border-radius - Opera Developer Community - Putting CSS3 to work, some nice examples.
- The State of Web Development 2010 | Web Directions - What technologies are web developers using in 2010?
- tapper[ware] » Perspective texture with 6 lines of SVG - Neat demo of what can be accomplished with a little SVG, only works in Firefox (which allows you to apply SVG filters with CSS).
Buy my book!Hello! HTML5 and CSS3 available now
Buy my other book!Early access to HTML5 in Action available now
- Semantic Web and Microformats
- Web Design
- Web Develop
This work is licensed under a Creative Commons Attribution-Share Alike 2.5 License.