Web Directions Podcast

The average size of an adult human’s finger pad is 10-​​14mm. The average size of a cursor or stylus tip is 1-​​2mm. That fact alone means that designing native touchscreen apps is an entirely different thing than designing web, desktop, or even traditional mobile apps. This talk outlines the most important concepts, guidelines, and practices to keep in mind when designing with fingers and hands in mind. We’ll cover interaction zones (where it’s easiest for fingers to reach), touch targets (size and distance apart), kinesiology (how fingers can bend, move, and stretch), and signaling (how users can become aware of gestures). Dan Saffer is an interaction designer and the author of two books: Designing Gestural Interfaces and Designing for Interaction. He is the co-​​founder and one of the principals at Kicker Studio, a design consultancy in San Francisco that does "interaction-​​infused" product design. Since 1995, Dan has designed devices, software, websites, and services that are currently used by million

In the absence of a "Widgets for Dummies" book being available at your local bookstore, this presentation will try to bring you up-​​to-​​speed with what you need to know to start developing widgets. Split into two parts, we’ll cover the theory behind widgets: * seriously, yet another platform to code for?! - vendor and manufacturer support for widgets & compatible development frameworks * what widgets are good for - save your users (and yourself) time, money and frustration * what widgets are not-​​so-​​good for - they’re not a silver bullet! and widgets in practice: * widgets and device compatibility - the good news is also potential bad news * screen sizes - resizing and its headaches * widget distribution and making money - everybody else is doing it, so why can’t we? You’ll get most out of this talk if you: * have heard of widgets but don’t know how to use them * are wondering whether widgets could solve a particular problem you have. (i.e. no specific browser) * have tried making widgets but got stuc

The web platform has already taken a center role in our desktop and mobile computing lives. The next space for the web platform to take over is the biggest screen in your house - the TV in your living room. However, designing for television has its own set of demands, different than designing for desktop and mobile implementations. This talk outlines the most important best practices to keep in mind when designing web applications for TV. We’ll cover issues like directional pad navigation, user interface design for TV, color issues, and zooming, as well as discussing some unique opportunities for TV applications. Daniels is a Developer Programs Engineer who’s had the pleasure of working with several developer communities since he joined the team in 2006. After starting with iGoogle gadgets, he worked closely with advertisers and agencies via Gadget Ads, then onto Geo APIs focusing on V2 to V3 migration, and now Google TV. He’s not afraid to publicly confess his love for JavaScript and recognizes its profou

While location-​​based mobile apps are becoming increasingly popular, they are still relatively new. Special considerations need to be made for battery life and handling large data sets of geolocated data. The good news is there are many services and technologies you can use to assist you in building mobile location-​​based apps. In this session, Aaron Parecki, co-​​founder of Geoloqi​.com, shows you services you can leverage to do things like nearby business lookups, location-​​based triggers, nearest intersection queries, and more. Aaron also covers the location services available on the various mobile platforms as well as in HTML 5, and shares some insights on how to deal with battery life. The session concludes with some real-​​world use cases for real-​​time location such as turning on and off your lights in your house or notifying your boss if you’ll be late to work. Aaron Parecki is a Portland-​​based iPhone and PHP developer interested in solving practical problems with technology. In his free tim

Being a front-​​end designer used to mean pixel hacking and endless rounds of pain while trying to make sites and applications "look the same in each browser". Thankfully, we now live in more interesting times. But as we strive to make our web apps a pleasure to use, the vast array of tools and techniques available to us present their own set of challenges. In this session you will learn to ask the right questions to guide your choice of tools and the design. Find out how to creatively use new features of CSS3 (gradients, multiple backgrounds, generated content, and many more) to give life to your design ideas, make them adaptable and maintainable, and provide the best experience possible on an array of platforms. Finally, you’ll hear how to create a library of simple and ready-​​to-​​use design patterns, that you can incorporate into your workflow to bring your designs to life much faster. Divya Manian is a Web Designer in Seattle. She made the jump from developing device drivers for Motorola phones to

