! !

THE KEYS TO INNOVATION

FUTURE FRIENDLY AND RESPONSIVE WEB DESIGN BUILDING FOR THE FUTURE
GROWTH STRATEGIES FOR A 2020 ENTERPRISE
E n v a n o , I n c . t e l e p h o n e : 9 2 0 . 4 0 3 . 1 1 3 7 G r e e n B a y, W I w w w. e n v a n o . c o m

!
INTRODUCTION
Yesterdays web. Todays web. Tomorrows web. Yesterdays consisted of the desktop computer, Windows and the dot com boom. Todays is mobile, social and constantly connected. Tomorrows means smart appliances, contextual awareness and computers that know what you need before you know you need it. But what else?

The digital landscape is ubiquitous - a characteristic that epitomizes both its power and its perplexity. In order to keep up, while constantly ensuring an efficient way to reach buyers, companies must prepare in advance for the future of their interactive presence. Mobile search, location services, mobile shopping, NFC, apps, cloud, multi-screening are all things of the not so distant future.

For those of us who create websites or at the very least, use them as a significant portion of business development and sales margins (if you dont you are either lying or lagging

IN 2013, MOBILE DEVICES WILL PASS PERSONAL COMPUTERS AS THE MOST COMMON WEB ACCESS TOOLS.
! ! ! ! ! ! Source: Gartner, Top 10 Strategic Technology Trends for 2013.

drastically behind the times), all this leads to a singular conclusion: A million screens have bloomed, and we need to prepare for all of them.

! ! ! ! ! ! ! ! ! ! ! !
!

! The Key to Innovation: Future Friendly & Responsive Web Design, Building for the Future

!2

! ! ! ! !
MOBILE DEVICES: 2013 AND BEYOND
In the U.S. as of December 2012, 88% of all Americans owned a cell phone and 46% of all Americans owned a smart phone. This is incredible market penetration for smart phones given the modern smart phone only came into existence in 2007. What these numbers leave out is the vast diversity in the mobile landscape, especially in regards to screen sizes. The following graphic displays all screen sizes available, only in the Android market. If you add in the desktop PC, tablets and the emerging web enabled T.V. market, the complexity rapidly becomes apparent. Screen diversity continues to grow with each new iteration of devices that comes into play. A long term strategy will need to deal with not only the devices that exist today, but also past devices and future devices as they become available. But, building mobile apps, new websites, and finding a mobile solution for each innovation the tech world serves is costly, time consuming and largely ineffective. On the same token, eMarketer expects U.S. mobile spending to reach $7.19 billion in 2013 and nearly $21 billion by 2016, a significant upward trend. To remain absent from such a lucrative and compelling opportunity for business and sales growth is virtually a death sentence. There is only one answer. An answer that addresses the need for a single solution for content to be used on various devices.

!
!

! The Key to Innovation: Future Friendly & Responsive Web Design, Building for the Future

!3

! ! ! !
FUTURE FRIENDLY

! !

If you recall, barely five years ago the number one selling smart phone was a BlackBerry made by Research In Motion (RIM)."RIM had relatively little competition in the smart phone market, but in 2007, Apple released the iPhone. The landscape changed."Now, in addition to smart phones - game consoles, televisions, refrigerators, and more are Internet enabled. The one thread in common between all of these devices is that they ship with a web browser, opening a door that allows us to think and act in a future friendly way.

DISRUPTION WILL ONLY ACCELERATE. THE QUANTITY AND DIVERSITY OF CONNECTED DEVICES - MANY OF WHICH WE HAVENT IMAGINED YET WILL EXPLODE, AS WILL THE QUANTITY AND DIVERSITY OF PEOPLE AROUND THE WORLD WHO USE THEM .
! ! ! ! ! ! Source: FutureFriend.ly

Our existing standards, workflows, and infrastructure for developing websites and navigating the mobile realm will not hold up. Today's onslaught of devices is already pushing them to the breaking point. They can't withstand what's ahead. Proprietary solutions will dominate at first. Innovation necessarily precedes standardization. Technologists will scramble to these solutions before realizing (yet again) that a standardized platform is needed to maintain sanity. The standards process will be painfully slow. We will struggle with (and eventually agree upon) appropriate standards. During this period, the web will fall even further behind proprietary solutions. Future-friendliness describes design principles, not specific techniques. Individual techniques will evolve, thrive, and then decline. No single method, technology, or workflow is perfect for all projects. Don't be religious about techniques. Instead, be passionate about future friendly values.
! The Key to Innovation: Future Friendly & Responsive Web Design, Building for the Future !

!4

As a philosophy, future friendly is a way of doing business to ensure interactive development and strategy is efficient and effective, while being cognizant of the rapidly changing technological environment and preparing for the future. "As an approach hinged on the importance of content, the future friendly philosophy ensures that all content will continuously function; no matter what, it adapts.

