Current Trends in Website Mistakes. From Netroots Nation 2011 in Minneapolis, this is the slideshow that accompanied the panel discussion about common website design and development mistakes. The audience at Netroots Nation was online political activists.

1. #BADWEBSITE Current Trends in Website Mistakes Netroots Nation 2011

2. Preamble: Getting To Know Us Today we’re going to talk about what’s considered “bad practices” in website design and development. A panel in four parts Part 1: Planning Part 2: The Interface Part 3: The Content Part 4: The Rule Breakers Bonus: Questiontime

3. Preamble: Who We Are Christopher Doorley President of Velocity Strategies VelocityStrategies.com @VelocityStrat @Doorley

4. Preamble: Who We Are Julie Blitzer User Experience Lead at Advomatic Advomatic.com @Advomatic @zuhli

5. Preamble: Who We Are Ryan Ozimek CEO of PICnet PICnet.net @PICnet @cozimek

6. Part 1: Planning Good planning equals good execution Set clear, realistic goals Set, keep and meet your milestones Focus on the outcome, not the tools You don’t need all the bells and whistles Understand your options: Time / Cost / Quality You can only have two

7. Part 1: Planning Too many cooks in the kitchen It’s a cliché for a reason: decision making needs to be streamlined and responsive Too many decision makers slows the process Stay involved in the process. Listen to the people you hire Trust the people you hire

8. Part 2: The Interface Function No need to re-invent the wheel, best practices are exactly that: best practices User shouldn’t have to fight your website, let them navigate your site simply and easily Not everything needs to go on the front page Tell the user where they are, how they got there, and how they leave

9. Part 2: The Interface Design Design shouldn’t get in the way of the goals set for the site Fancy isn’t always the best solution, simple and straight forward can be very effective (see?) Consider the implications of your design, big designs = big upkeep

10. The Daily Beast

11. Herman Cain

12. El Rio Grande Resturant

13. Razorfish

14. Part 3: The Content Content has to be more than just a block of copy Large blocks of text work much better on paper than they do on the screen Proper use of headers and line breaks A clean style sheet works magic Help users quickly identify which content is significant Don’t over use bold, it’s as bad as writing in all caps

15. Readability, readability, ReAdAbILiTY Pay attention to font size Screen sizes vary greatly from the iPhone to HDTVs Whitespace: let your text breath and it will be easier to read and understand Contrast and Colors: make it readable first, pretty second Part 3: The Content

16. Contrast Examples

17. Grantland

18. Abercrombie & Fitch

19. Abercrombie & Fitch NEW!!

20. Claremont McKenna College

21. R/GA

22. Questions? UP TOP!