Presentation Layer

Finally an accessible way to render text within your designs with out having to use flash/images with alt tags or JS with descriptors.

Cufon is a way to “render” your text on screen giving you cleaner looking fonts – i have put together a working example here

I wouldn’t use this with p tags or anything below a H2 as it isn’t selectable.

So you want to tell the world everything you do? Seems that people are tweeting about all sort of stuff… i am not a massive fan but have had some clients who want there own look and feel.

I have put together a multilayer photoshop document so you can see what i belive is best practice within the twitter environment.
NB – this is for screen res of 1280 X 1024 and above.

Download the PSD document here | 1.14Mb

If your in the web game – you’ll know that it isn’t an easy task to get sites to render in 98% of the browsers out there. Before you even start on a site – you need to work out who your target market is in terms of browsers and cut off the rest – aka – “degrade gracefully”. The term degrade gracefully means that they need to work in (are navigatable, clickable) those “lower” browsers although maybe not look as pretty in. W3 seem to have a fairly good record of the most current stats – you can see them here.

Something’s to help you through the browser blues are the following;

Online multiple screen rendering
One bit of software I use is Browser Cam.  This online application allows you to test in multiple operating systems in multiple browsers – you need a live page to test this on.

This is well worth the money spent and you can see for yourself for free for 30days.

Desktop testing
As you may or may not know after you update your browser you no longer have the previous version – while this is often good as hopefully they have knocked out the bugs it often removes the only testing vessel you had of that browser…

To over come that there are what as known as stand alone browsers – thanks to TredoSoft who have put together a lovely little package of standalone IE versions from 3.0 – 6.0 you can have hours of “fun” trying to get your sites to work. The also have a version of IE 7.0 standalone although this seems to be a little buggy sometimes (you need to do a restart to get it working as it doesn’t like when its brothers and sisters are running).

Check out trendsofts downloads of IE 3.0 – 6.0 here and IE 7.0 standalone here

Alretnatively i have zipped the pair up and put in one file here – NB 25Mb

I will put some hints and ways around hacking your CSS in IE in the near future – in the mean time – have a read here

Requirements - Full screen image (as a back ground) that scales and will display in any monitor resolution

Solution:

• Online working example
• Straight to the code | Zip file

Notes:

Background image for content – I have used a PNG image for the back ground – The PNG will render correctly in IE 8, FireFox 3, Chrome, Safari although older versions of IE (say 6) the PNG will come up as a solid color – no biggie. You can apply hacks to it but seeing though those browsers are on the out and only hold about 8% market share you can better spend your time doing other things.

Browsers tested – It pretty much works on all browsers ( put it this way – it even works on IE 4.01)

Layers - You need to think all div’s like a sandwich (if you will) and by using z-index in css you can determine the stacking order. So what ever you want on the bottom (eg the background image) make sure that you set the z-index to something low or negative (the range is -5000 to 5000 – i think) and make sure the content is at least 1 more than that.