The Keys to Innovation- Future Friendly and Responsive Web Design

7/27/2019 The Keys to Innovation- Future Friendly and Responsive Web Design

http://slidepdf.com/reader/full/the-keys-to-innovation-future-friendly-and-responsive-web-design 1/13

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

http://www.envano.com/



INTRODUCTION

Yesterday’s web. Today’s web. Tomorrow’s web. Yesterday’s consisted of the desktop

computer, Windows and the dot com boom. Today’s is mobile, social and constantly

connected. Tomorrow’s 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 portionof business development and sales margins (if you don’t you are either lying or lagging

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.

T h e K e y t o I n n o v a t i o n : F u t u r e F r i e n d l y & R e s p o n s i v e W e b D e s i g n , B u i l d i n g f o r t h e F u t u r e

2

“IN 2013, MOBILE DEVICES WILL PASS PERSONAL

COMPUTERS AS THE MOST COMMON WEB ACCESS

TOOLS.”

Source: Gartner, “Top 10 Strategic Technology Trends for 2013.”



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 marketpenetration 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 forcontent to be used on various devices.


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 aweb browser, opening a door that allows us to think and act in a future friendly way.

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.


4

“DISRUPTION WILL ONLY ACCELERATE. THE QUANTITY AND DIVERSITY OF

CONNECTED DEVICES - MANY OF WHICH WE HAVEN’T IMAGINED YET -

WILL EXPLODE, AS WILL THE QUANTITY AND DIVERSITY OF PEOPLE

AROUND THE WORLD WHO USE THEM .”Source: FutureFriend.ly



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 ofscreen 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 webpage’s

existence? Distill the item to its essence and then enhance up based on the device

leaders.

Thinking Differently

Shifting to a future friendly focus requires a shift in mentality, a slight paradigm shift - one

that in the end, positions you not only as a leader in your industry, but as a leader in

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.


5

First,

PEOPLE

Then

PROCESS

Then

TECHNOLOGY



+ +

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 Defined

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.


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 Defined

Like content, the term context is ambiguous.

Context is everywhere, it’s everything. But what

does that mean for reaching your customers in

the interactive space? To be frank, it’s not

completely understood yet.

There is often a disconnect with what youthink 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.


7

Brad Frost, “For a Future Friendly Web”




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, there’s more–a whole lot

more.

“You’ve 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. We’ll tell you about mobile apps that know your calendar and what’s 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.

As we’ve 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


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 thirteen’s 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 we’ll 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


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


1 0



Gravely search visibility and association with branded zero turn

products. The ZeroTurn.com website is also "Responsive Web

Designed" so the site automatically adjusts content based on the

screen size of the viewing device.

WHAT’S IN YOUR FUTURE?

You may not know what your interactive future holds. But we can tell you what’s 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 Google’s Project Glass, the web is

converging on us fast. There is only one real question at the point: How will your website

respond?


1 1

Contact Us

Envano Interactive Business

[email protected]

phone: 920-403-1137




1 2

ABOUTEnvano 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 - Envano’s focus is on building relationships through

mobile, social, website and search tactics.

But, we’re 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.



Works Consulted http://www.businessinsider.com/most-

expensive-item-sold-on-ebay-2011-12

http://www.forbes.com/sites/ericsavitz/

2012/10/23/gartner-top-10-strategic-

technology-trends-for-2013/

https://speakerdeck.com/brad_frost/for-a-

future-friendly-web

http://futurefriend.ly/

http://www.forbes.com/sites/ericsavitz/

2012/10/23/gartner-top-10-strategic-

technology-trends-for-2013/


1 3

The Keys to Innovation- Future Friendly and Responsive Web Design

Documents

Transcript of The Keys to Innovation- Future Friendly and Responsive Web Design