Website for the 2014 SGA Presidential Election at the University of Central Florida
Introduction: This is a website that was created by AJ Foster for one of the 2014 UCF SGA Presidential candidates. Because previous campaign websites are often used as starting points for each year's campaign, I elected to make this site's code public in the spirit of the web community. Most of the files in this project have been lightly commented.
License: You are free to look through the code (obviously, since it is posted here) and use it as a reference. You may not use the site's code in its entirety. It would be extremely nice to leave a comment in your site's header lending credit if this repository was helpful.
Trying it Out: If you'd like to run these files on your own, use git clone (...) with the link to the right, or download the project as a .zip folder. Because compiled assets (i.e. the actual HTML, CSS, and JS files) are difficult to manage with git, they have been ommitted from this project. In order to generate those files, follow these steps:
- Do you have Node.js installed on your system? If not, check out the Node.js website and install it.
- Do you have Gulp installed? If not, run
npm install -g gulpin your Mac / Linux Terminal. - Do you have Haml / Sass installed? If not, run
gem install haml sassin your terminal. - Also in your terminal,
cdto the JessicaLuck2014 project directory. Runnpm installto install all of the necessary packages for building / compiling the site. - Run
gulp deployto generate all of the site's files. You're done!
Technical Details: This site has several moving parts:
- Gulp (a JavaScript task runner, like Grunt) compiles the site's assets. See
Gulpfile.jsfor more commentary. - Haml is a language that compiles into HTML.
- Sass is a language that compiles into CSS.
- CoffeeScript is a language that compiles into Javascript.
- Bourbon and Neat are complementary frameworks that make site layouts very easy.
- HTML5 Shiv and Selectivizr fix Internet Explorer... at least they try.
Analytics: Here's a quick snapshot of the site's usage during the campaign period.
- 1,116 Visitors
- Highest traffic: 1 day after launch, and during the election days (~150 / day)
- Highest times: 2pm and 9pm
- 70% Desktop, 25% Mobile, 5% Tablet
- 43% Direct Traffic, 42% Referred from Social Media, 13% Organic Search
Design: The layout of the site is very simple, which is good considering how difficult it is to encourage educated voting. As a whole, the site is quite plain. Given that (without the video) the site used 9 requests and less than 400kb of bandwidth, we certainly could have afforded to add decorative elements (background images, for example). While the expansive bios / involvement / platform makes for good reading to someone who cares, we should have focused on the majority of voters who simply don't - easily accessible highlights from each of those sections would have been preferable to most visitors.
Usage: Having a section to highlight supporters is a good idea, but it didn't work within the small timeframe of the election. It all depends, of course, on how many people offer their photo.
Maintenance: Using Sass / Haml like this is great for rapid prototyping and quick deployment. Unfortunately, you as the web developer are committing yourself to making all necessary changes to the site throughout the process. Whereas something like Wordpress would allow the candidates to tweak the site's text to their heart's content, Haml is strictly developer-friendly. Keep this in mind when you budget time for the project.
If you have any questions, please feel free to open an issue or contact me directly.