First fare 2011 website design for frc teams

Website Design for FRC

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

Website Design for FRC Teams 2

What We Will Cover

Website Design for FRC Teams 3

"  Design Principles – or what is needed to win a FIRST website award

Bad Designs

"   Cluttered – hard to find information

"   Low quality content

"   Slow

Website Design for FRC Teams 4

Website Design for FRC Teams 5

http://www.angelfire.com/super/badwebs/

DESIGN PRINCIPLES

"   What makes a good website?

Website Design for FRC Teams 6

Website Design for FRC Teams 7

Website Design for FRC Teams 8

Website Design for FRC Teams 9

FRC Website Criteria

Website Design for FRC Teams 10

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?

Website Design for FRC Teams 11

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?

Website Design for FRC Teams 12

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?

Website Design for FRC Teams 13

Award Winning FRC Website www.adambots.com

Website Design for FRC Teams 14

Website Design for FRC Teams 15

4

Website Design for FRC Teams 16

Website Design for FRC Teams 17

Website Design for FRC Teams 18

Website Design for FRC Teams 19

Target Your Customers

"   What do they want to know?

"  Specific

"  Timely

"  Accurate

"  Relevant

"  Simple

"  Speedy

Website Design for FRC Teams 20

✪

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+

Website Design for FRC Teams 21

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…

Website Design for FRC Teams 22

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

Website Design for FRC Teams 23

Browser Market Share 2011 YTD

Website Design for FRC Teams 24

57% 23%

13%

5%

2%

Microsoft Internet Explorer

Firefox

Chrome

Safari

Opera

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

Website Design for FRC Teams 25

Simple

"   Consistent Taxonomy

"   Common colors and fonts

"   Clean and clear design – first impressions count!

"   No clutter

"   No popups!

Website Design for FRC Teams 26

Speedy

"   People are impatient!

"   Speed is critical

"   Hosting has biggest impact

"   Use

"   Firefox’s Firebug "   Yahoo’s yslow "  Google’s pagespeed

Website Design for FRC Teams 27

Typography

"   Text that is too small to read

"   Text crowding against the left edge

"   Text that stretches all the way across the page

"   Centered type over flush left body copy

"   Underlined text that is not a link

"   Paragraphs of type in all caps

"   Paragraphs of type in bold

"   Paragraphs of type in italic

"   Paragraphs of type in all caps, bold, and italic all at once

"   Spelling erorrs …err… errors!

Website Design for FRC Teams 28

Images

"   Graphics

"   Large graphic files that take forever to load

"   Meaningless or useless graphics

"   Thumbnail images that are nearly as large as the full-sized images they link to

"   Graphics with no alt labels

"   Missing graphics, especially missing graphics with no alt labels

"   Graphics that don't fit on the screen (assuming a screen of 800 x 600 pixels)

"   Blinking graphics

Website Design for FRC Teams 29

Website Design for FRC Teams 30

Firefox Firebug with YSlow

Q&A

Website Design for FRC Teams 31