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.