Responsive Web Design and the Acceptability Threshold: What You Should Know

2012 will be remembered as the year the mobile web emerged. In support of this bold proclamation, a recent survey found that the share of smartphones has surpassed the 50% mark in the US. If you own or manage a website for your business or organization it is imperative that you invest in the mobile user experience. Enter Responsive Web Design, a new approach to building websites that optimizes the user experience across all platforms and devices. RWD truly is an elegant solution to a complex problem in that it addresses the need for accessibility using a single-source of data. The concept and drudgery of having to create multiple versions of a website is now as dated as the VHS.

Responsive-web-design

But before making the decision to go all out RWD be forewarned – although indeed an elegant solution it does not imply that it is a perfect one. In order to embrace RWD you must accept the concept of Acceptability Threshold.

Acceptability Threshold

This concept acknowledges the reality that RWD comes with certain inherent headaches.  Although RWD enhances the user experience across multiple mobile devices, thereby greatly increasing usability and visitor satisfaction, it can also lead to imperfections, particularly in regards to what we call the ‘in-between’ views. The concept of ‘pixel-perfect’ must be thrown out the window – the days of Flash-based control of display are gone forever. Instead, site owners must first understand and then embrace the acceptability threshold.

OK, so what exactly is the acceptability threshold? Let’s define it:

Acceptability Threshold: The minimum level of acceptance of imperfection a website owner will tolerate in order to market the site with maximum confidence.

Not making sense? Think about acceptability threshold as a percentage. We all desire the things we buy to be 100% perfection at the time of the purchase. After all, it is common sense that we will not drive off the car lot with the doors missing (unless you are into that kind of thing) or move into a new home while the roof is still under construction. But would you accept that car if the satellite radio was not yet activated? Would you go ahead and move your family into that house if the landscaping crew was still laying sod in the backyard? The question is, what will you accept? What is your acceptability threshold for making such decisions?

A Website by perception is no different. Yet it is completely different. Often times, we see the unfounded belief that a website cannot launch until everything is 100% completed. Again, this makes sense in regards to obvious concerns. Does it function? Do the pages load? Do the images display? Are there obvious errors or typos. From a traditional desktop-only viewpoint, the acceptability threshold was fairly straightforward – a website is either done or it is not. A solid QA process was the solution. Do a little cross-browser compatibility testing, content review, load testing, W3C and 508 compliance testing and you’re good to go. But with RWD, things are not so black and white.

For starters, the fact that RWD sites are built using a grid ensures that that the website will display differently on different devices. Although this is the greatest benefit of RWD it can also be its biggest weakness. The layouts of responsive web designs are mostly fluid which is why designers do not have much control on how the ‘in-between’ design will look like. Also, it is quite time consuming for the designers to display all the replicas in advance.  Designers do their best to show both wireframes and mock-ups for multiple layouts i.e., smartphone, tablet and desktop. If the layouts are approved, only then is the responsive web designing strategy is implemented.

disadvantages of responsive web design

Secondly, the constant updates to browsers, API’s and operating systems, pose a particular challenge for designers and developers working with RWD. Your new RWD site might look awesome on most browsers when it launches, but ignore version updates and before you know it you will be hearing from Sally in sales that the site is not looking too hot on her Blackberry.

Third, factor in the staggering proliferation of mobile devices entering the marketplace created by several manufacturers using competing operating systems and you can begin to see how quality assurance can become an ongoing challenge. Here at DeepBlue, we have multiple devices that we use to test RWD – everything from an 80″ HDTV, Mac desktops & laptops, a few pc’s, iPads (iPad 1 & 3), Nook, Kindle Fire, and of course, iPhones (4, 4s and 5) and other Android based phones. RWD is every bit an art as it is a science. We literally test all of the afore-mentioned devices to ensure that the experience is optimal for each device. Sometimes we miss things (yes, we are human). I got a call recently from a client irate about discovering that their new RWD site was not displaying properly on the iPhone 5 in landscape mode using Chrome mobile browser v2.0. Although the fix was simple it required somebody to actually visit the site using an iPhone 5 under those specific conditions to discover the issue in the first place (reminds me of the tree falling in the forrest and making a sound story). The fact is, no one thought about it until somebody stumbled upon it. This occurrence made me ponder projections into the future. What will happen when somebody visits the website using the new iPad mini and there are some display issues? Despite the fact that the site was launched well ahead of the iPad mini’s announcement, it is not inconceivable – nay, it is almost predictable – that I will get that call in the weeks to come. After all, the promise of RWD is that it creates the ideal user experience for ALL devices. Right? Yes. No. Maybe.

