Responsive Web 2 – Week 3

Another intense week.  Although work wasn’t as busy, I had plenty of homework to keep me busy. I find the actual homework assignments valuable, but I feel they are taking time from my thesis.  I kind of wish I was presenting next semester so I could just learn this semester; I find myself rushing everything and that means remembering less in the end.

I was able to get a few major things accomplished this last week.  The two major updates that took the bulk of my time involve the Rural Goes Urban page and the Main Menu. First, the Rural Goes Urban Page was pretty much a slider and a skeleton before.  I created a javascript object and filled it with real data from the USDA and Census data that concerns the population from 1900 – 2010.  The highlighted data points are: urban population, rural population, acres in the US devoted to farms, and percent of the population working in agriculture.  When a user clicks a year, or drags the slider to over/to that year, the numbers animate to their new number using odometer.js.  This page is really close, I now need to create 4 videos that will play based on the timeline slider.  For example, the video will start showing an animation for 1900, but when a user drags the slider to 1910 the video will play to that particular point in the video.  I’m finally to the most fun part of all, animations.

The other major piece, that still looks rough, was the creation of a global Main Menu that shows every page and the structure of the entire site.  I went through two versions on this, and the second version ended up feeling too complex.  It was basically a mini version of the site with scrolling of pages, only you could see 3 pages at once.  I scrapped this and went back to a more basic, but less visually appealing menu in favor of usability.  Currently, the main menu is basically a large grid showing all the pages people can go to.  This layout is a lot to take in initially, but I feel like it’s the best way to get people around the site as needed.

Other updates this week involved planning animations and adjusting the scope of the project (planning to remove two interactive infographics).

Work in progress CSS style guide homework:  http://farmur.com/aau/rweb2/week3/style-guide/index.html

Current version of Farmur: http://farmur.com/aau/rweb2/week3/farmur.com/index.html

Version of the menu I’m NOT using (in case you’re curious): http://farmur.com/aau/rweb2/week3/Menu/index.html