Pig Work

Pig Work skip to main content

Weblog of Freelance Designer Steven Clark


Centre a Page with CSS (Newbie Tip)

Filed under: — 5:31 pm

Another repeat question that seems to baffle when it shouldn’t is the old - ‘how do I centre a page with CSS’? While this isn’t rocket science either its a handy little tip if you’re just thinking about transitioning to tableless layout designs.

On a page like this one I generally make a div called #pagecontainer into which the content of my page will go like a big box. In it I’ll put other boxes (well divs) like #header, #content, #nav and #footer. The hash simply means they’re an ID (and not a Class) and they only occur once on a page.

So when it comes to the CSS for this page you would simply put inside your body declaration text-align: center and then in your #pagecontainer declaration margin: 10px auto and width: 700px. What this does is ensures that in IE as well as better browsers the page is displayed as centered and has a 700px width. It will also be 10px below the top of the page due to the margin attribute.

Once again this is a very basic CSS tip but from the number of times I see it asked and the obvious number of new designers taking up CSS layouts every day it might just help someone save a half an hour.


Keeping Floats in Boxes Tip

Filed under: — 2:24 pm

Some things we take for granted but then we look at them and realise that maybe even though its written in a thousand other places it would be useful to write again. So here goes…

If you’re developing with CSS and you have a situation where
a) the floated content automatically stays in its container in IE, and
b) it doesn’t in Firefox and seems to want a height (dont’ go for height)

then you can do the following to easily keep child elements inside the box. Simply put overflow: auto in the parent elements CSS.

Its not a rocket science tip but its also not very intuitive and so warrants an occasional mention.


Good Design is Usable

Filed under: — 12:35 pm

Something comes to mind right now about an article I read via my RSS addiction (I mean feed) a few weeks ago. It was talking about graphic artists not being taught design basics and that good design was in itself usable by being well designed in the first place. For example a beatifully carved 3 legged chair you can’t sit on isn’t exactly designed well regardless of its prettiness. So that’s my thought for the day.

Good design is of its own intrinsic nature usable. Something so obvious that it needed to be repeated here…

Steven - Pig in the City

Filed under: — 9:00 am

Well I’ll be in Sydney from April 20th (a Wednesday) until April 24th (the Sunday) meeting some clients for a face to face. Its that interstate move thing that has to happen with Taswegians (that’s a Tasmanian to the rest of the world) if they want to escape the local scene at all. How do I explain web development in Tasmania? Well yes we’ve got a few larger firms that pretty much have it sown up as well as a few solid established ones and of course 20,000 freelancers that can do anything from FrontPage sites to hard core programming on the back end. I guess its how it is wherever one travels.

The issues in Tasmania in general revolve more around the larger unemployment rate though. We’ve got a state where every second person seems to have a degree in something or several certificates and diplomas. Web design in particular has been a fave of Centrelink for ‘Work for the Dole’ programs where they teach basic DreamWeaver while exploiting them by doing business sites cheaply. TAFE also pumps out a large array of designers on a six monthly basis across 3 schools and also runs multimedia and graphic arts streams… so its a little pond (whinge whinge). What we don’t have is a real lot of standards compliant developers (or people who understand these concepts).

So if you’re interested in hooking up for a beer while we’re over there (or your company is looking to take on a standards developer who is always willing to learn more) then those are the dates I’m in town.

Why should you hire me? Because I do this stuff for a passion and the other guy does it for the money. Who will make you richer?!


How To Convince the Unconvincable?

Filed under: — 8:29 pm

How do you convince a business that doesn’t want to listen when it comes to paying for market research into who exactly their site will be used by, what that user will want to do, how that user will interact with the interface and how to design that interface to best commercial (and therefore usable) effect? Well you don’t.

The bottom line is that for a business to put up a half arsed solution to skimp a grand or two then its their call. What can you do? Hold them down? Get out the big fat semantic feather?

I suppose its true that Norty Pig doesn’t court the bottom dollar and it could be interpreted that we only want the larger customers but that isn’t exactly true. While we’d like to be paid more for our time its actually not an argument about money as such, more about methodology. Say if you knew a 21 year old engineer had $4000 of disposable dollars to spend this year on your merchandise, say if you’re only one of many options for him to spend that money on, say even that he has a lot of close friends with the same demographic,

(snap goes the camera and you’ve got the picture by now)

wouldn’t you try to make your site a streamlined experience to get into his pants (well wallet)? So I don’t feel really bad missing the boat on jobs where they only want a cloned page with their face on it. Norty Pig makes pretty good pages that would’ve made them more money than otherwise. After all software engineering is about the process not just the coding stage. We aren’t ‘too good’ for anything; we just don’t make rubbish pages.

By the way we’re always in the market to strike up business relationships with exceptional quality graphic artists and designers who might be interested in freelance work down the track, not necessarily web designers as such. One of the things we’re currently lacking in-house is the graphic element even though we’re working hard to get it under our roof. So drop a line and we’ll chat maybe.


Old Blog / New Blog

Filed under: — 8:51 pm

