4 essentials-of great-website-design4

The FOUR ESSENTIALS OF EVERY GREAT WEBSITE DESIGN2
www.Hubspot.com
CONTENTS.
51
03 Why Site Design Matters
05 Aesthetically Beautiful
16 Optimized for the User
34 Personalized and Contextual
42 Optimized for Mobile
Conclusion: Great Websites Require
Strategic Vision

www.Hubspot.com
“Questions about whether design is necessary or affordable are quite beside
the point: design is inevitable. The alternative to good design is bad design,
not no design at all. Everyone makes design decisions all the time without
realizing it… good design is simply the result of making these decisions
consciously, at the right stage.”
- Douglas Martin, Author, Book Design: A Practical Introduction
“
“Just like still photography evolved into video, website design has grown
from a static online billboard to a personalized dynamic experience. The main
difference between these two transformations, of course, is that one took
decades to occur while the other happened over the course of just a few
short years. Today, in fact, websites are interactive platforms that share much
more in common with video games than billboards.
This rapid change, though, has created a core disconnect between what a
website can do and the way that many marketers approach utilizing them. In
other words, while the functionality of websites has transformed substantially
since the early 1990s, the way most marketers think about websites hasn’t
always kept pace.
According to eMarketer, nearly 90% of U.S. businesses consider their websites
as their most important online tactic, which makes it critical for them to keep
their websites in working order. Staying on top of new website design and
optimization trends is challenging – even trying to understand all the new
terminology, such as“mobile optimization”and“dynamic content,”can get
overwhelming.
WHY SITE DESIGN MATTERS

www.Hubspot.com
This book is a compilation of the best insights from optimization experts,
designers, developers, and HubSpot’s experience building landing pages and
websites for over 10,000 customers since 2007.
Using these insights, we will explore the key differentiating factors that
separate the top-performing websites from their peers – namely a site that is:
With a firm grasp of what sets exceptional sites apart from the competition,
you can create a truly exceptional site on your own – one that not only looks
great, but helps advance your business goals.
Aesthetically Beautiful
Optimized for the User
Personalized and Contextual
Optimized for Mobile

www.Hubspot.com
1. Aesthetically
Beautiful
2. Optimized FOR THE
USER
3. PERSONALIZED
AND CONTEXTUAL
4. OPTIMIZED FOR
MOBILE
Chapter 1

www.Hubspot.com
The“look”of your website is the first thing your visitor will experience.
According to the Web Marketing Group, our brains process visuals 60,000
times faster than text. As a result, the site aesthetic – not the written content
on the screen - is your first chance to reach out and grab your audience.
For your site, a compelling first impression is mandatory to get people to
engage with your company. As online attention spans continue to shrink
(recent estimates say you have roughly 50 milliseconds to make a first
impression), you will notice more that designs that don’t connect with your
audience will be the first, last, and only thing a visitor learns about your
First Impressions Matter Online
“You can design and create, and build the most wonderful place in the world.
But it takes people to make the dream a reality.”
- Walt Disney
“
”

www.Hubspot.com
What sets great website design apart? Website design isn’t about the
company or the designer; it’s about the person at the other end of the screen.
This pivotal shift is the key that separates exceptional websites from the other
633 million websites in the world today.
The designer’s job is to create a compelling experience for the reader at the
other end of the screen. They do this by using aesthetics and design to:
1
2
Push the meaning and purpose of the brand
Create a tone and express the personality of the brand
Design for the Person Looking
at Your Screen

www.Hubspot.com
You want your website to create a harmonious tone, not a discordant one.
On the next page, you will find two website examples, one from our recent
compilation, “53 Examples of Brilliant Homepage Design,” and the other
voted one of the world’s worst websites.

www.Hubspot.com
As you can see, these two sites give the reader two very different experiences.
The first has a clear visual hierarchy. It uses tools like color variations and
directional arrows to show the audience what’s important on the site.
Additionally, it provides easily understandable links readers can click to learn
more about the company. On the other hand, you could stare at the second
page for a half hour and still not know exactly what you are supposed to do
there.

