Category Archives: Responsive Web 2

Responsive Web 2 – Week 12

This week was Thanksgiving, and I was hoping to get through more than I did. I was able to fill in all sources and extra recommended readings throughout the site, as well as write the javascript to gather all the sources and put them in the last section.  Although the modals and final pages need some design help, most of the content should be in there.

Lastly, this week I finally finished editing my book.  I need to add in some images to the proof of concept section, but it’s nearly finished. I should be able to post a finished book next week.

Most recent version of Farmur: http://farmur.com/aau/rweb2/week12/

Responsive Web 2 – Week 11

This week saw less progress, but it was focused on getting a particular section functioning properly.  The Rural Population Goes Urban timeline now “works” but the animation is created by constantly loading and unloading data.  This is highly inefficient, and needs to be reconsidered, but it functions.

Another section I have been working on is the last page with four tabs on it.  Right now the scrolling behavior is broken and I’m not sure what the best approach is to fixing it.  Where you should be able to scroll content, the pages move up or down.  I need to fins a way to turn off the page change on scroll just on this page.

You can see the most recent version of Farmur here: http://farmur.com/aau/rweb2/week11/

Responsive Web 2 – Week 10

Lots of polishing this week.  I spent a good amount of time working on creating a unified user interface and building components that are useable throughout the site. One major thing that has been bugging me for months is the inconsistent icon UI elements spread out throughout Farmur. I spent a lot of time creating one icon font file and replacing old styles and reformatting for the iconography.  Chnages included: arrows, a main menu icon, a close button, a more information “i” and many others.

The navigation is now much more aware of how it’s being viewed and proper placement.  For example, on pages with side page navigation, the bottom dot navigation slides up whenever you enter the last page, and goes back down when you leave the page.  This allows the down button to not interfere with the navigation dots.  Hovering over the down button makes the dots fade out so the button expands without layering under the dots. Other improvements include the main navigation dots along the left hand side.  On the home page, they are collapsed to keep the design simple, but expand when a user comes nearby or goes past the home page. Also, the “more information” button dissappears when you are in the last About/Further Readings/Share/Data Sources pages, since this information leads you here.

As for back-end issues, the main menu bottom four buttons are now linking properly.  Before they didn’t work, but I was able to connect them properly. Also, the modal windows load a blurb, links, readings based on the page the user is on.  The “Plan Your Garden” page now links to the proper tutorial modal—now I just need tutorials.

The last major change and update was to the Corporate Consolidation Page. I had cut this page from my development plan a few weeks back thinking I wouldn’t have the time to get to it.  However, this week I built it.  It’s fully functional and allows users to spin the knob, type in a number, or skip guessing by tapping the down arrow.  This is a significant piece and will help bolster my thesis as a truly “interactive” piece. I’m really happy that I was able to get this working, it represents a big task off my list.

Lots of work this week—you can view the most recent version here: http://farmur.com/aau/rweb2/week10/index.html

Responsive Web 2 – Week 8

Over the past week I worked on copy throughout Farmur.  Most main pages now tell part of the story and explain what in the world people are looking at.  It still needs an editing pass, but the main themes for each page are there.

Another great thing that happened this week was learning my final review date.  I’ve been stressing that it could possibly be in two weeks, but it turns out my review will be on one of the last days anyone can present, 12/16/14.  It’s been a huge relief to know I can revise my timeline and move forward with this extra time.  If there’s one thing AAU should immediately improve upon, it’s the promptness of letting students know when they will present.

This week I’m hoping to review my timeline and status and revise my timeline to fit the new schedule.  I may have some time for animations after all.  Currently, I’m scheduled to take off three days from work this week to work on thesis, but this was before I knew my date.  I may adjust the amount of time off, or shift it back a week or two.

Current Farmur site:  http://farmur.com/aau/rweb2/week8/index.html

Responsive Web 2 – Week 7

Not a lot to report on the coding front, but I was able to complete 90-95% of my final thesis presentation.  I also move forward with my final thesis book.  The book is not done enough too show, but I’m including a PDF version of my presentation below.  I have worked extremely hard to bring my old content into my new design, as well as updating the relevant content where necessary.

Final Presentation v3

Responsive Web 2 – Week 6

This week I spent all my time working on my final thesis book.  I realized once jumping on this project just how large it’s going to be.  So far I’ve created 100 pages with around 20% filled.  I also realized that I’m going to need to take time off from work in the coming weeks if I want to be on track.  When AAU emailed me today and reminded me that I would have to post my content 2 weeks prior to presentation, I have to admit I freaked a bit. It feels like I just lost two weeks when I was hoping I could gain a few with a late presentation date.  Basically, I have two weeks now to be ready to go.

Responsive Web 2 – Week 5

This week involved organizing files, updating plugins and building of pages.  A longstanding to-do item has been to remove all CSS and javascript from my HTML file into separate files.  I was able to accomplish this, and update all external libraries/code along the way.

I also focused on two pages in particular: Plan Your Garden Page and the History of Urban Farming.  On the Plan Your Garden Page, I worked on creating the skeleton for future content.  Right now it looks a bit silly, and it’s missing all real content, but the basic form of the page is taking shape.  The other page I spent my time on was History of Urban Farming, and it basically involved me creating a few timeline items that animate in or out with a simple click. Finally, on the page development side.  I swapped all my logos with SVG’s.

Lastly, I created a spreadsheet with all of my tasks prioritizes.  I have started to move needs into a version 1 and a version 2.  Most of my tasks are still version 1, but I feel pretty good about the plan to complete certain later on.

  1. Most Recent Version of Farmur: http://www.farmur.com/aau/rweb2/week5/index.html
  2. Updated Timeline: http://farmur.com/aau/rweb2/week5/teater_mark_m4_timeline.pdf

Responsive Web 2 – Week 4

This week was focused on behind the scenes issues and structure.  I worked on the main menu and kept trying to figure out a way to simplify the concept.  Right now it looks a bit overwhelming when you first open it.  Here’s what it currently looks like: Screenshot 2014-10-06 08.52.29

I would love to find a way that makes this seem more intuitive, but I haven’t figured it out yet.

Another thing I worked on was making the home page video work properly.  For a long time, the button triggered a really messed up version of my main video.  I added in a  plugin called Nivo-Lightbox that allows the video to load in the center of the screen responsively.

  1. Current Farmur site: http://www.farmur.com/aau/rweb2/week4/index.html
  2. Current Style Guide: http://www.farmur.com/aau/rweb2/week4/style.html

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