An Event Apart 2012

November 12 - 14, 2012

San Francisco CA

By: Connie Dyment

By Connie Dyment

Page 2

An Event Apart Conference Report By: Connie Dyment January 21st, 2013

Preface An Event Apart Conference was held from November 12th to 14th, 2012 in San Francisco, California. This was an educational conference focused on standards based web design and this year it was focused on adaptive design for mobile and beyond. There were three days filled with information on design, code and content.

Purpose of Attendance Currently most websites have more mobile users than desktop users. For example in China there is 564 million online users with just 25% of them using traditional desktops and laptops1. That trend will continue and expand to a plethora of other devices. This conference focused on strategies that will enable us to create web applications that can adapt to new formats. As a government we are typically not on the cutting edge of technology, however we do need to ensure our vital information is available to Canadians in a format that is both adaptive and accessible. If we do not plan for an adaptive format we may find that we have constructed “web” silos; a costly and expensive venture. What kinds of services can we offer to those who use tablets, projection TVs, or dumb phones? Where does the list end and what will the future bring? Can we really afford to maintain more than one version of the web site?

1 http://venturebeat.com/2013/01/15/china-added-51m-web-users-2012/

By Connie Dyment

Page 3

Content First Presented by Jeffrey Zeldman, author, Designing With Web Standards, 3rd Ed.

“If we don’t design useable pages someone else will do it for us.” ~ Jeffrey Zeldman~

Jeffrey focused on the necessity of looking at key content and creating a design around that. He gave examples of sites where the real content was nearly impossible to find due to the ads, long lists of links, competing content and just general clutter. These types of sites were more focused on what the content owner wanted on the site rather than what the user wanted. When this happens, many users will use tools and/or plug-ins such as “Instapaper”; an application that allows you to save the real content of web pages for reading later and removes extraneous advertisements and links. So all the effort of putting in banner ads and links was for not. As for content first, with most organizations and business this is not how web sites have been developed. Often the focus is on the look and feel of the site and then the content is placed into a template. In the business world there is also advertisement space that has been sold which is typically the prime real estate of a web page. In government, we are provided with a CLF template. These templates do not contain advertisements but they do have other government branding such the Canada word mark (Federal Identity Program), mandatory government links (top and bottom) and ad banners with priority government initiatives. The balance of the page is for content, thus making the content the second priority. This makes our designs hostile to content and users. Jeffrey suggests that we look at our content first and that developing a mobile strategy first will help to contextualize this. To do this, we must think about how a mobile user uses their device; often it is a “time filler” such as waiting at an appointment or it is location motivated – what is nearby? A mobile user probably does not want everything you have on your current desktop site now. There are still many mobile networks that have limited bandwidth and the current desktop version would take far too long to load. As well many users have limited data plans and will tend to stay away from non-mobile friendly sites as the data usage is too costly. A small screen strategy (aka tablet) is different than a mobile strategy. A small screen user typically wants something that is legible with no extraneous content getting in the way. For tablets a one column layout and content is “King”. Therefore developing a mobile version of your application first allows site owners to focus on what is really important “the content” which can then easily be adapted to the tablet and desktop versions. By doing this you are creating a content strategy that puts the user first. Key Points:

Content is King. Instapaper and Readability prove that people prefer to read just the content.

By Connie Dyment

Page 4

It’s not about mobile first (or just small screen first) but it happens that thinking about what works for mobile works well for other devices too.

Mobile Strategy considerations:

Review the content and define the purpose or benefits of it

Know your users and why they come to your site; give the user what they want

Good content is communicated clearly and concise

Mobile should not be the “lite” version of your desktop site

Don’t assume “mobile” is the be all and end all; users move between devices

Aim for “content parity” between your mobile site and desktop site

Recommended reading “Your Content, Now Mobile” by Karen McGrane

