SlideShare a Scribd company logo
#BADWEBSITE Current Trends in Website Mistakes Netroots Nation 2011
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
Preamble: Who We Are Christopher Doorley President of Velocity Strategies VelocityStrategies.com @VelocityStrat @Doorley
Preamble: Who We Are Julie Blitzer User Experience Lead at Advomatic Advomatic.com @Advomatic @zuhli
Preamble: Who We Are Ryan Ozimek CEO of PICnet PICnet.net @PICnet @cozimek
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
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
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
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
The Daily Beast
Herman Cain
El Rio Grande Resturant
Razorfish
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
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
Contrast Examples
Grantland
Abercrombie & Fitch
Abercrombie & Fitch NEW!!
Claremont McKenna College
R/GA
Questions? UP TOP!

More Related Content

Similar to #BadWebsite

Accessibility Buy-In for Inclusive Product Week
Accessibility Buy-In for Inclusive Product WeekAccessibility Buy-In for Inclusive Product Week
Accessibility Buy-In for Inclusive Product Week
Kat K. Richards
 
Blog Design (at BlogConf)
Blog Design (at BlogConf)Blog Design (at BlogConf)
Blog Design (at BlogConf)
Benjy Stanton
 
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Holger Bartel
 
UX class presentation
UX class presentationUX class presentation
UX class presentation
Theo V
 
How to plan your web design?
How to plan your web design?How to plan your web design?
How to plan your web design?
eLuminous Technologies Pvt. Ltd.
 
Page 1 Kaplan Business.docx
Page 1                                       Kaplan Business.docxPage 1                                       Kaplan Business.docx
Page 1 Kaplan Business.docx
alfred4lewis58146
 
10 Step Guide to Hiring a Designer
10 Step Guide to Hiring a Designer10 Step Guide to Hiring a Designer
10 Step Guide to Hiring a Designer
CTRServices
 
3 Rules Front End Developers Must Follow!
3 Rules Front End Developers Must Follow!3 Rules Front End Developers Must Follow!
3 Rules Front End Developers Must Follow!
Rasin Bekkevold
 
WebDevELOPMENT.pptx
WebDevELOPMENT.pptxWebDevELOPMENT.pptx
WebDevELOPMENT.pptx
sondes zina
 
restaurant development + design: Project Management 101
restaurant development + design: Project Management 101restaurant development + design: Project Management 101
restaurant development + design: Project Management 101
Foodservice Equipment & Supplies Magazine
 
Denver Startup Week: Product Management from the Trenches
Denver Startup Week: Product Management from the TrenchesDenver Startup Week: Product Management from the Trenches
Denver Startup Week: Product Management from the Trenches
Sean Porter
 
Tendenci for Business: CMS and Newsletters
Tendenci for Business:  CMS and NewslettersTendenci for Business:  CMS and Newsletters
Tendenci for Business: CMS and Newsletters
Katie Laird
 
Getting Sign Off Larissa Meek
Getting Sign Off Larissa MeekGetting Sign Off Larissa Meek
Getting Sign Off Larissa Meek
Carsonified Team
 
Usability thinking
Usability thinkingUsability thinking
Usability thinking
Vladimir garnele
 
Project Success
Project SuccessProject Success
Project Success
Carolyn Reid
 
"Everybody is a Designer. Deal with it." by Wolfgang Bremer
"Everybody is a Designer. Deal with it." by Wolfgang Bremer"Everybody is a Designer. Deal with it." by Wolfgang Bremer
"Everybody is a Designer. Deal with it." by Wolfgang Bremer
Wolfgang Bremer
 
Five reasons why the universal homepage happens
Five reasons why the universal homepage happensFive reasons why the universal homepage happens
Five reasons why the universal homepage happens
mStoner, Inc.
 
How to Over-Communicate as an Art Form by TripAdvisor Sr. PM
How to Over-Communicate as an Art Form by TripAdvisor Sr. PMHow to Over-Communicate as an Art Form by TripAdvisor Sr. PM
How to Over-Communicate as an Art Form by TripAdvisor Sr. PM
Product School
 
Hci [6]interaction design
Hci [6]interaction designHci [6]interaction design
Hci [6]interaction design
Welly Dian Astika
 