Down with the old and up with the new as always - the old Norty Pig blog was left up as an archive but I decided a few days ago to pull it down and redirect to this one because its newer and more relevant. It was a tough choice as Google loved it (hand coded individual pages choc full of lovely Googley keyword relevant content) but for all the many visitors it had every month in archive it didn’t get many return visitors so it was time to bite the bullet and chuck it into my filing system. I’d considered laboriously entering the articles into WordPress but no thanks… martyrs all turned left at the last corridor.

Easter sees me waiting for my new PC to be assembled in the shop too with a better quality monitor. There’s always the capital outlay for software and equipment to be concerned about in small business. But yes out with the old and in with the new (at bloody last).


Shopping Cart Tardus

Filed under: — 3:20 pm

This week I did a rough assessment of an acquaintance’s website and was left with the question - when does a shopping cart become a Tardus (as in Dr Who’s preferred mode of transport)?. This was one of the most ingloriously confusing mazes of unusable nonsense.

Every page on this site had a clickable shopping cart icon that lead on a dead trail requiring either full and detailed registration or login and password and which culminated in the affirmation that my shopping cart was empty. Umm yeh I kind of knew that so why put the icon everywhere if its always going to be bloody empty? A stream that’s a blind alley wastes my valuable time and nobody wins. The cart required JavaScript to be enabled so 10% or users weren’t able to access this right off the bat.

My next bet was a link on the homepage called ’shop’ which I thought might have something to buy. Unfortunately it was just a plain old disclaimer page that explained transport and return policies for the site. I noted this was the third navigation structure I’d found so far which was another major usability issue, consistency of navigation being an important aspect for designing user interfaces.

Third choice was to enter the galleries directly. Clicking a large slow loading thumbnail brought up a larger image (using JavaScript again) which contained the link to the real e-commerce stream that I’d assumed to exist on the site. On one occasion I couldn’t work out why the images wouldn’t work because just as pop-ups steal focus and confuse they can also be stuck behind the current browser window.

The gallery stream in fact led me to the same login and registration stream as the earlier unsuccessful shopping cart icon. My back was really up at this point and it had become really unpleasant as I went further in the cart process line. For one there were no indicators that said I was at step 2 of 6, for example. In fact in the end I was dumped at a screen that simply said your order has been made and you should post a cheque or money order to the named person’s home address??? Ummm why my detailed registration? Why don’t you want my money? Why stuff me around when you could have just given me your address on the contact page without the bloody shopping cart? Why why why?

The simple truth about this site is that questions weren’t asked about what would a user do and the architecture hadn’t been considered worthy of attention. By creating simple personas and doing use-case studies its possible to identify every single one of these problems including the one about no reason to be having a shopping cart in the first place. OK I’m probably overly critical but it was a long and frustrating journey to reach a pot of tar.

The case study in question is exactly the best example I’ve seen in a long time as to why businesses shouldn’t go for the cheapest solution in town, why documentation, testing, research and sound science should go into building a website. How valuable is an unusable shopping cart? How much is it worth to not only not get business but deter customers from giving you money? From a business perspective it was just a waste of time and resources to irritate the general public (pulls out hair in ranting gagging moment of angst).

Yet if the underlying information architecture had been assessed and proper investigative background study undertaken with user and technical testing this same site owner may well be some thousands of dollars richer already and the extra work would have probably paid for itself. Money saved not installing a cart (let alone an inferior one) and thinking about the sensible naming of links may have eased my experience entirely. From home page to checkout in the shortest route was about 8 or 9 clicks with a few extra and a form to fill in if you needed to register an account (an account for what by the way? and why did they want my address, phone number and email?).

OK that’s my rant and it also relates to the expectations of businesses to get the most for the least out of web developers. Basically you get what you pay for and $500 gets you about how many hours work, thought and meetings? The whole idea is we’re supposed to make you money goosey so invest in us, trust us to do the hard yards and pay us our dues. OK here’s a challenge - if I make you money then pay me more and if I don’t make you money then pay me less. Write it into the contract. Cos that’s my job - to make us both richer.


Its the Trickle that Fills the Trough

Filed under: — 12:45 pm

Much is often blogged about the larger and more influential companies choosing a standards compliant solution and what it means to them and the web standards movement in general. I think when larger profile companies go down this road there’s a lot of hoo-ha and rightly so, it’s a big move. Its also a major job on a huge site to do an entire rebuild / redesign and often the team aren’t exactly the gurus of this methodology that live on places like css-discuss. Naturally a lot of these larger sites have trouble getting across the line of validation due to unencoded ampersands and sometimes other trivial hiccups. But all in all its a tough job and these companies hit the news for making their sites (or attempting to make them) standards compliant. Of course there’s the partially standards compliant claim that kind of baffles me but we won’t go into that one - how do you have half a cow in your dairy?

But today I really want to salute the small businesses that make the decision to have faith in another way of making sites, businesses who would probably not be able to absorb any loss if they’d made a bad decision. One such site launched locally today called Golden Moments Massage was created by Linden Langdon and shows that even on the more basic end of the local web community there’s a growing number of newer designers not settling for the WYSIWYG magic box approach to making pages. So although this one is probably small cookies in a lot of eyes out there its one of those little steps that make a journey. Its the trickle that fills the trough, after all.