RWD is an exciting evolution in web development in the mobile era, but it is not perfect. The solution for website managers is to ensure that their site is consistently tested ongoing and that their acceptability threshold remains consistent. A rule of thumb I like to use is 95%, meaning that the website displays optimally on at least 95% of all devices and view modes. To insist on 100% is simply not practical, and in a way it defeats the purpose of RWD in the first place. Understand the acceptability threshold.  Live it, love it, earn it.

reality

 Responsive Web Design requires acceptance of imperfection. The acceptability threshold manages the degree of imperfection.

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Design, Strategy | Leave a reply

It’s Official: US Government Endorses Responsive Web Design

Still on the fence about RWD? The Federal Government isn’t.

Digital_Gov-229x300In a report entitled DIGITAL GOVERNMENT: BUILDING A 21ST CENTURY PLATFORM TO BETTER SERVE THE AMERICAN PEOPLE, the government officially endorsed the use of responsive web design as a better approach in providing greater accessibility to government information and resources.

Here are a few some excerpts:

Mission drives agencies, and the need to deliver better services to customers at a lower cost—whether an agency is supporting the warfighter overseas, a teacher seeking classroom resources or a family figuring out how to pay for college—is pushing every level of government to look for new solutions. 

Early mobile adopters in government—like the early web adopters—are beginning to experiment in pursuit of innovation. 

Customer-centric government means that agencies respond to customers’ needs and make it easy to find and share information and accomplish important tasks.

Using modern tools and technologies such as responsive web design and search engine optimization is critical if the government is to adapt to an ever-changing digital landscape and deliver services to any device, anytime, anywhere. Similarly, optimizing content for modern platforms, rather than just translating content from paper-based documents to the Web, will help ensure the American people and employees can access content regardless of platform. Agencies will need to keep current with the latest design concepts and refresh content delivery mechanisms to ensure the highest performance.

These imperatives are not new, but many of the solutions are. We can use modern tools and technologies to seize the digital opportunity and fundamentally change how the Federal Government serves both its internal and external customers— building a 21st century platform to better serve the American People.

So, why is the Federal Government, which typically lags behind the private sector when it comes to technology and innovation, embracing RWD? The answer is obvious if not paradoxical: RWD provides a mechanism that allows the government greater accessibility to its citizens, not merely the other way around. I will leave it to the pundits to dissect this statement, but there is no denying that RWD creates brand new communication channels that go both ways.

There are other factors that have contributed to this early adoption. Consider the government’s own stats:

  • Mobile broadband subscriptions are expected to grow from nearly 1 billion in 2011 to over 5 billion globally in 2016.
  • By 2015, more Americans will access the Internet via mobile devices than desktop PCs.
  • As of March 2012, 46% of American adults were smartphone owners – up from 35% in May 2011.
  • In 2011, global smartphone shipments exceeded personal computer shipments for the first time in history.

For me, the issue boils down to one word: accessibility. As we have worked with several Federal agencies over the years, including NASA, DoD, US Courts, EPA and the NCI, I have learned that accessibility is matter of constitutional rights. All citizens are entitled to free and open access to government documents and resources, and to deny even one of us that right is to discriminate against all of us. Hence the reason for 501 C3 compliance.

Not everyone owns a computer. I was in my early 20′s before I had one that I could call my very own. Websites have historically been designed for computers – traditional desktops and laptops – and this has long created the great digital divide that has existed between the haves and the have-nots. Enter smartphones. For many, the smartphone represented their first true web experience. Not everyone can own a computer, but just about all of us can afford a phone. And smartphones can display websites.

The end of the digital divide? Not quite.

One of the big problems with smartphone web browsing is the formatting and display of content. Navigating through them is a mess. As websites are still generally designed for desktops and their larger screens, the experience on a smartphone can be less than optimal. We can all relate to the frustrations – resizing, pinching, and panning in a sometimes futile attempt to find what we were looking for. Just imagine how this frustration gets compounded on a government website – typically not best-of-breed in the first place. The EPA website, for example, has in excess of 500,000 static web pages. Dozens of content contributors have worked for over a decade to add page after page in what became a complete discombobulation. Want to learn how environmental chemistry methods for soil and water are used to determine the fate of pesticides in the environment?

Good luck.

