This document provides guidance on website design for FRC (FIRST Robotics Competition) teams. It discusses principles of good website design like keeping content current, concise, and targeted towards specific audiences. It highlights criteria used to evaluate FRC websites like content, functionality, and design. Specific tips are provided around content like keeping it timely, accurate, relevant and simple. Design tips include using consistent formatting, limiting clutter and popups. The document also stresses the importance of website speed and provides tools to test performance.

1. nfor F RC
De sig
Website

2. Website Design for FRC Teams
2
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. Website Design for FRC Teams
3
What We Will Cover
" Design Principles – or what is needed
to win a FIRST website award

4. Website Design for FRC Teams
4
Bad Designs
" Cluttered – hard to find information
" Low quality content
" Slow

5. Website Design for FRC Teams
5
http://www.angelfire.com/super/badwebs/

6. Website Design for FRC Teams
6
DESIGN PRINCIPLES
" What makes a good website?

7. Website Design for FRC Teams
7

8. Website Design for FRC Teams
8

9. Website Design for FRC Teams
9

10. Website Design for FRC Teams
10
FRC Website Criteria

11. Website Design for FRC Teams
11
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. Website Design for FRC Teams
12
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. Website Design for FRC Teams
13
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. Website Design for FRC Teams
14
Award Winning FRC Website
www.adambots.com

15. 4
Website Design for FRC Teams
15

16. Website Design for FRC Teams
16

17. Website Design for FRC Teams
17

18. Website Design for FRC Teams
18

19. Website Design for FRC Teams
19

20. Website Design for FRC Teams
20
Target Your Customers
" What do they want to know?
" Specific
"
"
Timely
Accurate ✪
" Relevant
" Simple
" Speedy

21. Website Design for FRC Teams
21
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. Website Design for FRC Teams
22
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. Website Design for FRC Teams
23
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. Website Design for FRC Teams
24
Browser Market Share
2011 YTD
2%
5%
13%
Microsoft Internet Explorer
Firefox
Chrome
57% Safari
23% Opera

25. Website Design for FRC Teams
25
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. Website Design for FRC Teams
26
Simple
" Consistent Taxonomy
" Common colors and fonts
" Clean and clear design – first impressions count!
" No clutter
" No popups!

27. Website Design for FRC Teams
27
Speedy
" People are impatient!
" Speed is critical
" Hosting has biggest impact
" Use
" Firefox’s Firebug
" Yahoo’s yslow
" Google’s pagespeed

28. Website Design for FRC Teams
28
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. Website Design for FRC Teams
29
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 don't 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. Website Design for FRC Teams
30
Firefox Firebug with YSlow

31. Website Design for FRC Teams
31
Q&A