www.Hubspot.com
Make sure that your website serves your audience and helps to advance
your business goals rather than scare your audience away. For more
information on site design and visual cues, read the Conversion Centered
Design book.
If you have ever stood in front of an original Monet, you know that a beautiful
design can send involuntary tingles down your spine. Unfortunately, if you
explore a random sample of sites online, you will find only a small percentage
of them are capable of making that kind of connection with their audience.
Really exceptional designers imbue their site design with talent and
psychology to elicit an emotion from your visitors. You might not be trying
to create awed reverence or spine tingles, but websites should certainly try
to produce an emotional response - usually to inspire someone to buy your
product or build a relationship with your company.
“What really decides consumers to buy or not to buy is not the content of its
advertising, but its form.”
David Ogilvy
“
”
Create a Brand Aesthetic

www.Hubspot.com
Because people often make buying decisions based on emotional stimulus,
it’s important to understand how your website works to stimulate (or inhibit)
those kinds of decisions.
Your website should convey the spirit and culture of your company. Are you
open and fun, serious and reverent, or friendly and informative? Each of these
emotions would require a different imagery, layout and typeface.
Even the colors you use will impact visitors’emotional experience on your
site. In our recent“Conversion Centered Design”book, Unbounce’s Ollie
Gartner takes you through a number of psychological principles and triggers
that you can use to understand your own website designs. Gartner explains
every color triggers a specific emotion. For example, orange often creates
positive feelings, while red connotes“stop”to many people. Knowing what
emotion you are trying to connect with should determine which shades you
pick for your design. (Based on this info, it may be best to steer clear of using
any red in your design.)
Here are three websites from our“53 Brilliant
Homepage Designs”compilation which use
design elements and color combinations
that convey three very different emotions.

www.Hubspot.com
On Jacqui’s Journey to the Perfect Cake, every site element combines to
create a fun, whimsical visual experience. The pastel colors here are light and
playful and contribute well to the overall aesthetic.

www.Hubspot.com
In contrast, the Magic Leap site, which promotes Ted X, elicits a sense of both
wonder and the vast expanse of the universe - appropriate for a brand that is
promoting continual learning.

www.Hubspot.com
With a very different take on a landscape layout, sports adventure store REI
uses its imagery and coloring to express adventure. It also employs user-
submitted content to show the company’s core audience out in the world
using its products, a great twist on focusing design elements on what matters
to the reader.

www.Hubspot.com
Understanding great design principles is not reserved for Monet-level artists.
As a marketer, think about the exact response you want from a visitor, and
use tools to elicit that response.
Even if you haven’t been through design school, there are still some principles
you can incorporate into your own website designs. In the book,“Design It
Yourself: The Marketer’s Crash Course in Visual Content Creation,”we include
a list of the Ten Commandments of do-it-yourself design, which are adapted
here to help you understand the first steps in addressing website visual
design.
These principles are the first step to every great aesthetic experience.
Following them will ensure that your design supports your overall brand
goals, rather than confuse your visitors with contradictory site elements and
colors.
“Stop looking at yourself as a designer and start thinking of yourself as a de-
liverer of ideas.”
Stle Melvr
“
”
A Beginners Guide to Design
Principles

www.Hubspot.com

www.Hubspot.com
Chapter 2
1. Aesthetically
Beautiful
USER
3. PERSONALIZED
AND CONTEXTUAL
4. OPTIMIZED FOR
MOBILE

www.Hubspot.com
There is an old psychological adage that there are three sides to every
conversation: what you think you are saying, what I think you are saying, and
the truth (which usually lies somewhere in between).
Great website design doesn’t allow for any grey areas - everything should be
about designing for the user experience (UX), and optimization starts with
the user.
You might sense a trend here. That’s not a mistake. Your website is a tool
that should ultimately serve your audience and, as a result, all the design
techniques we talk about. From the visual aesthetics to the functionality,
all design techniques should work together to improve your site’s ability to
serve.
Carefully arrange every element of your site so that each one provides the
right function, context, and direction for visitors. If the visual arrangement of
a website is about a person’s visceral reaction to your page, the optimization
and UX perspective is all about how the site meets your visitors’needs.
“Design is not just what it looks like and feels like. Design is how it works.”
Steve Jobs
“
”
Your Site isn’t for You, It’s For
Your Visitor

