First fare 2011 website design for frc teams

595 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
595
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

First fare 2011 website design for frc teams

  1. 1. nfor F RC De sigWebsite
  2. 2. Website Design for FRC Teams2 Who am I? —  Mentor teams 1510, 2898 —  Seven year veteran of FIRST —  Robot Inspector —  Board member for Oregon FIRST Robotics —  20+ year IT guy —  Webmaster for several websites, including —  www.oregonfirst.org —  www.dinnerandamoviepdx.com
  3. 3. Website Design for FRC Teams3 What We Will Cover "  Design Principles – or what is needed to win a FIRST website award
  4. 4. Website Design for FRC Teams4 Bad Designs "   Cluttered – hard to find information "   Low quality content "   Slow
  5. 5. Website Design for FRC Teams5 http://www.angelfire.com/super/badwebs/
  6. 6. Website Design for FRC Teams6 DESIGN PRINCIPLES "   What makes a good website?
  7. 7. Website Design for FRC Teams7
  8. 8. Website Design for FRC Teams8
  9. 9. Website Design for FRC Teams9
  10. 10. Website Design for FRC Teams10 FRC Website Criteria
  11. 11. Website Design for FRC Teams11 Content "   How well does the website explain FIRST and promote its vision to people not familiar with the organization? "   How current is the website content? "   How well does the website convey the team story? "   How well does the website recognize the team sponsors, mentors and volunteers? "   To what extent does the website support other FIRST teams? "   How well is the website content written?
  12. 12. Website Design for FRC Teams12 Functionality "   How well does the site function "   How extensive is the website’s use of multimedia? How cross-browser compatible is the website? "   How much of the website design is original to the team? "   How much care was taken when designing the website with regards to web standards such as valid HTML and CSS?
  13. 13. Website Design for FRC Teams13 Design "   How does the website look overall? Does it give a positive first impression? "   How inviting is the site to potential visitors? "   How easily can a new user navigate the website? "   How reader friendly is the website? "   How engaging is the website? "   How well does the website give a sense of team identity? "   How does the website handle distribution of information to team Members?
  14. 14. Website Design for FRC Teams14 Award Winning FRC Website www.adambots.com
  15. 15. 4Website Design for FRC Teams15
  16. 16. Website Design for FRC Teams16
  17. 17. Website Design for FRC Teams17
  18. 18. Website Design for FRC Teams18
  19. 19. Website Design for FRC Teams19
  20. 20. Website Design for FRC Teams20 Target Your Customers "   What do they want to know? "  Specific " "  Timely  Accurate ✪ "  Relevant "  Simple "  Speedy
  21. 21. Website Design for FRC Teams21 Specific "   Titles are meaningful "   Concise postings – people don’t read they scan "   Remember the 5 W’s – don’t ramble "   Who, What Where, When & Why "   Use Facebook, Twitter, Google+
  22. 22. Website Design for FRC Teams22 Timely "   Post every 48 – 72 hours "   And show your Twitter Feed "   Give 4 to 8 weeks notice for major events "   Post no more than 24 hours after a major events "   Use google’s feedburner to promote your postings: http://feedburner.google.com "   Don’t post everything…
  23. 23. Website Design for FRC Teams23 Accurate "   Spell Check "   Get the day & date right "   Don’t forget to add the address information "   Check & double check every URL "   Check every browser & OS combination "   OSX, Windows, Linux, iPad, iPhone, Android "   IE7, IE8, IE9, Firefox, Chrome, Safari "   Use http://browserlab.adobe.com "   Use “Inspect Element” – Firebug or Chrome Developer Tools "   Get the basic facts right
  24. 24. Website Design for FRC Teams24 Browser Market Share 2011 YTD 2% 5% 13% Microsoft Internet Explorer Firefox Chrome 57% Safari 23% Opera
  25. 25. Website Design for FRC Teams25 Relevant "   Stay on topic - focus on your team "   Target your four customers "   Tell stories that impact each "   Tie the pictures to your story "   Easily found on google, bing, etc: " SenSeo: http://www.sensational-seo.com
  26. 26. Website Design for FRC Teams26 Simple "   Consistent Taxonomy "   Common colors and fonts "   Clean and clear design – first impressions count! "   No clutter "   No popups!
  27. 27. Website Design for FRC Teams27 Speedy "   People are impatient! "   Speed is critical "   Hosting has biggest impact "   Use "   Firefox’s Firebug "   Yahoo’s yslow "   Google’s pagespeed
  28. 28. Website Design for FRC Teams28 Typography "   Text that is too small to "   Paragraphs of type in all read caps "   Text crowding against the "   Paragraphs of type in bold left edge "   Paragraphs of type in italic "   Text that stretches all the way across the page "   Paragraphs of type in all caps, bold, and italic all at "   Centered type over flush once left body copy "   Spelling erorrs …err… "   Underlined text that is not errors! a link
  29. 29. Website Design for FRC Teams29 Images "   Graphics "   Graphics with no alt labels "   Large graphic files that take "   Missing graphics, forever to load especially missing graphics with no alt labels "   Meaningless or useless graphics "   Graphics that dont fit on the screen (assuming a "   Thumbnail images that are screen of 800 x 600 pixels) nearly as large as the full- sized images they link to "   Blinking graphics
  30. 30. Website Design for FRC Teams30 Firefox Firebug with YSlow
  31. 31. Website Design for FRC Teams31 Q&A

×