Functioning Form

Last year I wrote about a promising approach to multi-device Web design that enhanced responsive web design techniques with server-side solutions. Since then the idea, which I dubbed RESS (Responsive Web Design with Server Side Components), has been gaining popularity and a number of developers have written about how they're using it. Hopefully these resources are useful to anyone interested in learning more about RESS.

My overview of RESS featuring several examples that illustrate how the technique can be used to optimize device-specific experiences on the Web.

This tutorial will teach you the basics of RESS and how you can build a responsive page that works well on small screens with the help of server side technologies.

How both front-end and server-side developers can take advantage of the new technique called RESS that aims to be combine the best of both worlds for delivering mobile-optimized content.

Full article on RESS, Server-Side Feature-Detection and the Evolution of Responsive Web Design.

A concise overview of three different multi-device Web design techniques (including RESS) and explanation of the benefits of each.

A concise example of the benefits of RESS on the new Notre Dame Web site.

A behind the scenes look at the Notre Dame University redesign which uses RESS to deploy content that is appropriate to each device.

Server-side detection alone will not give you the full picture, and only doing adaptation client-side robs you of the opportunity to perform really useful server-side optimizations. The best approach is a blend of the two using RESS.

If you've experimented with RESS and shared what you've learned, let me know.

Though few people dispute the growth of mobile computing, many remain unconvinced about mobile e-commerce. And even more doubt the value of Web-based mobile e-commerce solutions -preferring native mobile applications instead. Looking at recent data, however, shows that both of these assumptions don't seem to be holding up.

• 79% of US smartphone and tablet owners have used their mobile devices for shopping-related activities. (source)
• 42% of tablet owners have “used their device to purchase an item,” compared to 29% of smartphone owners. (source)
• Top activities among mobile shoppers include in-store price comparisons (38% of mobile shoppers), browsing products through their mobile Web or apps (38%) and reading online product reviews (32%). (source)
• Smartphones are used more often than tablets for activities on-the-go: “Locating a store” (73% vs. 42% for tablets ), “using a shopping list while shopping” (42% vs. 16% for tablets) or “redeeming a mobile coupon” (36% vs. 11% for tablet owners). (source)
• The top five retail apps and websites combined — Amazon, Best Buy, eBay, Target and Walmart — reached nearly 60% of smartphone owners in 2011. (source)
• Smartphone usage reveals that retail websites are more popular than retail native apps. (source)
• The likely reason for shoppers’ mobile Web preference boils down to speed: “When you are doing business on the Web, every second counts." (source)
• The average impact of a one-second delay means a 7% reduction in e-commerce conversions. (source)
• For the $100,000 per day ecommerce site, a one-second delay means $2.5 million in lost revenues in a year. (source)

To see how quickly mobile shopping has been growing, take a look at last year's numbers .

Though more people are reading e-books each year, the devices they use to consume digital books may be changing. Recent estimates for Amazon's Kindle line seem to highlight a shift from budget eReaders to higher end tablets.

• One-fifth of American adults (21%) report that they have read an e-book in the past year. This number increased following a gift-giving season that saw a spike in the ownership of both tablet computers and e-book reading devices. (source)
• Ownership of e-book readers like the original Kindle and Nook jumped from 10% in December to 19% in January and ownership of tablet computers such as iPads and Kindle Fires increased from 10% in mid-December to 19% in January. (source)
• Since then estimates show a significant drop in Kindle eReader sales following the introduction of Amazon's first tablet computer, the Kindle fire. Kindle eReader sales have fallen at least 75% from 7 million per quarter to 1.74 million per quarter. (source)
• Amazon's Kindle Fire shipments dropped from 4.8 million units in the fourth quarter of 2011 to less than 750,000 units last quarter. As a result, Amazon went from 16.8% of the worldwide tablet market to just over 4%. (source)
• At the same time, Apple shipped 11.8 million iPads during the quarter and grew its worldwide share to 68% in 1Q12. (source)
• Barnes & Noble's best-selling eReader is the Nook Color: an e-reader hybrid tablet. According the the B&N CEO: "once people started using it, it was hard to go back to black-and-white e-readers." (source)
• The Nook is estimated to account for about 25% of the U.S. e-book market. The Nook helped to cut Amazon's share from what was believed to be 90% to around 60-65%. (source)