www.Hubspot.com
Confusing Site Design Stems
from Conflicting Goals
Websites often suffer a personality conflict between what the company wants
and what the user wants. Creating a confusing combination of elements
on one page can ultimately frustrate your readers. As a result, according
to eConsultancy, 74% of businesses believe correcting your site’s user
experience is key for improving sales, conversions and loyalty.
Really terrible sites fail because they were designed for a company, not for
the reader. If your visitor doesn’t know where to look and what to do on your
page, they will leave.
Your website is a tool to help your visitors find what they need. Many
companies try to cram too much information onto one page, or they let
company politics, rather than business goals, determine what gets top real
estate on their sites. While a CEO might want her“pet rock”project to sit in
the top-left corner of the page, this location is best reserved for the most
critical business objective or company value proposition.
“Good design is obvious. Great design is transparent.“
Jo Sparano
“
”

www.Hubspot.com
Regardless of why you created your website, visitors come to you to
accomplish something: to find a piece of information, learn more about your
company, or buy a product. You want to make it easy for them to do that,
ideally on the first click.
Once you realize that the goal of creating a page that meets the needs of
your business is intricately linked to creating a page that meets the needs of
your visitors, it isn’t that hard to do. Look at every page element through your
readers’eyes and correct anything that is confusing or out of place. Not only
does this serve your visitors, it will also improve your bounce rates.
Sometimes, it’s the little things that let your visitors know you’re focused on
their needs. This website from Hard Graft does a good job at immediately
dealing with their potential customers’pain points. By providing the pound-
to-dollar conversion value for their products, the site serves both its U.S. and
U.K. audiences and eliminates bouncing those visitors who can’t do that math
in their heads.

www.Hubspot.com
Nearly 50% of business professionals confirm that a website’s design is the
number-one criterion for discerning the credibility of the company. As a
result, 70% of marketers deploy some kind of website optimization lessons to
inform offline campaigns and other marketing communications, according to
MarketingSherpa.
To meet this need, over the past decade, a myriad of optimization and UX
tools and experts have helped marketers improve their site functionality.
In addition to MarketingSherpa’s scientific approach to site design, experts
worth exploring include the common sense principles of Unbounce and
Bryan Eisenberg and Steve Krug’s seminal UX book“Don’t Make Me Think.”
While their specific recommendations vary a bit, the best optimization and
UX advice can be distilled into the following six keys:
EXPLAIN THE VALUE
One of the fastest, most important levers a company can use
to improve its overall site experience is to immediately explain
two things: who your company is and what is your competitive
advantage. This explanation is generally called a value
proposition, and according to MarketingSherpa, it is the 1 -2
sentence statement that clearly answers the question: Why should
your ideal customer buy from you and not your top competitors?
Six Keys To Optimized Design
1

www.Hubspot.com
The value proposition is generally the first sentence that your
visitor will scan on your site. With that one sentence, you should
convey the credibility of your company and quantify exactly what
sets you apart from all other companies online.
Because of this top billing, getting your value proposition right is
critical. As MarketingSherpa’s 2012 Website Optimization Report
points out, companies who tested their value propositions were
15% more likely to produce ROI for their websites. That’s a 15%
bump in performance by changing a single sentence, which is a
pretty compelling argument for value prop optimization.
In this example, you can see three value propositions, each
tailored for a specific target audience. Note that the sentences
address a specific pain point, and explain how the company fixes
that problem.

www.Hubspot.com
DEPLOY A BLINK TEST
During your site design process, it’s easy to get caught in the
weeds. Make sure your site can also pass a high-level blink test.
Again, in three to five seconds, can someone look at your page
and know: who your company is, what you do, and what you want
the visitor to do on the page? If not, revisit both your value prop
and design to highlight those important messages.
Here is an example of a site from our“53 Examples of Brilliant
Homepage Design”compilation that effectively passes a blink test.
2

www.Hubspot.com
You will notice that everything about the Austin BeerWorks page
works to highlight and support the company’s product. With very
little copy, readers immediately know what they will learn about
on the site. The direct copy, dropdown menu, and clickable beer
cans allow people to learn more about the product, while the
clean, white background with high resolution product images
further highlight the most important part of the page: the beer!
ESTABLISH A THOUGHT PROCESS
Once you have passed your blink test, your really exceptional site
optimizers can employ deeper tools to orient their readers and
advance them through your page. You, too, can increase your site
engagement by creating a logical pattern to walk your readers
step-by-step through the information they might be interested in
on your page. We call this establishing a thought process.
According to optimization expert Michael Aagaard of Content
Verve, creating high-converting websites isn’t actually about
optimizing your web page, it’s about optimizing the decisions the
reader makes on that page.
3