Rapid Prototyping & Customer Development
Rapid Prototyping & Customer DevelopmentRapid Prototyping & Customer Development
Rapid Prototyping & Customer Development
johnwlong
 

Similar to #BadWebsite (20)

Accessibility Buy-In for Inclusive Product Week
Accessibility Buy-In for Inclusive Product WeekAccessibility Buy-In for Inclusive Product Week
Accessibility Buy-In for Inclusive Product Week
 
Blog Design (at BlogConf)
Blog Design (at BlogConf)Blog Design (at BlogConf)
Blog Design (at BlogConf)
 
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
 
UX class presentation
UX class presentationUX class presentation
UX class presentation
 
How to plan your web design?
How to plan your web design?How to plan your web design?
How to plan your web design?
 
Page 1 Kaplan Business.docx
Page 1                                       Kaplan Business.docxPage 1                                       Kaplan Business.docx
Page 1 Kaplan Business.docx
 
10 Step Guide to Hiring a Designer
10 Step Guide to Hiring a Designer10 Step Guide to Hiring a Designer
10 Step Guide to Hiring a Designer
 
3 Rules Front End Developers Must Follow!
3 Rules Front End Developers Must Follow!3 Rules Front End Developers Must Follow!
3 Rules Front End Developers Must Follow!
 
WebDevELOPMENT.pptx
WebDevELOPMENT.pptxWebDevELOPMENT.pptx
WebDevELOPMENT.pptx
 
restaurant development + design: Project Management 101
restaurant development + design: Project Management 101restaurant development + design: Project Management 101
restaurant development + design: Project Management 101
 
Denver Startup Week: Product Management from the Trenches
Denver Startup Week: Product Management from the TrenchesDenver Startup Week: Product Management from the Trenches
Denver Startup Week: Product Management from the Trenches
 
Tendenci for Business: CMS and Newsletters
Tendenci for Business:  CMS and NewslettersTendenci for Business:  CMS and Newsletters
Tendenci for Business: CMS and Newsletters
 
Getting Sign Off Larissa Meek
Getting Sign Off Larissa MeekGetting Sign Off Larissa Meek
Getting Sign Off Larissa Meek
 
Usability thinking
Usability thinkingUsability thinking
Usability thinking
 
Project Success
Project SuccessProject Success
Project Success
 
"Everybody is a Designer. Deal with it." by Wolfgang Bremer
"Everybody is a Designer. Deal with it." by Wolfgang Bremer"Everybody is a Designer. Deal with it." by Wolfgang Bremer
"Everybody is a Designer. Deal with it." by Wolfgang Bremer
 
Five reasons why the universal homepage happens
Five reasons why the universal homepage happensFive reasons why the universal homepage happens
Five reasons why the universal homepage happens
 
How to Over-Communicate as an Art Form by TripAdvisor Sr. PM
How to Over-Communicate as an Art Form by TripAdvisor Sr. PMHow to Over-Communicate as an Art Form by TripAdvisor Sr. PM
How to Over-Communicate as an Art Form by TripAdvisor Sr. PM
 
Hci [6]interaction design
Hci [6]interaction designHci [6]interaction design
Hci [6]interaction design
 
Rapid Prototyping & Customer Development
Rapid Prototyping & Customer DevelopmentRapid Prototyping & Customer Development
Rapid Prototyping & Customer Development
 

Recently uploaded

UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 

Recently uploaded (20)

UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 

#BadWebsite

  • 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
  • 12. El Rio Grande Resturant
  • 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
  • 21. R/GA

Editor's Notes

  1. http://www.thedailybeast.com/
  2. http://www.hermancain.com/
  3. http://www.arkrestaurants.com/elrio_grande.html
  4. http://www.razorfish.com/
  5. http://trace.wisc.edu/contrast-ratio-examples/index.htm
  6. http://www.grantland.com/
  7. http://www.grantland.com/
  8. http://www.abercrombie.com/webapp/wcs/stores/servlet/CategoryDisplay?catalogId=10901&storeId=10051&langId=-1&topCategoryId=12202&categoryId=12351&parentCategoryId=12351
  9. http://cmc.edu/prospectives/
  10. http://www.rga.com/