! ! !
Being future friendly hinges on two main ideas: 1. ! Acknowledge and embrace unpredictability. New devices with a multitude of screen sizes, pixel density, and device capabilities are constantly released. Accept this fact and simply work with it. 2. ! Think and act in a future friendly way. This means, instead of focusing on a pixel perfect design comp, focus on the content. "What is the purpose of a webpages existence?"Distill the item to its essence and then enhance up based on the device leaders.

!
Thinking Differently

First, Shifting to a future friendly focus requires a shift in mentality, a slight Then paradigm shift - one Then
that in the end, positions you not only as a leader in your industry, but as a leader in TECHNOLOGY interactive and mobile development. Yet, aside from thinking differently about your interactive strategy and penchant towards innovation, a future friendly approach also requires you reassess your approach to serving your target audience. Consider people first. Too often, organizations hastily apply the newest or obvious technology in hopes of solving complex problems only to find that technology only made things more complicated. Focusing on technology first is a temporary fix to organizational situations that are becoming increasingly more complex.
! The Key to Innovation: Future Friendly & Responsive Web Design, Building for the Future !

PEOPLE

PROCESS

!5

! !

+
! !

With a future friendly approach, focusing on your audience - their goals, their needs, their buying process - informs your strategic future friendly initiatives, starting with your content.

!
CONTENT AND CONTEXT

The two driving forces behind the need for a future friendly approach or responsive web design implementation are content and context - two key elements that require flexibility in these initiatives. The challenge behind both lies in their entomology. Vague and expansive, both terms do little to explain themselves, making it easy to misunderstand the two key concepts behind the future friendly philosophy. Content Dened The importance of content derives from a recent shift towards audience centric thinking. You may argue that an audience centric approach to marketing and sales generation has been around for ages, often the first concept taught in an introductory business or marketing class. This is true. Yet, in practice, often disregarded. For decades marketing consisted of push messaging, haphazardly sent through channels in hopes of reaching the right consumer wallet. Until now. With the proliferation of devices and constant access to information, consumers today are largely responsible for what they are exposed to and when; adding increased levels of complexity to the buying process as more consumers research, discuss and test companies and products before making a purchase.
! The Key to Innovation: Future Friendly & Responsive Web Design, Building for the Future !

!6

What consumers require now is content that speaks to them, caters to their needs, and is ready to go anywhere. More relevant content, in more contexts. Context Dened Like content, the term context is ambiguous. Context is everywhere, its everything. But what does that mean for reaching your customers in the interactive space? To be frank, its not completely understood yet. There is often a disconnect with what you think your customers are doing and what they are actually doing. Yet, being where they are, when they need you or your product or service information is key to business growth, particularly moving into 2013. Elements of context and the movement towards contextual awareness will address this disconnect. Context is classified in two ways, as quantitative or qualitative. Quantitative accounts for device - smart phone, tablet, PC, iPod, TV; and device characteristics - screen size, connectivity, device capabilities, processing power, input methods. Qualitative refers to proximity or location - in store, at home, in the office, at an event, in transit, etc.; need or user goals - browsing, researching, casual learning, comparison, location; user attention; user capabilities; and user environment. So yes, context accounts for customers on the go; but it also alludes to waiting in line (76%), in the store (69%), on downtime (80%), watching TV (62%) and more. Behavior is changing because devices are changing; they are highly customizable, always on, always connected.
! The Key to Innovation: Future Friendly & Responsive Web Design, Building for the Future ! Brad Frost, For a Future Friendly Web Brad Frost, For a Future Friendly Web

!7

By using techniques like mobile first and responsive web design, you can ensure that your content becomes all things to all people no matter what device they choose to view it on, where they are, what they are doing, and that it is ready for the devices and contexts of the future. According to Robert Scoble, author of Age of Context, theres morea whole lot more. Youve heard about some of it. Google: Project Glass, self-driving cars, pieces of software with charming voices that serve as personal attendants. Age of Context will tell you about glass in homes and skyscrapers that adjust to use, mood and weather conditions and let airplane pilots see through fog because the glass understands the context of its environment. Well tell you about mobile apps that know your calendar and whats at the dry cleaners to help you pick what to wear. Technology is becoming intuitive. It is starting to understand where you are and where you are likely to be heading and it is designed to help you on your way; all of which require companies and brands to offer more relevant content, in more contexts.

! ! ! !
RESPONSIVE DESIGN
Web designers must keep pace with the growing number of device experiences that an average person comes in contact with on a regular basis. Consider the various sizes and positioning of the devices you may have already used today. Browsed on your desktop computer, picked out several songs while reading the New York Times on your tablet, scrolled photos on your phone and checked airline schedules via a laptop computer.
Brad Frost, For a Future Friendly Web

As weve mentioned, all these applications occurred on different size screens to users at different places during the course of the day. Responsive web design allows the information presented on these formats to be as
! The Key to Innovation: Future Friendly & Responsive Web Design, Building for the Future !

!8

equally accessible as possible. As a tactical approach to a future friendly philosophy, the basic definition of responsive design is the use of fluid grids, media queries and adaptable images to provide layouts with the flexibility to mesh seamlessly with different types and sizes of devices. Media Queries permit the individual web page to use various CSS (Cascading Style Sheets) based generally on the width of the browser.

