Project 4 -Technoculture – Web 2.0 & the Mobile Web – complete re-design!

In my last post about my design progress I wrote that I just could not get the design right and felt I had a ‘designers block’, so I decided to do my research and see if I got inspired to simplify my Web 2.0 look.

Luckily, this worked! I got inspired to have a full width header and footer in one colour and a white background with some noise (done in Photoshop).
Off course I still wanted it to be slightly different and not just have a plain straight header and footer, so I decided on waves (still in the same theme as the original logo) in a nice subtle blue gradient and added some dots for bubbles and some streaks to emphasise the waves. I made the header really high for more impact and mirrored the footer, albeit with a little more height in order to have space to add the content widgets.

The biggest trouble was the logo. As I was not sure about the logo and kept changing it, I wanted it to be different, but fitting within the waves. I decided to try it without the flower and have the menu at the bottom:

But I didn’t like it for two reasons: I thought the text was too large, and the background/size of the header not wide enough. I wanted a full width header and footer, without the content being full width.. That was pretty hard to accomplish, but more on that later..
I started looking at web 2.0 sites to see how they did their logo and really liked GiftRocket, the site I used as my example Web 2.0 site in my research. Their logo is really simple and relatively small with a lot of white space. That is what I wanted! So I brought the flower back in, used the same font and colour scheme for my logo as I had done and outlined both the text and the flower in white to make it stand out. I moved the menu up in line with the top of the logo and made it the same light blue colour as the logo with a white outline, the hover being the same orange as the logo with a white outline. This way it works together much more than previously. (Although I didn’t realize initially that the flower was a different colour which I rectified later)

This was a great start, but something was not quite right yet.. So rather than center the ‘maroline’ I left-aligned the whole text maroline and and made the waves more of a ‘one swoop’ kind of thing:

That’s more like it! I am really happy with that!

Then the footer, before I re-did the wave ‘swoop’ It looked like below. I had added the widgets and used the flower to make buttons for the ‘Request a Tutorial’ and ‘Subscribe’.

It is not really legible though, so I tried changing it using slightly larger text and tried both white and blue to see which fitter better. I also changed the text for the latest tutorials to orange

The overall look is looking more like it, although I will change the buttons to a proper button as I still don’t like it and still need to do a little more positioning with the tutorial dropdown and search bar. I also don’t like the ‘bullet point’ bars down the side so I have removed them.

Now how did I do the full width header and footer without having a full width content?
Like I said, it took me a while to figure it out and I tried many things, some that worked half, some that didn’t at all!

Eventually, I found out about the new CCS3 background property, that allows multiple backgrounds. You list the backgrounds you want to use in the order you want them to overlap and set a position for each. In this case, I set a body background using in this order:

  1. The header image
  2. The footer image
  3. The background noise image

If I did it it any other order, the background noise image would overlap either the footer or header image or both.
So in my stylesheet I used the following code:

body {
background: url("/images/marolinedesign-waves-dotsies.png") repeat-x scroll left top,
url("/images/marolinedesign-waves-dotsies-footer.png") repeat-x scroll left bottom,
url("/images/noise.png") repeat scroll 0 0 transparent;

This allows my header to show at the top, my footer at the bottom (no matter how small/large the content is!) and my noise behind it, great!
I had to change a few more things in my css to allow some space for the header and footer to show, or else my content and text would show on top of it, so I put the following css in my stylesheet for the header:

/*Give header some padding on bottom to allow space for 'body-background' header image, padding on top to move menu down in line with logo*/
td#header {
padding-bottom: 320px;
padding-top: 25px;

And this for the footer:

td#footer {
background: transparent; 
height: 400px;
text-shadow: none !important; /*To undo the text shadow in the content*/

I was really happy to have achieved the result I was after and even when I started testing it on Safari and Chrome I was still happy. However when I tested it in IE I had no background at all… 🙁 I purposely keep IE8 on my computer un-updated as it is a browser that a lot of people still use (unfortunately) that does not support a lot of CSS goodies (unfortunately). Including the new CSS3 multiple background property..Bummer!!

So I did some more research and learned that I’d have to include a feallback using a separate stylesheet for IE only.

So in my head section I put the following reference to the ie only stylesheet:

 <!--&#91;if lt IE 9&#93;> <link rel="stylesheet" type="text/css" href="/ie8.css" /> <!&#91;endif&#93;-->

This allows this stylesheet to be used ONLY if the browser is lower than IE9 (‘lt’ means ‘lower than’)

and in that stylesheet I have put:

body {
background: url("/images/marolinedesign-waves-dotsies.png") repeat-x scroll left top !important;
background:url('/images/marolinedesign-waves-dotsies-footer.png') repeat-x scroll left bottom !important;
z-index: 2 !important;

The reason I’ve put the footer image in the html is because I cannot place two images in the body in IE, it does not accept it and will show neither.

In this case in IE8 or lower it will not show any noise either as I could not add that anywhere. Nor does it show an outline for my menu text, text shadow in my content text, rounded corners, or the ‘peel’ shadow effect on the blog page as these are all elements not support by IE8 and below.

I am ok with that though as in all other browsers and IE9 it looks great and there is enough styling for IE8 to still look OK:

Full screenshot of Internet Explorer 8

Now I need to work on the About and Home pages, then a mobile version of this website, so still lots to do!!!

PS have a look at the real thing in progress

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>