www.Hubspot.com
The landing page for Content Verve’s new book below is a good
example of how a page can walk readers through their decision
process, offering them the right amount of information in a step-
by-step process through the page before asking for their contact
information.
The first section of the page includes a heading with a clear value
proposition, and then adds supporting data points that reinforce
the claims Content Verve makes in his first sentence. These
concrete, numerical details reinforce the value proposition and
the specificity of his numbers – 4 years of research and over 350
real-life A/B tests – establishes credibility for his claims.

www.Hubspot.com
Then, to emphasize his point, the next section of the landing page
includes reader testimonials from experts in the optimization
field. This is a really clever use of a psychological principle called
social proof – where marketers can use third-party validation to
motivate your visitors to take an action.
According to the Search Engine Journal, nearly 63% of consumers
indicate they are more likely to purchase from a site if it has
product ratings and reviews. By offering expert testimonials,
the Content Verve book reinforces its value to the outside world
and, consequently, boosts its potential conversions. For more
information on Social Proof, read 10 Ways to Instantly Amplify the
Social Proof of Your Marketing.
Finally, only after the page has explained the value of the offer
and indicated that other experts read the book and put their
name behind it does he include a distinct call to action at the
bottom of the page.

www.Hubspot.com
You will notice that while this page does include some good
design principles – for example, using enough white space to
define different content sections and images of people’s faces
– this isn’t the most flashy site design. Instead of flash, this page
design focuses on function using its understanding of why a
reader came to this page as a guiding principle and providing
information they will want in logical steps to build towards their
final conversion.

www.Hubspot.com
4
CREATE A CONVERSION PATH
Building a logical thought process for your visitors extends
beyond a single page. Your website should also provide a logical
conversion path that advances your visitors through a series of
pages toward their ultimate conversion goal.
Rather than trying to cram every piece of information your readers
may want on one page, each page of your site should have a
specific goal (called a“micro-conversion”), and every element of
that page should support that goal. For example, every facet of
the landing page above ultimately serves to get the reader to click
the bottom call-to-action button. Other goals might be as simple
as getting the reader to click to the next page or as vital as asking
someone to add a product to a shopping cart page.
For instance, the goal of the first page of the Sony sign up
conversion path (on the following page) is exclusively aimed at
determining whether or not the visitor has an account.

www.Hubspot.com
Unfortunately, while this example effectively highlights a
single-goal page, it also points to a major challenge with online
conversion paths: the tendency to insert unnecessary steps or
asking for too much information during the conversion process.
Given the alarming lack of online attention spans, you want to
make sure your conversion path is as streamlined as possible. In
this instance, Sony could have potentially used their back-end
data to identify if someone was a returning customer or not and
eliminated this step for their visitors.
Asking your customers to bear with you through a three-or four-
step shopping cart or research process may be asking too much.
Every time you ask someone to click through to another page, you
risk losing the vast majority of your audience. In fact, if average
site conversion rates are roughly 5%, according to Fireclick, then
each new page between your visitor and their ultimate goal loses
approximately 95% of your total site traffic.

www.Hubspot.com
The goal of every online marketer should be to get their visitor
to the exact page they’re looking for on the first click. If a
customer does a search for red sneakers on Zappos, they should
immediately jump to a landing page that allows them to buy
red sneakers, and not the company homepage. Any additional
steps, forms, or other hoops the visitor has to jump through will
significantly reduce your conversion rates.
For more information on conversion paths refer to the book on
Conversion Centered Design, which walks you through the various
types of site conversion goals – from the simple to the complex.
BE CLEAR
Marketers often change the way they talk online and use
“marketer speak”such as“Buy NOW!”rather than a normal
conversational tone. According to MarketingSherpa, clarity
trumps persuasion when writing for the web.
Dr. Flint McGloughlin, the Managing Director of Marketing
Experiments, uses an anecdote about dating to explain the
confusing way that marketers write for the online medium. He
explains,“A man would never walk up to a woman in a bar and tell
her,‘Looking for the man of your dreams, your wait is OVER!’”And
yet somehow, we see that all the time in“clever”website titles and
off-putting online layouts.
Don’t waste valuable online real estate trying to be clever. Instead,
use your site copy to convey your company message in a clear,
concise manner.
5