The Fluid Grid requires page element size to be relative in EMs percentage units rather than pixels or points. Adaptable images are displayed in relative units (up to 100%), to keep the image from displaying outside of the screen element.

According to Jeffrey Veen, design manager of Google, Two thousand thirteens most discussed innovation involved web design and its implications on our daily life. Day by day, the number of devices, platforms and browsers that need to work with your site grows." Responsive web design represents a fundamental shift in how well build websites for the decade to come.

MOBILE FIRST METHODOLOGY

Mobile experiences eclipse the desktop experience. Consumerization drives tablets into the enterprise. Cloud and mobile are mutually reinforcing trends. And the bring your own device trend accelerates. As evidenced, mobile is accelerating to the forefront of 2013 interactive opportunities - and will only expand from there. With future friendly methodologies and responsive web design implementation, focus remains on mobile first determining effective content based on contextual awareness for mobile devices before all else. Mobile devices require software development teams to focus on only the most important data and actions in an application. There simply isn't room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritize.

So when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today's desktop-accessed Web sites. That's good user experience and good for business. A business that is lucrative and crucial not to miss. After all, the most
! The Key to Innovation: Future Friendly & Responsive Web Design, Building for the Future !

!9

expensive item bought over the eBay mobile app was a Mercedes Benz S-Class sold for $212,685.

!
RESPONSIVE DESIGN IN ACTION

When Ariens Corporate wanted to showcase the diversification of their company both geographically and structurally, Envano helped to provide a single location for audiences seeking information about Ariens Company as a whole. The "Responsive Web Designed" Ariens Co. site automatically adjusts content based on the screen size of the viewing device, maximizing each page depending on the viewer's screen resolution. This will help ensure AriensCo.com is future friendly as more people switch to mobile devices for their

Internet browsing. AriensCo.com is a SharePoint driven site recently featured on TopSharePoint.com.

Ariens Company also recognized the consumer need to learn about zero turn mowing capabilities. Tasked with a fresh design and enhanced branding, Envano built ZeroTurn.com to help educate consumers on why to choose zero turn versus traditional turn mowers. As a site sponsored by Ariens and Gravely, WhyZeroTurn offers valuable content while remaining fully optimized for search, ultimately bumping up Ariens and
! The Key to Innovation: Future Friendly & Responsive Web Design, Building for the Future !

!1 0

Gravely search visibility and products. The ZeroTurn.com Designed" so the site automatically screen size of the viewing device.

association with branded zero turn website is also "Responsive Web adjusts content based on the

! ! !

WHATS IN YOUR FUTURE?

You may not know what your interactive future holds. But we can tell you whats in ours. The Internet of things. The Internet of things is already here. Over 50% of Internet connections are things. In 2011, there were"over 15 billion things on the Web, with 50 billion+ intermittent connections. By 2020, an estimated 30 billion+ connected things, with over 200 billion with intermittent connections. From mobile devices and laptops to internet enabled cars, smart refrigerators and bathroom mirrors, condominiums that will automatically change the internal temperature based on the weather outside, and Googles Project Glass, the web is converging on us fast. There is only one real question at the point: How will your website respond?

! !
Contact Us
Envano Interactive Business innovation@envano.com phone: 920-403-1137

! ! ! ! ! !
!

! The Key to Innovation: Future Friendly & Responsive Web Design, Building for the Future

!1 1

! !
ABOUT
Envano is an interactive business firm focused on helping partners navigate complex channels, taking a new approach to solving traditional and unique business problems in the interactive space. We are explorers. We are artists. We explore what is changing. We figure out what we need to help others change. We create something of value. Staying at the forefront of creativity, we audit, assess, and formulate business strategies to help our partners move ahead. We challenge old ineffective conventions and find new impactful solutions to help companies communicate better. Whether it is increasing sales and obtaining market share, solidifying competitive edge, boosting visibility and engagement, or simply making your job easier - Envanos focus is on building relationships through mobile, social, website and search tactics. But, were really all about putting people first. You. Your Customers. Our Employees. Our passionate team of dynamic, assertive thought leaders is key to an agile approach to assessing and solving business challenges. Clients include: AGCO, Ariens, ThedaCare, Miller Electric, Vermeer, and more.

! ! ! !
! The Key to Innovation: Future Friendly & Responsive Web Design, Building for the Future !

!1 2

Works Consulted!

http://www.businessinsider.com/mostexpensive-item-sold-on-ebay-2011-12 http://www.forbes.com/sites/ericsavitz/ 2012/10/23/gartner-top-10-strategictechnology-trends-for-2013/ https://speakerdeck.com/brad_frost/for-afuture-friendly-web http://futurefriend.ly/ http://www.forbes.com/sites/ericsavitz/ 2012/10/23/gartner-top-10-strategictechnology-trends-for-2013/

! ! ! ! ! ! ! ! !

! The Key to Innovation: Future Friendly & Responsive Web Design, Building for the Future

!1 3