This last week I focused on navigating the site as well as continuing to build new pages.  For a long time my site has been somewhat of a guessing game as to where to go next and what flow is correct.  The way I solved this issue is by adding a small orange button with an arrow in it that points to the way a user should go next.  The user can either click that directly or use a swipe gesture to move forward.  This has been planned for a while, but it’s only been recently that I felt it was necessary to help guide the users—before now, there wasn’t much of a story for the user to follow.  I also worked on my navigation animations and styled the main nav so that you can see the text over white backgrounds.  For a while the side page navigation just floated over everything and was rather hard to see on light/white backgrounds.  I fixed this by adding a green background.

Lastly, I worked on a few pages (“Corporate Pollution,” and “Yearly Livestock”).  I also created the page, “Average family Savings.”  I removed a title section from the pages, “Benefits of Urban Farming”, and “Types of Urban Farms.”

Latest version: http://goo.gl/Xrl6b4

This week has been spent on building two new pages: Benefits of Urban Farming & Types of Urban Farms.  Both have a similar structure, but one requires centering images, while the other involves spreading images across the background.  Both pages have hover boxes that enable the user to see more information about each box.

I plan on adjusting the text a lot more, but I’m still trying to sort out a few details with the design before I mess with the text.

Most Current Version: http://goo.gl/PPUhlb

This last week has been a struggle to make much progress.  I have a GLA class that is taking all my time for a group project.  What I have been able to complete has to do with rearranging pages, building new ones, and adding an overlay when they front page video play button is pressed.

I have been thinking about how the web site is arranged, and based on my illustrations, it made sense to move “Rural Population Goes Urban,” Consolidation & Pollution,” and “Yearly Livestock” next to each other instead on top of each other.  This way the long road continues all the way through the screen until it reaches the toxic waste area infographic. I also have been creating the background images for the two pages, “Consolidation & Pollution” and “Rural Population Goes Urban.”

Lastly, on the home page, clicking on the “Watch A Video” button will trigger an overlay where the video will load into and play.  There are currently some extra controls that will not be in the final design.

Most recent version of the website: http://goo.gl/xMRdzp

This week I got sick with the flu, so I didn’t make the progress I was hoping.  However, I did get half of the calculator working.  When you add and remove people the amounts add up properly.  Just a lot of trial and error involved in this process.  Researching the options and trying to narrow in on what my particular need is.

You can see the latest version here.  And you can see the data I’m working with below:

Family Garden Planning Guide

I’ve spent a lot of time this week producing the calculator (estimation) page.  This page is way more complex than I originally thought it would be, and has required lots of thinking.  Not only is it a responsive nightmare, the underlying javascript that makes it work is way above anything I’ve ever tackled before.  I’ve had to do a lot of planning and building of tiny components.  All these tiny components will hopefully unite into one big working function in the end.  One of the most complex issues I have had is dynamically inserting and removing “people” and “vegetables” as the user needs them.  The way I finally decided on building this was to use a library called Masonry.js.  This library allows dynamic insertion and removal of predefined blocks of code.  I had to build a function that allows a user to click specific buttons to remove items, since the default is making the whole item clickable.  After I get further along in this process I’ll do a more involved description of my process.

The most recent version is available here.

A lot of my work this last week had to do with coding javascript and building a few new pages.  I built two pages: Rural Population Goes Urban & Top Four Firm Consolidation.  These two pages aren’t complete yet, but they are in progress.  The next big thing I worked on this week is building two javascript functions.  The first has to do with telling the current slide and the previous slide.  I will need this information later on to tell the computer which animations to trigger. The last javascript function I have been trying to piece together has to do with the calculator I’m building.  This is a rather large undertaking and is proving to be quite the challenge.  I have only been able to start narrowing down what pieces will be needed, and haven’t actually started coding it yet.

The most recent version of the site is here.

This week was a big week, but it doesn’t actually look much different.  I completely changed the library that runs each slide and began getting ready to change how the user interacts with the design.  I am now using swiper.js to control movement to and from each new page.  This library allows me to move up & down but also left and right while maintaining a manageable navigation structure.  What is great about this new system is that it is very mobile friendly, and the mouse can now act like a finger to move around.  Additionally, I am able to move the user through a story in all different directions instead of a traditional down motion.  I spent a lot of time this week testing out how to move between pages with navigation and how to jump to specific pages.  You can test jumping to specific pages by tapping the “Farmur” logo in the top left while on any other page than on home.

