Website production – Mundane appreciation

Mundane images and styles

For my website production project I decided to produce a site for the fictional “Mundane Appreciation Society Conference” a festival promoting everyday objects and situations.

For inspiration I started having a look around at all sorts of styles of site, having never touched CSS or HTML before starting the project I wanted a graphic style that would be quite simple and minimalist that would allow me some flexibility when producing graphics without taking too much time away from the technical aspect of the project. Here’s some of the places I looked at.

All of the above all share a focus on typography and simple neutral colour schemes. As I was doing a site for something mundane I decided to go with a kind of office grey scheme, san serif, gothic fonts sort of thing that reflected the subject. The problem with all of this I guess was to still make the site interesting in some way, so I had a closer look at the hydraulic fracturing site and its “below the fold” horizontal scrolling format and thought to do something along those lines.

http://dangersoffracking.com/

This would make the structure of the site a bit more interesting which I thought was kind of appropriate for a project that was more about the production of the website than loads of fancy graphics.

So I had a look at some more scrolling websites and came across the “Nike – Better World” website, that had been impressing a lot of people online.

http://www.nikebetterworld.com/

This used a parallax effect to move various page elements around as the user scrolled and I figured if I could pull off something similar it would allow me to use quite simple graphic elements and still end up with a sort of impressive site. Of course plain pages would not really work with parallax, that needs things to scroll over each other so I then started to hunt around for ideas for graphic elements that could scroll and perhaps make up some of the background images.

I started off by looking at getting some actual photos of mundane objects like cups and spoons ect but when I composited them in Photoshop with the kind of plain grey backgrounds I had made they didn’t really work that well, so I started looking at diagrams and things and eventually found the Google patents search, which turned out to be a bit of a gold mine. Here it is…

http://www.google.com/patents

Thousands and thousands of these awesome, quirky sketches and diagrams and even woodcuts going back hundreds of years. I thought it was perfect really, the idea of the site was to bring out the fantastic in everyday objects, and here was an archive of very mundane objects presented in this odd highly detailed schematic format making them look like something out of some alchemists scrapbook, also underlying the amount of work and thought that goes into something as a hair clip, or a cup and saucer.

   

I did some checking into using these images and it appears that they are covered by copywrite ONLY until the patent is granted, after which they pass into the public domain. It’s a bit of a grey area but pretty much ok especially for a college project and very unlikely to provoke legal action so…bonus.

As for the structure of the site we had to produce only between 3 and 5 pages, so I thought I’d produce a site with similar content to a festival site would work with a home page/intro page, sign up/form page, venue description and line up. We had to produce a site with both links to same page anchors and to other pages, with the parallax idea all the pages are really just one extremely long page that is scrolled down to, so I would have to have one page separate from the index. The form, sign/up page seemed suitable for this.

The parallax effect

I started looking early on into the project into ways to mimic the parallax effect on the Nike site. At this time I had pretty much zero knowledge of putting a site together so if I gave it a go and it all fell down and was impossible to do I’d still have some time to try something else. I found a tutorial by a really talented guy called Ian Lunn who had produced a demo site doing the same thing and pretty much just ripped it into Dreamweaver and started reverse engineering it, replacing the images and fiddling with some of the javascript, pretty much trial and error.

Here’s the demo site from Ian Lunn

At the time I used the original site Ian had produced which wasn’t structured as a plugin and got pretty much halfway through a site before coming up against problems with stuttering and all sorts of structural issues. My fault entirely, I didn’t know at the time what a plugin was, how you linked to it or anything so had really bitten off more than I could chew. I went back did some reading and tried again with the new plugin Ian had produced which simplified everything to a certain degree.

Ian’s method uses the local scroll, smooth scroll Jquery plugins along with his own to produce the scrolling between page elements. Additionally for optimisation purposes it uses the in view event plugin to check whether an item is visible before applying the scroll effect so the browser doesn’t waste effort scrolling things that cant be seen.

The structure of the site is basically a series of large divs set underneath each other which make up the “pages” within these are seperate divs used to center and align the content that goes within them. The navigation, kept in place by the scroll to plugin then links to these divs. Here’s the HTML for the “third” page in my site as an example.

<div id=”third”>
<div id=”arrow”></div>
<div id=”hills”></div>
<div id=”buildings”></div>
<div class=”story”>
<div class=”float-left”>
<h2>Where can you see it?</h2>
<p>The Mundane appreciation Society Conference this year will be held amongst the drab surroundings of the Business and trade offices above the Original Factory Shop at 21b the High Street Shoreham by Sea. The nearest train station is Shoreham by sea a unremarkable 10 minutes walk away and the area is serviced by the somewhat familiar and reliable 700 and 2a bus routes. Maps and further directions can be found <a href=”#”>here.</a></p>
</div>
<div id=”signup”><a href=”formpage2.html” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(‘Image26′,”,’images/sign-up-badgeBig.png’,1)”><img src=”images/sign-up-badge.png” name=”Image26″ border=”0″></a></div>
</div>
<!–.story–>
</div> <!–#third–>

