Coding update 2

So this card this has been tricky. There is probably a much more efficient way of doing it but they way I have managed has given me a ludicrous amount of javascript code... but it does work! 

The side navigation bar has proved to be really tricky but that too has been sorted and works smoothly as well. I have started on the responsiveness and that is going well also. Looking good!

Sadly, I'm starting to run out of  time at this point, so I may not be able to complete my site to the level I would like. 

Coding update

So coding is well underway now and I've just got a few screenshots to show whats been taking up my time.

Initially I had trouble getting the image to resize with the page properly without stretching, once I got that done, I had to figure out how to get them to scroll.

Above you can see the output showing the browser size changing in realtime and displaying itself in the console.

This is halfway through a movie slide transition...

...slide transition completed.

While this is working, at the moment it gives a swipe effect - I am aiming for each movie page to slide up as if it were a card.

SiteMap

Design Process

While thinking about a topic for what I wanted to make a responsive website on I also wanted to watch a movie. I went to see what was playing, and realised how poor the responsiveness and general usability of both the flicks.co.nz and the eventcinemas.co.nz websites were, so I thought I would remake the Event Cinemas site to put more of an emphasis on the movies and hopefully make it more of an interactive and generally pleasant experience to find a movie to watch.

Here is a rough plan drawing for the desktop site:

And the following is how I imagine it would resize to the mobile site.

After this I made a mockup on Photoshop. Below are screenshots documenting the process.

And here is the finished layout mockup for the now showing page:

Then I moved on to mock up the cinema information page. I struggled to find a place the worked for the map so I experimented many times with its positioning.

Giving it a black box shadow helped it to stand out from the background alot. This is the design I settled on.

With that it's time to get even more stuck into the coding side!

some inspirations

I love the infinite scrolling aspect of many cool websites seen these days. Here are some examples:

http://www.soleilnoir.net/believein/#/start

http://www.bagigia.com/

My goal is to make a quite intuitive site.

Class excecise - JSON