JJ's Cogwheel

In an age where your website is judged on the richness of apps or the effects of your visuals it seems that good function is no longer being regarded with any importance. But this is so very wrong.

Without a balance between both form and function a website sits at either undesirable extreme (although I think function is the lesser of the two evils). I present this website, bikramyoga.co.uk which was given to me as a reference in design to her own website she has commissioned me to make. How the site looks is a matter of taste, my friend obviously loving it, but what struck me was how poor the function of this site is. The menu is not immediately obvious and which button goes where is even less obvious. Pretty, but no ease of use. The menus function is completely non-existant when javascript is disabled. As is the function of a lot of the rest of the site. I mentioned this to my friend and she doesn’t know what javascript is which only reminded me of how important it is for a developer to not make such a thing the crutch a site depends on. So, for the sake of “pretty” this developer has sacrificed too much function and the site breaks down to useless.

In this post at Usabilty Post its agreed that something made simply too pretty becomes a distraction in use. To an extent I agree however the example he uses isn’t the best in my opinion. Sites that are heavy in Flash with twirls and sparkles make for a better argument. When it comes to some sites I find it utterly maddening to wait whilst the next fragment of time wasting animation loads before giving me just another menu. If I could choose one new internet technology to kill it would be Flash for this very reason. It’s all glamour and little function. It can’t even run on every platform well. For the sake of a spinning banner and bouncy text we all suffer at the mercy of Flash graphic designers with too much time on their hands. It has it’s uses but the latest trend is borderline abuse. Load times, wait times, plug-in compatibilty, platform differences and it doesn’t work at all on iPhones (the biggest mobile internet device on the web).

At the other end of the spectrum is function. Also posted on the above mentioned Usabilty Post article is this site, ycombinator.com which the author uses as his example of good function. I agree, it’s function is great. It’s simple, no fuss, straight up content to get into. Looks dull though. This site is where I believe they take the rules of function too far. I’m all for simplicity but without some style this is just a page of text. Boring. It does convey what it aims to very well, being a list of headlines. But there is no separation between articles, the sub-text is grey on slightly lighter grey. You could argue it serves little function and therefore is not important but then why is it even there then? Humans are drawn to shiny things..

Somewhere in the middle there exists a place where a visually stunning site is still highly functional and easy to use. Smashing Magazine has a great post on good UI design patterns emerging in web design today. Something like “lazy registration” is a good example where great function can be incorporated with great looks. A lovely made modal window popup with the simplest of sign ups (name, password and email only) is a way to incorporate a highly functional and usable element whilst still holding onto great looks. You don’t navigate to other pages, you don’t have to spend hours filling in details, its just there, bam! done, looking good.

I make a plea to others that function is still a very, very important consideration in development. But making the web beautiful is why designers exist and are needed to keep things attractive enough to draw us back in. No one wants to be lost amongst graphical swirls digging for information and no one wants to be scanning great lengths of text and blocks because its just boring.

Time to design and build a happy place! Practice restraint. Any fool can be complicated and add more, it takes discipline of mind and strength of will to make the hard choices about what to include and what to exclude. Great design genius is often in what you omit or leave on the editing room floor.

So I say ditch the extravagant glamour and return to the decent, functional, still beautiful web.

In the news very recently (here, here and here from Google themselves) is the groundbreaking Google development currently code-named “Caffeine”. Having been in development for the last several months this next generation Google is now available to web developers to test in a Google Sandbox http://www2.sandbox.google.com/ but keep in mind Google is saying this is not yet the finished product. But I’m going to use it anyway.

This is being announced by Google as a faster, more accurate, leaner yet more comprehensive search engine. Although Google makes occasional changes to their algorithm this update is said to be a change of large enough scale to warrant this new excitement.

Also the timing couldn’t be better as this comes on the back of Microsoft and Yahoo announcing their new terms together with Bing. Some reports I’ve read are saying this is a direct answer to challenge the move from Bing search. But next-generation architectures don’t happen over night and it more likely that this is a fortunate coincidence for Google. So now Bing really has to move itself if it wants to stay in a game where Google is going to keep moving the goal posts

For a nice FAQ on the matter Macworld has an article you can go through. I’m sure it’s not the only one hitting the web though. You can read a nice Q&A from Matt Cutts, a Google engineer who worked on Caffeine on his blog to get some answers from the source. But to save you hunting around here’s a summation of what I have already found:

• Caffeine is just a reworked version of the search engine, being the code that finds your results.
• You can preview Google Caffeine here http://www2.sandbox.google.com/
• Changes are all under-the-hood so from a users point of view nothing has changed to how you use Google
• It is promised to be faster and better with more improvements/changes to come.

I have tried it out now and I have to say I notice nothing but the order of the results. That  must be the new algorithm finding things in a new “better” way. Try it out for yourself, side-by-side with the old and see the difference. After a Google Caffeine search you can give feedback via a link at the bottom of the page. All feedback is obviously going to make it even better when it is finally released to the public.

Something I’ve noticed recently is the increase in awareness of HTML5 on the web. Although it isn’t scheduled for complete support until 2022, its ability to degrade gracefully means that it is an up and coming feature that is dramatically increasing in popularity. Currently the new features are only really supported by Presto and to a limited degree, Webkit and Gecko which means you need the latest Opera, Safari or some type of Mozilla flavor (Firefox, SeaMonkey, Camino etc) as your browser to ‘see’ HTML5. I recommend the nightly builds of Safari Webkit as your best means of testing the waters as it also has the highest degree of CSS 3 implementation.