The Canvas tag has been around for a while, and HTML5 has given it more visibility. It’s now finding its way into most mobile browsers, and even a majority of desktop browsers. This talk will give a solid overview of what the canvas tag is, what it can do, and how it compares with other technologies like SVG and Flash. Several practical code examples will show how you can use it along with CSS3 and other HTML5 goodies to make your web apps more featured, efficient and downright cool. As a Senior Software Engineer with Palm Developer Relations, Dave is a JavaScript guru currently focused on mobile app development. He is the creator of four JavaScript application frameworks, including Jo HTML5 Mobile App Framework, which is a lightweight solution for cross-​​platform mobile apps. In his spare time, Dave designs and writes games, makes music, and writes. Follow Dave on Twitter: @balmer Licensed as Creative Commons Attribution-Share Alike 3.0 (http://creativecommons.org/licenses/by-sa/3.0/).

We’ve heard it all before: prototype, prototype, prototype. It’s a standard step in almost any design process - but often the first step skipped in time and budget constrained projects. While prototyping is considered a standard step in any UX design process, it is an *essential* part of the mobile UX process. This talk will outline why prototyping is essential to part of the mobile UX process and how prolific prototyping is a necessary step for designers keen to grow the ruthless editing skills necessary to craft successful mobile experiences. This talk will also cover common and uncommon mobile prototyping tools, methods and techniques that you can apply to your project work. Rachel Hinman is a researcher, designer and a recognized thought leader in the mobile user experience field. Currently, Rachel is a Senior Research Scientist at the Nokia Research Center in Palo Alto, California. There she focuses on the research and design of emergent and experimental mobile interfaces and mobile experiences for em

As browsers explode with new capabilities and migrate onto devices users can be left wondering, "what’s taking so long?" Learn how HTML, CSS, JavaScript, and the web itself conspire against a fast-​​running application and simple tips to create a snappy interface that delight users instead of frustrating them. Nicholas C. Zakas is principal front-​​end engineer for the Yahoo! homepage, a contributor to YUI, and an author. Nicholas has written Professional JavaScript for Web Developers, Professional Ajax, and High Performance JavaScript. He has also contributed a chapter to Steve Souders’ Even Faster Web Sites. Nicholas posts regularly at his blog as well as on YUI Blog. Follow Nicholas on Twitter: @slicknet Licensed as Creative Commons Attribution-Share Alike 3.0 (http://creativecommons.org/licenses/by-sa/3.0/).

A new generation of touch devices have proven to be exciting playgrounds for app designers. And with every new product we create, we have the opportunity to offer the most clear and efficient experience for our users. Recent UI trends often lean to realistic, faithful representations of analog controls and features. These designs can offer advantages, but also come with their own set of hazards. In this session Aaron will lead you on a tour of current trends and practices, examining the strengths and drawbacks that realism brings. We’ll talk about things like mental models, innovation and usability as they relate to lifelike UI. Finally, Aaron will share some pragmatic guidelines to keep in mind as you build the next wave of mobile and touch apps. A mixed breed designer/​developer, Aaron’s career is built upon a unique blend of creative and technical sensibilities. He began twelve years ago leading interactive initiatives for Colorado’s top design agencies, delivering successful projects for a range of cl

No one who advocates for the mobile web wants to admit it, but it is true. Native is easier. It’s easier to sell to stakeholders. Easier to monetize. And most importantly, easier to implement. Argue about programming languages, memory management and reach all you want. There is one undeniable disadvantage that the mobile web faces that native apps don’t - over a decade of legacy code, cruft and entrenched organizational politics. But the web is essential. Even companies whose businesses are centered on native apps need web pages to sell those apps. We can demonstrate time and again that a web-​​based approach is a smart investment. So how do we sell mobile web projects? How do we work with the systems we currently have to build compelling mobile web experiences? And most importantly, how should we be changing our web infrastructure, tools and workflow for the coming zombie apocalypse of devices. Jason Grigsby was one of the project leads on the Obama ’08 iPhone Application and helped design the user i

Join Scott Thomas, a lead web designer on President Obama’s electoral campaign, as he explains how to design online communities that resonate and motivate. All too often, discussions of analytics, clickthrough rates, and search engine optimization cloud the important truth that online campaigns and communities are for human beings. Come discover how to use superior design, authentic messaging, and valuable content to deliver resonant messages that connect with your audience through the noise of the Internet. Scott Thomas, who goes by the moniker SimpleScott, lives by the idea that the simplest solution is the best one. Whether he's building a website or singing emails operatically the motivation is always "less is more." Back when SimpleScott had free time he could be found at a letterpress fashioning original prints and collaborating with fellow members of the design collective, The Post Family. All that, and his dream of rationalizing the irrational theory of the golden ratio, came to a halt when he beca

Many web professionals practice creative, collaborative and inclusive approaches to our work. As UX designers, information architects, strategists, or programmers - we are all designers, and we are ready equipped with a way of problem solving that can be applied to challenges that are not traditionally those of web practitioners. From the perspective of the digital domain this session will take a look at what Design Thinking is and it’s potential to amplify creativity so that we may embrace and apply our skills to the messy problems that business, government and society face every day. David Gravina is the company principal and founder of Digital Eskimo, a design consultancy that applies the transformational power of design and technology to issues of social and environmental change. He is a founding member of greenUps, the Sydney green networking group, a director of the live local Foundation and was co-​​founder of the ‘Raise the Bar’ campaign which, as a former Melbourne boy, he’s pleased to say is slo

Inclusive design. It might sound like a rebranding exercise from the Web Accessibility Marketing Team, but it isn’t. For years inclusive design and research practices have been applied to a wide variety of disciplines from industrial design to the arts, the built environment and more. What can we learn from this? And how can we apply it to the digital environment in which we work? Social innovation, service design and even augmented reality are now presenting real and interesting opportunities for us as traditional web practitioners. Combined with inclusive design practices, this opens up a fantastic world of change for both us and the people for whom we design. So starting with the web, we’ll reinvigorate our passion for diversity and inclusion. Let’s declare this The Age of Awareness! Lisa is the Principal User Experience consultant at Scenario Seven with over ten years of hands-on experience on the web. She has a background in standards based design and development with the last 7 years focusing on d

The USA and UK governments have made significant progress with linked, open data in recent months. Several fundamental datasets from the Australian Government are on the cusp of being exposed as meaningful, reusable, machine-​​​​readable assets, further driving the adoption of linked data within and around government. Making better use of online data offerings using a combination of top-​​​​down policy and guidance, together with bottom-​​​​up development efforts from agency web teams, would seem to describe a sustainable, organic growth in linked government data. Learn about the path to the first release of data​.gov​.au; a draft roadmap to future releases; the barriers to linked data and open public sector information (PSI); and the real-​​​​world questions this technology aims to solve. Based in the Australian Government Information Management Office (AGIMO), Gordon has been working on whole-​​of-​​government websites and Australian Government web policies since early 2006. Gordon likes making attract

The Powerhouse Museum has been working towards making its digital initiatives widely accessible and to a broader audience, online and onsite, to enable a connected digital future. With a blossoming of blogging, significant Flickr and Facebook presences the Museum has been developing great connections with a new audience that has led the institution to rethink access with an emphasis on the importance of community connections and participation. This thinking has had an impact on the Museum's Strategic Plan and several digital initiatives are now driving change within the organisation. The Museum has experienced incredible connections, citizen research and innovative digital outcomes such as MOB’s augmented reality mobile app using geo-located historic images from the Tyrrell collection, Paul Hagon’s Google Street view mashup, Digital NZ’s integration of related items from the Museum’s collection and the Powerhouse Museum’s collection download. Releasing data and images under a Creative Commons license has

As SVG and Canvas come of age, every developer who loves standards is wanting to use them in production to make eye-popping effects. But then they come up against the inevitable lack of support in IE6 to 8, and promptly give up the ghost. Fear not! Raphaël provides a developer friendly API to create graphics that work in Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. Yes, you read that correctly, IE6. In this session Dmitry Baranovskiy, Raphaël's creator will walk you through its possibilities and will open up new horizons for web graphics that will work in all almost every browser. Dmitry has over ten years experience in creating web applications. Having started as a back end developer, more recently he has changed his orientation to front end development and even pure design. These days he spends his working hours as Software Architect at Sencha. He is also the creator of Raphaël, the JavaScript Library, as well as a Optimus, the Microformats transformer. At any given moment he is a

With three different audio and video codec formats each supported by the diverse HTML5 capable Web browsers, plus the need to deal with fallback for older browsers, HTML5 media is not the simple solution we have all been hoping for. But on the other hand, HTML5 media will make your life easier, since it offers some features that are hard to get with traditional Adobe Flash, such as a standardised JavaScript API, integrated CSS support, and built-in support for accessibility and internationalisation through captioning, subtitling, and audio descriptions. Additionally, devices such as the iPhone and iPad will only support HTML5 media and not Flash. So for any serious practitioner it's a technology you can no longer ignore. W3C invited expert Silvia Pfeiffer will talk through the big issues on this important topic. Dr Silvia Pfeiffer has worked on novel media technology for more than 15 years and is an internationally renowned expert in new Web video standards. Silvia completed her PhD in Mannheim, Germany, o

When I was a young lad, I had the use of a computer for the Christmas holidays so I typed out my thank you letters and felt super cool. Unfortunately there was no printer. I wrote out by hand what was on the screen and got laughed at by my dad. Despite this, I felt I was ahead of the crowd and at the start of something new and exciting. Thirty years later, I feel we're at the same stage with widgets - at the start of something new and exciting. Daniel is the Web Evangelist for Opera's Japan office based in Tokyo. His previous work experience includes project management, IT training, web development, software development and system administration in both Japan and the UK, his home country. After studying Japanese and Chinese at university, he grew more and more interested in the flourishing field of IT and the web, learning as much as he could by playing and experimenting with internet-related technologies. His current work promoting web standards and cross-device web development at Opera fits in perfectly

HTML5 and CSS3 are the newest stars of the web: the cornerstones of progressive enhancement, the future of online video, the easiest way to build web applications for desktop and mobile devices, and a brilliant foundation upon which we can add complex interaction and animation layers with javascript and Canvas; happily - thanks to much-improved browser support - we can now use them. In this session, Dan Rubin will show you who’s already taking advantage of these latest additions to our toolbox, what this means for interface designers, and how you can bring the same techniques to your projects. An accomplished designer, author and speaker, Dan Rubin has over ten years of experience as a leader in the fields of user interface design and web standards, specifically focusing on the use of HTML and CSS to streamline development and improve accessibility. His passion for all things creative and artistic isn’t a solely selfish endeavor either-you’ll frequently find him waxing educational about a cappella jazz an

Remember how fun it was to do hands-on classroom projects together in kindergarten? Well, this interactive session is going to be like that, but just with bigger people. In the first part of the session, I'll hand out blank report cards, and each of us will -- individually and based on whatever criteria we personally want to use -- use those report cards to assign A, B, C, D, and E letter grades to particular new features that are part of HTML5 and related specifications that are supported to some degree in browsers. Then I'll collect those, and use the info to judge which HTML5 features to focus the discussion on during the second part of the session. During the second part of the session, we'll make a handful of poster-side HTML5 Report Cards together, by taking a look at the HTML5 features we identified during the first part of the session, and then assigning A, B, C, D, and E letter grades to those together -- based on the current quality of the features/implementations, and on criteria such as if/how w