Sites with valid DOCTYPES that validate in both XHTML and CSS (yes delivered as text / html) are still pretty rare commodities on the whole. So congrats to Linden and her new client on getting it off the ground.


WordPress Quicktags in 1.2.2

Filed under: — 5:36 pm

OK I’m a doofus and couldn’t work out why Quicktags weren’t showing in my WordPress admin section. Mystery solved. Now while I’ve read some deep and interesting stuff trying to work it out the answer was so unbelievably simple I think its important for everyone to pull up a chair.

You see, I use a web development toolbar like a lot of people (know now?) and one thing I do quite regularly when assessing sites is TURN JAVASCRIPT OFF.

So like a doofus with a club foot stuck in the back of my mouth the solution was low tech and simple. In fact this was a perfect example of my emotively running off to solve something that good methodical problem solving should have caught very early.

Ajax (the web’s latest flame)

Filed under: — 5:13 pm

Our personal relationship with the Web has always led to small issues becoming points of flame war legend. I’ve been personally attacked in the past for using XHTML and delivering as mime type text / html and seen some real corkers erupt over the semantic differences between an unordered and ordered list or a paragraph and something that’s not a paragraph (librarian get ye a life). So just for the sport of it and in incredulous wonder at how passionately change can inspire people to flame I thought I’d mention Ajax.

Personally I tend to either agree with Fiftyfoureleven or think its a non-issue entirely. OK so it existed before but so what? The choice we have is either use it or don’t use it. What terming it Ajax did was bring it into the front row so we could collectively look at it. So what - a new name? Am I going to run out and bonk some guy called ‘Hero Bastard’ on the head for using deed poll to change his name (OK that’s ridiculous).

I guess what I’m saying is there are bigger fish to fry than splitting hairs over chicken and egg stuff like which technology evolved into which to the nth degree. Its insane to think as well that any computer related field is going to stay the way you had it last week because you’ve become comfortable (a sign your business may be in for a wake up call too).

The idea is just that Ajax is a hell of a lot easier to remember off the top of your head. Man that’s such a basic idea. Of course calling it Ajax and all this discussion just made about a million new people aware of it overnight (OK I made up a million) so in itself that’s a good thing, too.


The Monitor Variable

Filed under: — 1:20 pm

On a general note my office computer monitor has had far better days. It was cheap, generic and needs to go to heaven. Or does it?

When I design I find walking over to my partner’s higher priced new monitor shows a different user experience (sometimes entirely). Not only do colours not always display the same there’s the differences in legibility of text and clarity of images. Occasionally I’ll go back to my work and revisit the pallette because something I perceived as subtle on mine has become overtly blatant on the better (and calibrated) monitor.

I guess the instinct here is to run off and say ditch the old one and get a newer and better model. But what about the number of users on the net with older monitors just like mine? I’m sure its not that unusual. While I’m definately getting another in the near future I think from a usability testing point of view (and accessibility in general) this old and dying gem is a useful tool as a minimum bar to get over. Develop on the newer screen and test on the old for legibility of text.

I remember reading a blog on these lines some time back but thought I’d bring it up again as its a given that not everyone has a sub-one year old monitor that isn’t budget that they use for the web.


They Return from SXSW

Filed under: — 11:54 am

Its good to see the who’s who have started returning home from the infamous SXSW in Texas (where they execute the most people for the least reason apparently). Home of the Alamo, JR Ewing and those bloody big hats. OK you can tell that I’m green to the gills for being too impoverished and not famous enough to get a trip to the United States. Well I’m not sure I’m actually allowed into the U.S. anyway so I’d better hold that wish.

I think the number of blogs that reported back on the event seemed to give a good enough coverage though. I’d only have gotten bored like Joe Clark (but without the BOOORING cardboard thing - and no apparently he never held it up to the presenters lol but that’s where urban legends get started). It was funny because the next day I read about it on one of my fave reads Overcaffeinated where Joe was summarily chastised for this rude behaviour. As a speaker I’d have been pretty pissed off with that attitude but I guess I’m not an SXSW kind of guy so I wouldn’t know.

Anyway guys welcome back to the world of sobriety and I’m sure if you’s all get mighty nostalgic about the good ol’ times in Texas you’s can get into a few games of HomeRun. All this game really needs now is for the character in the game to sing out ‘My name eez Villiam Vallace, and I vant FREEDOOOOM’.


WordPress 1.5 and Customisation

Filed under: — 3:40 pm

Initially frustration slapped me on the head with this one until I realised how simple the WordPress crew had made it (and how extendable). I’d originally customised WordPress 1.2.2 a few times (including both my blogs as well as a friend’s). So all I’d do was basically meld my already created page straight into full morph with the WordPress template and it was up and away. Then to change different PHP functionality I’d just jump into the other folders and have a bit of a play until whatever I’d envisioned came to pass.

So I installed WordPress 1.5 for a client and initially I wasn’t very impressed. I didn’t like that on the default installation the RSS links at the bottom of the page returned 404 errors. It also took me a little bit to get used to calling the new file structure. So here’s a bit of an explanation of where I went yesterday.

