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
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
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.
“We have tested rotating oﬀers 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 ﬂashing 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
RULES TO FOLLOW ○ Always use high contrast fonts. ○ Think twice before using reverse type and only use it sparingly.
Poor line height for text
RULE TO FOLLOW Use the Golden Ratio Typography Calculator to ﬁnd the best line height for your font size and line length.
Line heights that are too long
RULE TO FOLLOW Make sure your line length doesn’t become too long causing your content to be diﬃcult to read.
Improper use of accent colors
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
RULE TO FOLLOW Think twice before attempting to reinvent the wheel when it comes to common web design conventions.