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. 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. We’re still learning how to best design for the web. 2.  A lot of people need to be on the same page. 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 1 Fonts that are too small 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. Rotating sliders/carousels “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 quickly. TWO STUDIES RULE TO FOLLOW Don’t use moving sliders unless there’s a convincing reason to do so. Low contrast fonts Example #2 Example #1 http://contrastrebellion.com/ http://evernote.com www.hubspot.com www.lakepointervresort.com http://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 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 http://baymard.com/blog/line-length-readability http://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 http://grasshopper.com/ www.c12recoverydrink.com/ RULE TO FOLLOW Be sure to use accent colors for what it’s meant for—drawing attention to calls to action. Violating common design principles Found by @ascho mueller www.weta.me http://neilpatel.com/ RULE TO FOLLOW Think twice before attempting to reinvent the wheel when it comes to common web design conventions.

1. Joe Putnam, Growth Marketer at iSpionage
7 Deadly Web Design Sins You
Might Be Making
January 29, 2015

2. @ThueLMadsen #KISSwebinar
Join the conversation on Twi er

3. 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.

4. @JosephPutnam #KISSwebinar
Join the conversation on Twi er

5. 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

6. WATCH WEBINAR RECORDING NOW

7. 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)

8. 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

9. 7 Deadly Sins of Web Design

10. Fonts that are too small1

11. www.feedthebot.com/mobile/legible-font-size.html
Make sure your fonts are easy to read.

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

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

14. 2

15. 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.

16. LOG IN WITH GOOGLE
Start Your Free KISSmetrics Trial

17. Rotating sliders/carousels2

19. “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

20. 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

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

23. Low contrast fonts3

24. Example #2
Example #1

25. h p://contrastrebellion.com/

26. h p://evernote.com

27. www.hubspot.com

28. www.lakepointervresort.com

29. h p://www.helpscout.net

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

31. Poor line height for text4

32. www.pearsonified.com/typography

33. www.pearsonified.com/typography

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

35. Line heights that are too long5

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

37. h p://blog.marketo.com

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

39. Improper use of accent colors6

40. h p://grasshopper.com/

41. www.c12recoverydrink.com/

42. RULE TO FOLLOW
Be sure to use accent colors for
what it’s meant for—drawing
a ention to calls to action.

43. Violating common design
principles
7

44. “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

45. Found by @ascho mueller
www.weta.me

46. h p://neilpatel.com/

47. RULE TO FOLLOW
Think twice before a empting to
reinvent the wheel when it comes
to common web design
conventions.

48. Questions?
Joe Putnam
Growth Marketer
iSpionage
@josephputnam
joe@ispionage.com
Thue Madsen
Marketing Operations Specialist
KISSmetrics
@thuelmadsen
tmadsen@kissmetrics.com

49. THANK YOU
Joe Putnam
www.ispionage.com/kissmetrics