Another cool thing I have started learning this week is GSAP (GreenSock Animation Platform).  This platform gets amazing speed when animating, and it supports many older browsers.  The biggest feature that lead me to GSAP is that it uses “requestAnimationFrame.”  This function is built to call animations even in mid animation, allowing for smooth transitions.  This function also shuts animations down when the browser tab isn’t being looked at (saving energy), and can run around 60 fps right in your browser!  I will be using this library to animate the transitions from page to page.  There is a “timeline” playhead option too that I will use to create two of my interactive infographics.

I worked on getting animations working this week too.  I refined the menu animation and added a subtle movement when a user hovers, this may be removed later though.  Another thing I worked on was the main header animation when the section changes.  Before it would fade, then snap to the right size.  Now it fades then animates the width change.

Here is the current version of the site: http://goo.gl/kDPFzk

Midterm Presentation Responsive Web

This week found me focused on the resizing of text over images.  The problem I have been having is that my text is supposed to sit on my images and resize with it.  When I get the size right, the text doesn’t resize with the browser.  Here’s an example of the original version, before my solution.  The issue could be solved by creating lots of media queries, but this means a lot of extra code and a lot of visual “jumps” when as the user resizes.  My solution meant that I used a unit called, “vh.”  Here’s an example of my solution (go ahead and resize the browser).  Here’s an example of the code I used:

#home div.overlay-box > p {
    font-size: 1.5em;
    font-size: 2.4vh;
    margin-top: 12px; 
    margin-top: 2vh;
}

First I set the size for browsers that don’t support “vh” then I readjust the size utilizing the vh suffix.  If you’re interested in vh & vw check out this article. What vh does is calculate the viewport height and calculate that into units.  Each vh is worth 1% of the height, making my 2.4vh above equal to 2.4% of whatever the browser height is.  This allows me make the text appear to move with the image in the background.  In order to make the background image resize based on height, and to repeat along the x-axis I used the following code:

.container > #home {
    background-image: url(../img/01_bg.jpg);
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: center center;
}

The last thing I did on the site was create an animated modal window that will display more information about the pages if there is any.  Currently, the “i” in the green circle along the right hand side of the screen activates he modal.  Here’s the working example.

This week I was able to work on the navigation a bit more.  Mainly working on some small animations to show the section title when a user mouses over the dot.

One of the major things I was able to get working was the “current” title changing when a user changes sections.  This is currently accomplished with a callback utilizing the jQuery plugin “PanelSnap.”  This plugin also allows the “active” state on the menu.

The last major test I started running was with the background-image.  I’m using:

background-size: cover;

in order to have it fill the screen.  The first two images are supposed to be continuous, so I had to add:

background-position: center bottom;"

to the image in oder to the first section in order for it to be horizontally centered and resize from the bottom.  The second section needed to resize from the top, so the code for the was:

background-position: center top;"

Finally, I looked at my site on an ipad and I’m thinking I may need to rethink having “pages” instead of true scrolling.  The ipad showed the screen vibrating, which I’m assuming is due to the height calculation.  This next week may include a lot of changes.

Here is the most updated version of the site: http://goo.gl/KR3dvS

I spent a lot of this last week trying to get the navigation to update with an “active” class when the page is in view.  This class allows me to style the navigation differently than the rest when it is the focus.  The next thing I spent a bit of time on was absolute positioning and centering my content.  There are times when I will need items to “stick” to one area, while other times I will need items to adjust their size and position if the user adjusts the screen size.  I was able to accomplish centering by applying the utilizing the following CSS:

.overlay-center {
    position: absolute;
    left: 50%;
}
.overlay-box {
    background-color: rgba(255,255,255,.9);
    padding: 2em;
    margin: 2em;
    border-radius: 3px;
}
#home div > .overlay-box {
    position: relative;
    left: -50%;
    max-width: 350px;
    min-width: 250px;
    margin: 10px auto;
    height: 25%;
}

To this code:

<section id="home">
   <div class="overlay-center">
     <div class="overlay-box">
       <h4>Overlay Box Heading</h4>
       <h4 class="subheading">Overlay Box Subheading</h4>
       <p>This is some body text.</p>
     </div>
   </div>
 </section>

One problem I haven’t been able to solve yet is updating the header with the “current page.”  I have the plugin set up, but I can’t make it function completely—hopefully next week!  Here’s a live version of my progress:

http://goo.gl/rbK41q