Authored Content

Authored Content, Episode 10: UX Ethics, Connected Watches, Drawscript and the Web Standards Project

User Experience expert Dave Hogue joins the Authored Content crew to talk UX Ethics and black patterns. Also discussed: Google and Apple connected watches, Drawscript for Illustrator and the mothballing of the Web Standards Project.

Join the ongoing conversation: and our Google+ Community:

Links from the talk:

Google Watch
Glass, Filter Bubbles, and Life Streams – Connecting the Dots
Build Collaborative Apps with Google Drive
World Wide Maze

Watch the video and join the discussion!

You can watch all the episodes of Authored Content on YouTube (playlist), like Authored Content on Facebook, and join the Authored Content Community on Google+.


MIX11 Day 2: Phone Innovation, Standards and Kinect for Everyone

A Kinect for everyone

A tag for tracking: #ms_mix11_svwe

Keynotes at conferences can be hit and miss at times. You have to know your audience, both what they want and how they want it served, your timing has to be exactly right and there has to be a strong balance between content and humour. All of these points were achieved, if not to perfection than at least to a level over and above what I’ve seen before today. And that’s not just because every attendee at MIX11 this year gets to walk away with a Kinect and the promise of tools to build Kinect applications for the PC in the near future.

The first 2/3 of the day 2 keynote at MIX11 was, not surprisingly, focussed on the future of Windows Phone 7 and Silverlight (not necessarily connected). Microsoft’s reboot in the phone market has really started to take off and because of this there is now a larger push than ever to roll out new features and capabilities for developers to build on and users to use. I’m not a phone developer so this is not technically interesting to me, but as a phone user I can say that what is being introduced in the next Windows Phone 7 update, code named “Mango” for some unknown reason, will help developers create better user experiences and more interesting applications for the phone and will provide the end user with a smoother and more intuitive experience. Both of which are great.

When it comes to Silverlight and the future Silverlight 5 release there are also great things on the way that will result in more immersive user experiences and capabilities.
But for me it was the last 3rd of the keynote that stood out. It was dedicated to Kinect on Windows. Kinect is, or rather was, a tool created to facilitate a more immersive and controller less gaming experience, but it didn’t take long for developers to realize that the true potential of the little weird bar lay not in gaming but in interaction with data in general. For my own experience Chris and I have been talking about what Kinect would do for for some time but we’re not the only ones. And when the devices hit the street developers immediately started exploring ways of opening them up to develop new PC based applications. In response to this Microsoft is now set to release developer tools so that everyone can build Kinect based applications for Windows, which means the home computer. This is a game changer.

On stage there were demos of a Kinect controlled reclining chair, a helmet mounted Kinect used to help blind people navigate and a universal telescope. But that’s just scratching the surface. The Kinect not only makes your entire body an input device but also has the capability of taking voice commands meaning with the right application in the background it can do away with any other user interface. I can’t quite put into words how exciting this is. And to kick off the innovation every attendee at the conference got their very own Kinect to take home. Pretty cool. So expect an avalanche of crazy new user experiences using the Kinect once the developer tools are released in May.

Personally what stood out on this second day of MIX11 was the focus on open standards and web standards in general. Yes, there were tons of sessions on Windows Phone 7, Azure, .NET and other Microsoft-centric topics, but there were also a large variety of sessions on general topics like the new canvas tag in HTML5, the UX lightning series and a talk about the Web Standards Sherpa site by the Web Standards Project.

Of these I’d say the Web Standards Sherpa talk is a must-see for anyone working in the web world. Web standards are what binds us together and it’s more important than ever to keep them in focus.

Check out my continuously updated photostream from MIX11 on Flickr.

Book Reviews CSS HTML

Book Review: Handcrafted CSS: More Bulletproof Web Design

Some context: People keep asking me what books they should read to learn about web design and everything else under the sun. Therefore I’ve decided I’m going to start reading books about web design and everything else under the sun and write reviews of them so you can see if it’s a book you should check out too.

The One Sentence Review

Handcrafted CSS: More Bulletproof Web Design is a book by and for web designers and developers with a solid understanding of HTML and CSS who want to push things further with standards-based code and progressive enhancements through CSS3 and other bleeding edge technologies.

The author(s)

Handcrafted CSS: More Bulletproof Web Design has one of those weird author listings on the front cover: Dan Cederholm with Ethan Marcotte. If you’ve watched the movie Julie and Julia you know that “with” means that the majority of the book is written by Cederholm while a smaller portion is by Marcotte. For this book I’d say the book itself is by Cederholm and that it features an essay by Marcotte that brings in a slightly to the left but still highly relevant aspect that elevates its overall quality and usefulness.

Dan Cederholm is the man behind and author of the famous book Bulletproof Web Design of which the last edition was published in 2007. I have not read that book and by now I have a feeling it is too outdated to invest in. I might pick it up at the library but it’s doubtful. But people I know and trust say it’s a great book so I’ll make that assumption. Cederholm has created some truly impressive websites over time, many of which you have probably visited, and he’s one of those people who not only knows what he’s doing and does it better than most but also knows how to communicate that knowledge to others so they can step in his footprints rather than stake out their own way through the wilderness.

Ethan Marcotte is the man behind and he pops up as the co-author of several books including Designing with Web Standards which is one of the next books on my long list of things to read. Like Cederholm Marrcotte has worked on some pretty impressive projects over the years and his understanding of how the web works is hard to rival, even for Cederholm.

Both these gentlemen are at the very forefront of web design and development where standards and best-practices are concerned. As such this combo bodes well for the book they’ve collaborated on.

The Book Itself