www.Hubspot.com
ELIMINATE FRICTION
Simplicity is one of the most important aspects of great site
design. In fact, a clean design is just as important as clear copy.
Your site layout should boost the overall online experience, not
distract from the website’s goals. Even if they’re visually appealing,
site elements that confuse your visitors will ultimately reduce the
overall effectiveness of your website.
Examples of friction on a webpage include:
Sites with awkward page hierarchy or confusing navigation
Pages with too much text and not enough white space
Confusing or non-existent value propositions
Pages with too much flash video
Pages with a distracting or dissonant color scheme
Sites that ask for personal information without any reason or
privacy policy
Equally weighted information or CTA buttons
Competing call-to-action buttons
6

www.Hubspot.com
For example, many marketers turn to images to boost their overall
site“feel”with often counter-productive results. While displaying
extravagant visuals on your landing pages may sound like a
fabulous idea, A/B tests at HubSpot have repeatedly shown that
including too many over-the-top images doesn’t help conversion.
In fact, oftentimes, it distracts the reader from the main point of
the landing page, thus creating more friction on the landing page
instead of supporting conversion.
While graphics are certainly attractive, they can also increase the
load time of your website. In fact, according to the Aberdeen
Group, a one-second delay in page-load time results in 11% fewer
page views, a 16% decrease in customer satisfaction, and a 7%
loss in conversions. Make sure every part of your page – from the
copy to the images to the navigation - support -- not distract from
-- the pathway to conversion.
The key is to provide the right amount of information for your
user, without overwhelming them. Sometimes, marketers may
think they are being helpful by providing more than one option
for their readers. In fact, though, they are actually overwhelming
them instead.

www.Hubspot.com
Unbounce recently conducted an interesting online experiment
to identify the right amount of call-to-action options to include
on a page. In the first page, they offered a page with four possible
demo sessions a prospect could attend. On the second page, they
only offered three.
The difference? The page with only three demo options saw a 78%
conversion improvement over the initial page. While you should
experiment with your own audience, it’s clear that landing pages
that limit their conversion goals and minimize potential confusion
for their users deliver better results.
Learn more about this experiment in our Conversion Centered
Design book.

www.Hubspot.com
Chapter 3
1. Aesthetically
Beautiful
USER
3. PERSONALIZED
AND CONTEXTUAL
4. OPTIMIZED FOR
MOBILE

www.Hubspot.com
Beyond A One-Size Fits-All Site
People are not static. They access your content from multiple devices. They
come to your page from a number of different channels. And, perhaps most
importantly, as their experience with your company grows, their needs and
interests change. And yet, most websites still treat them all the same.
Using new technology, marketers are now able to create personalized
websites that go even farther to serve the needs of your core audience. It
allows marketers to adjust the content each person on your website sees
depending on their changing needs, challenges, behaviors, and how far
along they are in your sales process. What this allows you to do is adopt all
the great optimization tips you’ve learned and create a site for the specific
person behind your screen.
These new personalization tools are beginning to deliver for marketers.
According to an Adobe/eConsultancy study, 37% of marketers today
are adopting personalization and audience targeting into their overall
strategy. Adobe’s Quarterly Digital Intelligence Report also found that using
information such as social graph history can increase marketing ROI by 88%.
It is easy to fail when designing an interactive experience. Design-
ers fail when they do not know the audience, integrate the threads of
content and context, welcome the public properly, or make clear what
the experience is and what the audience’s role in it will be.
Edwin Schlossberg
“
”

