khal weir | blog

Something I’ve come to realise as I’ve broadened my view on web application development, is to not rely solely on conventional sources such as books and blogs for learning.

Think about it, were you ever shown how to use a hand dryer? What can their design teach you about UX design? Good design is good design, it doesn’t have to be a web based to inspire you to create a fantastic new webapp.

Great customer service in an Apple store, a nice touch at a restaurant or hotel that made a difference to your visit… what can you take from that? How can you use what pleased you in the real world and apply it to your site or application?

The pride and attention to detail a master knifemaker puts into his work is inspirational, even if your product is virtual and your tools a mouse and keyboard.

Seeking inspiration from unusual sources isn’t new; the development methodology SCRUM is based on the sport rugby. The concepts of Kanban and Just-in-Time, first employed by Japanese factories, have also been applied to software development.

Nature has always been a valuable source of design inspiration, for example the nose cone of the Shinkansen bullet train is modelled on a Kingfisher’s beak and the Fibonacci sequence is also found in the iPod’s design.

Everything in life has a lesson to give, the skill is knowing how to find and use it.

I’ve never been a fan of Flash, either as a developer or as a user, so I’m excited to see the possible beginning of the end for what has become the defacto standard for multimedia on the Web.

Its a common a complaint that the iPhone and upcoming iPad don’t have support for Flash, but why would they? The Flash player is a buggy, resource intensive , security risk that these devices are better off without. There is very little that Flash can do that can’t be done with other technology such as jQuery, HTML5 and CSS3 (see the links below for some examples) all of which will run on modern browsers without the requirement of any plugins.

The two main video streaming sites YouTube and Vimeo are trialing HTML5 versions of their sites, using the h.264 video format in place of Flash. I’m hoping that the popularity of Apple’s mobile devices will encourage more content providers (such as Hulu and BBC iPlayer) to turn their backs on Flash and embrace these new technologies.

For the past few weeks I’ve been using ClickToFlash for Safari, which blocks Flash content, giving you the option to run it or not. I have noticed a significant increase in the loading of pages and am not missing the horrible Flash ads that have frequently crashed my browser and brought even powerful dual core computers to their knees. I’m ready for a future without Flash and praise companies like Apple, Google and Vimeo for taking the initiative to push the latest in Web technology to improve their user’s experience.

JavaScript

• SketchPad
• Depth of Field
• jQuery Robot
• jParallax
• jQuery cloud of bacon

CSS3 Animations

• ATAT
• 3D Cube
• Coke Can
• Photo Gallery

HTML5

• Canvas and Audio Demo
• Canvas Photo Demo

Microformats are additional markup that add semantics to content in web pages; their aim is so to improve the way information can be searched, extracted,  indexed,  cross-referenced or combined by software by describing content.

A good example of this is hCard, heres some basic contact information in plain HTML :

<div>
<div>Khal Weir</div>
<div>Work Interactive</div>
<div>0131-555-1234</div>
<a href="http://blog.khalweir.co.uk/">http://blog.khalweir.co.uk/</a>
<div>2 Some Street</div>
<div>Edinburgh</div>
<div>Midlothian</div>
</div>

with that addition of the hCard microformat markup becomes

<div class="vcard">
<div class="fn">Khal Weir</div>
<div class="org">Work Interactive</div>
<div class="tel">0131-555-1234</div>
<a class="url" href="http://blog.khalweir.co.uk/">http://blog.khalweir.co.uk/</a>
<div class="adr">
<div class="street-address">2 Some Street</div>
<div class="locality">Edinburgh</div>
<div class="region">Midlothian</div>
</div>
</div>

With the hCard markup this information has become more useful, the content has context making it easier to be automatically processed or extracted for use in applications like Outlook or Address Book (hCard is the web based equivalent of the vCard format). Other Microformats include hReview,  hCalendar, hResume and hRecipe, take a look at  http://microformats.org/ for more information.

One of the principles of Microformats is that they should ‘be presentable and parsable, visible data is much better for humans than invisible metadata’; this definitely seems to be the direction the web is going in as Google recently announced they ignore keywords in meta tags and Apple, Microsoft, Google and Yahoo have incorporated support for microformats some of their webapps; as have popular social networking sites such as digg, facebook, last.fm, linkedin, twitter.

Another interesting use of Microformats is the XFN (XHMTL friend network), this was the first microformat and is used to describe the relationship between individual’s and their various online presences. Its really simple and consists of two attributes.

• rel=”me” – this is used to show that the link is related to yourself (eg the links from this blog to my twitter profile page)
• rel=”friend” – this can be used to describe relationships between people when linking (eg the links from this blog to my friend’s blogs), this tag can also be stuffed with context such as ‘co-worker, met, acquaintance, colleague, child’.