Mobile to the Future Presented by Luke Wroblewski, author, Mobile First In this session Luke discusses the rapid rise of the adoption of mobile phones and that they have now surpassed the PC as a means of accessing the internet. He presented numerous charts and graphs that demonstrated this trend. That is why he claims that designing for mobile is important and should be the primary platform for design with other devices being secondary. Luke sees this as an opportunity to make current web products better. He demonstrates this point by comparing Expedia’s desktop web site to their mobile site. The mobile site focused on exactly what the user needs and wants; their flight information and a button to access the navigation should they need to go elsewhere on the site. Where as the desktop version was cluttered with “Today’s top deals”, “Today’s top flights”, “Today’s top package deals”, “Contests”, a navigation menu, numerous other links, plus more. The flight information was still there but it was competing with all the extra content on the page. Wouldn’t a user rather go to the mobile site than the desktop one? In 2006, one of the most popular mobile phones was Motorola Razor. This phone was one of the first to provide users with a web browser however the user experience was very painful (slow, typing in a URL was next to impossible with a number key pad). In 2009, the first iPhone hit the market and since then, the smart phone has taken off with users. Why? The Smartphone drastically improved the user’s experience by allowing users to surf the web, send and receive texts (full keyboard helped), take pictures and videos, and watch videos and in most cases with good bandwidth. However there are still pitfalls on many mobile sites as they typically have been a “dumbed down” version of the desktop site with virtually no attention to usability. For instance, try entering a password on a mobile site; passwords are hidden as you type and often we mistype on mobile devices due to tiny keyboards and fat fingers. If you do this a couple of times you could possibly lock yourself out of a key site at a critical time. Passwords have been hidden as this has been thought to be more secure on desktop systems where someone could be looking over your shoulder. Mobile devices can easily be moved from others view and the screen size is much smaller making it more difficult for someone to read it from a distance.

By Connie Dyment

Page 5

Designing for mobile breaks our current web design concepts; no longer is the user restricted to a LAN/WAN connection. For example, the mobile user always has their Smartphone with them and it is always on. With Smartphones, users can make payment transactions (eBay) and have access to real time social networking tools (Facebook, Twitter, etc). Mobile web applications can take advantage of geo-location thereby knowing where the user is using the phone’s GPS capabilities. The Android Smartphones allow the user to use voice to fill in form fields. These are just a few of the expanded capabilities that a Smartphone can offer. The chart below shows the number of years for mass market adoption of different media devices:

Mobile in a nutshell:

Smartphone shipments passed PC shipments in Q42010

Home usage of PCs has gone down 20% since 2008 because of Smartphones and tablets

Mobile devices are intensely personal

Maximum content and minimal navigation

Content is the user interface

Security and usability shouldn’t be opposing forces. o 90% of customer service inquires are from customers who don’t have a link to

recover the forgotten password on their mobile device. o There are no security issues involved in showing passwords to users while entering.

There is a double-digit improvement in password recovery inquiries. o Many sites now have the option to hide/show password

By Connie Dyment

Page 6

HTML5 APIs Will Change the Web: And Your Designs Presented by Jen Simmons HTML5 is more than just mark-up, it is about new APIs (Application Programming Interface) that will change how users interact with the web. The web will no longer be about researching or reading content, it will be more interactive. HTML5 will leverage the power of the user’s device through the use of these new APIs. New technology influences how content is shared and can enhance it. Jen states that the internet is just getting started.

“An innovator is someone who wakes up to constraints caused by false assumptions and breaks out of them.” ~ Jen Simmons

Many developers tend to focus on new HTML5 elements: articles, section, input types, etc. However, there is a whole set of technologies coming that developers need to be aware of with more to come. Technology is not the content, however technology can influence how content is presented and can enrich the content’s value through added dimensions (i.e. touch, visual, motion, location). It is time to think about what is possible and break out of the desktop site. A few of the new dynamic APIs and possibilities:

Web Sockets can augment HTTP to create truly bi-directional connections that keep data flowing between a client and server. HTTP is like using walkie-talkies for communication; Web sockets are like using phones- truly real time updates.

o Better performance in delivering data (ie weather alerts)

Data can be saved to and read from client-side databases. Offline data storage. o Users can have access to data, even if they don’t have access to the web (out of

country, subway or remote location)

There are seven new APIs for dealing with local file systems on the Web: file API, reader/writer/system, blob URLs & builder, drag and drop. Through these APIs files cannot only be used in the browser but they can be parsed, manipulated, written, and saved.

Device APIs: allow you to connect to a device’s capabilities like vibration, battery status, contact lists, geo-location and much more.

o An example of this would be to use the vibration feature for severe weather alerts

By Connie Dyment

Page 7

