7 deadly web design sins you might be making

Joe Putnam, Growth Marketer at iSpionage

7 Deadly Web Design Sins You Might Be Making January 29, 2015

@ThueLMadsen #KISSwebinar

Join the conversation on Twi!er

Joe Putnam - @JosephPutnam – www.ispionage.com Joe Putnam is a growth marketer at iSpionage and previously helped companies like Rejoiner, SlideShare, KISSmetrics, and Crazy Egg with their content marketing. He’s been doing internet marketing for 5 years now and dabbles in everything from content production to conversion rate optimization and PPC marketing.

@JosephPutnam #KISSwebinar

Join the conversation on Twi!er

1 Web design is challenging

○ Fonts that are too small

○ Rotating sliders/carousels

○ Low contrast fonts

○ Poor line height for text

○ Line lengths that are too long

○ Improper use of accent colors

○ Violating common design principles

2 7 deadly sins of web design

3

Table of Contents

WATCH WEBINAR RECORDING NOW

1

“As a medium for the display of information, the printed

page is superb. It affords enough resolution to meet the

eye’s demand…It lets the reader control the mode and

rate of inspection…Those positive a"ributes all relate, as

‘indicated,’ to the display function. The tallies that could

be made for storage, organization, and retrieval

functions are less favorable.”

— J.C. Licklider from Libraries of the Future (1965)

1.  We’re still learning how to best design for the web.

2.  A lot of people need to be on the same page. (Designers,

business owners, marketers, developers, etc.)

3.  We now have to design for multiple devices.

4.  Most people copy other sites when that’s not always a good

idea.

5. There are so many options when it comes to fonts,

typography, layouts, etc.

Reasons Why Web Design Is So Challenging

7 Deadly Sins of Web Design

Fonts that are too small 1

www.feedthebot.com/mobile/legible-font-size.html

Make sure your fonts are easy to read.

Headline: 41 px; Proxima Nova Sub-headline: 16 px; Proxima Nova Body: 14 px; Helvetica

Body Font: 16 px; Helvetica Sidebar Font: 14 px; Helvetica

2

RULES TO FOLLOW

○ Be sure your fonts are easy to read. ○ Make sure your fonts have a good hierarchy. ○ Never use a font smaller than 14 px.

LOG IN WITH GOOGLE

Start Your Free KISSmetrics Trial

Rotating sliders/carousels 2

“We have tested rotating offers many times and have

found it to be a poor way of presenting homepage

content.”

— Chris Goward from Wider Funnel

“Rotating banners are absolutely evil and should be

removed immediately.”

— Tim Ash from Site Tuners

1% clicks on slider 84% of those on slider #1

“I didn’t have time to read it. It keeps flashing too quickl

y.

TWO STUDIES

RULE TO FOLLOW

Don’t use moving sliders unless there’s a convincing reason to do so.

Low contrast fonts 3

Example #2

Example #1

h!p://contrastrebellion.com/

h!p://evernote.com

www.hubspot.com

www.lakepointervresort.com

h!p://www.helpscout.net

RULES TO FOLLOW

○ Always use high contrast fonts. ○ Think twice before using reverse type and only use it sparingly.

Poor line height for text 4

www.pearsonified.com/typography

www.pearsonified.com/typography

RULE TO FOLLOW

Use the Golden Ratio Typography calculator to find the best line height for your font size and line length.

Line heights that are too long 5

h!p://baymard.com/blog/line-length-readability

h!p://blog.marketo.com

RULE TO FOLLOW

Make sure your line length doesn’t become too long causing your content to be difficult to read.

Improper use of accent colors 6

h!p://grasshopper.com/

www.c12recoverydrink.com/

RULE TO FOLLOW

Be sure to use accent colors for what it’s meant for—drawing a!ention to calls to action.

Violating common design principles

7

“Faced with the prospect of using a convention, there’s

a great temptation for designers to reinvent the

wheel, largely because they feel (not incorrectly) that

they’ve been hired to do something new and different,

and not the same old thing…Innovate when you know

you have a be"er idea…but take advantage of

conventions when you don’t.”

— Steve Krug in Don’t Make Me Think

Found by @ascho!mueller www.weta.me

h!p://neilpatel.com/

RULE TO FOLLOW

Think twice before a!empting to reinvent the wheel when it comes to common web design conventions.

Questions?

Joe Putnam Growth Marketer

iSpionage @josephputnam

joe@ispionage.com

Thue Madsen Marketing Operations Specialist

KISSmetrics @thuelmadsen

tmadsen@kissmetrics.com

THANK YOU

Joe Putnam www.ispionage.com/kissmetrics