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
Website Design for FRC Teams3 What We Will Cover " Design Principles – or what is needed to win a FIRST website award
Website Design for FRC Teams4 Bad Designs " Cluttered – hard to find information " Low quality content " Slow
Website Design for FRC Teams5 http://www.angelﬁre.com/super/badwebs/
Website Design for FRC Teams6 DESIGN PRINCIPLES " What makes a good website?
Website Design for FRC Teams10 FRC Website Criteria
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?
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?
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?
Website Design for FRC Teams14 Award Winning FRC Website www.adambots.com
Website Design for FRC Teams20 Target Your Customers " What do they want to know? " Specific " " Timely Accurate ✪ " Relevant " Simple " Speedy
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+
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…
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
Website Design for FRC Teams24 Browser Market Share 2011 YTD 2% 5% 13% Microsoft Internet Explorer Firefox Chrome 57% Safari 23% Opera
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
Website Design for FRC Teams26 Simple " Consistent Taxonomy " Common colors and fonts " Clean and clear design – first impressions count! " No clutter " No popups!
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
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
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
Website Design for FRC Teams30 Firefox Firebug with YSlow