The conference was held in the Hard Rock Hotel in San Diego. Quite a different venue than the bio-domes of past BD conferences.
The title was “Before the @mq: Making the decisons that make a site responsive”. I essentially demoed how some sites deal with images to increase performance. The first example was the BBC’s mobile site and how it loads images for individual articles. The second was West Virginia University’s carousel. I’d like to thank Tom Maslen of the BBC and Dave Olsen of WVU for their feedback and willingness to answer questions. Lastly, I discussed how we took the inital load of ND.edu and reduced it from over 3 MB to under 400 KB.
I’m not the greatest note-taker by any means, but below are what I have from the other presentations.
### One Design to Rule Them All
### Visit-Speed: Page Speed is Only the Beginning - Notes by @LukeW -
### Embracing Performance in Today’s Multi-Platform Macrocosm - Notes by @LukeW - Comparing mobile to native is like comparing dept store suit to taylored - use AMD - Each http request costs around 200ms - Focus on performance optimization during build
### Is Flexbox the Future of Layout? - Notes by @LukeW - Flexbox allows for horizontal, vertical and baseline alignment - Source-order independent - Flexbox 2012 syntax is now stable - Can use now, but need to use 2009 and 2012 syntax and vendor prefixes - When defining a flex container, all direct children and flex items; specify row or column - Images as a flex item resolves to zero - Don’t overuse it - Understand flex-basis - Flex item margins DON’T collapse (even vertically) - Comment by Paul Irish on Flexbox performance
### Next Generation Layout on the Web - Slides - Center content vertically with flexbox - Widows/Orphans - specify word count; it’s only a recommendation to the browser - CSS Regions allow the flow of conent from one element to another - shape-inside/shape-outside: create polygon for content
### Adaptive Input - Notes by @LukeW - TV interface: Larger text and fewer words - TV interface: Should be a grid (support d-pad interaction) - Most js libraries split their desktop and mobile js widgets - The web never had a fixed canvas, but we adopted standard sizes anyway - Input represents a much bigger challenge than screen size - Web speech API works in Chrome - moreawesomeweb.com - geolocation is a form of input - demos of voice input using the Web Speech API bit.ly/15bVSz5 bit.ly/1dQFaY2 - No hover state on mobile? - Pointer events spec normalizes touch and mouse - You’re designing for user need not for a specific form factor or input
### Pitfalls & Triumphs of the Cross-Screen Experience - Notes by @LukeW - Slides - 77% of mobile searches happen at home or work (Google study) - 31% of US adults own a tablet - Moll’s Law: The best interface is the one that’s within reach - Discrete: An experience on one screen independet of, but ideally cohesive with, experiences on other screens - Up to 49% email themselves a lik for continuing the activity on another device - Don’t stereotype devices or their owners - Don’t fall prey to the convenience of device silos - Use abstract terms instead of mobile/tablet/desktop silos - Respect users’ mental models, aesthetically and functionally - Don’t unforgivingly force your app on your users - Use vertical media queries if necessary
### Web Components: a new way of building web apps - Notes by @LukeW - Web components allow us to create or own custom tags - Can create full apps inside a tag - Extend standard elements: is=”mega-button” - Encapsulate functionality - Building blocks of web components - Shadow DOM - markup/style encapsulation - can inspect shadow dom by enabling it in dev tools - HTML Templates - Chunks of inert markup for later use -
### Prototyping Style - Notes by @LukeW - Slides - Linear process and RWD didn’t play well together - A “1 deliverable” workflow is centered on iteration - Use tools you are comfortable with to establish teh aesthetic - http://froont.com/ - If you’re designing in the browser, be sure you’re fluent in the medium - Group improvisation when building - requires individual team members to be great, humble and empathetic - If you can’t so “no”, it’s not collaboration - Create guidelines instead of rigid processes - Invest in people over process
### How to Build The Right Thing - Notes by @LukeW - Quality w/o clear understanding is meaningless - Don’t just complain about problems, fix it - Take the simplest approach you think will work - Solutions only come from problems - Whatever is driving you crazy, you’re not the only one - Do something cool
### Practical UX for Mobile: A Future Friendly Approach to Communicating Your Ideas - Notes by @LukeW - It’s up to those with the best understanding of the technology to lead the way - Comics and storyboards for scenarios - Design systems breed modular markup and CSS - Pace the conversatin and try to focus on one thing at a time - UX is a result, not a document - http://robotregime.com/
### Mobile Content(ment): Turning Disruption into Transformation - Notes by @LukeW - Business’ are trying to treat web and mobile as an add-on - Our new job is playing a “bridge”. Guide people from the old to the new. - We spend more time creating walls than bridges - Content is a pain, but we can use it to our advantage - Choose participation, not just presentation. Include stake-holders and users early in the process. - Your site can’t be user-centered if your content is self-centered