First I went to the forums and found that if I commented out 4 lines in the wp-blogheader.php that seemed to call the 404 by default and then changed the links on my page to normal relative URLs the RSS worked fine. The big problem here was realising that while index.php sits in the main directory the theme, and therefore its resources, sit in a folder about 5 levels down the heirarchy. So its not good enough to reference ’style.css’ but instead you need to write ‘wp-content/themes/default/style.css’ for example.

That said, I’d been looking at doing this the same way as I’d looked at version 1.2.2 which was to just take over the default page and make it my one and only prison bitch. But WordPress 1.5 has these themes you can either make, install or choose from. Its a very powerful option once you look into it. So I guess that’s the way I’ll be going on this operation…

Well I’ve only briefly covered the top ether of what customising WordPress is about but hopefully it’s enough to get someone else up and running. To create a theme by the way just copy the default folder, change its name to your theme name and edit the top of the CSS file’s comments to reflect your theme name and description.

I’ll be the first to admit it made me squirm for the first hour but when I read the documentation and visited the forum I was up to speed fast enough. Its just a new file structure and a different (better) way of looking at things.


Hunter Island Press and Harvest Supplies

Filed under: — 12:37 pm

We’re working on 4 sites here at the moment and trying to get the content together in between bouts of email regurgitation and tele-not-communication glitches. Plain text holding pages are up in the interim for 2 of these if you want a space to watch - pull up a beanbag and sit quietly for a period of time until we get us the stuff to create with - an NPO in Hobart called Hunter Island Press and a winery supplies distributor in Queensland called Harvest Supplies. Like I said they’re just text holding pages at the moment looking for Google’s love and affection.

Still working slowly on the PC4Peace redesign / rebuild in Japan although I’ve recently had a run of email mis-configurations on this end of the planet. I know they’re busy with their latest consignment of computers being sent off to Cambodia though so its not surprising with Uni commitments and everything else that they’re finding it hard at the moment. I’ve pitched a rough proposal and we need to really look closely at the logo and so forth but its coming along.

My partner has taken on a couple of sites recently and seems to be gathering interest in the Arts sector. She’s a printmaker - lindenlangdon.com and Translucent - with a B.A. in Natural Environment and Wilderness Studies and a B.F.A. with first class honours in Printmaking. She’s also doing a Certificate 4 in Website Design and another Certificate 4 in Multimedia. So while she isn’t directly Norty Pig she’s fast becoming the wave of the future here.

We’re meeting the guys from Harvest Supplies in Sydney from the 20th April to the 24th to discuss content and their parent site for IMEMS Pty Ltd. Then we’re also over to Perth in W.A. from the 18th May to the 23rd as my partner is a part of the Hatched exhibition which is displaying the best contemporary art from graduating honours students around the country. Exciting stuff.

So things are looking kind of busy on the ground (if and when content arrives to get it all moving again). Its always like full forward and full stop with these things, never a constant speed. Maybe its the way I judge my momentum and exactly why I’d never be a great speedway racer. Ah but that’s another story full of bullshit and wishful thinking. Its better just to enjoy the ride.


Some Beginner Coding Tips

Filed under: — 11:01 am

One of the first tips I can give is if you’re doing CSS layouts then either put borders or different background colours on your containers so you can see what’s pushing where because its not always obvious. Its simple and I’ve been called a ‘Duh’ but 2 seconds of putting it in can make you slap your forehead.

Document your work either internally with comments, externally or both. This will save you so much trouble when you realise last week’s pages are falling over and the form has scroll bars (don’t laugh that was me yesterday).

Get your hands dirty on the coal-face and don’t rely on WYSIWYG editors to do it all. You need to understand what the code means and how it reacts to different browsers. Try HTML Kit which is what I use or something similar. If you’re interested in Java try Eclipse.

Note that no matter what or who you do anything for you have to keep backups or previous versions if you don’t want to eventually have to go back and fix the unfixable.

If you cut and paste code (particularly with PHP in my case) either put it underneath and rewrite it by hand or paste it onto MS Notepad first and then onto your page to get rid of the invisible characters. Many a PHP line fails simply because of this.

Another PHP tip is never leave spaces before your PHP opening tag. Often simply backspacing the tag to the beginning of a line gets code working.

Do one thing at a time and then check it in several browsers. This sounds like its going to take more time than just hacking it all better at the Fantastic Code Hospital but in the long run it nearly always works out quicker to test after each change of your code.

Go to forums, good ones like Webdeveloper.com, PHP Freaks or Codewalkers. Active forums mean more likelihood of responses to your questions faster.

Use DOCTYPES and the correct validators to check your (X)HTML and CSS. Get the relevant specs for your code and keep them handy. A short list (for example of simple XHTML no-no’s) pasted to your wall will save you a lot of time.

Understand separation of content from display from behaviour (XHTML, CSS and Unobtrusive JavaScript respectively). Try not to use inline styles for example as this mixes the display within the content.

I guess that’s all I can fit in here off the top of my head while avoiding my current email issues - yet again. If you’re new to coding of any sort maybe these short tips could help you save an hour or so of work later on. Write good clean code, comment, test and be sure to backup your work. Finally, ask questions and be annoying until you get the right answers!


