Breaking Development – San Diego – 2013
I had the opportunity to attend one of the up-and-coming conferences in San Diego this last weekend. This was Breaking Development (aka <br/> and bdconf), and it was held at the Hard Rock Hotel in beautiful San Diego California.
This is my summary of what I took away from the conference.
Luke Wroblewski – One Design to Rule them all
What is really the definition of mobile? how about a tablet? what about an ultra-mobile-electra-mega-portable? What was once defined as ‘if it clicks it’s a desktop, and if it touches it’s a phone/tablet’ is gone. Product innovation and progression has changed the way we test for input and is clearly not a defacto standard on how to detect device types.
So, how do we handle our designs? We use a multi-device approach (device-agnostic)
1. Support all screens
2. Account for high res devices (you can read retina here if you like marketing terms)
3. Optimize for touch first
4. Support cursor and keyboard
The basic idea is that we need to stop thinking in terms devices and capabilities of said device (especially when stereotyping how the device is used), and think instead as supporting the screen.
Erik Runyon – Before the @mq
Erik is the main man when it comes to the Nortre Dame website (nd.edu) and he has had the opportunity to work for several managers who have a clear vision of what they want, but don’t realize how much data they are trying to force down the pipe to any end user who wants to browse the site.
Erik and his team have performed small miracles in getting the site under-control, and to responsive. They have done testing to figure out if anyone clicks on slider content (turns out not many do.. something around 1% for nd.edu), and they have found that when users who frequent the site suddenly have things change, they aren’t happy.
Another interesting observation was that when users see a loading flash object (or even just a loader in general) many are afraid to continue using the site until all of the content is delivered.
Another fun fact safety tip from Erik’s presentation was that if you notice your ‘first-time to byte’ time is horrid, it’s time to analyze how much lifting your server is doing and see if the processes can’t be off-loaded or deferred. In his example there was a PHP script that was causing server delay while it rendered pages to be loaded.
Peter McLachlan – Visit-Speed: Page Speed is Only the Beginning
Peter is a cowboy-coder from up north (BC Canada), he also happens to be co-founder of Mobify. After chatting with him I can also say that he is a certified genius on content delivery.
Visit-speed is how visitors interact and behave on your website. Delay on mobile will cost you conversion, and will cause people to loathe using your website.
How does performance suck? let’s take a look:
- Too many http requests
- High latency
- Too many bytes
- Poor caching
- Lagtastic interaction
Some things can be fixed with some creative pre-fetching. Pre-fetching is the idea of speeding up user interaction by loading assets in the background *before* the user needs them. This is a tricky balance as you figure out what you need to pre-fetch to save time, while not wasting resources grabbing what will never be used.
Should be pre-fetched:
Should NOT be pre-fetched:
localStorage is/can be slow… but you should use it anyway, it can be a great caching resource. Just remember to flush it every once in a while so that your site doesn’t appear completely broken when you change something and forget that some users may have old assets cached.
Barbara Bermes – Embracing performance in today’s multi-platform macrosm
Barbara works for the CBC, and she is used to dealing with hundreds of thousands of users on her sites. Speed plays a huge role in delivering a good experience to users. It has a massive hit on our perception and our psychology. When something is fast, it feels convenient and awesome, when it is slow it feels painful and sluggish.
Get fast by reducing the number of HTTP requests you have to make, if you are rolling a Single-Page-App (SPA), then only refresh the sections or portions of your app instead of reloading the entire thing.
Automation can also be a key to not only speeding up your delivered content, but in even creating it. Setting up tools to help you automatically remove white-space and minify your CSS and JS can really help you save a bit of time.
James Williamson – Is Flexbox the Future of Layout?
James is from lynda.com, and he is very good at pulling you in and demonstrating how to get things done. He was only allotted 30 minutes to try to teach us all how to use flexbox and he did an amazing job. Flexbox has gone through many iterations (which is why I have avoided using it), but it has finally become stable and is safe to start playing with now (it will still be a couple of years/releases before all the major browsers support it, but it’s never too early to get started learning how to use it).
I could attempt to write down everything he covered, but you really should do yourself a favor and review his slides over at slideshare.net/jameswillweb
Divya Manina – Next Generation Layout on the Web
Divya works for Adobe on the WebEngine team (which works on anything they believe will be useful for web development and technology). She demonstrated CSS clipping paths, as well as discussed how document.fontloader has many methods that can be used to help deal with the white-screen-of-death on page load for sites that use custom fonts.
Jason Grigsby – Adaptive Input
Input is changing, and how we display data is changing. New inputs such as the voice command on the Xbox One demonstrates how devices are now adapting to a new type of input (along with Google Chrome and Google Glass). Oh and one last thing, companies that care about employees apparently don’t book them on Spirit Airlines, having never flown with them, take it for what it’s worth.
Cameron Moll – Pitfalls and Triumphs of the Cross-Screen Experience
We need to stop thinking of mobile vs desktop web and start thinking of the one-web experience.
Moll’s Law – The best interface is the one that’s within reach.
If you are going to do Ecommerce and have a login/app for multiple devices make sure that you sync cart content between them (Amazon does this and it provides a very nice experience).
49% of users email themselves a link when changing devices (I personally just use chrome and pick up where I left off, but that’s probably another post for another time).
We need to stop stereotyping certain device users and creating sites that live in silos catering to that device.
We also need to STOP forcing our mobile app on users (Zappos, LinkedIn, I may be looking in your direction).
We also need to stop assuming that one-size fits all, not every user is going to like our responsive version, some may want to go back to the “old” site. Change makes people trust things less, so we need to start thinking of new solutions to deal with this.
Eric Bidelman – Web Components: a new way of building web apps
Eric gave the presentation that he gave at Google IO, and even though it was my second time to watch it, it was still just as thrilling as the first time I saw it. If you haven’t been playing with or looking at Polymer.js, then you need to get started on it now. seriously, go right now, I’ll wait.
Ben Callahan – Prototyping Style
When working on a project, you need to work on a few key areas:
- Establish the Aesthetic
- Solve the Problem
- Refine the Solution
Use style-tiles (that work in-browser, fantastic article in this month’s .Net magazine – the one by Sparkbox) to help you understand and build the aesthetic
When you solve problems, use tools that you are familiar with, not ones that slow you down.
Use design pairing to refine the solution. Eyes get tired, and sometimes when we look at something over and over again we miss things, use a partner to help fix that.
Hampton Catlin – How to Build the Right Thing
If you are surpised it doesn’t exists, you are on the right track, keep digging
Dennis Kardys – Practical UX for Mobile: a Future Friendly Approach to Communicating Your Ideas
Dennis is awesome, he works for an agency that really gets how to get through a design and to create products not only work, but that feel right.
When creating a design, use “body-storming” as well as role-playing to figure out what should be done.
Body-storming is acting out how your design will be used. This may include leaving your desk, walking outside, jogging, sitting somewhere else. Role-playing is an interesting twist, it actually takes one person who pretends to be the application and one who tells it what they want and how they expect to get the information.
Paper-prototyping is good because it can be done anywhere and doesn’t require re-programming before you can see the results (while those who can’t get the vision of drawings may struggle with this, I tend to use this approach)
UX is a result, not a document
Ilya Grigorik – Optimizing the Critical Rendering Path
Ilya gave a great presentation on what it means to work with mobile devices and how the entire process (from initial broadcast to page rendering on the screen) takes place.
Speed is a feature
Google ranks sites based on speed because they know that fast sites will make people happier and that they will spend more time there (therefore making it more relevant to what the initial search was)
Ideally, pages would all load at 100ms, but for now, let’s aim for 1000ms (1 second). Using this budget we can see just how important optimizing the experience for those on 3G and 4G/LTE is.
3G devices can have a 300-600ms delay per HTTP request (there goes the budget on just the initial HTML and CSS).
- One RTT render for above the fold
- No redirects + a fast server response (less than 200ms)
- Add critical CSS to inline on the page, remove blocking JS (defer/async it) ?Keep the inlined CSS/JS under 14kb, and defer loading the jQuery lib until after page load
I was not only treated to hearing from experts on device interaction, content, and delivery, I was also able to hang out and meet some awesome and amazing people. While the talks and presentations were great, it was this opportunity to network with developers/designers/managers facing the same problems as me that really helped make the experience memorable. If you ever get the chance to go to a Breaking Development conference, I suggest you take the opportunity to do so. And hey, they are having one in October at the Gaylord Opryland in Nashville
**Note that not all speakers were covered, such as Jonathon Snook, who did an amazing workshop on SMACSS as well well as Sara Wachter-Boettcher who lead a discussion on content presentation, preparation, and distirbution. They were not included due to electrical malfunction in my notes.