Digitally Refreshing

The newly branded PruHealth website, in conjunction with a product launch went live yesterday.

The PruHealth brand went through a subtle colour restructure and evolution. I wanted to carry this through to our online space, which was used to reflect different areas of the business: Individuals, Employers, Advisers and Providers.

Taking advantage of some of the simple look and feel benefits of CSS3, I was able to add rounded borders with much less HTML than I was using before. The site works as it should in all modern browsers, and degrades gracefully for IE6. Where possible I’ve added IE6, 7 and 8 specific styles to mimic other styles such as CSS3 gradients.

I created a site for my photography called matthewbowden.com, if you’re using Firefox 3.5 or Safari you’ll see the wonders of the CSS3 @font-face rule. More browsers need to step up, come on Chrome!

I also make use of PNGs (this is old news though) so I can swap out my background image easily.

I can’t take credit for the workings of the POP-ups though, this is all down to Highslide JS. Highslide was great for usability but not so for Google Analytics. I won’t bore you with the details here but I struggled to get the onClick tracking for the thumbnails. So have resorted to using onmouseup to track clicks and onclick to launch the POP-ups. It’s not ideal as I still need to work out how to track when someone uses the left / right controlls. But the way it’s set up now I can tell that the image I’ve used at the top of this post is the most popular.

Next step, get random background images to load up behind the thumbnails.

Headings, margins and paragraphs behave differently in IE7 and Firefox 2 depending on how you set up your style sheets. You can see this illustrated when you compare the same page in the two different browsers.

The page below has no styling and contains only heading 1, heading 2 and paragraphs tags.

You can see (above) how the font sizes are pretty much the same, but the spacing above and below the headings and paragraphs differ.

Things become a little clearer (and more bizarre) as you begin to add styling to your page. Below I’ve added font family and size, margin and padding attributes to the body class.

Now look at the results below.

You can see (above) the heading sizes are wildly different and the spacing between all the elements still differ.

Next I’ll reset the margins on all headings (1 and 2 in this case) and specify their font sizes

See the results below

You can see we’re getting there, but there still seems to be too much margin around the paragraphs in IE. So I’ll reset the margins on all paragraph tags using the following code

See the results below

Perfect! So if you want your content to look the same in Firefox 2 and IE7 then remember to reset the margins and font-sizes on all your paragraphs and headings. Obviously you don’t have to use the values I specified here, you can make your headings as large or as small as you like!

Have you ever found that no matter how many hours you pour into your site it’s always a few days from completion? As I sit here I can’t help wondering what this page would look like with heading images and differently styles tabs.

Maybe I’ll just keep editing it, after all that’s what the web’s about.

I’ve been in Australia for the past month, so it seemed apt that I use my Sydney harbour photograph as the new header. This image is actually made up of 6 photographs all stitched together. On the right is the Sydney Opera House and to the left, Sydney itself. In the centre of the image is, of course, the Sydney Harbour Bridge.

You’ll notice that when the page is reduced to 800×600 the header image still works, this is because it’s a background within a DIV.

I have many more images which I’m currently submitting to iStockphoto, Dreamstime and Fotolia in order to sell. My favourite photographs turned out to be of my sister’s, wedding. Overlooking palm beach you can hardly go wrong when taking a few snaps. I’ll be posting a few more on this site soon.

Who says lists are boring? Well, mine are for the time being, as they’ve only been mildly styled with the help of CSS techniques I’ve learnt over the years. Here are a couple of my favourite list styling tutorials:

• alistapart
• cssplay

The CSSplay page has dozens of real examples – a great list styling tutorial resource.

Most websites need a navigation system, something consistent. Mine certainly does and before today you would have had to scroll to the bottom of the home page to see it. I figured we’d have it above the fold so that visitors on the most common screen resolutions could see it. Placing it to the left also helps as this is where visitors typically look when they want to navigate around a website.

So, how did I do it?

I created a container which holds the content, the navigation and the right hand content and styled with the relative CSS attribute. Then I absolute positioned the navigation and the right hand content within the container and gave the content huge padding on the left and right hand sides so that the content elements don’t overlap.

To get the running background emphasizing the three column layout was a case of adding a very, very thick right and left border to the container. Then it was just a case of negatively re-positioning the navigation and right hand content elements to pull them back over the extra wide container (extra wide because now it has a very very think border).

Here’s the CSS:

As for the 100% width, well that had to go. I’ve opted for the max-width solution (1024) offered by most browsers and a max-width workaround for IE.

I also wanted a min-width so I hacked Sven’s solution and made it work in reverse. Added a couple of DIVs around my page and hey presto I’ve got a max, mix-width solution

Here’s the CSS:

#max {
margin:auto;
max-width:980px;
width:expression(document.body.clientWidth greaterThanSign 980? “980px”: “auto” );
}
#min {
min-width:770px;
width:expression(document.body.clientWidth lessThanSign 770? “760px”: “auto” );
}

Sorry about the greaterThanSign etc. in the code. WordPress doesn’t seem to convert the HTML into the corrent character and the page is failing the accessibility check.

Not me. I’m going for Trebuchet. Besides, it looks sexier on the screen. Also, how about those massive links within heading, let’s get rid of the underline – I think it’s clear they’re linked to the relevant story.

Pixel Juice will now be called Digitally Refreshing. The pixeljuice.co.za domain will still be alive for a while yet and will point to this website – but I felt it was time for a brand evolution.

Digitally Refreshing far better describes what we do here, which is building digitally refreshing websites!

Now comes the hard bit – the big redesign! I’ve decided to proceed in a way that I’ve never tried before. Why begin with an image typically created in Photoshop, why not just jump straight into the CSS and design from the code up?

Check back for my daily progress. And along the way I’ll make sure to share all the CSS secrets and unwritten rules I find…

Aloe Nursery needed a one page, quick win result. We were able to quickly understand customer requirements, design and implement a one page site for Aloe Nursery.

“The site will grow in time, but for now I just need a simple, effective and attractive presence” – Owner.

We feel we have met the objectives laid out by Aloe Nursery. Take a look for yourself, and while you’re over there order some aloes for your garden!