Recently I attended Fronteers 2011 held in Amsterdam. The entire conference was very well organised and the content across the two days was nicely balanced between more general thought provoking presentations, practical things that you could take away and use today and talks on where the web is heading, with good detail on some of the new things we will have to play with in the future.
Here's an overview of Day One.
The Future is Native - Aral Balkan
Aral Balkan presented the opening keynote with a presentation looking at where web experiences sit in relation to experiences provided by native applications. In a nutshell this presentation was about inspiring developers to embrace Use Experience (UX), to focus on the user's needs rather than focus on technical considerations at the beginning.Aral advocated a notion of "Write once, optimise everywhere", starting with progressive enhancement as a basis, then optimising for features, and then to optimise for specific devices. I personally feel this is good ideal to aim for, however my immediate thought was that it's important to be pragmatic and choose the battles to fight in terms of what devices you optimise for.
Towards the end of Aral's presentation he looked at how UX is difficult; as you move away from face to face communication towards using a device you're losing visual and audible cues. This means getting things right can be difficult but the right UX provides the "Superman effect" which in other words is to make the user feel empowered and feel good about their interactions with an application.
Accessibility for the Modern Web - Derek Featherstone
Derek Featherstone, gave a great talk on what considerations there are around building web applications that take into account accessibility. Firstly he looked at work he'd done in the past that had been criticised as being a collection of hacks. These were scripts that added accessibility features to existing applications, for example: keyboard accessible you tube controls, and adding keyboard accessible controls to google maps. Derek went on to explain that the need for such "hacks" is because of decisions someone else made.Following on from these inital examples Derek walked through a number of real-world examples where odd markup decisions had been made to provide (in come cases) a certain look and feel rather than using the best-fit native elements. For example Amazon use a convoluted customized checkbox widget rather than use a checkbox. Another example was Gmail's compose links being a span with an onclick rather than a link.
Looking at examples of real-world problems the key points made were around choosing the right control for the job. Buttons for actions link to take the user somewhere. If you're needing to use tabindex=0 to make something focusable then this a good point to reconsidering if you're using the right control.
Another issue considered was management of focus. If a link opens a dialogue then once the user has closed the dialogue the focus should go back to the link that opened the dialogue. For a keyboard user focus is crucial and if you send focus to the top of the page constantly then you're providing a very poor user experience.
Derek also provided some examples of use of tabindex had resulted in "keyboard trap", in this case it was a form that had focus controlled in such a way that you couldn't get to to certain fields through the use of tabbing to move through the fields.
Looking at keyboard interactivity Derek pointed out the caveats of using role=button on links. As assistive technology that support aria roles announces a link with role=button as a button the user will expect to be able to use the spacebar to activate it. However unless the site author has added keyboard handling to allow for this spacebar will do nothing. This is something that's all too easy to do and whilst trying to be well-meaning the addition of such a role has impaired accessibility.
Derek's presentation provided lots of great examples and practical advice and it's definitely made me want to dive in to everything that we're building an re-evaluate what improvements we can make to provide a better experience for all our users. In addition I feel it's important to get a good sense for what a baseline experience should be so that it becomes a given that we build accessibility into sites rather than facing the prospect of retro-fitting it afterwards, as that's always going to be more expensive in terms of time and effort.
CSS3 Secrets: Ten things you might not know about CSS3 - Lea Verou
Lea provided a great showcase of cool tips and tricks you can achieve with CSS3. Lots of interesting and cool stuff here. I particularly like the gradient tricks for faux-columns and the background-origin tips. Interestingly this highlights something I love about working with CSS in that creative approaches to problems can yield really good results. One of the best examples of this was the use of nth-child selectors to provide layout control based on the number of elements.
You too can be a bedwetting antf**ker: Bruce Lawson
Bruce's Presentation highly entertaining presentation walked us through the new elements in HTML5, noting problems that currently existing in the specifications. This was a good overview of what's new in HTML5 and where new elements provide more options for describing your content with more appropriate semantics.
Go with the flow: Stephen Hay
Stephen gave a talk on the exciting features of CSS Regions. CSS regions are just appearing on the horizon in terms of current browser support, but that doesn't diminish what interest creative possibilities they open up. I'd definitely recommend checking out the deck.
The future of CSS—Current Experiments and Near Future Reality - Tab Atkins Jr
In this presentation Tab Atkins Jr (who works for google as a CSS specification writer) outlined a lot of cool features that are coming into CSS specifications and in some cases these are things that are starting to be implemented albeit experimentally in most cases.
Image function
background: image("foo.webp", "foo.svg", "foo.png", blue);
background: image(rgba(0,0,255,.2)), url(foo.jpg);This allows fall-backs in the first example the first item that loads is used.
The second example allows a transparent colour to be overlaid an image.
Flexbox
I particularly liked the flexbox example which demonstrated an input and button with the flex() used for the width so that it takes up the remaining space up to the button.<div style="display: flexbox;">
<input style="width: flex(); display: block;">
<button>foo</button>
</div>Calc
Thecalc() function (I can see this coming in very handy):
calc(50% + 20px)
calc(100% / 7)attr() lets you pull values from attributes on the element.
width: attr(data-size as px, 100px);CSS vars!!!
@var $header-color #006;
@var $main-color #06c;
@var $secondary-color #c06;
a { color: $main-color; }
a:visited { color: $secondary-color; }
h1 {
color: $header-color;
background: linear-gradient(left,$main-color, transparent 25%);
}Tab noted that a lot of innovation was happening in the CSS preprocessor space and this was being recognised and informing some of the newer specs.
To see the full range of examples Tab's Slides can be seen here: http://www.xanthir.com/talks/2011-10-06/
Passion. Purpose. Promise. Pursuit - Leslie Jensen-Inman
The final presentation of day one was a call to action to embrace the things we are passionate about, define our purpose, make commitments to ourselves and others (promise) and to pursue these goals to make greats things and do good.This was a sound message, and it's easy to see how it can apply to being a web developer. Also something that we don't often do is step back and evaluate ourselves and look at where we are heading and rationalise our interests with what we want to achieve.
Passion. Purpose. Promise. Pursuit. slide deck on Speaker Deck
For Day two see: Fronteers Conference Day 2