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
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
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
