Pistachio Monkey

Pixel perfect implementations are at most a bag of hurt which result in an exponential cost on our balance sheets and invoices to clients. A preferred solution is to simply support the features which are fundamental to the look and feel; and then though Progressive Enhancement or Graceful Degradation ensure that all Browsers render a site which is functionally no different but possibly visually distinguishable.

The aim is to still ensure each and every user can complete their desired goal to ensure that conversions rates are at their maximum, but due to their choice of platform and browser they may see altering variations.

The level of differentiation of course remains undefined but looking forward is the key. Considering the Key browsers technologies supported in the most common setups (at time of writing, IE7 and FF3) as a benchmark we should ensure they make a best match of the designs requirements. For example this may mean we use specific CSS 3 attributes to create shadowing, rounded corners or gradients to reduce the number of required images and decrease implementation time.

As browsers gain support for the enhanced attributes we can ensure that they have the ability to render content as fast and lightweight as possible, creating an incentive for obsolete users to update. As for our corporate users this lifecycle is simply longer and the requirements list of support may differ, but it is important they realise the cost effectiveness of their requirements for situations which will soon expire when IT departments upgrade.

The focus on Accessibility and Usability should remain paramount in any User Interface development, and often adding in high level styling can have adverse effects on these areas. Be sure to consider the overall impact before implementing any kind of grading.

Further Reading

Declaration:

http://developer.yahoo.com/yui/articles/gbs/

Article:

http://boagworld.com/technology/effective_browser_support/

Demo:

http://www.stuffandnonsense.co.uk/

Demo:

http://24ways.org/2008/shiny-happy-buttons

The 90s culture didnt seem to far away with a Gold Plated Acid face and a Massive attack poster. This Urban Art show, now i think in its second year has some very cool and thought provoking urban scenes. It ends today with an action, so catch it if you can

I managed to get a couple snaps of some D Face, Banksy and Blek Le Rat

Was walking back from the Tate modern today when i saw this Astra parked up on the side of the road. It had Google Maps decals on the side of the vehicle and seen as though the driver was’nt to busy i thought i would ask him some questions

He said that the mapping of London was nearly complete and that he expects the data to be fully mapped in the next couple weeks. This should mean that we can expect the street view applications to be live soon, weather that’s though a g Phone (android) or iphone i don’t know, probably both.

I asked him about confidentiality when tagging people and he said that he tries to avoid funerals (as he did this morning in Brixton) and other sorts of processions. He either drives around them or uses a pause function on the camera. He had a dell monitor in the foot well of the passenger seat which prompted him a review of what we being recorded, while the hunk of the machine sat in the boot. He also told me he didn’t work for Google but did have to have a special driving licence (racing and precision) in order to do the job. I asked him why the racing part, and he said that some of the youths in South London can get a little sketchy seeing camera’s driving about. he suggested they may have a shoot first and ask questions later attitude, and that he prays every morning that he faces no trouble on his trips.

Pretty interesting stuff, i suppose we see the app’s live soon with London being the first Mapped city and others to follow

Something i frequently get asked and have managed to do before is Horizontal and Vertical Alingment. I have previously used an old implmentation which got a little starteld when IE7 was released that required 3 div’s to work. This is find is not very efficent and looks heavy and messy.

I was aksed yesterday to build a Flash template for my client Rapier which offerd flash detection and provided an accessible version of the site, for SEO indexing and users without flash. I used the SWFObject methodology to embed the flash, and then went about writing a wrapper to centrally align the flash file.

the XHTML is just one Div:

<div id="wrapper">...</div>

the css is here:


/* wrapper to align center of page */
#wrapper {
/*we need to tell the browser the size of the warpper div*/
width:800px;
height:400px;
/*aligns the page to the center horizontal (x)*/
margin-left:auto;
margin-right:auto;
/*aligns the age to the center vertical (y)*/
position: absolute;
top: 50%;
left: 50%;
/*resets the offset (should be half the width and height*/
margin-top:-200px;
margin-left:-400px;
/*allows us to see wrapper*/
background-color:red;
}


Here is a link to the demo. I have sent this of to Browsershots.org and the results were positive throughout all browsers.

For the Demo i have commented out the Flash embed object so that you can see the wrapper working. Please note that i have also adjusted the CSS here to work with a smaller bassed swf than the one in my lib folder. This is so its easier to see working on smaller screens.

Here is a zipped Download of the full template including SWFObject v1.5.1, as it should be (not modified to show like the demo)

Theo

Dance from Center Point to Leicester Square with Theo. Enjoy Blue Steel and the Mac Flurrey. Is it really necessary to tuck in your leather jacket to your jeans. But the best bit is at 3:04 when some guys try to make him a fool. Thanks to Sepas for this one.

Learn Disco

Learn disco Moves with our Greek Friend. Learn all the moves, seems like Theo did. Thanks to Andy for this one

Mr T - Treat your mother right

We all love Mr T, even more that hea treats his mother right!