Take a look at http://code.google.com/apis/socialgraph/docs/ for more information and to try some example applications (try inputing blog.khalweir.co.uk for example).

Web Development isn’t all sexy jQuery effects and fancy Photoshop brushes… its working late, wrestling with antiqued browsers and quirky email clients, fixing bugs in legacy code, seemingly endless copy changes from picky clients and nightmare server crashes.

I’ve seen plenty of guys eager to get into this industry join agencies and balk at the unglamorous tasks they’d never expected… they never last long.

So why do I enjoy it? I get to work in a great team at Work Interactive, face different challenges each day, checking Twitter at work is R&D, every day is ‘dress down Friday’, there is always something new to learn and launching a site is still rewarding.

This week I’ve been working on a new design for khalweir.co.uk, not something I’m used to – normally a colleague or friend will do design work for me and I’ll concentrate on development. I’m very much out of my comfort zone, but am learning new skills and will hopefully have something I’m pleased with soon, in the meantime I thought I’d share my story of a developer trying his hand at design.

I set about the task as I would a development project; I thought about what I wanted to achieve, sketched some ideas and broke the into site into elements. After a little while I’d more or less settled on a layout and had a few ideas for potential designs; so then went looking for inspiration and resources.

This is where I hit my first problem, I know I want a killer background and lack the Photoshop skills to make my own, but once I started looking I was overwhelmed by choice and at the same time found it difficult to find exactly what I was seeking; again finding a cool font proved to be difficult.

After gathering a bunch of fonts, graphics and ideas, I started putting them together in Photoshop to create a rough prototype, I was able to dismiss a couple of ideas outright at this stage and now I’m able to concentrate on the strongest. I still have a long way to go, the prototype isn’t built using the Blueprint CSS grid system and is well, still very rough.

So what have I learned so far? Design is very different to development and I still kinda suck at Photoshop

Some of the resources I’ve found useful:
Blueprint CSS Framework
@smashingmag
@gunkdesign
Texture Lovers
Abduzeedo

These are the tools I use everyday and consider them essential for my work. I use Macs at both home and in the office so most of these are Mac only, sorry PC users!

Coda
www.panic.com/coda

This is my favourite IDE, after years of using Dreamweaver, dabbling with Eclipse, Aptana and Netbeans – this is the one that gets everything right for me. The tabbed, all in one interface, is fantastic, the SVN integration is awesome and we are big fans of the code sharing over Bonjour in the office.

Transmit
www.panic.com/transmit

Also from the guys at Panic, this is great FTP client.

Growl
http://growl.info/

Growl provides subtle notifications in the corner of your screen for various applications and activities for FTP file uploads, new IM or Email messages. It means I can focus on what I’m working on and can choose to ignore the Adium duck flapping in my dock if the IM message doesn’t warrant an immediate response.

MAMP
http://www.mamp.info/
Local development area.

Time Tracker
http://code.google.com/p/time-tracker-mac/

Stunningly simple time tracker, really useful.

Textmate
http://macromates.com/
A very powerful and feature rich text editor.

Textsoap
www.unmarked.com/textsoap
I just recently found this one, so haven’t played with it that much; but so far it looks like it’ll handle anything I throw at it and give me nice plain text.

Firefox
www.mozilla.com/firefox/
My Firefox is loaded with extensions, so many, I think its worth a separate article.

Litmus
http://litmusapp.com

Feed it a URL or a send it an email and Litmus provides screenshots in a variety of different browsers or email clients. They also provide Alakine – a desktop application and a plugin for Coda to better integrate testing into your workflow.

Parallels
http://www.parallels.com/uk/products/desktop/
As great a tool as Litmus is, sometimes a screenshot isn’t enough and you have to actually test the functionatily of a site. Parallels allows you to quickly turn on a virtual machine and run another operating system. Currently I have 3 Windows XP VMs installed covering the latest 3 versions of Internet Explorer.

Notebook
http://www.moleskine.com/
Essential for problem solving, notes in client meetings. I like the small blank Moleskine’s as they are neat looking, small enough to slip into a pocket and the blank pages are versatile.

Balsamiq
http://www.balsamiq.com/products/mockups

I came across this Air app recently, its a great looking tool for creating quick mockups of web pages. It has a simple drag and drop interface and I love it’s sketchy style.

Spotify/ Last.fm
www.spotify.com|www.last.fm

I listen to music almost constantly, I find it helps me focus. I tend to use Last.fm more at work, as I can tune to my radio station and it will play for hours playing (mostly) only music I actually like. Spotify is also great, but the radio stations aren’t as good as Last.fm and I’m often paralysed by choice when I try to thing of an artist or album I want to listen to.

Pepsi Max

Sweet, sweet, sugar-free caffeine!