Responsive web design creates websites with fluid proportion-based grids, to adapt the layout and images to the viewing environment. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning and scrolling. For the private sector, a poor mobile experience can lead to loss of business. For the public sector, it can lead to a discrimination lawsuit as the case can be argued that the government did not take the necessary steps to ensure accessibility for everyone. For this reason alone, it is only a matter a time before all government websites – Federal, State and Local – employ responsive web design. I will take this one step further and boldly predict that the RWD adoption rate for government will either equal or surpass that of the private sector.

That’s not something you hear every day. Is it?

Uncle_Sam

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Design, Strategy | Leave a reply

Don’t Be a Luddite! Embrace Responsive Web Design.

In 1779, legend holds that a youth by the name of Ed Ludd broke two stocking frames – mechanical knitting machines used in the textiles industry – in a fit of rage. Stocking frames represented the first major stage in the mechanization of the textile industry, and played an important part in the early history of the Industrial Revolution. To Ed Ludd and others of like mind, these machines forewarned of a dangerous new world in which machines would replace English textile artisans through less-skilled, low-wage labourers, leaving them without work.

Thus, the Luddite movement was born.

Dont be a luddite
Dont be a luddite

For years, the Luddite philosophy endured as the emergence of technology created a sense of fear and helplessness that coincided with the rise in difficult working conditions in modern factories. In modern usage, “Luddite” is a term describing those opposed to industrialization, automation, computerization or new technologies in general. Neo-Luddism is a viewpoint opposing many forms of modern technology; an inherent – perhaps misguided – belief that technology has a negative impact on individuals and communities. This dictates that humanity was better off before the advent of specific new technologies, labeling these technologies dangerous. These technologies are seen as so foreboding that it challenges faith in all technological progress. Because of this, Neo-Luddites are apprehensive about the ability of any new technology to solve current problems without creating more, potentially more dangerous, problems.

Technology Infiltration

During this era of technological proliferation across all facets of society and into our personal and professional lives, the luddite philosophy has manifested itself into a kind of sub-conscious, heuristic rejection of anything new. If it ain’t broke, don’t fix it – so they say. Although much of the trepidation with new technology can be attributed to the headaches and annoyance of actually having to use our minds to learn something, the intuitiveness and innovation in handling these emerging technologies makes this argument obsolete. Take the iPad Mini, for example. It is a device of supreme simplicity. Take it out of its box, hit the power button, and you are up and running. Anyone can learn how to use it in a matter of seconds. Period. No exceptions. We love our iPad Mini’s because they fundamentally destroy the Luddite living within all of us. Intuitiveness trumps primal fear.

imgres

Slaying the Luddite

This brings me to the point of this posting. Anyone can embrace and learn emerging technologies, but you must consciously confront your internal Luddite.

In 2013, Responsive Web Design will emerge as the new standard in web architecture, and DeepBlue will be at the forefront as a thought leader in this new approach. As I have proclaimed on several occasions, Responsive Web Design represents an elegant solution to a complex problem. The approach allows developers to create a website from a single-data source and adjust its layout accordingly to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (from desktop computer monitors to tablets to mobile phones). RWD satisfies the user experience demands of today’s multi-platform consumer. Is RWD perfect? No, and I have written previously on the subject of RWD pros and cons (see Responsive Web Design and the Acceptability Threshold: What You Should Know). However, it is our fundamental belief that Responsive Web Design is the right approach for all organizations, large and small.

responsive devices

Embracing Emerging Technologies

Although most of the folks I have spoken to regarding RWD are truly excited about the new approach, I have taken notice that a few remain hesitant. You see, Responsive Web Design represents a SIGNIFICANT departure from the “traditional” way of designing websites. It is a total reinvention of the web user experience and it is only a matter of time of WHEN – not IF – all websites of integrity and reputation go responsive. Companies, particularly the larger ones, tend to err on the side of caution and can be more reactionary than proactive when embracing new technologies. The Luddite prevails. They prefer to sit back and watch as the thought leaders seize the opportunity and establish best-practices. Then, they will play perpetual catch-up as market shares drop and they finally understand and embrace the benefits of emerging technologies and their impact. They allow the Luddite to cage the beast of Innovation until it finally devours its keeper. For any of you out there – CEO’s, Marketing Directors, IT Directors, etc. – who allow themselves to feel the trepidation of the Luddite and decide to sit this one out in 2013, allow me to share with you a small sampling of industry leaders that have already embraced Responsive Web Design:

There is a reason why these icons represent some of the most recognizable and loved brands in the world. They are thought leaders and innovators (although the case can certainly be made against Microsoft on this assertion  ) and they are not afraid to challenge conformity and set new standards. These organizations made the conscious decision to put their Luddite in its place and embrace emerging technologies, particularly Responsive Web Design.