Never Did Hear from ALA

Filed under: — 12:29 pm

Admittedly I’m just a poor bugger from the penguin infested legume growing from Australia’s buttock but I’d kind of hoped a trickle of my question regarding A List Apart’s article on Dynamic Text Replacement with PHP written by Stewart Rosenberger would make it back to them and they’d eventually know - problemo - there is an issue for quite a few people with getting it to work.

So I’m kind of yell-beg-hairpulling it into the blogosphere as an open question still?

Why does IE show the alts but only red X’s and why does FF display the words in the original font and bunched together without spaces between them? I figure there has to be a logical technical fixable answer to that one that maybe someone’s discovered since it was posted.

My frustration comes from having read the entire 28 pages of comments a number of times and having no way to contribute to that closed thread. So if you know Stewart’s number or have your best mate at ALA you can tell them I think they’re legends but I’m absolutely out of my depth here. Is it my server, as I’d suspect? If so, what needs to be done to fix this one identifiable problem…

Ball of knowledge thrown into the blogosphere to be caught (hopefully) by someone who knows how to fill it and send it back to me. If you do you’re a legend because it’d be sooo bloody handy.


May 1st Reboot

Filed under: — 10:28 am

Here’s an interesting concept that I’d never known about until this month - the May 1st Reboot.

The idea is an international array of web designers register with Reboot and commit to creating a new design to be launched simultaneously on May 1st and its been happening since 2000. So on April 25 all the sites that are participating in this year’s Reboot will go down and just have a Reboot holding page. On the 1st they’ll all upload their index pages at exactly the same time and voila! Yep I’ll be checking out their work bigtime.

Uber-cool way to get yourself out there with something new, experimental or innovative.


WSG - Two Years Down

Filed under: — 9:00 am

Having been a subscriber of the Web Standards Group mailing list digest for about a year and a half (a year at least on my current subscription) its been a valuable ongoing resource of links, information and sometimes even advice (oddly enough) about not only CSS but all web standards. In two years the list (from Australia) has grown to nearly 1500 members with about half in the USA and a good smattering from around the globe.

The first meeting of the Web Standards Group originally met on March 19th, 2003 and are about to see in the beginning of their third year.

Apparently I was the only person ever to send them a Christmas card too which quite surprised me. Maybe other members might think of dropping Russ, Peter and the others a Happy Birthday card in the next few days.


Absolute and Relative URLs

Filed under: — 10:19 am

Its not always easy to get the idea of absolute and relative addressing through to people at first but once it’s in there it’s like riding a bike.

An absolute URL (or URI for that matter, don’t worry about splitting hairs here) consists of something like ‘http://www.nortypig.com/graphics/pic1.jpg‘. This simply says the message is http (hypertext transfer protocol) and the file is located on the domain name of nortypig.com in a folder called graphics and that it’s a jpg file called pic1. That’s about it really. You can if you wish use this method to reference files on your site but most often it’d be for external ones.

A relative URL on the other hand is a reference to a file relative to the file calling it. So if you look at the first example and assume that we’re in the nortypig.com folder already and you want to reference that same jpg from the index page you would simply write ‘graphics/pic1.jpg‘. The server is savvy enough to know you just mean look in the graphics folder that sits next to my index.html file and get the pic1.jpg image. Likewise you’ll often have to go up a directory.

Doing that one is easy too if you can imagine another folder called test sitting next to the graphics folder and index.html. In the test folder is a file called testpage.html and you need to display the jpg on it so you would write ‘../‘ to go up a directory and leave the test folder and then ‘graphics/pic1.jpg‘. So the complete reference to do it is ‘../graphics/pic1.jpg‘. Its pretty cool really and you can always figure out any issues by looking at the actual file structure on your server to see where you’ve gone wrong.

So what about this one? I have a CSS stylesheet in a folder called stylesheets that sits next to the folders called test and graphics and next to the index.html file. The CSS file in the stylesheets folder is styles.css and it is called into the head of the index.html file with a link in the head section of the (X)HTML. If you can visualise it great but if not then draw it on a napkin while you try to work out what I’m getting at. So in my styles.css file I want to call a background image into a div perhaps. How would I do it? Is it from relative to the index.html file or the styles.css file? The answer is it’s relative the styles.css and requires you to go up a directory and into the graphics folder by writing ‘../graphics/pic1.jpg‘.

The obvious advantages of using relative referencing are that you have shorter addresses to deal with and that your site is portable. It can be moved onto another domain and will work perfectly, wheras with absolute referencing you would have to change the nortypig.com part. I guess a lot of what you do with this comes down to judgement calls and personal taste but its important you do understand the difference and how to access resources in both ways effectively.


Classes and IDs

Filed under: — 11:56 am