Apache

This song takes me back, when i saw the video i realized why, its just so daft

Gregorius: NMKY (Finnish YMCA cover)

These guys now how to party. But you would expect them to have got dressed out of their sports gear before they went on stage

suppose this shot is upside down, but he’s pretty funny

This article comes in response from a Information Architect asking how a coder can better Search engine Optimization. These are my impressions of SEO, typically developers may have different opinions, as after all there are many ways to crack an egg. I have provided a few links to where others have supported my thoughts and or discussed the practice. SEO goes hand in hand with accessibility a few aspects of which I highlight below.

Separation

XHTML should be written from a legal point of view and should preferably have little to no reference to how the content will finally render as per the designers creative. We should code trying to use the full array of XHTML tags to make the most semantic use of the copy provided. For example we would like to use <h1> to <h6> for headings and title’s; <ul> & <dl> for lists like navigation and definitions; and <em> and <strong> for italics and bolds.

The creative elements which depict width, colour, images and layout should be applied in a separate CSS document, where we should try to apply styles as natively as possible, so by only using class’s and Id’s in areas of division and irregularity. Segmenting the code into Divisions of Header, footer and Navigation can be applied while making best use of wrapping and the box model techniques (meaning no self closing divisions).

Finally JavaScript can be used to bind behaviour to the documents establishing segmentation of structure, presentation and behaviour considered to be the model-view-controller architecture. Although in respect for JavaScript we should always provide an accessible backup to an onclick event by retuning false and adding a server side operation in a href on an anchor.

Layout

Typically you would expect elements to appear in right to left and top to bottom structure in the code as they do in the creative. However this is not very SEO. Consider the navigation; it will always appear near the top and left on every page. We don’t want to expect Google to churn through it each time just to reach the content (a bit like munching on a jam donut). We would rather have the content as close to the top as possible and then have the template navigation at the bottom. This keeps it fresh and clean. Likewise if required inline (preferably in an external file) JavaScript should not dominate the top, we should have it at the bottom of the page. Restricting of the document can be handled using CSS, as explained here but be sure to use scalable dimensions and relative positioning to maintain accessibility.

Interestingly the subject here has done a bad job or effective separation, the comments mixed, some praise it for its lack of tables where others point out critical flaws like dimensions and lack of semantic XHTML. Here I would say is a good example, but bare in mind it’s an incomplete development, but its parent site now gets to number 1 on Google which uses not all of my explained techniques. Peter Bui discusses and shows of some good examples on his post about SEO.

Rules

The standard rules of XHTML should of course be followed. A Valid page is always going to behave better than an invalid page across devices. But we should also consider practices such as the order and use of headings and titles. Titles should be specific to each page and not be generic, they should be to the point and descriptive of the content in the page and not to long (saw 90 characters with spaces). Meta tags should be relevant and never to many. Every page should make effective use of Headings.

<h1>

possibly the brand or logo

<h2>

the title of the page specific content

<h3>

a subheading and so forth.

We should never skip levels (e.g., <h1> directly to <h3>) and have more than one <h1> or <h2>.

Furthermore we have some of the obvious ones to note that are inline images (only included if the image is relevant to the content and not to the style) should contain descriptive alt tags. Form data should appear in a <fieldset> with a <legend> (I find using an unordered list as well helps layout a form easily). Use semantic class names and Id’s (Orange-Header is not very useful if we want to change the colour, and we should already know it’s a header because its using a heading tag right?) Finally Use tables (try not to nest tables) for tabular data including <thead>, <th>, <tfoot> and a description attribute on the table declaration. There are many more to note which are all in the many of the different guidelines depending on platform and doctype but these are issues I face regularly.

Happy Coding, Please tell me what you think

I remember vividly waking up at the crack of dawn on Saturday mornings and pacing downstairs to start a marathon of cartoon viewing thanks to the BBC and the going live crew (including Phillip Schofield). If i got up to early i had to watch the snooker before the toons started and i would prepare juice in cups ready

Saw this collection of top ten 80s intros to cartoons and it really takes me back. It like ive seen this all a thousand times and i had all thos toys. Mask, Defenders of the Earth and Visionaries, all classics, and i would love to watch them all over again… just in better quality than you tube has to offer.

If you still need more of a hit then wath this. It’s pretty long at 30 minutes but covers many more of those classic 80s intro’s

I suppose it was acceptible in the 80s

ReubenMiller : Chris Gilmour: Cardboard Sculptor

Well chances are you wouldnt want to ride this one, as this collection from Chris Gilmour is all made from cardboard. Makes you wonder what he was doing in his junk modeling classes at school

A Pair of Beautiful Lamborghini’s, one real and one concept.

Lamborghini Car Painted Amazingly

Some incredible detailing has gone into this ride, its even on the windows.

Lamborghini Embolado Concept by Luca Serafini | Auto Unleashed

This badboy looks like a stealth bomber! heavy.

But what happens when you try and merge such a sexy sports car with a Golf?