Though Apple's 9.7 inch iPad commands over 60% of all tablet sales worldwide, tablets of all sizes are emerging around globe. But as tablets get smaller people's use of the Web drops. Why?

• 10 inch tablets (like Samsung's Galaxy Tab) average 125 page views in the browser per tablet. (source)
• 9 inch tablets (like Apple's iPad) average 116 page views in the browser per tablet. (source)
• 7 inch tablets (like Amazon's Kindle Fire) average 90 page views in the browser per tablet. (source)
• 5 inch tablets (like Samsung's Galaxy Note) average 79 page views in the browser per tablet. (source)

What could be behind this precipitous drop in page views? Usability testing of Amazon's 7 inch Kindle Fire seems to reveal some answers.

• The most striking observation from testing the Fire is that everything is much too small on the screen, leading to frequent tap errors and accidental activation. (source)
• Accessing full (desktop) sites on the Fire was a prescription for failure in our testing. Users did much better when using mobile sites. (source)
• For 7-inch tablets to succeed, service and content providers must design specifically for these devices. Repurposed designs from print, mobile phones, 10-inch tablets, or desktop PCs will fail, because they offer a terrible user experience. (source)

As a wider range tablet and mobile screen sizes continues to emerge, multi-device Web design is clearly becoming a lot more important.

In his It's a Great Time to Be Designer presentation at UX Immersion, Jared Spool talked about the reasons why designers are in high demand today and what skills that and their organizations need to deliver great experience design. Here's my notes from his talk:

• There are 22 fake Apple stores in Kunming, China. From the wall decorations to the employee badges, everything has been copied. In the US, Microsoft and Barnes & Noble have copied the Apple store design as well.
• Apple stores make 17x the revenue of an average mall store. 2x as much as Tiffany’s.
• The experience being copied has been designed to extraordinary detail. It’s the design that’s creating value and being copied.
• The pebble watch has raised over six million dollars on Kickstarter. The Nest thermostat sold out its first production run in a few days. Square is using design to rethink the finance industry. Mainstream business magazines are writing about the need for designers.
• People at the boardroom and level are paying attention the value of design. Experience design is more mission critical than ever before.
• It’s a great time to be a designer.

• When technology first comes out, if it works is what matters most. When everyone can make it work, people compete on features. After features, technologies compete on experience (less features but the ones that matter).
• The 6 Flags experience is about going on rides –there are 48 on the map of the 6 Flags amusement park. Disney does not explicitly call out all their rides on their map. Why?
• Six flags thinks in terms of activities. Disney thinks through the gaps in between the activities -the total experience. This costs more money, requires more training, and takes more time but it creates an overall experience.
• UberCab has rethought the experience of hailing a cab (which is hard to do). It makes use of geo-location, phone capabilities, and maps on mobile devices to transform the entire experience of getting a cab.
• Activity vs. experience: differences are becoming more pronounced. People are getting big wins by focusing on experiences instead of just activities.
• Agile development is not a chaotic process for shipping things quickly. It’s a way to re-envision what the design process should be.
• Mobile is a wedge to put into the business that forces user experience to the forefront.
• It’s much less expensive to produce things than ever before. Expectations, however, are high so we need to release quality out the gate.

• What does it mean to be a designer these days?
• Lean UX: is about asking one question over and over again. “Are we getting closer to a better user experience?” Get things out quick, learn from them, and try again. This has been part of design since the 1980s. People are ready for it now.
• Be careful what you ask for –you might get it.
• If we want teams to build great experiences, we need different skills like copy writing, information architecture, design process management, user research practices. And understanding of technology, roi, social networks, marketing, analytics, business knowledge, story telling, and more.
• Though the number of skills required is increasing, the number of people on teams is decreasing. We can no longer compartmentalize. We all need to cover more than one skill.
• The economics in most companies don’t support specialists. They need generalists. Even specialists have general skills they trained over years before specializing in a particular area.
• Not every company can afford to hire specialists. Regional economics drive specialization. It only exists when there is enough demand. In fact, in very high demand economies only specialists can survive. It should be noted that specialization is not compartmentalization. Specialists have the breadth of skills across their entire discipline but the bulk of their experience is within their specialty.
• Designers need to be careful not to compartmentalize themselves.
• Don’t have specialists do what they are best at, have them teach it to others. Teaching what you do makes you better at it.
• Designers that code can create prototypes know what’s possible in development and can better communicate with developers. Knowing to code makes them a better designer.
• “I really want to do strategy” is the new “I want to direct”. But design is about making things. Good strategy is about knowing how to make things.

• Most products grow by adding features. A release 1 product usually comes out with only a features, then a few get added in 1.5, then 2, and so on. Eventually over time things get really complicated. Lots of features add up to complexity. At this point, you notice most features aren’t used.
• The next release should only include the features that matter. This is the shift from features to experience. It is usually a competitor that releases this version. They figure out matters and release a cheaper version with less features but a better experience.
• Experience rot: happens when you keep adding features and experience quality goes down.
• This is a cycle that happens over and over again. Some organizations get this. Others don’t.
• If a system is hard to use, maintain, or sell –there will be frustration. If you can pinpoint where the frustration is, you can push experience design by addressing known frustration points.
• Frustration can be found in: lost revenue from missed sales, additional expenses from added support, added expenses from re-doing things, and expenses from building things no one is using.
• Doing great experience design is expensive so you need to understand executive priorities in order to get it funded. Executives care about: increase in revenue, decrease costs, increase market share (new customers), increase business from existing customers, and increase shareholder value (this is measured on long term growth).
• Unconscious incompetence: when you don’t know that your design decisions are causing problems.
• Conscious incompetence: you realize you don’t know what you are doing.
• Conscious competence: you know what you need to do and are actively learning/doing it. You need to think about what you are at every step of the way.
• Unconscious competence: you know what you are doing and don’t need to think about it.
• Most organizations are in a state of conscious incompetence. We need to help them move up the progression.
• Good design judgments come from experience. Experience comes from making bad judgments.
• When extraordinary design is embedded in your culture, great things happen.

In his Enterprise Mobility Revolution presentation at UX Immersion, James Robertson discussed the intersection of intranet design and mobile. Here's my notes from his talk:

• People working on consumer software can share, discuss, and analyze examples of public sites. Intranets are hidden from everyone other than the company that uses them. This has lead to a lot of re-inventing the wheel and poor experiences.
• Mobiles are going to completely change the nature of work and organizations. The pieces are finally here to make mobility work for the enterprise.
• We have very slowly been making things easier for corporate staff. Internal user experience work (usability testing, task analysis, etc.) has helped fix issues in some organizations.
• In a well designed intranet, content is not king. People are king. This reflects how an organization operates.
• But most business tools still suck. Staff is paid and doesn’t need to be wooed with good interfaces. This makes staff unproductive especially when they are away from their desks.
• Consumers and executives have experienced content and services in new ways (smart phones, tablets) outside of the office. This is putting pressure on internal teams to deliver internal services to new devices.
• It’s great that internal stakeholders care but resources are few and far between.
• There are a hundred easy fixes we can make for mobile devices today. You can go back to your organizations and do things now.

• 4 things that put shape around mobile in the enterprise: connectivity, productivity, field force automation, and desktop replacement.
• Mobile connectivity is the basics: get my work email on my phone.
• Mobile productivity: do common office tasks while away from our desks.
• Whatever you do, don’t deliver a mobile version of your intranet. People need a simple experience on mobile not all 4 million pages you have on your desktop intranet.
• Supporting Blackberry devices added 40% more development effort to the UK Parliament’s mobile Web intranet.
• The KISS (keep it simple stupid) principle is a good model for internal tools. We need to make things useful first, delightful second.
• Field force automation: how do we help the people that actually do the work get things done? This has been around for a long time but has often been clunky.
• When mobile devices get tagged on to the end of existing workflows, their full potential is often not realized. Rethinking existing workflows with mobile is the bigger opportunity.
• Shift the mindset from intranets as content management systems (CMS) to mobile productivity tools. Make intranets not just useful but essential. Support the minute-by-minute tasks of employees.
• Desktop replacements: can mobile devices take over for how desktops are used in the enterprise?
• Putting documents onto iPads saved 80,000 Euros per year for UK’s Parliament on printing and courier costs. This is trivial: put old paper documents on new digital devices but it’s impact is enormous.

• You can’t design solutions for mobile by sitting in meeting rooms. You need to spend time with staff in the field. To deliver solutions for staff, you need to meet them personally.
• Spending time with staff introduces you to stories you can use to make the business case to executives.
• It’s not about pages. It’s about tasks. Making sure pages lay out well on mobile devices won’t get you very far. You need to enable tasks.
• Ask what 6 things staff need to do away from their desks? This will uncover tasks you need to support.
• Desktop interfaces don’t work on mobile devices. You need to design simpler things.
• Mobile devices are personal. Make sure to deliver personal information in your interface. Example: University students care about their exam results –this is personal, useful content.
• We know a lot about staff but we don’t do a lot with that information. This data can help us find the right mobile solutions for the enterprise.

• People find mobile devices exciting. This can be used to make enterprise projects more enticing.
• Start conversations with your IT department by asking about (bring your own device) policies and security issues.
• Conduct some quick field research with mobile staff then use what you learn to deliver HTML5 proof of concept demos that targets field staff needs with simple solutions.
• Develop a case for the mobile enterprise to develop strategic solutions. This is the longer-term objective. To get there, start small.
• Will mobile design drive a reverse takeover of the desktop experience? When people interact with simple mobile solutions –will they demand the same on the desktop?
• Is there a future when some staff will only use a mobile intranet to complete tasks?

In her The Mobile Frontier presentation at UX Immersion, Rachel Hinman explored future trends in mobile and their implications for designers. Here's my notes from her talk:

• Mobile has arrived. As more people experience mobile technology, it’s no longer a niche topic for a subset of designers. It’s everywhere.
• Mobile currently feels like the Wild West: lots of unexplored terrain and people working through a lot of new challenges.
• But lots of people are trying to replicate physical objects, desktop applications, and office suites on mobile. This is an example of the “rear view mirror effect” –we apply old habits to new things: like desktop habits to mobile.
• Mobile presents an opportunity to invent new ways for users to interact with information. We need to embrace the spirit of invention instead of leaning too much on the past.
• There’s a lot of reasons for using previous conventions on mobile: they are familiar to people, we know how to design/build them. But we need to let go of this comfort zone and push forward into the new frontier.
• Where is mobile going in the next few years? These three trends can point the way: shape shifting, a brave NUI world, comfortable computing.

• People have a growing expectation of convergence: their digital content will follow them to whatever device they are using at any moment.
• However most content and services do not shift effortlessly between devices. Instead they are heavy and difficult to move around.
• Hanging on to metaphors of the past (page, print-based) isn’t a scalable model. We need our content to shape-shift across experiences.
• Situated action and mutual reconfiguration: a person’s capacity to act is reconfigured when it comes into contact with another person or thing.
• Most people interact with devices ad hoc. They course correct as they go and don’t employ a clear system or plan up front.
• Social dynamics also play a role. People adapt their behavior with devices when other people are present.
• The best mobile interactions are sensitive to context. We need to shift our contextual assumptions and assumptions around content as a design medium.
• Much of how we understand about computing today stems from the static context of the office. There’s a lot of sameness in our office environments around the world.
• Throughout our design process, our work should happen in the contexts where use is happening. Research, design, and testing in real environments.
• Design is the manipulation of materials (wood, cloth). For a long time, designers thought of screens and pages as their design medium. But really content is our medium.
• Content can manifest itself as words, sounds, images, and more. It needs to flow like water across devices & experiences.

• The GUI paradigm was designed for a very specific context. Large screen, keyboard, seated context, etc defined GUI context.
• We’re reaching the end of GUIs. Too many features and functions are falling apart under their own weight. GUIs are really brittle on mobile devices.
• Touch interfaces feel intuitive. Our sense of touch develops before many of our other senses.
• We’re in the middle of the GUI/NUI chasm. We cling to the legacy of the past because it is comfortable but we push forward toward new heuristics at the same time. This is a delicate balance.
• GUIs are built around the model of computer as tool (complete task, efficiency). GUIs provide recognition: what you see is what you get. GUIs give data physical properties: files live in folders and have locations. GUIs feature heavy chrome, icons, and buttons.
• NUIs are built around the model of computer as media. NUIS focus on what you do is what you get. They are built around intuition. NUIs are fluid, unmediated, and organic: they let content be the interface.
• GUI experiences are very anchored. NUI experiences unfold like a fun game and can feel anchor less. This provides the opportunity to create new patterns.
• How to unfold mobile experiences: nested doll, hub & spoke, bento box, filtered view.
• Nested doll: summary view to detail unfolding.
• Hub & spoke: traverse out from central place and come back.
• Bento box: tightly nested information that interconnects several modules.
• Filtered view: different views of a bucket of information (filter and see content differently)

• The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life. –Mark Weiser
• In 1991, Weiser predicted technology would exist in three inch, foot long, and yard long screens.
• Mobile is the gateway drug to ubiquitous computing. We can follow toddlers into the future by observing how they use mobile today.
• The primary usage of tablets is in the home. People report tablets are like “curling up with a good book”. There is a sense of intimacy with tablet use.
• People are turning to mobile technology for comfort, connection, and personal needs.
• Mobile can be different than a task-based model. Mobile can be about possibility, exploration, and sensing intent. Email is a task. Twitter is an experience.
• Screens can reconfigure interfaces by sensing intent.
• Many of the things that are most important to people in the world aren’t about tasks. Mobile is better suited to meeting our real needs (beyond tasks).
• Mobile is an opportunity to invent the future.

The topic of mobile operating system fragmentation comes up often: how long do different versions of operating systems have to be supported, what are the implications many of OS versions and devices for mobile development teams? So I pulled together some data points that hopefully illustrate what's going on.

• There have been six smartphone distribution updates since Android was released: Cupcake, Donut, Eclair, Froyo, Gingerbread and most recently, Ice Cream Sandwich. Three versions have significant installed bases at present: Eclair (15 million), Froyo (54 million) and Gingerbread (114 million). (source)
• Gingerbread has disseminated into the market much more slowly than either of Froyo or Eclair. In fact, it took Gingerbread about 17 weeks longer to reach a version distribution milestone (10%, 20%, 30%) than its two predecessors. (source)
• 92.8% of Android users are on version 2 (2.1-2.3) of the operating system. Just 2.9% are on the latest version 4. (source)
• 7 of the 18 smartphones Android smartphone launched in the United States before July 2010 never ran a current version of Android. 12 of the devices only ran a current version of Android for a “matter of weeks or less” before a new distribution was released. 11 of 18 stopped getting any support updates less than a year after release. (source)
• Netflix sees almost around 1,000 different devices using their video streaming service on Android every day. (source)
• 99% of Imangi's customer support emails are people complaining their Android device is not supported. Imangi supports 707 Android devices. (source)
• All of Apple's smartphones released in the past three years support the latest version of iOS. (source)
• iOS 5 captured approximately 75% of all iOS users in the same amount of time it took Gingerbread to get 4% of all Android users. (source)
• 15 weeks after launch iOS 4 was at 70% and iOS 5 was at 60% while Ice Cream Sandwich got to just 1% share at the same age. (source)
• iOS devices have, on average, reached 10% version share 300 times faster than Android versions, 30% share 19 times faster, and 50% share 7 times faster. (source)