This is part covering Andy’s talk which was on “The Progressive Web”. First up, my sketchnotes.
Sketch Notes of The Progressive Web, apologies to Andy Hume
The basic message of Andy’s talk is that the landscape of the web these days (note my awesome rolling hills) has changed and people should be more open to these new techniques. By designing and coding sites for today and tomorrow, you are not only reducing the amount of work you have to do now, but you’re decreasing the number of bugs, not having to re-do gradients for high-resolution displays, and you’re also making your web site faster, which is directly linked to revenue. There’s no reason not to add these things in now unless you’re designing entirely for IE6.
Andy talked extensively about @media queries, how these should be used instead of browser sniffing (read: should do feature detection) and how they can make simple websites work better across more web-enabled devices. He demonstrated the dConstruct website as a good example of this.
Andy put up two great slides, one on when you can use HTML5/CSS3 standards today, and where you should use intermediaries like jQuery. The other slide is poorly reproduced in my sketchnotes (middle-right), showing the cycle between standards, new hacks, old hacks and back to standards. This indicates a whole new era of innovation in the web now that we have these new standards.
This second part was on the Future of Web Typography, presented by Richard Rutter (also of FontDeck)
The Future of Web Typography, apologies to Richard Rutter
Richard is heavily into his typography. He recently launched FontDeck, a web fonts web service similar to TypeKit et al. Richard talked a lot about how bad things were before, how system fonts had reduced our creativity and what sort of deep opportunities for font producers lay in the CSS3 Fonts module.
Many of the features discussed (and sketched) aren’t available in any build of a web browser, for instance kerning, numeric variants, ligatures, different types of ligatures, font stretch, named font weights, hyphenation and many other things. Firefox 4.0 is starting to implement many of these features but it’s very slow going. A lot of time was spent pointing out what these things could do, and how they improved readability. He did also say that this “is not a Firefox fanboy love-in”.
Near the end of the talk, Richard discussed a new anti-aliasing method from Microsoft called DirectWrite, a feature that uses a computer’s GPU to render fonts on a sub-pixel level. He even went so far as to say that
“With DirectWrite, fonts will look better on IE9/Windows 7 than on a Mac”
He also made mention of the iPhone 4′s retina display. The future is high-resolution displays, and with rendering technology that can actually support all of these rules which are built into fonts, the web will be a much nicer place to read content.
Richard made a lot of the new way fonts were being served (as a service) being beneficial to both the client and to the foundry. It’s cheaper for the client (not having to buy fonts at £500 a go) and the foundry also stops their fonts being pirated and distributed around the web.
Overall, Richard was quite downbeat about the state of things right now, but is confident they’ll get better.
The full slides from this presentation will be available shortly (check back later).
My sketchnotes for this are at the bottom of the page. This is only a brief write-up, hopefully the LWS guys will put the video up soon. Much of this is para-phrased. Andy, if you do read this, let me know if you want any of these answers changed.
Q: Good UX vs Good design? (the actual question was a lot more wordy than that)
UX is a quality attribute, it can be good and bad. An aspect of good design takes UX into account, though there are exceptions i.e. the Phillips Juicer. Good design does not imply ease of use, UX is a design philosophy or style. A good UI designer understands HCI, social, environmental and cognitive psychology .
Q: User-Centric Design or Persuasive Design?
Both together please.
Q: How do you manage difficult clients?
Clearleft tend not to get them thanks to their reputation. Basically, just manage expectations all the way through.
Q: What should you do if you’re told to design “for IE 6″ or “inaccessibly”
Ignore the request. You’re a professional (dammit) and you need to use the right tools for the job. Don’t just keep patching a crumbling building, i.e. if you have an intranet made for IE6, don’t just patch it up, start again.
Q: What tools couldn’t you live without?
Pen and paper. Oh, and sticky notes.
Q: What makes a good UX designer?
Empathy
Inquisitive
Unsatisfied with life (want to make things better)
Desire to fix the world
Q: How do you get clients to invest in UX even if they have a small budget?
Design on paper to reduce costs. Too many designers just go straight into photoshop. This will allow for more iterations and less money in the long term. Remember that you’re also in a facilitation role so its up to you to guide the process.
Q: Is any testing better than no testing?
Yes.
Generally there’s lots of low-hanging fruit (if doing a re-design) so take that! You only need to do the deep level of thought if you’re solving a very specific problem.
Q: Are there any design patterns you use regularly? Should you make new ones?
Real-world patterns work very well, i.e. tabs. Most people don’t know that a site logo takes you to the home page, so always have a home link. If you’re making a new pattern, test test test, then think, would something else be better.
Q: Where do you get your inspiration from?
The real world. Architecture, a book called “Why people buy” (but not the section on the internet), the Disney Imagineers. Overall, it’s about how it functions, not how it looks.
Q: Is the user wrong? When does the designer know better?
Generally, the user isn’t wrong. It’s very rare that their opinion doesn’t count, so swallow your pride.
Q: How do you establish credibility in an organisation?
It’s difficult, very hard to do internally. You need to play the office politics game. Build a level of knowledge and use references as much as you can, so it’s not only you saying these things. Have confidence in you and what you are doing. Visualise it in your client’s language if possible.
Q: What should you do if a business objective creates a disjointed experience?
Andy can’t help on this one, this is an answer from the LWS crowd.
Switch it around, get buy-in from people and sell ti to them. Do it in the pub, many people are much more open there. With regard to “Dark Patterns” i.e. hiding a company’s phone number or directing through certain channels, read Dan Lockton’s post.
So, infamously, the iPhone OS doesn’t support Flash, encouraging its users to use the advantages of the webkit-based Safari to overcome any challenges that a lack of Flash can present. Last year, Adobe announced that in Flash CS5, you’d be able to convert it to run on the iPhone. In April, with a revised iPhone developer agreement, Apple put the brakes on, saying only apps written in one of three languages would be accepted on the App store. Adobe’s solution would compile directly to the CPU bytecode, hence being illegal.
Adobe weren’t too pleased about this, yet launched the product anyway, hoping Apple would change its mind. Since then, Steve Jobs wrote an open letter, explaining their position, claiming six points:
Flash is closed source (like the iPhone), HTML5 is open
Flash is the number one cause of crashes on OS X
Flash is not designed for touch
Need to maintain app quality on the store
HTML5 can do everything that Flash can
Battery life suffers
In the letter, there’s a bit of pretending that the iPhone is the only phone in the market, but otherwise, in my opinion, it’s accurate.
Adobe’s response was somewhat deluded; laughing that Flash wasn’t an open platform (someone should break the news to Adobe’s CEO) and saying that Flash 10.1 will ship to mobile devices later this year, focusing on multi-platform development. Adobe’s CEO also points that Apple’s developer restrictions are cumbersome and have nothing to do with the technology.
So, who’s on the right side? I believe that Apple have got it right this time, even implementing a half-finished specification is better than a platform that Apple have no control over, especially when the user experience is so important for the iPhone’s success. HTML5 genuinely can do everything Flash can, and do it all on hardware. It goes beyond Flash with geo-location and JavaScript access to more hardware features like the accelerometer and camera.
Personally, Adobe needs a re-think of their strategy. Flash enjoyed enormous success as a video player (thanks to YouTube) but they should have seen HTML5 coming. It’s been on the cards since the first iPhone in 2007 and Adobe has done through an entire release cycle (CS5) with little though for HTML5. If they’re smart, which they are, Flash CS6 will be able to create SVG graphics and Canvas apps using web databases and fonts, having Flash fallbacks for non-HTML5 capable browsers. Dreamweaver will have HTML5 structure tags available and Illustrator and Photoshop will do SVG too.
If Adobe don’t keep up with developers, the devs will simply find other tools to use. Adobe can avoid this, and it’s in their hands.