As we head today into a new year full of questions and uncertainty, I challenge anyone out their hearing my words to heed my advice…

DON’T BE A LUDDITE!

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Design, Strategy | Leave a reply

Responsive vs. Adaptive Design: Which Approach is Best?

Those of us in the web industry have become familiar in 2012 with a new approach to website development. Responsive Web Design, or RWD for short. The promise of RWD is that it allows developers like DeepBlue to create a website from a single-data source and adjust its layout accordingly to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (from desktop computer monitors to tablets to mobile phones). RWD provides an elegant solution for a complex problem – how to develop a single website that satisfies today’s multi-platform consumer. RWD is not a new technology; rather, it is a new way of thinking about the web. Although a website built using a responsive approach is self-evident when pointed out, we have found that the term creates much confusion with customers, hence the purpose of this article. To try to clarify, we will define the two main design approaches to modern website development – Responsive Design and Adaptive Design – and allow the reader to decide for themselves which approach is right for them.

Let’s begin with the basics:

Responsive Web DesignMultiple Fluid Grids

Adaptive Web DesignMultiple Fixed With Layouts

Confused? I don’t blame you.

RWD uses something with the obscure concept of fluid-based proportion grids. Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another. In addition RWD uses flexible images, and media queries, and when all three components are combined we create a quality experience for users no matter how large (or small) their display.

Make sense?

Let me try to put this in simpler terms: RWD websites are like silly putty, they have the ability to bend and curb, essentially morphing themselves into the proper dimensions for any web experience, including desktop, tablets and smartphones. For those of you who remember the 1996 Summer Olympics in Atlanta – think Whatizit, just without all the horrible embarrassment it befell onto our fair city.

Olympics Logo

Got it? Good. Let’s move on.

Adaptive Web Design (AWD), on the other hand uses a fixed width layout in designing and developing a website. Instead of a responsive site that will adjust itself accordingly, the AWD approach is to create multiple versions of a website based upon its anticipated use. We used this approach for the Tennessee Aquarium website several years back. At that time, the iPhone had just made its glorious appearance onto the scene and users were excited about the ability to visit actual websites on their phone. Granted, of course, that the experience was not always optimal – I will not even mention Flash – we loved the fact that the geniuses at Apple were thoughtful enough to create an intuitive, gesture-based interface which allowed us to zoom in and out, making it possible to read content that was designed for a larger screen on our tiny 3.5 inch phone. For the time being, it was good enough. Soon, however, customers started complaining to us that their customers were complaining to them that their website was not very useful on their smaller devices. They asked us if we could create an alternative version of their website, designed specifically for small screens, squinty eyes and fat fingers. Witness the birth of the mobile-friendly website experience – a scaled back, dumbed down, easier to use version of what has become affectionately known across small screens everywhere as the ‘full site’. Even though the creation of a mobile version required additional cost, design, development and the creation of a sub-folder inside the CMS (thus duplicating content entry efforts), our customers were once again happy because, indeed, their customers were also happy.

Between the years 2006-2010, the Adaptive Web approach dominated mobile strategies. Essentially, we developed two websites – one for the desktop experience and one for the smartphone experience. Then, wouldn’t you know it, those geniuses at Apple introduced yet another disruptive product. The iPad. What exactly was the iPad? At the time, we were not quite sure. It wasn’t a laptop, yet it wasn’t a phone either. It was a brand new category. Inevitably, our customers started calling us asking about how we can help them optimize their tablet experience. Although the average website will default to its desktop version on a tablet, the content was not always an ideal fit, especially in portrait mode. Should we really build a third website that was optimized for tablets? Will customers actually pay for three websites? Things started to get a little murky, and that’s when we started hearing about yet another rumored device that would strike fear in the heart of designers – the iPad Mini!! Chaos ensued.

It all started to change with Responsive Web Design, an article by Ethan Marcotte on A List Apart. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations using what you are now familiar with (thanks to this article) as the Responsive Design approach. RWD is still in it’s infancy and best-practices are being established as I write this article. It is by no means flawless – the concept of pixel-perfect has been thrown out the window along with Flash architecture. But it does represent the single greatest hope for a portable web that works the way we expect it to.

Earlier in this article, I offered to clarify the differences between RWD and AWD and allow you, the reader, to decide for yourself which approach is best for you and your organization. I realize that my intentions for objectivity may have been slightly influenced by my obvious subjectivity and preference for RWD. Still, I leave the ultimate conclusion to be made by you. If you were undertaking a new website, which approach would you choose?

RWD Rules!

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Design, Development | Leave a reply