Modern Design Elements of an FRC Site?

Technical Website Design/Showcase
#1

As webmaster on my team, I basically wiped the old site (in terms of design) and built from the bottom. I’ve seen a lot of FRC team sites that haven’t been updated recently, and some that have. I’ve been looking at a bunch of them, trying to figure out:

What should every FRC team website have?

I’ve got a blog/team updates, photos, donation and tax info, social media, info and a form for joining, etc. at http://www.team980.com. What other things make up a FRC team website (or don’t belong on one)?

AFS
Team 980
Mechanical Design, Webmaster, Media

#2

I think many website authors miss a couple key points when they’re making their whiz-bang cool-beans website. First, in a couple years they won’t be the ones updating it. So every site needs a ‘backend’ that allows updates to the front page in the same way that we write posts on this board. Attach a picture, write a post, click “post”, done.

Next, overall the site should be a a simple design that is both phone and computer compatible. No fancy hover-over buttons with script because that is a pain to use on a phone. The idea here is to be able to allow people quick access to information. Frankly, I don’t even look at a website’s design anymore because I google for what I need then leave the site.

Simple page layouts. No finite-scrolling baloney, and certainly not the new ‘tablet’ design fad that has sites looking so horrible. In addition - minimize the pictures and maximize the content. You should have your top logo and navigation bar taking up more than 10-15% of the top or side of the screen. Chief is a good example of a simple site that has the information you need.

#3

Today the most important thing is to have a responsive design. If you are trying to do this from scratch I recommend using the Bootstrap framework since it is easy to work with and will get you off the ground fast.

The next most important thing is to have a Content Management System. DO NOT develop this on your own. This will only cause problems when other people need to take over. Find a system that you like and can install. It doesn’t have to be fancy and can be as easy as installing WordPress.

#4

^^This!!

Otherwise in a couple years someone else will be “wiping” your site and re-building “from the bottom up”.

#5

I have in fact been using WordPress, which has a great backend. I wrote a page on the site specifically for the next web manager, so as to avoid confusion. However, the question I meant to ask was more:

What are the front-end functional/visual things every FRC team site should have?

Sorry for the confusion, and thank you for your advice; I quite agree, I’ve seen such systems as those described above.

#6

I was the webmaster for Team 781 over the past two years. Last summer, I was having problems with our Joomla installation: notably, any time I updated anything, links would break. So I completely reinstalled the site (with Joomla, since I was very comfortable with it).

Anyway, my point is that I feel our team has a lot of things on our website. If you want to check it out for some inspiration, check out team781.com. However, I do have to warn you: it has not completely been finished, but the general idea is there. I still have to add the News section and make sure the social media team updates that :).

Also, I like your website. I have never been able to make such a nice slideshow on the front page, maybe you could PM me how you did it. Could I suggest making the donate button a little bit less obnoxious though?

#7

I have a little trouble saying that every team should have anything in particular, but if I were to add to the list you already stated, I do feel like a team’s sponsors should be front and center in some way, including some sort of presence on the front page.

Features that are important on our team website are the team calendar and a members section that team members can log into for more information. Also, a few students a couple years ago made a Wordpress theme that includes bootstrap, so the site is responsive to mobile devices. There weren’t a lot of responsive themes out then when they did it but I have to imagine there are some now that you could modify.

#8

Though 1257’s site is essentially a “stuffed site”, we went from Wordpress (used statically) to Bootstrap & GitHub Pages.

Having your team site well presented, explaining what your team does, what FIRST & FRC are, and what you’ve done is a pretty good way to approach it from my point of view.

Plus, many teams use their site as a sponsor benefit.

http://team1257.org

#9

I was struggling when i put our site together but for now this seem to work.

Also using Wordpress with facebook and twitter functionality… ideas was to provide same info to our family not on facebook. I used the Coaches Corner for weekly stuff and link to signup or google drive as needed…

Nothing fancy, but would appreciate feedback.

http://algonacrobotics.com

Coach Seb

#10

Not bad, but just a few ideas.

  • Increase the resolution of the items in your header. Makes you look slightly more professional.
  • A lot of pages redirect to an uncategorized section. Try and make a “Content Not Added Yet” section, or a “We’re working on it!” so that people don’t think the site is broken.
  • Make the top bar clickable to go back to the main page of the site if you can.

Best of luck!

#11

I think the key is not to look for common elements of FRC sites, like you’re looking for, but good sites. Find a website you like the design of, and find a way to pull the stuff you like off! As an example, our website’s fancy homepage background is something we saw on another website and decided to put on ours. One other tip I have is to have some type of media accompanying everything on your website. An icon, a picture, anything.

Frankly, most FRC websites are not “functional” or are designed well, nowadays I see many of them serving as a place for (outdated) walls of information, or for the team’s own use. Your website is the face of your team to, inevitably, probably more people than you see and directly interact with in person. Make sure it’s for the public, not just your own team!

#12

Nice clean design, which is the current trend on sites.

https://www.smashingmagazine.com/ is a great place to read about UX best practices.

Comments on specific things on your site

The FIRST text is black in the header, which is hard to read, looking at using white.

Look at making the width smaller. The size of the header makes the right third of the body empty, so a lot of white makes it look like there isn’t much content.

If you’re using Wordpress, which I like for ease of maintenance, it’s always being hacked (directly or via a plug-in). To avoid someone hacking your site and delivering malware, keep your plug-ins/WP up to date. So check weekly.

For everyone using WP, WP Mobile Detector plugin just patched a 0-day this week that hackers used to spam porn. Please update. Here’s the details https://blog.sucuri.net/2016/06/wp-mobile-detector-vulnerability-being-exploited-in-the-wild.html