One of the things I like most about the development is the return to focusing on DOM. Anything that encourages browser independence receives a tick of approval from me. The other main factor is the ability to degrade gracefully – something that HTML5 encourages. It feels like HTML5 was supervised by someone who understands the difficulties in web design and, more importantly, someone who wasn’t bought out by a large company.

Like most people, the features that I find most exciting are the new <audio> and <video> tags along with the ‘replacement’ divs. Providing support within the browser for embedding audio and video is really something that should have been done a while ago. But from reports it looks like the <video> tag might have a hard time making inclusion unless they sort out a standard codec soon. The ‘replacement’ divs – <header>, <nav>, <article>, <section>, <aside> and <footer> – will help get rid of some of the div clutter that features predominantly in recent web design. The image below gives an example layout that will be drastically improved by these new tags. You can see the main div’s are replaced.

The two other features that I am looking forward to are the advances in forms and the <canvas> tag. The <canvas> tag will make rendering visual images (bitmap) dynamic and the creative uses of this tag are definitely something that I will be watching out for! Forms of course isn’t nearly as exciting, but it will vastly improve the ‘business’ side of things. The introduction of autofocus and easier client-side validation will be the two main attractions with <form>. Of course, as a good web developer, I’ll still be keeping my server-side validation – but imagine the savings the client-side will produce.

All in all, I’m quite excited about HTML5.

A good understanding of the benefits and limitations of CSS is essential to web design. With CSS3 currently under development there is going to come a time in the near future when the new standard causes an upheaval on the web. Web designers are going to find themselves in a position where they have to choose one of three options: use CSS3 and not worry about the browsers that aren’t capable, use CSS2 and not worry about the latest trends in design, or use CSS3 carefully and gracefully so that you can support all your users.

The last option is of course the path for me. Although the update isn’t finalised yet, I can’t resist using some existing CSS3; I view it as a visual treat for those with a browser that supports it. Not to mention it helps keep my skill set up to date and I can ensure that when the standard is released, I will have the ability to use it well.

So what excites me about CSS3 the most? The possibility to reduce content that is traditionally the realm of javascript or flash; the transitions and animations. I’m also looking forward to the multi-column layout. Imagine learning web design without wrestling with floated divs! And of course, along with the everyone else, @font-face.

So again it’s the Firefox and Safari users that win out. And Opera I believe has great support too! But Internet Explorer is again behind. IE8 is just fully supporting CSS2 so it may be some time before they get a sniff of CSS3. I’ll keep trying to keep things with full cross-browser compatibility but they don’t make it easy.. The newer standard I believe could really shift how things are done on the web. And with CSS3 hopefully doing all it can it will become the faster and more efficient method over flash and javascript.

One of the challenges I come across as a website designer are the issues that arise from cross/multi-browser compatibility. The number of times I’ve been asked to redesign a website that hasn’t even considered the concept is amazing. Of course, 9 times out of 10 it is due to the original site being created by someone who wasn’t aware of what a browser is, let alone that there is an option outside of IE.

With a growing number of users changing their browser I always make sure that I design and test my websites for what I consider the ‘majority set’ : IE (7 and 8 – sometimes 6 depending on the client’s target audience), Firefox (2, 3 and 3.5), Chrome, Safari (3 and 4), Opera and sometimes Konqueror. The headaches of how these browsers implement W3C standards can be horrendous, especially when working with newer technology such as CSS 2 (not to mention 3!) and currently, HTML5. Of course I realise that it isn’t possible to create a beautiful, cutting edge site that is 100% compatible with all browsers, let alone the majority, without using some ‘hacks’. My main weapon against this nightmare is designing sites to support the standards, rather than a particular browser.

Of course it’s easy to say you want to design sites to support standards and browser compatibility. The hard part comes when you have a client who really wants a flash-based site – something that is a lot more common in the UK than in Australia. Or positions that advertise as you must have “actionscript 2 and 3, php, LAMP, CSS 3, HTML 5, and a desire to keep up with cutting-edge technology.” Yes, I love how far web design and development has come in the last decade, and yes, I really love exploring the new capabilities in these technologies, but for a business who’s main consumers will be viewing their website on IE6 or a site that wants to include iPhone users? As great as the hype is, surely it is better to have a site that your users can actually view? That’s not to say that I’m going to try and talk you out of having a beautiful, media-rich site. I’m just going to make sure that your site can be viewed in the majority of browsers.

So what do I use to test browser compatibility? I use Mac myself and run Safari. I also have a small windows laptop with Chrome and IE. Looking at the site as it is developed on a variety of browsers really helps me ensure that there won’t be any surprises. However, as I don’t always have access to a multitude of browsers, I also like to use a few tools. One of my favourites for a relatively quick test is BrowserShots (http://browsershots.org/). I’m also a big fan of Litmus (http://litmusapp.com/), Xenocode (http://www.xenocode.com/browsers/) and Browsrcamp (http://www.browsrcamp.com/).

Welcome to the early branch of my thoughts towards more technical ideas. For a while I had only one type of blog, being my personal blog which has served as my space for posting all sorts of random things. It’s now branched off and any technical, programming inspired rantings are now to be put here, amongst the “cogwheels” of my thought processes.

This new space of mine, http://cogwheels.justastic.com is going to be home to my programming and ranting of technical news. I feel these are separate to what I get up to on weekends.

Hope you enjoy the future reading of my sometimes unique view of things..