Download - First fare 2011 website design for frc teams
![Page 1: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/1.jpg)
Website Design for FRC
![Page 2: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/2.jpg)
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
![Page 3: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/3.jpg)
What We Will Cover
Website Design for FRC Teams 3
" Design Principles – or what is needed to win a FIRST website award
![Page 4: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/4.jpg)
Bad Designs
" Cluttered – hard to find information
" Low quality content
" Slow
Website Design for FRC Teams 4
![Page 5: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/5.jpg)
Website Design for FRC Teams 5
http://www.angelfire.com/super/badwebs/
![Page 6: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/6.jpg)
DESIGN PRINCIPLES
" What makes a good website?
Website Design for FRC Teams 6
![Page 7: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/7.jpg)
Website Design for FRC Teams 7
![Page 8: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/8.jpg)
Website Design for FRC Teams 8
![Page 9: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/9.jpg)
Website Design for FRC Teams 9
![Page 10: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/10.jpg)
FRC Website Criteria
Website Design for FRC Teams 10
![Page 11: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/11.jpg)
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
![Page 12: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/12.jpg)
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
![Page 13: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/13.jpg)
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
![Page 14: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/14.jpg)
Award Winning FRC Website www.adambots.com
Website Design for FRC Teams 14
![Page 15: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/15.jpg)
Website Design for FRC Teams 15
4
![Page 16: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/16.jpg)
Website Design for FRC Teams 16
![Page 17: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/17.jpg)
Website Design for FRC Teams 17
![Page 18: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/18.jpg)
Website Design for FRC Teams 18
![Page 19: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/19.jpg)
Website Design for FRC Teams 19
![Page 20: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/20.jpg)
Target Your Customers
" What do they want to know?
" Specific
" Timely
" Accurate
" Relevant
" Simple
" Speedy
Website Design for FRC Teams 20
✪
![Page 21: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/21.jpg)
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
![Page 22: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/22.jpg)
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
![Page 23: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/23.jpg)
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
![Page 24: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/24.jpg)
Browser Market Share 2011 YTD
Website Design for FRC Teams 24
57% 23%
13%
5%
2%
Microsoft Internet Explorer
Firefox
Chrome
Safari
Opera
![Page 25: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/25.jpg)
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
![Page 26: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/26.jpg)
Simple
" Consistent Taxonomy
" Common colors and fonts
" Clean and clear design – first impressions count!
" No clutter
" No popups!
Website Design for FRC Teams 26
![Page 27: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/27.jpg)
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
![Page 28: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/28.jpg)
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
![Page 29: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/29.jpg)
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
![Page 30: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/30.jpg)
Website Design for FRC Teams 30
Firefox Firebug with YSlow
![Page 31: First fare 2011 website design for frc teams](https://reader033.vdocuments.us/reader033/viewer/2022052900/555a7a0ad8b42a98568b4985/html5/thumbnails/31.jpg)
Q&A
Website Design for FRC Teams 31