Digitally Refreshing

We all know YouTube; I’ve been impartial to it up until very recently, when I discovered that there are hundreds of guitar lessons all at the click of a mouse. Just another example of how people are willing to give up their time and money to share their knowledge with others.

Now I can play Last Kiss, by Pearl Jam and it’s all thanks to this man from the TheNextLevelGuitar.

I decided to become an avid supporter and subscribe, easier said than done as it seems there are more Matthew Bowdens out there than I first realised. Feels like years ago when I couldn’t find the hotmail name I wanted!

Share this article

Jakob Nielsen put together ten general principles for user interface design. He calls them Usability Heuristics, you can read them below:

Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Match between system and the real world
The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

User control and freedom
Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Recognition rather than recall
Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Flexibility and efficiency of use
Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

For further reading on this subject please visit the links below:

• http://www.useit.com
• http://www.asktog.com

Share this article

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.

Share this article

A touch of colour from the original Pixel Juice website.

The design is far from finished but the greys and blues of the semi-complete style sheet were a little too bland.

I’ve moved the navigation into a tabbed structure at the top of the page, giving me more width to play with and I’ll be styling the existing left navigation area soon.

Share this article

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.

Share this article

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:

Share this article

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.

Share this article

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.

Share this article

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…

Share this article

Make sure to keep up to date with browser stats when designing for the web. Take time to check out who is using which browser and operating system. Ensure that your design will work for the most popular screen resolution and see how many web users have javaScript enabled.

See all this and more online at W3Schools

Share this article