One of the things that most eluded me with CSS was the use of IDs (# symbol) rather than Classes (. symbol) and why they were different. Not because its complicated but because Classes had seemed to do the job up until that stage so where was the need to look? Here’s a basic view of ID’s and Classes if you don’t already know.

The most obvious difference is that while a Class can be used many times on a page an ID can only occur once on a page. This makes ID a great tool for creating your (X)HTML page sections such as banner, leftnav, content or any other section you might want. By using the ID you can easily target as an example every second paragraph in the content section or lists in the navigation section.

The next thing about the ID to note is that by using it in your (X)HTML you can target an element for DOM scripting behaviours (yeh JavaScript) by using getElementById. An example of this is the banner on Translucent where random images fade in (programmed by lavalamp over at the Webdeveloper.com forums). In the page code you’ll notice the banner image has an ‘ID=banner’ allowing the script to hook into the element in question.

They’re the main differences I can think of at the moment and enough to get you rolling off a couple of ID’s on your pages. Like anything in this business planning helps so before you start coding you can look at your design and spot good candidates for the ID attribute in advance such as a block section or an element with behaviours. Just remember Classes can have many instances on the (X)HTML page but IDs only occur once.


Communication Glitch

Filed under: — 2:15 pm

The best laid plans of mice and me (n) definately don’t forsee every contingency. I recently had a slowing of communication with the Harvest Supplies people in Queensland. At present I’ve uploaded a simple text page but I’m designing and will be building a decent site that caters for ordering and has a member login area and some other stuff . But why was it looking like it was out to sink?

The clues were my email client sent the Harvest emails - the emails never arrived at Harvest. So where did they go? Well a few months back the Harvest account was moved to another server and a not unusual thing to do in this evolution is to retain the original mail box until the new one was properly established. So what was happening was I would send my email, it’d look to see if the address was on the same server (which the old one surely was) and just place the email there. So nobody elses email disappeared just mine. Unfortunate to say the least.

So there goes a couple of months of sending user questionnaires and reports and trying to establish information to develop personas, a couple of proposed site maps of course. Its a good tap on the shoulder that all business correspondence really needs to use digital signatures or other means of verification of receipt. This small oversight just in hours worked that had no value, the slightly corroded but fixable business image it portrayed and the simplicity with which it could have been detected and solved in the shorter term are indicative of a need for better lines of communication with interstate clients. We’re meeting in Sydney for a face to face in late April and hope to hammer out the last of the design elements there.


$500 Sites With Documentation?

Filed under: — 1:08 pm

I’ve asked this question a lot this year and how do people create AU$500 sites with documentation and research and testing and the gamut of pieces that make up the whole? Well they don’t, lets be honest. If your client asks for a AU$500 five page site then you have to gather the content from them, source graphics, answer emails and phone calls, most likely attend at least one meeting, provide a technical specification report as well as questionnaires and surveys, do an information architecture report of some sort investigating the information your client has and evaluating the competition and probably much more. Which to my estimate on AU$500 sites says to me you’re broke before a line of code is written.

So its OK to make a site 5 pages long for AU$500 but don’t make me believe you’re doing the whole shebang there. On those new terms yes I could produce for clients without too much stress a basic and static well laid out standards compliant website.

The difference between a AU$400 and AU$4000 site becomes apparent when you see the paperwork involved and look at the site map. The AU$4000 site will likely offer a level of programming, target your clients directly instead of merely displaying static information, it would include e-commerce and some database wizardry that makes users want to give you money - even helps them give you money. And that’s where the buzz is really, its in success. But now I think about it I see the other side of the coin too which is making a static site for $500 is quite practical if that’s what the client insists on to save money in the short term. I think I’ll have to do a couple, not put my name to them and see how the whiskey tastes when its payday. I also love Porche 911’s if you’ve got one for my wish list lol… never know your luck ay.


Alt and Title Attributes

Filed under: — 8:58 pm

Another common point of confusion for new and novice developers are the use of the alt and title attributes. So here’s my general understanding of both.

Alt attributes can only be used on img elements and are specifically to provide alternate text should the image not be displayed. Its as simple as that. An alt attribute should briefly impart what the image in question means and you should avoid using the word image in that alternate text.

Title attributes on the other hand can be used on a number of elements including img, divs and more. If you use title on an image that has an alt already the message is of course different. The title is a longer fuller description, not alternate text but a title if that doesn’t sound patronising. Where the alt will be displayed if there isn’t an image, the title should be displayed if you hover on top of an image that’s there.

The wider use of title attributes on elements isn’t a bad idea at all. Just don’t try it with the alt’s or you’ll get a rude little validation error certainly. Of course, this is just my understanding of alt and title and for a deeper understanding the W3C HTML 4 specs will certainly give you the full drill rundown.

RIP Out Those Mailto Links

Filed under: — 12:50 pm

When I look at a site nowdays one of the first things I seek out is their mail functionality - do they use the HTML mailto in a simple link to make a default popup email client do their hard work? If they do I tend to be a bit biased and unfairly think stuff like shoddy, ineffective and not enough money put into effectively creating the site functionality. In other words mailto is and always will be the easy way out particularly for those who aren’t confident programming.

Why is mailto a bad thing then when it’s legitimate HTML? For one I’d suggest there are better and more elegant ways to provide the same functionality without making something popup and steal focus from the user. But really my greatest concern is it doesn’t work effectively for a rather large number of users who haven’t configured their Outlook Express or whatever email client properly. So they fill in the popup form and press submit - then it says it couldn’t send the message! Now being that user would you go to your hotmail and zap up another email? I doubt it. Finally I’m not really too keen on sitting client email addresses all over the site for bots to pick up and create havoc with either.

So lets go server side for the answer. By using the PHP email functions you can process the contact in much broader ways and without the negatives involved with HTML mailto links. Do this simple tutorial and you won’t look back. Lets consign mailto to the grave of ‘no longer working as expected’. And if you decide to keep mailto’s on your site ask this - how many users can’t use your contact form and don’t know how to configure their email client? Its up to you as a developer to assess the level of accessibility you want to provide. And if you just must use mailto then think about keeping them as supplemental links and provide a PHP main contact as well.


Heading It Up

Filed under: — 1:20 pm

Using heading tags (H1 - H6) correctly is important as it imparts information about the content of the page. The word of the day that I do hate is ‘semantics‘ but its the word that fits best. By chunking your information with the correct headings you give a general outline of the structure of your page that goes beyond how the heading itself is displayed.

I’ve noticed a few sites that don’t seem to follow the correct use of the heading tags and although their pages validate they don’t quite get across the bar for this simple reason - they don’t actually make a lot of sense. Simple as that really. So as a general rule you should probably look at making your site name the H1 heading and work down your page to H6, although I’ve seen it argued whether or not to go 1 - 6 or make all next level headings h2 then h3 and so forth providing levels of information chunks as I tend towards.

If you only do it for the simple sake of being better understood by Google its very little effort. Headings are headings, paragraphs are paragraphs and lists are in fact and unsurprisingly lists. So by making a class called ‘.mytitle‘ and having it display just like the H1 heading, you create a situation where although they look the same they actually aren’t. One imparts meaning and the other is really just content. So be nice to boring old headings and stop that silly nonsense…


Taming Scope on Freebies

Filed under: — 8:30 pm

Where is a big job declared to be too big? Or a small job said to be large for that matter? Scope is the creeping enemy that can and will sink the smallest software projects right up to the multi-million dollar ones. So its important before ever a line of code, or agreement to sell your soul, that you and the client come to a signed agreement of what you are willing to do for the money that they’re willing to pay. Its as simple as that in its most basic form. Anything bigger than the original plan means scope creep and you’ll have it written into the contract this is work to be billed on top of your original quote.

I mention scope because I’m reading some documents sent to me by a client who I’m about to do some free work for. The usual situation would be to use the contract and monetary means to try to keep the project in scope, but what do you do for free? And a high end programmer I’m definately not so there are also limits to my ability to bring things in at all let alone on time.

Well perhaps ‘keep it simple stupid’ (KISS) is the philosophy that comes to mind here. I can see that every extra bell and whistle could possibly become the solution. But does it have to? Wouldn’t a more usable and simple solution be more viable than making a complex one simply because you can? The right solution is the one that fits the problem like a glove not a giant Ugg boot (don’t sue me for using the Ugg word either).

So it makes me wonder what in the living life of Mulder (off the X-Files) can a guy do to pull this one into some kind of manageable scope?

In the meantime I’m having fun playing with Virtual Stan.

TheNews.com.au moves to Weblog.com.au

Filed under: — 2:05 pm

The recent article relating to TheNews.com.au has been kind of put out of date prematurely by its move and renaming back to Weblog.com.au, so many apologies to anyone looking under the hood and not seeing the product I’d advertised. These things happen in the wild world of website creation.

To make a positive of this move is probably to use both these sites as a comparison to some extent with perhaps the true path being one of design integration rather than exclusive islands of difference that now stand. Is one better than the other? Well no. Is one more usable, accessible, or visually attractive? Well they both have their high and low points of course. A site without content or visual design elements can be, well, yes a site with writing and not much else. While a site with an array of well crafted work may fail to offer the level of usability that’s probably expected in some quarters nowdays.

It’d be good to work with Jason sometime and make sites that are both visually dynamic as well as functionally and structurally more sound. The meeting of those two worlds is where the money sits. While I think a Jakob Nielsen design is like polishing the teeth of an elephant (both stupid and hilarious), so is the opposite pole of pure eye candy for the sake of it. Naturally its about bringing to market a product that makes money both for the developer and the client and creating good and interesting interfaces which have science behind them, which fulfil a users purpose on the site and makes them spend more time and money.


Dynamic Text Replacement With PHP

Filed under: — 4:07 pm

This is a question borne out of frustration as much as anything so take it as a question / rant / frustrated sob into my dirty wet cloth handkerchief.

The A List Apart article on dynamic text replacement by Stewart Rosenberger has driven me crazy for its obvious usefulness, for its apparent simplicity and for its inability to work on my server for no offered sensible reason. Having trawled back and forth the 28 pages of comments and discussion of this article on A List Apart (and with comments seemingly not available anymore) I can only say that I do have the GD Library installed and FreeType is enabled (the rude assertions from some quarters can thus hold their breath). And I’m not the only person to have this problem, the exact same problem, so if Stewart, A List Apart or anyone in the entire planet can tell me what is out of sync here then my left testicle belongs in a specimen jar on your office filing cabinet. Maybe that’s a bit overboard, joke, no coming here with knives because I’m a screamer, too.

The symptoms… well in IE I just get the alt tags appearing with red X’s for each PNG not appearing. And in FF I get the words in the current text but pushed together so there isn’t any word-spacing. Otherwise it works perfectly, of course.

Although its a brilliant bit of work and it looks great on the test page it doesn’t work on quite a few installations and nobody has developed a definitive why that I’ve been able to find. So if you know then could you please save my sanity and help me out?


When to Walk Away

Filed under: — 3:25 pm

There’s always going to be a tension or conflict between client and designer. The business might want specific things while the designer has other ideas. Is the client always right? Oh if it was only that easy I could sleep like a baby and drink whiskey every other night in front of the television.

Lets put it this way. Standing in the middle of a problem (as does the client) its not always that easy to see what the problem really amounts to. Its not to say they don’t know what their business is because they’re the most valuable resource of information about it that we’ll have at hand, but they don’t necessrily know how to identify the problem. I mean in the context of the creation of a web solution to solve their www problem. If they don’t have a problem they don’t need a designer to find a solution.

Its tiring wrestling with an organisation that just boldly insists they want what they want, too. Imagine they like animated gifs or have an extreme love of the brightest boldest cack fireman’s pencil red with green Times Roman because it’s on their company newsletter. What do you do? Well I guess my advice is as valid as anyone’s and its a judgement call, especially as a freelancer. Income vs grief and pain. Ideally the client should respect you know a bit of science about internet technologies and what works as well as the designer understanding the client has to go home with a product they’re happy to call their own. Unfortunately not all business relationships will be as amenable as the ideal and its necessary to cut them away and move on. Don’t let your job wreck your head, in other words, as its just not worth the bucks.


TheNews Becomes Standard Compliant

Filed under: — 10:14 am

The recent dramatic rebuild of graphic designer Jason Carter’s TheNews launched today with a new minimilist look and with XHTML 1.0 Strict, CSS, and powered by WordPress. While its not the eye candy but the white space pushing this design it’s built with a definite eye on being more usable and accessible than the previous one.

It’s encouraging to see the local web development industry becoming more open to the ideal of a more accessible and universal web. So, no tooting because I did the coding, congratulations to TheNews for reaching a greater audience more effectively with this new facelift. I’ve already subscribed to the RSS feed too.


Good Java - The Value of Coffee

Filed under: — 11:29 am

This is a hardcore article because it covers fetish, addiction and coding all under the same heading - probably a h2 or h3 because I’m too lazy to look under the hood and find out what I’ve got going on under there today. Yes a sense of humour in web design is an essential or the world will fall down. But that’s not the topic.

Coffee is the topic. The hot warm wet love I have for my breakfast as I start up the aging beast in the office, still in a dressing gown or pulling my pants up. It stays by my side like a good dog for most of the day only being replaced by another good dog or a cup of coffee or the hand of my lovely mrs blister as she takes and leaves vessels of coffee for me to drink. There wouldn’t be much to the day without coffee and especially a good quality plunger coffee. Then the last thing before I go to bed at night or even in the morning sometimes is to have one last coffee so the sleep will envelop me. My woman first naturally, doggies second, my computer third - then my coffee. Given the choice between food and coffee I usually take coffee.

As an XHTML / CSS coding tool I think coffee is essential. OK sure it cuts down my life by a great number of years, causes heart disease and strokes and would never get to market if it was discovered today. But I honestly wouldn’t have any teeth left if I drank this much Coca Cola.


Mockups and Prototypes

Filed under: — 8:45 am

Recently there was a conversation of sorts between two developers and something tweaked my ears. One developer suggested jumping directly to XHTML / CSS prototypes and skipping the mockup stages for the simple reason at the end of prototyping they would have the shell to build, it would all be sitting there. They asked the advantages of doing mockups in FireWorks or PhotoShop rather than in code. So I guess my comment would go something like this.

Firstly to each their own and I really don’t ever want to be a soapbox guy who thinks he’s got the only answer to every single issue. But I’d suggest that its in fact quicker to get signed off on graphic mockups simply from a logistical point of view - they are much easier and quicker to come up with, they can go in the bin and start again with very little time involved (personal heartbreak aside of course) and graphic mockups can just be emailed back and forth or printed out and handed around the table. Everything I’ve been taught has actually said this is the best process to get the best software out to market, too.

Wheras with an XHTML / CSS prototype to develop the actual design takes a lot of grunt if the client is on the other end of the phone working out the look and feel as you go. What if they decide the right navigation should be top navigation or that every second paragraph in a specific section needs some special case. By this I mean that you have to hunt through the CSS trying to work out sometimes complex inheritance issues or browser bugs on the fly. I’ve chewed a lot of days doing this very same thing just because I’m the kind of guy who gets a video game and reads the instructions like next week or later when I’m stuck. But process should be about discipline and the process should make for a better product one would expect.

So personally I won’t be throwing mockups away to jump straight to prototyping as it just seems bad sense. Of course, you just might find me breaking my own rules tomorrow but hey I’m also a human lol. I make my fair share of bad moves like everyone.