Date post: | 14-Apr-2018 |
Category: |
Documents |
Upload: | envano-interactive-business |
View: | 213 times |
Download: | 0 times |
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
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 2/13
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.”
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 3/13
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.
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
3
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 4/13
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.
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
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
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 5/13
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.
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
5
First,
PEOPLE
Then
PROCESS
Then
TECHNOLOGY
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 6/13
+ +
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.
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
6
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 7/13
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.
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
7
Brad Frost, “For a Future Friendly Web”
Brad Frost, “For a Future Friendly Web”
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 8/13
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
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
8
Brad Frost, “For a Future Friendly Web”
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 9/13
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
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
9
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 10/13
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
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
1 0
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 11/13
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?
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
1 1
Contact Us
Envano Interactive Business
phone: 920-403-1137
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 12/13
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
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.
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 13/13
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/
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
1 3