www.Hubspot.com
Adding personalization to your website design means creating a site that
adjusts to each individual audience member - based on who they are and
what they want, need, or do. Rather than“one-size-fits-all,”your various touch
points with an audience – from email, to landing pages, to lead-gen forms
and more – change based on the individual interacting with you at that
moment in time.
A cohesive online experience eliminates a lot of confusion for the buyer by
making every touch point between you and your visitors on your website
about them. It takes the lessons of email segmentation – the channel most
frequently personalized to audiences by marketers – and uses technology
to create an end-to-end online experience for each prospect that starts with
them, not with the business.
Rather than marketing to one broad audience with one non-specific
message, we can now market to an audience of one, delivering a consistent,
personalized message specific to each individual across every medium. And
these little details matter.
At HubSpot, we looked at the data for more than 93,000 calls to action
created using HubSpot over a 12 month period. We found that calls-to-action
targeted to the user performed 178% better than calls to action that were the
same for all visitors. According to Marketing Charts, 69% of North American
marketers say dynamic, personalized content is important for their website.
Use Technology To Create a
More Relevant Experience

www.Hubspot.com
Because of the diverse traffic (translated: diverse people) landing on your
site, including new visitors, existing leads, established customers, and even
potential employees, websites are often the hardest to personalize, especially
without cookies to identify your traffic. As a result, many marketers default to
generic“catch-all”CTAs or product recommendations in a standard column
that shows on every page of their site.
Unfortunately, this practice creates a confusing site for most visitors.
Returning customers are unlikely to find what they need if your site is a
sales tool, while new visitors may want to learn more about your company
before clicking on a“Buy Now”button. As we watch brands such as e-tailer
Fab, branding whiz Coke, and the dominant Amazon incorporate contextual
targeting in their website design, here are a few website personalization
features to consider:
CONTENT PERSONALIZATION
Some systems enable you to swap out blocks of content
depending on who is looking at them, so you can create different
website experiences for leads and customers.
Personalization in Action
1

www.Hubspot.com
For example, our HubSpot blog allows us to show different
content blocks to visitors who subscribe to our site and those
who don’t. In this way, we are delivering a much more relevant
experience to our readers.

www.Hubspot.com
SMART FORMS AND PROGRESSIVE PROFILING
You can also tailor your website to different visitors by adding or
subtracting form fields depending on what information a visitor
has already provided.
Set up rules in your contact management system like the one
shown below to allow your website to ask different questions of
your various audiences.
PERSONALIZATION TOKENS
A final personalization feature to consider is personalization
tokens. Tokens allow you to insert a bit of information from
a visitor’s profile, like a company name, directly into the page
they’re viewing.
2
3

www.Hubspot.com
Personalization features in your website are certainly advanced functionality,
so you’ll want to think through a strategy before employing any technology.
In order to personalize your website, you need to start with individual
customer profiles and a contact database. So, before you launch a
personalization campaign, make sure you have a robust contact database to
fuel personalization across your site.
Even without these features however, you can ensure every persona has
a good experience on your site by building content for each of your main
target industries and each stage of the purchase process.
For more information on using context plus content to deliver relevant online
experiences for your audience, refer to our new book“The New Online Rule
Book: 7 Elements of Context Marketing.”

www.Hubspot.com
Chapter 4
1. Aesthetically
Beautiful
USER
3. PERSONALIZED
AND CONTEXTUAL
4. OPTIMIZED FOR
MOBILE

www.Hubspot.com
Great User Experiences
Optimize for Mobile
Today’s audience has a range of options for how they view your website, from
a laptop to an iPad to a smart phone. The latest survey from Pew Research
Center’s Internet & American Life Project shows that nearly 60% of adults
connect to the web through a smartphone, tablet computer, or laptop while
on-the-go. The fast evolution and wide range of these devices have made
many marketers’original approach to mobile optimization obsolete. You need
a uniquely designed mobile version of your site – it can’t simply be a second
site that’s optimized for mobile. People simply jump between devices too
much and need a consistent experience.
This is the final step in designing an optimized, personal site to serve your
visitors. Think about every aspect of your visitor’s online experience, including
the device on which your visitor will view your content. Your audience will
make choices about their online browsing because it’s simple, easy, and
compelling. If your customers are looking at your sites via mobile, you need
to meet them where they are looking online.
“New technologies (mobile devices of all shapes and sizes and loca-
tion-based services) will continue to grow, but the best marketers will
realize it’s not about how to jam more ads into new platforms – it’s
about how to use the new technologies to enhance your inbound
powers of attraction.”
- Dharmesh Shah, CTO, HubSpot
“
”