Rolling Up Our Response Sleeves Presented by Ethan Marcotte Ethan talks about some of the challenges and possible solutions in building a responsive and fluid grid application. He suggests designing content for the mobile device first as this will help to prioritize the hierarchy. It will simplify the content before suppressing it. By using the new capabilities of HTML5 images can adjust their size depending on the browser/device. As well it is possible to have two versions of the images, in different sizes, so depending on the browser/device which one is retrieved. By using a grid, content can expand or move below to accommodate different widths. This can all be done using a media query. An example of a media query would be “Is your browser size smaller than…?” the appropriate style sheet would be applied. If the browser does not understand the media query the default style sheet would be applied. Ethan suggests using a mobile style sheet as the default; therefore the user is given the most pertinent content first regardless of their device. The new CLF/WET template for Government of Canada websites has been developed using a responsive design with a fluid grid format. In theory, this template will allow for mobile user’s to view all Government of Canada departmental sites on their Smartphone or tablet. Unfortunately this template was designed for static content and has little flexibility for other dynamic content. As well content owners have not been educated on how to deliver and prioritize their content for mobile devices. Transforming content should be the next step in moving our web applications to a responsive design. On a daily basis Web developers are asked to deal with an increasing number of diverse devices. Mobile and tablet devices don’t even begin to describe the situation; gaming systems, TV’s and appliances have now started to appear on the scene and these are just to name a few. People are using multiple devices throughout the day and this will just continue to grow. Often these devices are interconnected and used together. Where to begin:

Solve the parts not the problem. Start breaking things down into more accessible, smaller elements.

Every responsive design has a flexible or fluid grid foundation.

Responsive design: start from the barebones capabilities of small mobile devices first.

When evaluating content: width, hierarchy, density, and interaction are to be considered. o Width: how to flex to various widths? o Hierarchy: which modules show up where? In what order? o Density: how much detail do you show at any point? o Interaction: how does it change as browser window changes shape (like a menu

changing into a single click action)?

Simplify before you suppress content.

Lead with content over navigation.

By Connie Dyment

Page 8

Design grids from the smallest element up. This allows you to move away from breakpoints connected to devices and instead focus on breakpoints connected to your content.

Bandwidth and performance are important. This is especially important for images.

Buttons are a hack Presented by Josh Clark Josh describes how designing for touch is about interaction design. There are many new devices that have applied interaction design concepts such as tablets, touch screen phones and iPods. Some of the applications have done this very well while others haven’t. Many applications have just simply moved their desktop application to the smaller screen with minimal or no modifications at all. Doing this has made it more difficult for users as the buttons or clickable hotspots are too small for fingers. An example of a well designed intuitive user interface is the e-readers; users simply swipe the screen. This swiping action is a similar motion as to how they would turn a page in an actual paper book.

Compare the mouse pointer to the tip of your finger. Try clicking a small ‘Go’ button.

Touch devices have created all kinds of expectations however most web sites and web applications have not implemented the “touch experience” well. This is largely due to the lack of support or implementation of touch features on browsers. Currently web browser support for touch is limited to touch and swipe with limited support for pinch and zoom. Josh states that we should expect this to change and to push for change. If you look at native applications to touch, there are a plethora of touch gestures available. Some of these include drag, rotate and flick. Now is the time we need to pay attention to touch and how it will apply to our web applications.

Takeaways:

By Connie Dyment

Page 9

Create an interface that takes into account the ergonomics, content and emotions of the user

Don’t reinvent, use touch gestures that are now working well on other devices, i.e. for reading content use the page turn swipe rather than the number pagination “1, 2, 3, 4…”

Touch gestures are the new keyboard shortcuts of touch (tap, swipe, double tap, etc.)

Unless there’s an obvious visual cue, it’s hard for people to discover gestures.

The Curious Properties of Intuitive Web Pages Presented by Jared Spool, CEO, User Interface Engineering In this session, Jared explains how a good design is invisible to the user and that is what makes it intuitive. He provided an example of an unintuitive design where Avis, a car rental company, had created a form on their web site where the fields marked with an **asterisk** were optional. This small change was an abnormal use of the **asterisk** and caused users much confusion. This shifted the users focus from what they were actually trying to do. An intuitive design is based on what people currently know and their previous experiences. Intuitive applications will keep the user’s focus on the content and not the interface. Currently there is a gap in user interfaces between touch device apps and web sites. So how do we close this gap? Slowly! Jared recommends that changes should be introduced in small increments and that major redesigns often end up frustrating your frequent users as they are then focused on the interface and not the content. People don’t hate when a site changes but they do hate change when that takes away their current knowledge.