Excluding front and index matter and preface Handcrafted CSS: More Bulletproof Web Design is a fairly short book of 204 pages. It’s in an unusual square-ish shape and comes in full colour with a nice and easy-to-read page layout. Considering the length of other books on the same subject matter it’s easy to think this book to be a little too light on material and substance. That would be a big mistake. These pages are heavy on real-world examples and applications with very little filler text. Although it has the sub-title “More Bulletproof Web Design” the book does not work as an extension of the original book but rather as an appendix. In other words it stands on its own. As a designer/developer with a firm understanding of HTML, CSS and all that surrounds these two code languages I found the book to be an engrossing and immersive read with bucketloads of valuable input. But I can see that without such a solid platform to stand on I would have judged the matter as both superficial and overtly simplistic. Which is the surprising consequence of Cederholm and Marcotte’s clean-and-simple approach.

Having worked with web design and development for many years I’ve noticed that as my understanding and skill set improves, my code becomes more and more simplistic and clean while the end result of that same code becomes more advanced. Handcrafted CSS latches onto this by providing even more simplistic and cleaner code examples and solutions to create well functioning and æsthetically pleasing websites. This is a huge benefit if you’re well versed in web code and a devestating detrement if you’re just starting out: If you don’t have a firm grasp on the code and understand what Cederholm and Marcotte is trying to do this book will seem like a series of disjointed code examples that at the same time go in too much detail and skim over the important stuff.

Futureproofing, progressive enrichment and clearing floats

Cederholm’s portion of the book concerns itself with three major elements:

  • Futureproofing
  • Progressive enrichment through CSS3 (in particular rounded CSS corners, RGBA colours and drop-shadows)
  • A better model for handling floats and clears

These are all hugely important considerations as both the web and the devices we ingest it on evolve but they are easily overlooked because they seem peripheral or subordinate to the issue of getting the content out and working properly.

Cederholm’s approach (and the root of the name of the book) is that a craftman goes the extra mile to add often invisible but still vital elements to her creations to make them stand out. Those elements, or enrichments, can be anything from a properly wrapping list item to a custom ampersand symbol, a gracefully degrading rounded corner or just introducing a semantically sound solution to float and clear management.

FYI: If you’re considering buying this book and the sentence above made you shake your head or think “what the hell is he talking about” I would recommend getting something else instead.

To me Cederholms chapters were divided evenly between verification, a-ha moments and new information. His approaches to futureproofing – making sure that designed elements are able to handle content that goes beyond the original drafts (i.e. a button with text that spans more than one line or has long words in it) – are ones I have strived to live up to even before reading the book. Thus seeing him applying the same philosophies and techniques in his QA process was a verification that I am on the right track. When I started on the section on a semantic solution to floats and clears and saw his ingenious .group solution I was left thinking “What the hell have I been doing all this time? This makes way more sense!” Needless to say the lessons learned from these chapters are now being implemented in all my current and future projects. And as I worked my way through the CSS3 examples and Cederholm’s pragmatic “progressive enrichment” approach I gained confidence and found a desire to start incorporating drop shadows, RGBA colours and rounded corners in my designs now rather than wait for all the browsers to get with the program.

Actually, Cederholm’s attitude toward progressive enrichment deserves special mention here. Whereas a large majority of web professionals have made Internet Explorer bashing into a competitive sport Cederholm proposes a more pragmatic approach: Rather than designing for cutting edge browsers and being frustrated by older browsers not keeping up he creates designs that incorporate rewards for more forward-thinking browsers while incorporating clean and simple solutions for the older generation. This is the only reasonable approach and one I’ve been promoting myself for years so it’s good to see I’m not standing alone on this.

The Fuid Grid

Although Ethan Marcotte’s contribution to the book is only a singular chapter it is a hugely important one. As the title suggests it concerns, and solves, what has been a bit of a mystery for many: The Fluid Grid. Grid-based layouts have been a pillar of print design since the early 1920s and have started making their way onto the web. There are many reasons for this, none of which I will cover here. The challenge with grids on the web has always been that they are either entirely static or at the very least have static elements. This becomes a problem when visitors use devices with unusual or small screen sizes (think a phone, an iPad or a vertically oriented screen) because they are often forced to scroll left and right to access the information on the screen. Marcotte sets out to create a proper fluid grid layout and manages quite well through the use of relative sizes like em and % combined with a fair bit of math. The resulting fluid grid is quite ingenious and introduces flexibility to sites that previously were confined to rigid structures. And practicing what they preach both Marcotte and Cederholm use these types of fluid grid layouts on their own sites. Open them and resize your window to see for yourself.

The Bottom Line

The red line running through Handcrafted CSS: More Bulletproof Web Design is the attitude that a little extra refinement and forethought will bring rewards, in functionality, æsthetics and simplicity. And this attitude is one that can be applied to pretty much every aspect of life, not just web design. Cederholm and Marcotte are both living examples of how well this approach works and their sites stand as testaments to the techniques and parctices.

This book is for the seasoned designer / developer who already has a firm grasp on HTML and CSS but wants to take it further. It is also an excellent introduction to the world of CSS3 and fluid grid layouts for those that want to push their sites and designs into the future. The book is best read while sitting in front of your computer, preferably with a project on hand where the techniques can be implemented immediately. It is when you see the examples take shape and improve your own designs you realize where the value lies in this book. It’s not as much a list of good code examples as a guide to improving your own work. As such the seemingly disjointed code examples actually make a lot of sense: Rather than presenting pre-packaged functional content they are laid out in such a way that they can be slotted into pretty much any project for instant effect. This falls well in line with the theory that new knowledge is best retained when immediately applied to something that matters to the person learning it.

I wholeheartedly recommend this book wihtin the parameters I just set out and look forward to learning more from both Cederholm and Marcotte.