www.Hubspot.com
Because our society is changing so rapidly, companies who fail to capitalize
on new tools risk losing their market share to those who are paying attention
to the changing tide. According to the IDC, more Americans will access the
internet through mobile devices than through desktop computers by 2015.
As customers continue to flock online using mobile devices, can businesses
afford to ignore new online advances?
The evidence of this mobile migration is compelling. Here are a few of the
many statistics pointing to audience’s transition to mobile viewing:
65% of U.S. adults sleep with their phones on or near their beds
according to Pew Internet Research, 2010.
In a 2012 Google Survey, 74% of respondents said they are more
likely to revisit a website if it is mobile friendly.
62% of companies that designed a website specifically for mobile
had increased sales. (Source: Econsultancy)
HubSpot customers saw 44% increase in mobile traffic in the past
year (HubSpot Research)
In mobile SEO, Google penalizes sites that aren’t optimized for
responsive design.
As we discussed earlier, sometimes a picture is worth a thousand words. The
two on the next page stand as a dramatic testament to how much society has
changed in a short period of time.
Mobile Usage on the Rise

www.Hubspot.com
The top image is a shows the crowd when the new Pope was elected in 2005.
The second is from the papal conclave in 2013.
As you can see, where the first crowd was looking forward to the big screen
with just a few cell phones in service, just seven years later, the entire crowd is
illuminated via smart phones.
As you can see, where the first crowd was looking forward to the big screen
with just a few cell phones in service, just seven years later, the entire crowd is
illuminated via smart phones and tablets.

www.Hubspot.com
Rather than dividing your channels and creating a separate mobile page, sites
built using responsive design provides an experience that uses the context
of the device from which your visitors arrive. Responsive sites and design
recognize the device a person is using to view the page and rearranges or
“responds”automatically, making itself look great on wide screens, laptops,
tablets, or mobile phones.
There are some subtle differences between designing a pure mobile site and
one that deploys responsive design.
As this chart illustrates, responsive websites adjust to whatever device your
prospect is using, increasing the stickiness of your site and automatically
optimizing your site for Google’s latest SEO algorithm changes.
Responsive Design
Mobile Optimized Website Responsive Design Website
URL(s): m.acme.com & acme.com URL: acme.com
Requires administrator to maintain content on
multiple domains
Allows administrator to edit content on one
domain
Looks good on mobile phones only Looks good on any device (tablet, mobile, small
screen)
SEO: Nets penalties from Google for multiple
domains (also true for Mobile SEO)
SEO: Maintains SEO across devices (also true for
Mobile SEO)

www.Hubspot.com
An important note in this chart is the vital importance that social and search
have on the“separate sites for separate devices”approach. A mobile URL
shared to social media, for example, could be clicked by someone on a
desktop and not render correctly, while your search optimization efforts for
your desktop URL don’t benefit a second mobile URL whatsoever. (Google has
also made changes to detect duplicate sites and prefers one site optimized
for both desktop and mobile in its algorithm.) In contrast, responsive design
practices, which maintain SEO tracking across devices will bolster your
current SEO strategy, rather than distract from it.
(Full disclosure: HubSpot offers such a tool, which you can learn about
here. Regardless of the tool you use, as mobile adoption grows, we expect
integrated, responsive designs to see a similar exponential adoption pattern.)

www.Hubspot.com
In action, here is an example of New Breed Marketing’s responsive site, in
which you can see subtle differences between the desktop, iPad, and mobile
views.
Mobile
Tablet
Desktop

www.Hubspot.com
There are a handful of keys to consider when designing your mobile
experience. Just like every other medium, the mobile platform has certain
innate qualities that require attention during your design phase. Here are
some tips to keep in mind when designing your mobile sites:
MAKE IT RESPONSIVE
You want your web page to automatically adjust based on how
your audience is using it to view the page and rearrange or
“respond”automatically, for a great appearance on wide screens,
laptops, tablets, or mobile phones.
USE SHORT CONTENT CHUNKS
The mobile screen is smaller than a traditional web page. As a
result, increase font sizes and make your content shorter and
more concise to minimize your readers’need to scroll through
your site.
Keeping content above the fold is even more critical than pages
viewed on a desktop. Messages that require the reader to scroll
down increase both friction and frustration for your readers, and
will ultimately detract from your mobile experience.
Five Rules for Mobile Design
1
2