Key Points:

Mobile/touch is influencing and challenging the implementation of web applications

Design is a key component of the user experience for web sites now

An intuitive design is invisible.

Intuitive redesigns are also invisible. Suddenly, they’re there, and it works o Plan redesigns with small changes over multiple releases

By Connie Dyment

Page 10

Designing for Mobile & Beyond (1 Day Mobile Workshop) Presented by Luke Wroblewski, author, Mobile First This was a full day workshop on how to develop a mobile strategy first and how to expand that to other devices. Luke provided some really helpful tools and tips to move forward on developing a mobile and beyond strategy. Here are some of the key ideas Luke delivered:

Devices are used both in a portrait and landscape mode and can be categorized as… o Mobile (up to 5”) o Tablets (5” to 7”) & (7” – 10”) o Laptop/Desktop and beyond (10” and above)

Break points should be determined by resolution and NOT devices o An example of breakpoints and a “Mostly Fluid” layout pattern:

A multi-device design should…

o Support a continuum of screens o Account for high resolution o Optimize for touch o Support both the cursor & keyboard

Look at the organization of your current site o What are mobile behaviours

Lookup / find Explore / play Check In / status Edit / create

How does your content align with mobile behaviours o Prioritize content – why do users visit your site? o Review and optimize navigation elements (use sideways panels)

How to gradually implement mobile… o Minimal navigation, maximum content (light weight design for faster mobile

loading)

By Connie Dyment

Page 11

o Focus on what matters most to your users o Content and navigation should adapt as more screen space is available o There are many Multi-Device Layout Patterns, for example Off Canvas; the user

swipes the screen to access more content

Helpful tools mentioned… o Southstreet

Enhance: a tiny JavaScript framework designed to help developers determine if a browser is capable of handling additional JavaScript and CSS enhancements, and load specific enhancements for that browser as fast and simply as possible.

eCSSential: an experimental utility for making browsers load responsive CSS in a more responsible way.

QuickConcat: a simple dynamic concatenator for html, css, and js files, written in PHP

AjaxInclude: a plugin that is designed for modular content construction, that runs on jQuery (or our yet-to-be released Shoestring)

AppendAround: A JavaScript pattern for responsive, roving markup. Picturefill: a simple pattern for overhead-free responsive images today.

o RESS (Responsive Design + Server Side Components) Tutorial http://www.netmagazine.com/tutorials/getting-started-ress A quick tutorial using PHP, Twitter Bootstrap, Modernizr, Swipe.js and

WURFL to build a single responsive page. Sample of Responsive Image code:

By Connie Dyment

Page 12

Possible Break Points by Resolution

By Connie Dyment

Page 13

In summary, how do we move forward? An adaptive web design should work across the entire spectrum of digital devices. We need to develop a responsive web strategy where content is the first priority. Responsive and mobile are taking usability and web standards to a new level of universality. A responsive design is a progressive enhancement that is fluid and implemented slowly as to have minimal impact on users. There should be no need to create a unique mobile application; one responsive web application can serve a multitude of devices if carefully planned out. Here are some very basic tips for creating a responsive and adaptive design where pages look great and fit the context of whatever device is being used:

Fluid grids and images

Separate content from design – css and content

Follow web standards

Good design starts with content

Design for mobile first which will force you to focus on priority content

An Event Apart – Conference Overview This conference is geared toward web designers although it is well suited for developers and content owners. Information is presented in easy to understand terms and provides both technical and non technical information. Content owners will develop a better understanding of the challenges and reasons for their contribution to developing a responsive design. The one day workshop that followed the two day conference is more suited to web designers and developers as this gets into a more technical approach to a responsive design implementation. The presenters were well spoken and provided real web examples to emphasize their points. Often presenters would repeat or reiterate a message, for example “content first” but then this was the theme of conference. Overall the speakers were very good and well worth hearing their message. A couple of the presentations were geared specifically towards web designers (topics included design tiles, fonts, etc) and I did not feel these were relevant to our work environment. As such I did not include a synopsis of these presentations. All of the presentations were made available to the attendees and have been uploaded to our Ecolab site for your review.