Here is my coverage of day two of An Event Apart Boston 2014. It's interesting talking to colleagues to see how many people have attended one of these conferences in the past, and with good reason. It was well worth the time to get some very interesting perspectives on the state of the web today. And more importantly, where it's going (hint: it's going more mobile).
If you have already read it, see my recap of day one and be sure to visit Jay Wintermeyer's blog for more of the individual talking points of each speaker's talks and coverage of the mobile workshop on day three.
The Long Web
Credit: Jeffrey Zeldman, Flickr
Jeremy Keith (@adactio) led off day two with an exploration of the web’s future by diving first into its past. Using his own web site, thesession.org as an example, he showed one way that people shared their content in the more bandwidth restrictive days by transposing music using a simple text-based ABC notation method. He showed how, after 10 years of use but no real upgrades, he approached updating the site using modern technologies and conventions. Jeremy continued with the running theme of mobile, content and URLs coming first in terms of designing a site strategy. One interesting note was how he implemented password fields with an option to show the clear password checked by default. If the user decided they needed to hide it, they could do that. Engagement on the site, he said, went UP after implementing this feature, especially on mobile.
Jeremy moved into highlighting some of HTML 5's newest features of enhancing the user experience by reminding us that browsers ignore recognized tags and attributes and suggested an approach of progressive enhancement. Start with the basics of what HTML can support for the lowest common denominator and enhance with CSS, new cutting edge HTML features and JavaScript as needed. He used several types of input fields and the HTML 5 Datalist attribute as examples of this. It was a good reminder that there are lots of conventions that work very well today that are already built into HTML (like links and buttons) that don’t need to be rewritten using clever JavaScript hacks just for the sake of using a new library or just being clever.
A nice bonus was listening to him play "Sergeant O’Neill’s favorite" from O’Neill’s 1001: The Dance Music of Ireland on his guitar. Cue applause.
Page Optimization and Performance Budgeting
The title of day two’s second talk was a bit of a misnomer for me. Google Chrome evangelist Paul Irish (@paul_irish) not only started his talk with a groove to TLC’s Waterfalls (an event apart exclusive as he noted to me) but mainly discussed optimization in terms of how fast sites perform on the web and mobile devices. One big note was that despite all the tools (input sources) available on mobile such as swiping, pinching and double tapping, none of them help make the page loading experience faster. That burden rests on us the developers to optimize our code and the number of items we're loading on a page.
Paul displayed a very telling tool that displayed the time from initial page request to the time that content was first rendered to the screen. This included a film strip view which clearly showed a black screen and the time that content was finally rendered. It showed that some sites (ehem, Martha Stuart's web site) suffer performance hits based on re-routing of requests to mobile URLs as well as bloated JavaScript included in the browser
tag. This causes the page to be blocked from rendering even the most basic HTML until all the items specified in the head are loaded.Paul quoted author Ilya Grigorik in comparing page downloads and performance optimization to managing our own diets. It's not the KB's that necessarily matter in managing page performance, but the sum of all the parts (number of requests AND the size of requests) that matter in managing performance. A very interesting talk overall that has made me think about ways to being optimizing performance on sites right now.
CSS 4 Color
My favorite talk of day two by far was author and former W3C Working Group advocate Lea Verou’s (@LeaVerou) talk on color and CSS 4. Color always seems like such a simple concept until you actually dive into the specifics of it and Lea certainly gave quite an informative and eye opening talk on the subject.
Credit: Jeffrey Zeldman, Flickr
Lea first took a look back at understanding the basis of how color works on monitors and screens with an in depth look at how a single pixel actually breaks down and how they go about the various ways of displaying color. She also walked through the progressive enhancements to color support we gained through different iterations of both HTML and then the first three levels of CSS. She noted that even though we've progressively gotten more functionality for colors, not all of it was necessarily all that useful (that’s right, we’re looking at you named colors!)
She then went on to talk about some of the challenges in using color on the web, most notably dealing with luminosity. I found it very interesting how none of the color tools already available in CSS today actually provide any support for managing this very real, though sometimes subjective concept. She did have a formula that helped to start to bridge the gap to define contrast based on the colors being used and how it can be used to style related elements (most specifically what contrast the color of text should be used when displayed over a background color).
The most exciting things she highlighted are those being worked on the by W3C in CSS 4. These include a new gray function where you can pass a % of gray, expanded hex colors that support alpha properties (which might also make them even more confusing than they already are), CSS functions that mimic some useful functions found in SASS, and my favorite, CSS Variables (Woot!). In the meantime, she pointed out that either SASS or a library called Myth.io which I personally plan to dive deeper into myself can be used to bridge the gap to CSS 4. Very cool talk Lea. Thanks!
Minding the Gap
Coming off lunch the second day, Josh Clark (@globalmoxie) spoke about the important space that exists between our desktop and mobile devices and how we are not yet at a place where there's a seamless link between them. It's interesting to note that people switch between devices 21 times per hour. That can be between phone, tablet, PC, TV and so on. 21 times! People tend to start shopping on one device (phone or tablet) and finish on another (PC). As such, screens and devices tend to become somewhat of an incumbent prison for us developers instead of a means to a productive and satisfying experience.
There were some cool demos of innovations to help start to bridge the gap like Drum Pants (will we double tap our leg or use baseball type signals to advance Powerpoint slides?), NYC developer Larry Legend's iOS Happy Together app and a hack that used the Xbox Kinect to capture content off a TV screen and zap it to a mobile device with the flick of the wrist. There's an obvious and fast-paced push to connect everything that we can, but there always has to be the mindset that if we can connect it, others can take advantage of that. Josh's big takeaway is that "It's not a challenge of technology. It's a challenge of imagination."
Winning the war of web vs native
Credit: Jeffrey Zeldman, Flickr
I think the talk that most interested me on the agenda was Bruce Lawson (@brucel) talking about the constant battle between serving content via the mobile web or as apps. This was a pretty thought provoking talk as it's a topic that we battled over constantly at Mediatavern once the iPhone started to gain traction and again after the iPad hit the scene. There are great augments for and against both methods and Bruce pointed out that many of the efforts to come up with a happy medium this far have either failed miserably or are too new to really offer any type of reliability or adoptable solution. The push to keep the web open and accessible and not locked in the tight death lock of an app is in progress, but we have a ways to go.
He also spoke about some of the efforts made by the W3C to help address some of the shortcomings like utilizing the browser's Application Cache to store web content offline. Bruce reference an article by Jake Archibald on A List Apart called "Application Cache is a Doucebag" to highlight that while the W3C is fantastic at making high level specifications and recommendations, they sometimes fail when it comes to the specifics of low level implementation in regards to the interface with the developers, or the API. As one would expect of a body the size of the W3C, it's hard to focus on the specifics and sometimes quickly address the small stuff when you have the entirety of the world web users to be accountable to.
The big takeaway from Bruce is that standards and adoption of methods that make the user feel comfortable with what they know will be the biggest tools we have in winning the war of keeping the web open and accessible to everyone, via an app or not.
Championing Ideas and Mobile Today
I didn’t get to attend the final session of day two, so I once again refer to Jay Wintermeyer's blog recaps for a review of the final session as well as Luke W’s day 3 mobile workshop. Thanks for the recaps Jay!
Overall Impressions
Credit: Jeff Fox, Twitter
Aside from Flash in the City in 2008, this was the first real conference I've ever attended. It was very well organized and the event went pretty much by the numbers. I liked the running theme about content driving the user experience and how we have to be aware that mobile IS the future whether we like it or not. For a desktop stalwart like me, I'm continuing to adapt to that change in mentality myself. It helped to tie in the focus of each individual speaker's talks and kept us engaged because you could see how it connected them all to one another.
An Event Apart was also a great opportunity to meet and greet different people from within the web community at A Lounge Apart and the day one after party at The Brahmin. It was an interesting mix of designers, developers, technical and non-technical alike.
Now let’s all get to work coding (or designing if that’s what you do)!
Header Photo Credit: Jeff Fox, Instagram