1 Meg’s Excellent Adventure!SXSW 2012 Meg’s Excellent Adventure!
2 The Panels/Sessions I AttendedThe State of Browser Developer Tools Hack [ANYTHING] with Microsoft Kinect Creating Responsive HTML5 Touch Interfaces Best Practices: Native & Web Hybrid Mobile Apps Fashion Meet Up CSS for Grown Ups: Maturing Best Practices Responsive Content: Building a Website that Kicks App White Space: Shaping Nothing for Clean Design Bootcamp for a UX Team of None Cal Alumni Gathering featuring a panel of Cal entrepreneurs The Business of Kevin Smith
3 The Highlights: OverviewRealizing that we, as a department and as individuals, are already implementing most of the “best practices” I learned in each applicable panel/session I’m very grateful to be a working developer/designer at an established company that has resources (aka money) but that operates much like a start-up Got to know Vision Retailing and Skunkworks guys better and vice versa – we are talented and they know it (ok, they are talented too)!
4 The Highlights: Browser Developer ToolsThere are several new tools for Chrome, Mozilla, Opera, IE on the horizon that will increase our efficiency (shorten the amount of time required) as we debug Hex value color picker palettes Format JS options in IE Device discovery IP address to debug mobile in Chrome & Opera Viewing the 3D DOM in Mozilla (Firefox Tilt Add-On) – coool Best way to help change the internet and standardize browsers is to file bug tickets to fix problems – LENSCO example
5 The Highlights: CSS for Grown UpsCSS shouldn’t be so tightly reliant on code structure. Our markup must be translatable to any scenario we throw at it (this includes changing browser widths :/) As such, sometimes adding classes to multiples items like
6 The Highlights: Responsive ContentBy now, we all know what a Responsive Website is/does This was a very simple presentation discussing 3 strategies for making your content (not just style & structure) responsive Prune Content – don’t overuse or site will be crippled, but good for secondary, non-essential content, think mobile first Linking Content – good for non-linear content, homepage, newsfeeds Lazy Load Content – good for linear content, quick initial load times I thought this information could help us when we work on page designs for RWH, our blogs, and as we think about making all of our sites mobilified (not a real word but you know what I mean).
7 The Highlights: Bootcamp for UX Design Team of NoneUX Designers are expensive – average salary at startups in CA is $115K / in MA is $111K There are many inexpensive & easy “LOW-FI” exercises we can all do to solve design/usability/whatever challenges we face in work & in life (aka we can all be UX Designers) The Exercise Learning How to Pitch & Critique ASK for feedback Set up context of challenge in 30 sec or less >> the challenge + user considerations + technical constraints = context Ask specifically for the type of feedback you want, Specify the type of feedback you don’t want GIVE feedback Must be constant dialog - Asking questions is good, throwing bombs is not good Focus on challenges you might see with project & address those with your feedback Discuss what resonates and what concerns you about project RECEIVE feedback Gain new insight from new perspective Don’t knock it until you CONSIDER it LISTEN! Testing & Validation of Concepts Man on the Street • Burrito Lunch • Recording Session • Rapid Iterative Protosketching (RIPS) • User/Browser Role Play • A/B Testing
8 Thank you! Before I take questions, I have a question for you:
9
10 The Highlights: Best Practices: Hybrid Mobile AppsThe speaker was the Lead Developer for FlipBoard iPad & iPhone app – and he was really funny and really cool A Hybrid App (aka FlipBoard) has a web UI with native API access Things to consider when creating mobile apps: Keep integration points of API simple Be mindful of battery power on devices powering your app Pay attention to JS libraries – could adversely impact load time of your app if you are loading support for unsupported browsers (i.e. IE) Aim for 60 frames per section Use css3 animations and transitions whenever possible Watch graphics memory use – shadows and gradients are slow to load Consider compositing and overdrawing images (transparent pngs are slow loading)