Here the “Third” Div is the page itself that is scrolled down to, the background for this is the base layer of the page. Within it is the .story class div that centers content within the browser using margin:0 auto in the CSS. Within that is the class float-left that applies formatting for any content on that side of the screen. The other absolutely positioned Div id’s are for transparent PNG’s that layer over the background and can be manipulated by the plugin to scroll at different speeds relative to the vertical scroll giving the parallax effect.

The plugin reduces the headache of the javascript controlling the scrolling of an element down into a single line in the header. Here you just have to name your div id as linked to the plugin and set some parameters for its behaviour.

$(‘#third’).parallax(“50%”, 2750, 0.1, true);

The “50%” here is the elements x position, 2750 is the y position to start the scroll from in pixels and the 0.1 is the speed the element scrolls relative to the vertical scroll. The final parameter is whether the in view plugin uses its outerHeight option to determine whether something is visible.

Fudging it together

As the pages would have main navigation set vertically on the right hand side I thought I could sort of downplay the whole header thing and have it as a parallax element that sort of drops down subtly as the page scrolls. I made a transparent PNG for it with some text, drop-shadowed up to give it a sort of letterpress effect. The backgrounds for the pages were all different shades of grey with slight gradients on them to keep things interesting and I hoped the header would sort of look like it was punched out of the background when it came to rest.

The backgrounds I made were all extremely wide about 1900×1000 pixels to accommodate different screen sizes, I enlarged some of the images from Google patents right up to make them a bit mare abstract and faded the opacity down a lot to stop them being too obtrusive, the fade would also hopefully provide a sort of atmospheric perspective for the bolder images scrolling on top;

  

I then made a number of transparent PNG’s to layer over the top and apply the parallax effect to.

 

Positioning these elements took quite a bit of fudging as there’s a relationship between the Y position of an element its size and the rate at which it scrolls, as the parallax script seems take the browser window size as one of its parameters when positioning elements there also has to be a bit of flexibility for different sized screens (which I found out to my dismay after making an entire page before previewing it on my second monitor) doh.

for the venue page I decided to try and change things up a bit and use a landscape image to show off the parallax effect a little. The landscape is a composite of three layers, a background sky, a hills layer and a panoramic shot of Shoreham high street I went out and shot with my camera. I then effected these up in Photoshop using poster edge to varying degrees and layered them up using the parallax plugin. I tried out various z-index values for  page elements to try and get them top rise up from behind different bits of the scenery.

  

Images and fade woes.

For the second page of my site I wanted a kind of image grid that would at first be in the same graphic style as the rest of the page and then reveal the speakers at the conference in thumbnails on rollover. I set up a 4 x 4 table within a containing div, made divs for each cell and made 140px x 140px background images for them. These were again transparent PNG’s with masked out vignette style backgrounds at low opacity.

Originally I wanted a sort of flip transition effect like one of those memory card games and had a look at the JQuery flip plugin but it all got a bit complicated quite quickly and I decided to try and use Dreamweaver’s Spry “Fade/Appear” effect to provide a fade transition instead. The problem I ran into here was that although I could get a mouseover appear effect and a fade on mouseout I couldn’t work out how to get the script to check whether an animation was in progress before applying the effect meaning that whenever I quickly moved over the cells the contents would flicker quickly between 100 percent and 0 percent opacity. I had a good look on the web and saw some solutions using Javascript that had two images, one within an absolutely positioned div, on top of another div containing an image, but the problem I had with that was the fact that the top image was a transparent PNG and would reveal the contents of the div beneath it. Eventually I ended up using this.

$(document).ready(function(){

$(“img.a”).hover(
function() {
$(this).stop().animate({“opacity”: “1”}, “slow”);
},
function() {
$(this).stop().animate({“opacity”: “0”}, “slow”);
});

Which was a lot simpler than the reams of code the spry version was adding in-line and avoided the opacity skipping. I could continue to use the transparent PNG’s for backgrounds and just apply this script to the top image that would have a class “a”, it would then check for the hover state and immediately stop and reverse the opacity increase if the cursor left the image rather than jumping straight to 100 percent opacity and applying a fade. Handily I could also used the same code snippet on the navigation, using higher opacity versions of the link images with a bit of glow for rollovers.

I did however, end up using Dreamweaver’s behaviours panel for changing the contents of a div on the page that had a sub heading and a small paragraph on the speakers as they were highlighted. I didn’t need a fade transition for the text so it was quite a lot easier and I used the “change contents of Div” behaviour to display and remove content. Which actually still added a hell of a lot of code as you can see below

<td><div id=”headNine” onMouseOver=”MM_setTextOfLayer(‘headContent’,”,’&lt;h3&gt;Ben Slade&lt;/h3&gt;\n&lt;p&gt;Journalist and investigative reporter Ben Slade treats the MASC to a series of cutting edge multimedia presentations on the some of the most important global issues facing the world today including &quot;Lightswitches for rooms that are not acually in the room the light they are controlling is in&quot; and &quot;Incorrect things to have in your car&quot;.&lt;/p&gt;’)” onMouseOut=”MM_setTextOfLayer(‘headContent’,”,”)”><a href=”popup images/HeadNine.jpg”><imgsrc=”images/headNineThumb.jpg” width=”140″ height=”140″></a></div></td>

After this I added the lightview plugin to provide a “lightbox” effect when the rollover images were clicked. I tried out about 4-5 different lightbox plugins before settling on lightview, some of them seemed to have problems conflicting with some of the scripts already running on the page and lightview was pretty simple to set up, just adding a class to to the linked pop up images.

Forms and links

The form page was made using an embedded Wufoo template and by reproducing the header and footer elements from the main page. I had a bit of a problem with this separate page as it scrolled but didn’t have the same amount of “page divs” as the index. The navigation would then have to change to reflect this, at first I tried keeping the navigation the same but adding up and down arrows for top and bottom. This sort of worked but threw up a few more problems, firstly the user could be on the “contact” footer section of the form page and navigate to the same footer but on the index, which looked ugly additionally when the user navigated back to the index the javascript affecting the position of the parallax elements would not be called until the page scrolled meaning that page elements would be out of position. I had a look at a few other sites to see how they got around this

http://www.smokeybones.com/

for example navigates back to the top “home” section and then initiates a scroll to wherever the user has navigated to. Try as I might I couldn’t work out how they did this so I did the next best thing and simply reduced the navigation to top and bottom arrows and a home link. It’s a bit of a compromise really stemming from my own lack of knowledge and it would have been preferable really to keep the navigation consistent across all the pages in the site.

Final thoughts and criticisms

OK so what worked and what didn’t? Well if I had to do the site over I think the first thing I would change would be the colour scheme. Going monotone sidestepped a lot of awkward design choices and gave me more time to fiddle with the actual code but it’s not really the most interesting thing in the world. The idea I suppose was to promote mundane things as interesting and the grey scheme just makes them all seem a bit…well boring. While developing the site I had a few more ideas that would also work like formatting the page like an IKEA catalogue with information scrolling in like that famous scene out of fight club, that would work, or just having more solid colour imagery in there. The whole image grid thing worked out pretty well I think although perhaps I’d like to make it a bit more flash. The form page posed a few problems and for that I’d really like to work out how to navigate back to the home page and then scroll, to keep the navigation the same across the whole site. Another option of course would be to include the whole site in one page and not have links between pages at all.

The use of parallax elements could also be improved, one thing I’d like to try would be to extend the length of the div’s so you get these really long scrolls to each “page” you could have lots elements that pass by as you move from page to page as seen in some of these much more accomplished efforts,

http://unfold.no/#/home

http://www.beautifulexplorer.com/main.html?skip=1

Those diagonal elements in the Unfold site are pretty sweet too. I guess if you were doing longer scrolls you’d have to muck around with the scroll to script to stop it speeding up too much as well which is currently beyond me 🙂 Perhaps the biggest problem with the site I’ve made is that its just a mess. Optimised in any form it isn’t. I’ve got scripts all over the place referencing 3 different Jquery versions, lots of images probably loads of redundant code and the way I’ve managed the CSS could have probably been a lot smarter as I’ve got lots of small fiddly selectors in there like

#fifth .story .float-left h2{}

to change things like font colour when perhaps I could have thought about it more at the start and had less in the way of that sort of thing. Another thing I only found out roughly halfway through the project is that everything looks different depending on the size of the screen, so on my 1280 x 1024 screen everything looks pretty good, on my 1600 x 900 its bearable…god knows what its going to look on a 600 x 800 screen or something…similarly a massive 1792 x 1344 monitor might not do it any favours. Also zooming in or out completely breaks it…completely. The scrolling breaks and the site looks terrible (so don’t do it :). As far as browsers are concerned Chrome and Firefox are fine safari works. I had to add

<!–[if IE]><script src=”scripts/excanvas.js”></script><![endif]–>

in there to get pretty much anything working in explorer and that’s only if you enable scripts. But it sort of degrades quite well if you don’t although the placement of a lot of things is a bit messed up. I blame Microsoft.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s