www.Hubspot.com
CREATE LARGE CALLS-TO-ACTION
Smaller mobile screens mean you should also increase the size of
your call-to-action buttons, to allow them to be easily visible and
clickable online.
PUT DESIGN AT USERS’FINGERTIPS
Most mobile phones require that people click on a touch screen
in order to navigate through their interface. Thus, it’s essential to
take that into account when designing for mobile. Simplify your
navigation and be sure to leave enough room around your CTA
buttons and other navigational tools to allow for easy fingertip
scrolling and clicking.
Also, people have a tendency to hit below the link, so make sure
to leave enough space beneath your content to allow for that
scrolling pattern.
DESIGN FOR LOCAL
People take their phones with them everywhere. As a result, make
sure to prioritize your local SEO to bring your company front and
center during mobile searches.
3
4
5

www.Hubspot.com
You can leverage this portable technology in new, creative ways. Think about
how to incorporate contest check-ins, pictures, and other gamification tools
to create an engaging mobile experience - one that takes advantage of
mobile’s unique capabilities.
Dunkin Donuts does a good job in a recent outreach campaign that
encourages interaction with their brand by having loyal customers take
pictures of themselves enjoying their favorite coffees, then sharing these with
Dunkin Donuts employees to receive discounts on their next purchase.
Get Creative with Mobile
Technology

www.Hubspot.com
Despite the nearly 633 million websites in the world today, many
marketers still do not understand how people actually use their sites. The
website is the hub of your marketing and should work for you, conveying the
heart and messaging of your company in a user-friendly way.
As technology becomes more complicated, adding personal tokens and
mobile layouts, websites that succeed must still stay true to the basics by
reaching out to, and connecting with, their audience. They need to use the
complimentary elements of superior content plus context about their user to
deliver an end-to-end online experience. To do that effectively, every element
of your website design – from the aesthetics, to the functionality, to its
personal connections and mobile optimization - must all be created in service
of your site visitors’needs.
This book covered the four essentials that every excellent site design must
include: beautiful aesthetics, optimized layout, personalization and mobile
optimization. By planning ahead and incorporating these keys into your own
online strategy, you will be well on your way to developing your own great
company website.
Great Websites Require Strategic
Vision

www.Hubspot.com
ABOUT THE AUTHOR
WRITTEN BY MEGHAN
LOCKWOOD
Meghan Lockwood is a senior content
strategist at HubSpot. She is responsible for
developing longer-term research reports,
including the 2013 State of Inbound
Marketing Report. She is also a frequent
contributor to the HubSpot blog and a
speaker at industry conferences.
Prior to HubSpot, Meghan managed the
website optimization research cycle at
MarketingSherpa, and authored several
books on Website Optimization, including the
2012 MarketingSherpa Website Optimization
Report.
Follow me on twitter
@MEghanllockwood

www.Hubspot.com
With HubSpot’s new Content Optimization System (COS), Social Inbox, Email A/B
Testing, and 400+ improvements, the new HubSpot Platform is jam-packed with
new features to make your life easier, and your marketing more personal. Click
here to request a demo.
START DELIVERING TARGETED
MESSAGING AND ADAPTIVE
EXPERIENCES TO EVERYONE WITH
THE ALL NEW HUBSPOT.
SHOW ME HUBSPOT!

www.Hubspot.com
HubSpot believes in creating content for you (not for us), so we’d like to hear
what you thought of this ebook. Submit a 1-10 rating in a matter of seconds
by clicking here. Your feedback goes directly to our content team.
Rate this content &
help hubspot Improve.
Poor
Good
excellent
Submit your rating here:
http://bit.ly/4WebsiteEssentials
Either write something worth reading or do something worth
writing.” - Benjamin Franklin

4 essentials-of great-website-design4

More Related Content

What's hot (16)

Viewers also liked (6)

Similar to 4 essentials-of great-website-design4 (20)

More from Gianluigi Spagnoli (20)

Recently uploaded (20)

4 essentials-of great-website-design4