Africa is a big place. In fact, judging by this infographic is HUGE.

After a bizarre series of events someone came up with the slogan for Chocolate Al.

I love surfing.

As much as I love surfing though I was born and bred in a town that produces surfable waves 10 days a year and they always coincide with the natural disaster that a cyclone brings.

If that wasn't bad enough you can throw into the mix that our ocean is full of things that want to kill you. Not just content with sharks we also have crocodiles, box jellyfish and irukandji.

With all that in mind you are probably not surprised to hear that although I love surfing I don't get the chance to do it much and I'm not very good.

That was true until late last year when I tried out standup paddle boarding for the first time. Very shortly after my first adventure where I spent more time in the water than on top of the board I bought my own board, paddle, and a stinger suit, which unfortunately resembles something that Jean-Luke Picard wears to work). Now for the first time in my life I can wake up in the morning and walk across the road for a surf (ignoring the remote possibility that I'll fall onto or bump into a crocodile *knocks on wood*)

It was during one of my recent paddles that I stood on the board and looked around. The tide was rushing in and as it did the sandbar started to get covered and some small waves were forming where before there was no water. The sun was high in the sky as the wind started to pick up quite a bit. As the gusts became stronger the water began to get choppy making balancing on the board just a little bit more difficult. The wind also had an affect on the waves as they struggled to break against the strong breeze.

As I paddled the water would raise up over the side rails of the board and whirlpools would form at the beginning and end of each stroke of the paddle.

The water was responding to its surroundings.

I noticed this more on this day because I had read "Why responsive design is like water" through my RSS feeds the night before. It was so obvious that I couldn't believe that I hadn't thought about that earlier.

That's when I notices something else.

The trees were swaying with the breeze. Some of them even appeared to have a bit of a lean to them after years of constant wind.

Where the trees had rooted themselves the sand danced across the dunes making patterns as they went. The clouds were whispily stretched across the sky instead of their usual white fluffy plumpness.

Birds were flying in circles off in the distance where I could see some smoke rising from the bush, and a jelly fish was pulsing just below the surface with it's tentacles pointed towards the beach as they were being strung out by the incoming tide.

I wasn't just the water. Everything I could see was responding to it's surroundings.

It didn't matter whether it was the semi permanent structure of the tree, the sand on the beach, the birds lifting with the heat (hot air rises remember), or the water moving around the paddle… everything had some kind of response to its surroundings.

It began to dawn on me that the article I read had not gone far enough. It wasn't that Responsive Design was akin to just water. Responsive Design in fact mirrors the entire world we live in. Responsive Design is natural. It *is* Nature.

My mind went even further down this thought path. Earthquakes, Tsunamis, Volcanic Eruptions, Earths orbit, the Sun, Evolution… even the Universe after the BIG BANG!!!

All these things are responsive based on their surroundings and their content, whether it's their position to another object (Earth to the Sun) or the content within the object itself (reactions within the sun).

As my focus came back to the paddle board… and realising I had floated a little way in that time… it occurred to me that the web was moving towards a Darwin Theory of Evolution. Those that adapt/respond to the changing environment will have an advantage over those that do not. They will have an evolutionary advantage and continue to survive while those that do not will die.

That's not to say that there will be a metaphorical meteor that will cause massive extinction of the fixed layout, but as responsive sites begin to offer similar services to their fixed design cousins users will begin to starve the later for visits which will eventually cause them to die off.

Survival of the fittest. Adapt/Respond or die.

I was initially really keen to show off the Wildfire jobs infographic however I recently received a letter from them denying my request for a job that I had sent through aaaages ago.

If I'm perfectly honest the application was a bit rubbish. There was no resume and the cover letter was just asking to meet up for a chat to see what the workplace and work was like. I am going to assume that it went straight to HR and was put on the bin without too much notice.

Anyway, we're here to see the infographic so there you go, WildFire Jobs

We built the website Responsive Web Design because there was a lack of centralised resources for web developers that wanted to learn more about Responsive Web Design.

The site is still in production at the moment and will live on responsivedesign.is once our awesome designers come up with a skin for our media query based mobile first layout.

Sign up to the newsletter now to receive a Responsive Design Weekly overview.

The infographic included below, created by mobile security startup Lookout, puts it all into perspective, highlighting the major Android and iOS milestones over the course of the past five years.

So sit back, grab a cup of coffee (or mimosa), and soak in this rather astonishing history-in-the-making lesson.

Take a look through the popular areas of the web industry and find the pay scale, skill needs, who's hiring and bunch of other information. It's very much focussed at the United States, so take everything with a grain of salt.

I'm not the most prolific user of Facebook these days from a personal point of view, however I do have several business pages that I maintain including Javery Design and Responsive Web Designs.

I thought I would take a look at what Visual.ly has to say about the information kept on me in Facebook, and this is the result.

People learn from being shown rather than being told

The most effective use of communication is visual communication. You can explain how to do something to someone ten times and they will tell you they understand it. As soon as they "SEE" you do it they won't really know what the hell you really meant when you were going on and on and one about the same thing 10 times.

1. Tell what you're going to show them.
2. Show them.
3. Tell them what you showed them.

Visual.ly has come out with a new way to create infographics..... or poster type pictures that everyone now accepts as being an infographic

The London Ballet

I thought I would give a quick preview about what they are like with a #ballet tag from Twitter based on the work from The London Ballet

Create your own?

They have actually made it quite easy for you to be able to create your own Visualisations through the Create Visual.ly Tool for Facebook and Twitter. At the moment I can not get the Facebook connect to work correctly but you can go nuts with the twitter tool.

Any complaints

Well except for the first issue of Facebook not working for visulisations it would be nice to specify the month of data you wanted from Twitter. I would have liked to of created a visualistion for the 2011 Web Directions South conference, however I believe the limitation is because the Twitter API doesn't make it easy to search and retrieve content from longer than a month and also limits the amount of data you can retrieve on each request (both fair calls for the amount of data available on that site).

Just a quick note that these are uncheck notes and may not be entirely accurate. If you think something is wrong, it probably is. I recommend you following @RellyAB and going to see one of her talks/workshops.

If you gleam anything as useful from this, you will learn a LOT more by checking it out in person.

**content strategy**


- write content once publish everywhere.
- devices are a fairy in the bottle, as awesome as it could be it won't until you let it out.
- mobility pushes technology

- content pushes technology

sites to review
- ecommenrce teapigs
- The good little company
- encyclopedia on an ordinary life (good pick up and read book)

*Keep in mind about the site*
- site personality
- level of knowledge that users will have arriving on the site.





Funnelback tool for a content audit.  Audit pages.  Like www.pagetrawler.com but MUCH better.

- Qualitative Audit - looking at the quality of the content.
to get there you need to do a….
- Quantative Audit - h1, title, metadata, description

For each of the pages have a look at what the point of the page.  
- What is it trying to do (good product, sell product, information about the company).
Then take a look at what is good about it and what is missing from it.

Next Step: Priortise the fixes
- Identify the gaps in the content and prioritise.

	Code red: 
	- 404
	- Missing content (related to user goals)
	- Priority order of staff (does the CEO/Board have incorrect content
	- Out of date legally binding content

	Code amber:
	- out of date but not legally binding (blog posts that require updated content)
	- teams & department pages & associated contact details
	- anything date dependent (xmas promotions)
	- Embeded content (external feeds or youtube embeds)
	
	Code green:
	- Anything that doesn't matter. Often archive based items.

Next Step: Audits & Clients
- Character building (bring the client in for an afternoon to overview and check their content on the site).
- Agreement as to what there *actually* is there

*Helpful Links*
- adaptivepath.com/ideas/doing-content-invetory
- blog.braintraffic.com/2009/03/the-content-inventory-is-your-friend/


**STEP 2**
Take away the bad content, replace it with the good content.

Take a look at what else people have done with your content and improve it.

Make sure that your strapline or mission statement is what you actually mean, don't bullshit.

If you have a decentralised content contributors it is important that there is a centralised management of the content strategy, or at least that people are talking to each other.

Mailchimp is a great example of an about section.

+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++

**4. PAGE TABLES - getting granular**

identifies structure, etails, who looks after, what it has, and how that will be accomlished, what needs to occur before that can happen.

Messaging
- Sales message
- Safety message
- Reassurance 
If there is more that one message on the page you need to decide the heirarchy of the messages so that the most important comes first.

Method
- What is it going ot be?
- Format (video, pdf, blog post, email)
- Dependicies (who owns it, does it require a camera?, who is responsibile for generating it)

Call to Action
(there is no point to a page on the web without a call to action)
- Sales (Buy Now)
- Learn More (read more here, related articles)
- Subscribe/Find/Follow (Twitter, Facebook, Email)

+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++

**Page Tables & Clients**

Carrot - page tables to write it
Stick - I promise I'll have the content by…. .  Create a page table for every single page they have and print it out for them.  This usually causes 1) the budget to increase; 2) the number of pages to decrease; 3) the deadline extends.

+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++

http://www.visualthesaurus.com/

***5. Making it Happen***

associating words with what you want to convey the message (cutting example)

Not this, but that.
i.e. Web directions is not hipster, but it is cool.


+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++
**Writing for online**

upside down triangle = the conclusion first.

As part of the introduction you need to provide the overall story.  Provide jumping out points at the begining to associated content that they might have thought the current page might be.  This should be inline within the content.

The site should also work in the same inverted pyramid, just like the article.  It should allow the users to move around the site easily from place to place.


Headings on the web need to be suscienct. 
Sub headings. - used for tabloid headlines (see sun and daily mail)
(copyblogger - headlines 101 - check that link)

shorten sentances, increase description.

*todo* Google ACtive voice over passive voice.



+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++

**Style Guides**

Design
Code
Corporate
Global

**Content Style Guide**
Start with a global style guide (for things like capitalisation) (look this up…. chicargo manual of style or the ASsociated Press style guide, guardian, yahoo and wired also have these guides.) 

Next work out how content will be treated.  For example, how will the date be written out.
It can be formated/layed out in the following way….
Definition (i.e. Date)  |  Rationale (the reason why)


+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++

**Planning Content**

Editorial Content Calendar
- Create a calendar (google) that can be shared with the group.
- create the events (i.e. Tuesday we'll have a blog post)
- Link the events to the Page Tables with the information.
- Schedule meetings about the content (daily/weekly/monthly)
-	Daily - I'm doing xyz today (status, fast)
-	Weekly - a review of what is coming up next month (everyone, bit longer)
-	Monthly - upcoming major events (olympics)
-	Quarterly - Long term plans for the content.  Are we going to include video on the site, are we launching a product, forget about what is happening now and look to the future as to what you're doing.
-	Annual - the review of the content on the site.  Get the owners of the content to review other content to make sure it all still makes sense.  Is it all still relative?  Is there anything missing from the site?

By keeping track of the content editorial calendar ensures that you can provide a report as to how much time and resources are required to maintain what is expected.  Keep a record so you can see.

+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++

**Make a habit**

If you do something 6 times in a row you will make a habit of it.  

This changes it from being a chore to something that is planned, and in otherwords prepared.

Check out 750 words .org


+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++

accessible
- Bible in your language. Ikea use pictures to put things together rather than words.
- A design to suit all needs
- where is my nearest 

Searchable
- Internal search.
- Making sure that each description and metadata is specific to the contnet on the page.  PUT IN FUNNELBACK.

Findable
- Libaries rely on the Dewy Decimal system to find content reasonably simple. 
- We have URLs now. 
- SEO shouldn't be about making your site rank the highest, but about making your site rank highest for the most relevant content.

Desirable
- Making content desirable.
- Friends are more likely to read what their friends have, not what's in their RSS.
- Curation.  Pintrest.  Curated content stream that makes sense… stuff that has been quantified/qualified.

Shareable
- Wired app example.  You can't share it.  Fliboard is a good example

Selectable
- Ability to copy and paste
- Ability to find content within the page (ctl+f)
- People should be able to repurpose the content for their own use.  Make it easy for people to share and spread it around (CC back to you)
- 

Selfaware
- Tagged & linked to other sources.
- Sematic webs to be collected.  A recipe knows it's a recipe (see google recipe search).
- http://linkeddata.org

Portable
- The reason we don't etch things on stone anymore
- Old limitations are disappearing (microfish, hand held bibles)
- Digital space isn't an issue, it's the ownership that matters.  Who has access, how is it granted and how is it restricted.
- DRM… not dead by dying

Flexible
- Combines everything listed above.
- Content is living and breathing on the web.  A book is more or less done after print (minus further editions).  The web is not.  It is a constantly changing element that should be able to grown and shrink depending on the container in which it exists at that point of time (for the person viewing it).
- How do you now define context?

ONce you've created contnet that can be flexible in all the ways above you're done. Forever. Maybe not. You will have to check it remains current but you're able to use it everywhere.

**3 Things for today**

1. Always have a back up
2. Try something new (take soemthing from this workshop you think you can't do and try and apply it in a small way)
3. Write and create content

+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++


Reading List
- bird by bird by anne lamott
- write to sell by Andy someone
- Letting go of the words by unkown

• Demo
• Contribute on GitHub

I recently did a presentation to the Darwin Web Standards Group on Responsive Design. I stole gleamed a lot of the ideas from John Allsops famous "Dao of Web Design", Jeremy Keiths talk on Responsive Web Design as part of the ASYNCJS group in Brighton, work I did with Imogen Levy during the rebuild of Westminster Abbey with HTML5 and Media Queries, and finally the kick arse book written by Ethan Macote, Alist Aparts Responsive Web Design.

Two relatively annoying things happened with regards to the last peice of muse....

1. The book wasn't released until 2 days before the presentation leaving me practically no time to read, absorb and repeat (in my own words) what I had heard was amazing reading.
2. The internet connection in my office went out the day before the presentation for 12 hours.

Fortunately these things worked brilliantly together, allowing me to focus on reading the now released book securely downloaded on my iPad2 while not being distracted by email, twitter and the rest of the online world.

I wrote the presentation in narrative form using IA Writer for Mac while swiping through the very informative and entertaining book, while also slowly changing a design from fixed to a responsive layout.

I found it great to be able to refresh the design on the iPad and iPhone and Laptop as I rebuilt the site, but alas I had no Internet connection so only the iPhone on 3G worked and the iPad wifi was useless.

I could resize the browser manually, but it was difficult to be able to guess the size of the browser when changing the width.

There is a saviour for this problem with Firefox. If you've got the Web Developer Tools as part of your install (if you don't, then you probably wouldn't have read for this long) you can select TOOLS - WEB DEVELOPER - RESIZE.

From here you can enable "Display Window Size" or "Display Window Size in Title" to check what width you have resized the browser. Going one step further, you can select "EDIT RESIZE DIMENSIONS..." which allows you to create a set of predefined sizes for your testing.

The draw back with this is that you need to adjust it every time you want to check the changes.

I did a few searches for a tool that would allow me to be able to view the different widths in one place but came up empty (or I was using the wrong search terms.... please let me know).

Yesterday afternoon I decided to do some testing to see if it was possible to set up iPhone Portrait/Landscape, iPad Portait/Landscape and a Desktop View as well.

It turns out it was very simple indeed. With a couple of iframes set an exact height a width, a background image to show the device a VOILA..... Responsive Design Preview Tool.

It's rudimentary at best. If you want to update the site then you just update each of the iframe src sections.

I'm going to build on this,

• allow for other dimensions to be added easily
• Put in presets for each major device (this apple fan boy will include the androids)
• Single input for the site url, rather than updating the html.

Would love to hear feedback, if you think it's a useful tool. You can improve on it yourself through GitHUB

Thu, 25 Aug 2011 08:14:38 +0100 http://surfthedream.com.au/writing/responsive-design-preview http://surfthedream.com.au/writing/jquery-table-of-contents justincavery@gmail.com (Justin Avery)

This is a heading

There are occasions when you want to be able to preview the headings that come further down the page, but you won't want to have to maintain them every time the content might change. This is where this little snippet of jquery comes in handy. It takes all the H2 elements on the page and adds them to an unordered linked list, and appends the required anchor tags to the H2 elemetns.

This example is a little bit shit, because I haven't omited the H2's in for the related links. You know what though, I'm bloody busy right now and have other things to do.... so just make sure you target the right areas ;)

Below is the JSFIDDLE code to copy

This is a lot of content theis is a lot of differnent content and event more if you want it.

This is a lot of content theis is a lot of differnent content and event more if you want it.

This is a 3rd heading

This is a lot of content theis is a lot of differnent content and event more if you want it.

This is a lot of content theis is a lot of differnent content and event more if you want it.

Antoher Level 2

This is a lot of content theis is a lot of differnent content and event more if you want it.

This is a lot of content theis is a lot of difThis is a lot of content theis is a lot of differnent content and event more if you want it.

This is a lot of content theis is a lot of differnent content and event more if you want it.This is a lot of content theis is a lot of differnent content and event more if you want it.

This is a lot of content theis is a lot of differnent content and event more if you want it.fernent content and event more if you want it.

This is a lot of content theis is a lot of differnent content and event more if you want it.

This is a 3rd heading

This is a lot of content theis is a lot of differnent content and event more if you want it.

This is a lot of content theis is a lot of diffThis is a lot of content theis is a lot of differnent content and event more if you want it.

This is a lot of content theis is a lot of differnent content and event more if you want it.This is a lot of content theis is a lot of differnent content and event more if you want it.

This is a lot of content theis is a lot of differnent content and event more if you want it.ernent content and event more if you want it.

This is a lot of content theis is a lot of differnent content and event more if you want it.

This is a 3rd heading

This is a lot of content theis is a lot of differnent content and event more if you want it.

This is a lot of content theis is a lot of differnent content and event more if you want it.This is a lot of content theis is a lot of differnent content and event more if you want it.

This is a lot of content theis is a lot of differnent content and event more if you want it.This is a lot of content theis is a lot of differnent content and event more if you want it.

This is a lot of content theis is a lot of differnent content and event more if you want it.

This is a lot of content theis is a lot of differnent content and event more if you want it.

This is a lot of content theis is a lot of differnent content and event more if you want it.

This is a lot of content theis is a lot of differnent content and event more if you want it.

Thu, 25 Aug 2011 08:01:15 +0100 http://surfthedream.com.au/writing/jquery-table-of-contents http://surfthedream.com.au/visual/the-shape-of-design justincavery@gmail.com (Justin Avery)
Thu, 30 Jun 2011 08:18:35 +0100 http://surfthedream.com.au/visual/the-shape-of-design http://surfthedream.com.au/visual/xkcd-the-core justincavery@gmail.com (Justin Avery)

This has been around for a little while, but I had to giggle about this when I saw it this morning.

I have the same thoughts about the Earth's Core ever since reading a book about it in 1996, although I remember also reading that the Earth's Core was as hot as the Sun.

• Temperature of the Sun: 8,000,000–20,000,000 K
• Temperature of the Earths Core: 5,700 K

Not even close......



Thu, 30 Jun 2011 00:03:46 +0100 http://surfthedream.com.au/visual/xkcd-the-core http://surfthedream.com.au/visual/eps-vector-soccer-football-pitch justincavery@gmail.com (Justin Avery)

Today I made some changes to the West Ham United Season Results Prediction to include a football pitch as a background image to the tabled data.

I wanted to download a vector image to include rather than recreate one, but everywhere I looked I was presented with "please pay".

This is the internet though, and I only pay for things I can't do myself.

I took a screen grab of the pitch and placed it onto an illustrator file, before tracing it and coming up with my own version. 

Keeping with the true essence on the Interwebs........ please find this available for download below. 

Download: Illustrator Vector Image - Football Soccer Pitch

Wed, 01 Jun 2011 06:39:50 +0100 http://surfthedream.com.au/visual/eps-vector-soccer-football-pitch http://surfthedream.com.au/writing/ia-writer-for-mac justincavery@gmail.com (Justin Avery)

I have just purchased IA Writer for Mac through the Mac Store. $21.99 for a writing program so it had better be worth the money!

It was only released a few hours ago, and I was excited to see if the app that people went crazy over for the iPad was going to live up to expectations on the Mac

How did it shape up? Well lets have a look at how we got here first.

How we got to IA Writer

A few years ago a friend of mine suggested a WriteRoom as the perfect writing tool for the Mac.

I downloaded the app and was pleasantly surprised with the ease of use interface and the soft soothing sounds of the keystrokes.

The green text on the black screen was also a lovely addition, it took me back to the initial days of computer based writing tools (all the way back to my x286).

Once the trial was up I wasn't able to justify paying $24.99 for the full product and went in search of the next writing tool.

Next up was OmmWriter which retails for $5.99, so $16 cheaper than IA Writer for Mac, and $19 cheaper than WriteRoom. Off to a good start there.

OmmWriter is a great program, however I found that there were are few annoying elements.

1. I only liked one of the fonts as an option (which is the default in IA Writer)
2. The large text size was the only suitable option
3. The background music was lame and quite annoying
4. The keyboard sounds were irritating

Although annoying, they can all be turned off and you can essentially get the same overall look as IA Writer provides as the default, and only, option.

One of the features I did enjoy was the press of escape on a partially completed word and get a series of suggestions to complete it, although that's probably just because of my horryble spellign. This isn't so much of a big deal though because you can just right click inside IA Writer and you have a spelling and grammer option.

An advantage over IA Writer is that you could easily view the word count with a simple flick of the mouse. At the moment when I'm using IA Writer I need to escape from full screen and then mouse over the bottom of the writing window. If I try on full screen I only get the application dock appear. Annoying, but I might just be doing it wrong.

Enough about others, what about IA Writer?

Not bad for a first release.

The Good

• Simplicity. It's just about the writing. Unlike OmmWriter that can be customised this is just take it or leave it. Fortunately for me they've got everything right in that area.
• Focus Mode. Frigging sweet! I really didn't think this would make that much difference but it really enhances your concentration on what you're writing right now then be distracted by what you've written.
• Easy Navigation. You can move one word at a time, or CMD + right/left arrow key will move you from sentence to sentence. Very nice when in Focus Mode! (this does have a small drawback though as mentioned below).

The Bad

• As I mentioned above the word count can not be brought up in Full Screen mode. Not a deal breaker, and possibly designed that way, but is a little annoying if you are used to OmmWriter.
• I'm finding it annoying not being able to move to the beginning/end of the current line with CMD + Right/Left Arrow. I can still skip through words with ALT + Right/Left Arrow though. This does has it's benefits though (mentioned above)
• Sounds. It's quite stupid, but I really miss the keystrokes noices that WriteRoom had. It made me happy to hear each of the characters getting punched up onto the screen and gave me the felling that something was being accomplished.

..and the Ugly

• Beautiful. IA Writer for the Mac has has just got everything about the layout, typography and colour perfect. It is just a beautiful application to use

Conclusion

I've knocked this entire artilce out in IA Writer for Mac and I must say it's been a pleasure to write. The focus mode is a MUST, and I'm going to have to say that for me it's worth the money spent.

BUT, at $21.99 you really have to enjoy your writing to part with that kind of money for a glorified text editor.

If you could only get one editor for all your needs (programming, writing etc) then go with something like TextMate.

If you want to get a specific application, but don't want to part with the >$20 then go with OmmWriter (but turn off the keystrokes, background music, make the font big and get rid of the crappy wallpapers).

If you are willing to pay the money you're not going to be disappointed. Turnhe things I mentioned above do bother me but I'm sure the guys and gals at IA already have an update waiting in the wings.

I haven't started using the Markdown features with the exception of the ordered and unordered lists, which is going to cause me to update the CSS on my site and put the list-position: outside;. These look like promising features though to add a bit more spice to the articles viewed through IA Writer.

Congrulations to the IA team on a job well done!

Sat, 28 May 2011 03:10:11 +0100 http://surfthedream.com.au/writing/ia-writer-for-mac http://surfthedream.com.au/writing/omnifocus-for-the-ipad justincavery@gmail.com (Justin Avery)

As I mentioned in an earlier post, I have a new iPad!

To get more use than just flicking through FlipBoard, trawling through Twitter or playing FIFA 2011, I've made the big step and forked over the money for OmniFocus.

This has taken my OmniFocus purchases up to 3.

• OmniFocus for the Mac
• OmniFocus for the iPhone
• OmniFocus for the iPad

Should I buy or should I no

Before making the purchase I sent out a quick check over twitter to see if anyone had any suggestions.



Crickets.....

Well it wasn't all that bad. I had a couple of people let me know that it was where they did the majority of their OmniFocus time.

I figured to hell with it. I still had $28.78 left on a birthday iTunes voucher and I could claim the purchase back for work purposes.

OmniFocus - first impressions

Freaking Sweet!!! I know that all iPad applications are supposed to look awesome, but this looks a feels slick.



This is the Forecast tab telling me what I've got on the next week, and what I didn't get to do

I use webdav to sychronise all of the devices together and I must say it's really improved my task list completion.

As I've been using OmniFocus I've began to find areas that aren't quite working properly. For instance I've got a whole bunch of tasks that take no time at all but I can't do them right away because I'm away from my email/phone/computer and they don't fit into a particular Project

Contexts

For these instances I've started creating/using Contexts to allocate the types of tasks around how much time I have or my location. So far I've got,

• Errands (rarely use)
• Home
• Office
• Mac - Email
• Mac - Online
• Mac - Offline (things like photoshop, cleaning files, billing
• Phone
• People
• Waiting (this could easily be called 5 minutes, it's quick tasks I do when waiting for bigger things to move)
• Need Distraction (when I'm sick of working, I turn to this. It has inspiration posts, photo's, cool new online stuff, checking out my next electrical purchase
• Future Project (I get ideas ALL THE TIME and can not start anything else. These go here for when I've got time again)
• Blog Post Mood (the mood I'm in right now)

Review

The other great thing about OmniFocus on the iPad is the Review tab. It lists all of your projects and allows you to click on them one by one and see the list of tasks.

Doesn't seem very useful does it.

As you review the project you can add extra tasks that might pop into your head, or add additional information about existing tasks. You might even rearrange the due dates, or add them if you haven't already

Once you're finished fiddling you tick off the project as reviewed, and select the length of time before it appears back in your Review tab (you can add length by day, week or month)

After the first time I used this I realised I could push back the review of projects that didn't matter by a few weeks, and only push back the important projects 1-2 days.

I've found this very useful as the last thing I do before going to bed each night. It means that I hit the pillow knowing everything is checked and in order for me the next morning, and that's the perfect thing for a good nights sleep

Conclusion

Although I was a bit disappointed that I had to purchase the product for every single device (it would be great if the Omni Group offered a package purchase.... but I'm not sure technically how feasable that may be), I must say that as a suite of products I can not fault them.

On their own you might find them lacking a little bit as a well rounded application, but the three work very well together assuming you're syncing with webdav or something similar.

If you like lists and the Getting Things Done methodology buy this product, you won't be disappointed.

Thu, 19 May 2011 09:28:34 +0100 http://surfthedream.com.au/writing/omnifocus-for-the-ipad http://surfthedream.com.au/writing/how-to-manage-a-team justincavery@gmail.com (Justin Avery)

A few days ago I received an email from an old work colleague.

”This is a bit of a random, out-of-the-blue question, but I was wondering if there were any words of wisdom you had on being a team leader?“ ”Back in the UK, you always seemed to maintain control of your projects and keep your team motivated, especially since it was a bit of a challenging environment. I'm finding the workload my team and I have now to be pretty intensive and there's a lot of competing demands to manage (e.g. sales staff wanting demos, supporting clients, just doing projects).“

I was pretty chuffed to receive the email and began to think about how I could help out.

To tell you the truth I had no idea what it entails to do any of it.

Some of the things that I tried to live by were....... (a bit of a warning, most of these suggestions came about because I lived for the job and not much else got a look it)

9 - 5 is not your time

Your main task between 9-5 every day is to facilitate you're staff in getting as much work done as possible with as little distractions and hold ups. This means that the plan for the staffs daily tasks needs to be done either the night before or when you get in early so it's ready to go when the guys arrive.

If you're working on something and someone needs some help, it's pencils down for you go over to spend time with that person until they're back on track.

Your work comes before and after those hours.

Ask First

Don't wait for anyone to come and ask you a question about something. Most of the time people will hit brick walls and continue to bang their heads against it until they get sore. The team will be concerned that they're always asking questions and don't want to interrupt you at all, so hold off until they have a few things to ask you.

Walk around the office to each person and ask how they're going with the task and if there is anything that wasn't explained at the beginning that they're having trouble with. 90% of the time I do this someone has always had a question for me to answer.

Reward Good work

With absolutely anything you can! I've worked in places that make you use 1/2 a days leave to see the doctor and be an hour late in the morning. Not cool!. I used to give the guys who deserved it time off to wait at home for BT or deliveries, or duck away early to go on holiday etc. It's a pretty small thing to do, but it's one of the best things to do.

I used to send my guys electronic books that I had bought, or if there's budget buy books for the guys. Send them on conferences, buy them a beer, invite them to after work talks. Anything you do will make them feel more wanted, and therefore know they are appreciated.

Give them a voice

Meet with the team once a week and get them to cover off anything they are missing in the office. Software, hardware etc. New monitors, wrist pads, bigger monitors, extra monitors, should all be put through as requests. Anything they don't like about work, either explain why it is that way or work out a better way to do it.

Then make sure you follow that up with the boss to try and change things and keep your team informed.

Know stuff

Spend time being really good at something. You should be putting in more research than the guys on the ground building stuff, and then sharing that knowledge with them. I used to read hundreds of tweets every morning, and 10's of articles based on that. I'd then create a list of recommended reading items for the staff each week. When someone needs help, see 9-5.

You should also know what your staff are great at, and when given the opportunity let them shine those skills. If I had a JS question then I would pull in Adam and get him to explain the answer, for CSS it was Ola or Dan etc etc.

Tell them the whole story

A lot of the time the teams are given small snippets of work and are only given the technical details to allow them to complete it.

You can program computers to do that.

Tell them the bigger picture about the project and how they are going to affect it with the work that they do. If they know what they are contributing to the project they might come up with a way to build it slightly differently and make it much better!

Conclusion

There's some other stuff, but I hope that helps for now. All this stuff means that when you ask them to work late or longer they'll do it for you, regardless of what they think about work.

Wed, 18 May 2011 13:02:11 +0100 http://surfthedream.com.au/writing/how-to-manage-a-team http://surfthedream.com.au/writing/tips-for-using-omni-graffle justincavery@gmail.com (Justin Avery)

OmniGraffle is a tool used to produce wireframes. It is powerful due to the popularity of the product and number of stencils that are contributed by the community.

Stencils

Stencils can be found (Window - Stencils) or by pressing (Apple + 0). You will notice that you are presentend with a list of stencils you have already downloaded.

As your collection of stencils grows you may need to organise them into folders, i.e. WireFraming, UML Diagrams, Forms, iPad etc etc.

If you find that you don't have a stencil you have just searched for, try clicking on the magnifying glass and change it from "Local" to "Graffletopia". This will now search the user contributions to Graffletopia.

Useful Stencils

• Konigi Wireframe Stencils
• iPhone OS Design Stencil

Templates

Templates are quick ways to get started with a series of wireframes. If you find that you're always starting off your projects by setting up a series of page templates, it might be worth creating these in a generic way and saving them as a Omnigraffle Template.

Useful Templates

• Konigi Wireframe Templates

Tips

• Create a "Useful Stencils Folder to hold groups of stencils"
• Format - Choose Diagram Style - Unset Current Style (die die die)
• Properties - Canvas Size (uncheck "size is multiple of printer sheets" check "Print canvas on one printer sheet")
• Properties - Canvas Size (set size to 1280 pt 768 pt)
• Properties - Canvas Size (set to landscape/portrait)
• Properties - Canvas Size (set to ruler units to pixels)
• Select All - Copy As PDF - Paste into Story Board
• Arrange - Grid - Snap to Grid
• Arrange - Guides - Smart Alignment/Smart Distance
• Arrange - Guides - Smart Alignment/Smart Distance
• View - Guides
Thu, 12 May 2011 01:40:21 +0100 http://surfthedream.com.au/writing/tips-for-using-omni-graffle http://surfthedream.com.au/writing/treesaver.js justincavery@gmail.com (Justin Avery)

I'm making a few changes to this site to improve how it appears through Flipboard.

I've added an extra RSS feed that makes better use of the page content and includes images where required, add this site of Flipboard if you want to see how it changes.

In my quest to improve I came across treesaver.js, also found on GitHub.

Treesaver is a JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS. I haven't had the chance to properly try it out, but I'll come back with a bit more information once I've had a chance to dabble with it for a while

Sun, 08 May 2011 23:58:51 +0100 http://surfthedream.com.au/writing/treesaver.js http://surfthedream.com.au/writing/name-bench-google-dns-performance-tool justincavery@gmail.com (Justin Avery)

name bench is a great little application that has been by one of the 20% Google Development projects. What is a 20% project? It's time that google employees are given to prototype new ideas. The ideas are then taken up by other employees as part of their own 20% of time and voila, something like name bench is born.

Name bench basically hunts down the fastest dns servers that are available to your current computer and returns a list of instructions that you can then make the relevant updates and changes

Name bench runs across Mac OS X, Windows, and UNIX,so there's no excuse not to use it.

When I tried out name bench in the home office I was greeted with "You're running the fastest" message, so I haven't actually had the opportunity to fully test out the application to see just how much fast it can run.

If anyone has received better results and made the updates I'd love to hear about it in the comments

Tue, 03 May 2011 11:07:04 +0100 http://surfthedream.com.au/writing/name-bench-google-dns-performance-tool http://surfthedream.com.au/visual/television-doing-progressive-enhancement-since-1960 justincavery@gmail.com (Justin Avery)



Sun, 17 Apr 2011 06:23:27 +0100 http://surfthedream.com.au/visual/television-doing-progressive-enhancement-since-1960 http://surfthedream.com.au/writing/google-page-speed-online justincavery@gmail.com (Justin Avery)

A few days ago Google came out with Google Page Speed Online. This is a great tool for anyone to test how their web page is performing, but it's nothing new when it comes to reporting performance.

YSlow

YSlow was the first of the products released by Yahoo as a plugin for Firefox. It was developed by Steve Souders, author of the High Performance Websites: Essential Knowledge for Front-End Engineers and Even Faster Web Sites: Performance Best Practices for Web Developers.

From the Yahoo site....

"Yahoo!'s Exceptional Performance team has identified 34 rules that affect web page performance. YSlow's web page analysis is based on the 22 of these 34 rules that are testable. These testable rules are listed below roughly in order of importance and effectiveness. Studies have shown that web page response time can be improved by 25% to 50% by following these rules."

1. Minimize HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires or a Cache-Control Header
4. Gzip Components
5. Put StyleSheets at the Top
6. Put Scripts at the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript and CSS
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags
14. Make AJAX Cacheable
15. Use GET for AJAX Requests
16. Reduce the Number of DOM Elements
17. No 404s
18. Reduce Cookie Size
19. Use Cookie-Free Domains for Components
20. Avoid Filters
21. Do Not Scale Images in HTML
22. Make favicon.ico Small and Cacheable

Page Speed

Steve then went across to Google and developed Page Speed for Firefox, and then the Page Speed Chrome Extension.

From Google PageSpeed....

Page Speed is a browser extension for Google Chrome and Firefox. It runs a number of diagnostic tests against a web page, and analyzes the page's performance on a number of "rules" that are known to speed up page load time. The rules are based on general principles of web page performance, including resource caching, data upload and download size, and client-server round-trip times. They examine factors such as web server configuration, JavaScript and CSS code, image file properties, and so on. For each rule, Page Speed gives a general score, using a simple red-yellow-green grading scheme, and suggests specific techniques for correctly implementing each rule. It also provides some automatic optimization of external resources included on a page, such as minifying JavaScript code and compressing images.

mod_pagespeed

Steve wasn't quite finished with those two books with their awesome recommendations, nor was he finsihed with the two plugins that gave you the tools to see how the site was performing and instructions on how to fix them.

He decided that he would take the development out of the web developers hands and make the server do all the hard work for you. mod_pagespeed takes an ordinary HTML page and does a lot the performance enhancements for you.

Personally I disagree with this approach as it's automating something that you should be doing already. Automation is a guessing game, not an exact science, and this kind of performance will make you lazy. You can always do things better yourself by tweaking each element to the best of your ability, rather than relying on code to do it for you. It will also put an additional load on your server!

Which do I use?

When it comes to these two tools you might ask which one is better or which one should I use? The answer is both of them. While they have been developed by the same person they work in slightly different ways and focus on slightly different areas of performance. It's important that you run both to get a wholistic picture of the performance of your site.

Remember! - performance matters. It is the first impression that everyone gets when they visit your site even before the first pixel is loaded

Sat, 02 Apr 2011 01:30:11 +0100 http://surfthedream.com.au/writing/google-page-speed-online http://surfthedream.com.au/writing/nerdy-thursday-links-14 justincavery@gmail.com (Justin Avery)

New movements again this week, and in the past few weeks. I've bought a new car with Laura and taken a job back with Squiz but this time the Australian branch, and I'm setting up in my home town of Darwin.

But as always enough is enough, we're here for links so here they are.....

HTML5

• http://www.html5rocks.com/features/file - Tutorials, resources and demos about how to use the very powerful APIs to interact with binary data and a user's local file system
• http://www.richmediagallery.com/html5-challenge - are you up for the HTML5 challenge?

CSS

• http://cssprefixer.appspot.com/ - Just add your CSS to the left box and copy and past from the right box with all the browser prefixes taken care of. I found it a little buggy when it came to adding topleft or bottomright references for border-radius, anyone know why?
• http://mashable.com/2011/01/11/how-wordpress-themes-actually-work-infographic/ - While the infographic is specifically for Wordpress I'd like to see us do a similar layout for Matrix sites. I've had a few goes at doing this on a moleskin, but would like to see someone with some

Typography

• http://designfestival.com/typography-of-quotations-citations/ - a nice article about when and where to use quotations and citations.

Javascript

• http://thenextweb.com/dd/2011/03/15/create-a-chatroom-in-12-lines-of-code-with-nowjs/ - chatroom with just 12 lines of code. BOOYAH!!!!

Performance

• http://loads.in/ - a nice tool to test the speed of your web pages.

Visualisation

• http://www.visualizing.org/visualizations/urban-water-explorer - the article http://www.janwillemtulp.com/water/ the visulisation, the tools that allowed for it to work so splendidly http://mbostock.github.com/d3/

Mobile

• http://globalmoxie.com/blog/mobile-design-patterns.shtml - rather that list a whole bunch of great tools to allow you to find the solution to your mobile design problems, this guy has already done it for me.
• http://news.designlanguage.com/post/1611663345 - a nice look at the finger print patterns on an ipad.

Analytics

• http://designm.ag/resources/website-analytics-toolbox/
• http://www.kaushik.net/avinash/2011/03/web-data-analyses-techniques-analysis-ninjas.html

The Interwebs

• http://thinkvitamin.com/user-science/twitter-using-gamification-to-increase-followers/ - I wrote a retort on this in an earlier post.
• http://www.uxbooth.com/blog/using-lies-in-research/ a really well written article about lies in research. I'm still giggling a bit about the comments, and I'm not sure if every author needs to put on the shoreditch twat glasses, but a good read none the less.

The dictionary definition for Gamification" is......... well it's not in the dictionary because it's not a real word.

It doesn't even appear in the Urban Dictionary (for those of you that haven't used the Urban Dictionary before, give it a go and have a giggle at the terms people come up with)

Some people, like the famous but overly annoying Ryan Carson, uses the term gamification to descibe subtle changes to user experience of websites to further market or push user interaction.

Other people, like Sam Doust the Creative Director of the ABC, think Gamification is yet another example of the interwebs trying to be hip and cool by applying a stupid name against something that has been in existence for centuries through other mediums.

So who's right?

The web moves so fast that we just don't have time to keep up with the words that get associated with the changes, so don't spend you're time worrying about what people are calling things and focus more on whether the new discovery is worth adopting or steering well clear.

Uptake the technology and new practices that help your site/brand/product and forget about the ones that don't matter.

This was the sunset at the Trailer Boat Club in Darwin on Sunday 20th March 2011 as we had dinner for Mums birthday.

After a quick browse in Dick Smiths this morning I was shocked to see how cheap the iPad was, and then I get online to find that the iPad 2 has been released by Apple.

Everything is just as announced: the 16 GB, Wi-Fi-only iPad 2 starts at $499, and the price climbs to $829 if you want the 64 GB, 3G+Wi-Fi version. The device is available in two colors (black and white), and customers can choose to have a sign engraved on it for free.

We've had a wee bit of a break over the past few weeks with some new developments. Nothing actually developer like, but new stages in our lives.

We've had a quick move from London to Australia with a holiday in Bali thrown into the mix. There are some photos up on flickr from the Bali Trip and I might get some up on this site under the visual section.

But enough is enough, we're here for links so here they are.....

Analytics

• https://developers.facebook.com/blog/post/476 - Facebook has released REAL TIME INSIGHTS for Business Pages.

Performance

• https://chrome.google.com/extensions/detail/ninejjcohidippngpapiilnmkgllmakh - YSLOW for Google Chrome. Freaking awesome! Now will someone please develop firebug for chrome as well.

News

• http://stackexchange.com/ - Stackoverflow, a very well respected source of help for the nerdy internets has been granted $12M and changed from Stackoverflow to Stack Exchange.
• http://mashable.com/2011/01/11/how-wordpress-themes-actually-work-infographic/ - While the infographic is specifically for Wordpress I'd like to see us do a similar layout for Matrix sites. I've had a few goes at doing this on a moleskin, but would like to see someone with some

HTML5

• https://mozillademos.org/demos/dashboard/demo.html - This is from the below link to Mozilla Open Wonder site, but it explains some html5 things while using html5.
• http://thenextweb.com/dd/2011/03/09/whatwg-publishes-web-developer-edition-of-the-html5-spec/ - WHATWG have published their webdeveloper edition of the HTML5 Specification. This is kind of the real world version of how we will be using the new spec, rather than the specifications that the browsers will be asked to follow.
• http://www.paciellogroup.com/blog/2011/03/html5-accessibility-chops-section-elements/ - This post takes a look at the semantics of the HTML5 elements including the Section, Article, Aside and, Header and Footer elements. It also takes a look at the ARIA roles and how you can improve semantics for Screen readers.

CSS

• http://www.alistapart.com/articles/css-floats-101/ - A List Apart takes a look at the tricky CSS Floats in this very well written article.

Fun Stuff

• http://xkcd.com/866/ - Compass and a straight edge. Very funny, very true!
• https://demos.mozilla.org/en-US/ - Mozillas Web O(pen) Wonder project highlights some very cool stuff being done with

While researching the iPad book that I'm currently building I've been taking a closer look at Typography.

The first Smashing Mag Book says “Typography is the soul of design; it lies at the heart of visual literacy.” while Robert Bringhurst, author of The elements of Typographic Style describes it as “Typography exists to honor the content”.

In my experience so far I have found that it can make or break the book. With a few simple changes to the font-type, letter-spacing, font-height / line-height and padding to control the paragraph width you can completely change the readability of the book and turn it from a beautifully crafted reading experience to a bunch of words on the page

While there are many many tips and tricks to keep in mind when it comes to the Typography on your website, or within your iPad book in my case, I am still lacking a confident rant about the best practices, and will instead direct you to a few handy references I've found thus far.

Bibliotype

BiblioType is the name of this article and it gives you a kick start in typography when it comes to the iPad. I won't put too much about it because I really think it speaks for itself and can get you up and running faster with any tablet device.

I disagree with the “Best viewed on an iPad” badge (welcome back days of Netscape Navigator) but I will admit that it doesn't work great with the Chrome Browser on the Mac.

Blind Text Generator

Blind Text Generator provides you with an easy way to fill content out within your dummy pages, but also provides a handy interface to set your typographical style for the <p> tag.

The simple options allow you to update the type of dummy text, the number of characters or words, whether you want them in 1/2/3/4 or more paragraphs, and whether to include the <p> tags. The advanced options ensure you've got control over the style applied to the text, and you can see quite quickly and easily what the different options can do to the readability of the paragraphs.

For a more detailed version of this, and one that you can compare against each other (and admittedly one that I found while writing this article) is Type Tester.

Type Kit

Type Kit is a fantastic way to get the fonts you want to render on the web. They're so popular that they've got some of the biggest websites including Twitter, New York Times and Wordpress using their service. There is probably cheaper services out there, but for sheer performance, selection and ease of use I'm a big fan!

Haga clic aquí para la versión en espańol

Who put the bop in the bop-do-wop-do-de...... Say what?!?!

Squiz Matrix (formally MySource Matrix) allows you to apply different contexts upon page contents, metadata, and paitlayouts within the CMS.

Imagine having 5 piles of paper on your desk. Each pile is made up from 3 pages stacked atop of each other (making up a total of 15 pages). Now imagine each of these piles relate to page on your webiste.

1. Home
2. Products
3. Services
4. About
5. Contact

The top page of the stack on each pile is the Default. It contains the default text, default metadata, default paintlayouts etc etc. For this example lets also say that the default is English.

The pages underneath the Default page are referred to as contexts. While they are part of the same pile, or asset in Squiz Matrix terms, they have different versions/layers of the same asset.

By default the default context is displayed..... hence the default title, however you can set conditions that determine exactly which context should be seen when viewing the website.

The different kind of context conditions that can be set include

• Accept-Language request header
• Other request header
• URL of reqest
• Destination port
• Secure/insecure connection
• GET variable
• POST variable

... and you can set 1 or more conditions and set that n number of conditions need to be met, or that all of the conditions need to be met.

For this example lets say the other pieces of paper (other contexts) are French and Spanish. Lets also assume that the contexts are activated through the following urls strings...

1. Default: No conditions set, displays when no other conditions are met.
2. Spanish: /es/ must be contained within the url
3. French: /fr/ must be contained within the url

When the system detects that /es/ is part of the url string, i.e. the Spanish Context Condition is met, then it shows that page from the pile. See the Spanish Example here.

Page Content

You have the option of adding different content to the page content of different assets. This is useful for....

• Different Languages
• Additional Members content

Some things that you should be aware of while working with contexts and page content is...

• You should also note that each content div within the page contents will inherit the default context until that div is edited within another context. Once that happens, that div within that context will never inherit the default context again.
• If you DO wish to start inheriting from the default context again you need to delete the div and recreate another div
• Nested content can NOT be contextable. If you change the asset that is nested in any context it will update all other contexts. If you require this you should look at using as content snippet.

Metadata

You have the option of setting metadata values to be contextable or non-contextable.

• Setting metadata to Contexable means you need to fill out every metadata field again, they will NOT inherit from the Default Context
• Setting metadata to NON-contextable means that all values will inherit the default value, and updating the value under any context will update all contexts.

Paintlayouts

Paintlayouts work in the same way as Page Contents for all rules and exceptions.

Design, CSS, Javascript, Images

None of these elements are contextable. If you need to use different images for each context (for example if you images have text and you are building a multilingual site) then you should use different <img> tags or change the id/class and have different background images specified within the CSS (sprites would be even better)

Yesterday I came across a tweet from @intranation

and a talented wife he has indeed!

yahnyinlondon.com has some fantastic sketch notes on display in this post and even more on her flickr stream.

I asked the question about how Amanda went about estimating the layout of the sketches, or whether she created a finished product later on from her initial notes.......

"I actually sketchnote during the session itself. I know that a 90 minute session will normally take up a whole A4 page and a 30 minute session will take up a third. If I'm running a bit short, I'll try and make more notes or do bigger illustrations. If I'm taking up too much space, I'll slow down a bit. You should be able to see the spacing vary between sketchnotes if you go to my Flickr set. Sometimes I'll add in colours / shading afterwards if I'm really rushed but that's all I'll normally do post-talk."

Amanda suggests checking out the presentation by Eva-Lotta Lamm below ..... and you can see more examples of her work at the bottom of this post.

Amandas Sketchbook Flickr Slideshow

Sketchbook Examples

I started preparing this document at my last company where I worked as Head Technical Consultant. We had a small team of developers and a few Technical Project Managers that were responsible for the delivery of the scopes. I produced this as a starter guide for things to remember when meeting with new clients so that the entire project process could run a little smoother.

While I'm not the most technical person, I know more than the average client and have a good base understanding of technical elements.... enough to know that I don't know enough.

When reading you can swap "Surf the Dream" for your own company, and "Head of Projects", "General Manager" etc etc, with the appropriate heads of business. If you're like me, it's now a one man show so you'll be wearing lots of different hats. You will also see that at the time of writing I was heavily involved with a gambling client.

When you're getting started, remember these first few things...

1. Take the client through what they should be expecting at the end
2. Get them to do some preparation work that you can work from. It's always better to take a partly completed scope to the client to see how the document they will be receiving is laid out so they know what input they need to provide to you.
3. Explain that scoping is a long, but very worthwhile, process. Try and get people to start the scoping between 9.30 and 11.00 and work through to a late lunch at 13:00/13:30. Scoping after lunch means people are less focussed. If you're running a full day of scoping then it's probably best to have a short session straight after lunch to talk about some cool new things on the their areas of interest (html5, css3, ipad applications) or demo some of your previous project work to get everyone interested again.

Project Goal

The Project Goal usually takes the shape of a sentence, sometimes a short paragraph, that give the general business reasons for the project and will describe exactly why the client is spending money on this project.

It is from this paragraph that you will be able to extract the detail of the deliverables and create more of the "how do we go about reaching the goal".

An example would be....

• "Become the #1 online only gambling site in Europe"
• "Increase revenue by 30% through moving the customer focus from Print to Web over the next 3 years"
• "Increase revenue by 15% through having the best interactive video website community for online debates"

If the client provides a Project Goal larger then a few lines, even if this is a ¬Ł100k+ project, you should work with them in reducing this so it's to a point that the Project Sponsor can easily understand.

Project Objectives

I am sure you have noted that the plural, "Objectives", has been used for this section.

The client is not going to be looking for just one deliverable for this project, that's the Project Goal. It is important, as the person responsible for writing the scope, to ensure that these deliverables are detailed at a measurable level, even if the client wants to keep the a sounds fuzzy.

The Project Objectives are what will deliver the Project Goal, and is often what the Project Sponsor will use to gauge the success or failure of the Project. Rather then use these directly you might also round off the session with a list of items called "Success Criteria".

You may find that some of the Project Objectives will form a scope item, but more often the not there will be several Project Deliverables for each of the Project Objectives.

Some Project Objectives may include.....

• "Provide a suite of products including Sports Book, Casino, Live Casino and Poker through a single sign on"
• "Deliver a Sports Book betting experience equivilant of Paddy Power and William Hill"
• "Increase online registration for exhibitions by 30%"
• "Increase web delivered articles from editors by 25%"
• "Create an online community of 50k users in the first year"
• "Increase revenue by 20% for premium content 1 year after launch"

Project Deliverables

The Project Deliverables is where you will put the majority of the detail for the Project Scope, and the most important thing is to avoid any ambiguity.

There should be 4 sections (generally) for each of the Project Deliverables, In Scope, Out of Scope, Assumptions, and Explanation. If you are working on the scope without the client, or time is short and you can not come to an agreement with the client, you can include another section called "Unresolved" to capture any tasks that haven't fit into the In or Out section.

During the hand over meeting between Sales and the Projects Team you should start jotting down the areas that you know will be required for the project. Generally projects will already have quite a few similar Project Deliverables so it's always beneficial to ask if someone has more information on areas that you are having trouble with.

Moving forward, we will create sections of Scope items for each of the "Out of the Box" product deliverables and regular deliverable items.

You should not worry if some Project Deliverables are short on tasks/content. For example you wouldn't require too much detail for the purchase & installation of servers and configuration of Matrix if it is an existing client creating an Intranet on the same Matrix System, however you *would* include a task to ensure Matrix Feed is installed on the server if you were planning to include Imports as part of the project.

When adding individual tasks to the Scope remember that the Out of Scope items are just as important as the In Scope items.

Sometimes the Scope, depending on the size of the project, will not include wireframes or process flows so it is important to provide the client with an accurate description of not only what they are going to be receiving, but what they're not.

The Out of Scope section can also be a good tool to include items that come up during the initial discussions with certain members of the project team that explain what they would like from the project in terms of "Amazon does...." "Google's Calendar has..." "Facebook connects through...." and "BBC allows users to....."

Of course, if the project is Ł100k+ then these can be reviewed a little closer.

It's important that you do not use the Out of Scope area to exclude things that are in the project but not the responsibility of our Project team. This could lead the client to believe that it's still being delivered as part of the project, just not by us.

Instead, next to each of the items/tasks against the Project Deliverables you should list the responsible party. If the task requires input from both the Project team and the Client, try and split the task to separate the tasks, and if that is not possible *bold* the party that you agree is overly responsible for that task (this should usually default to your agency).

Although it is the overall responsibility of the Project Manager, every Project Deliverable should have a responsible person assigned to that task, whether Internal, from the client team or a 3rd Party Vendor. This creates ownership and responsibility to the project team for every task.

If you've used the "Unresolved" section then it is usually because no one at the meeting can make a decision. These items should be referred to the Head of Projects or Sales internally, and to the Project Sponsor on the client side for resolution. If there is still a conflict between the In/Out decision this is where the Project Sponsor and Surf the Dream Senior Management will resolve the issue..

The Assumptions section is used to paint a better picture of the In and Out of scope section for the Project Deliverable. For example one of the deliverables might be "Surf the Dream to display 3rd party data records on homepage widget". The Tasks might be for the

• 3rd Party to supply a access to the information through SOAP interface (3rd Party)
• Use API asset to retrieve XML or JSON (Surf the Dream)
• Display the items through server side javascript based on the design (Surf the Dream)

Now you might notice that a few things are missing here including how often should this be updated, can it be cached, is the item behind a firewall, what happens when the feed is unavailable etc etc. In the assumptions section we could include, "Surf the Dream assume that the 3rd Party has a documented SOAP interface with their product capable of serving valid xml/json with no security on access to this data. In the event that no data is available a simple 'currently there is no feed' is displayed." While we would probably include the "No Feed" scenario in the Scope this assumption provides the client understanding that IF the 3rd Party does not have a documented SOAP interface etc etc then it is out of scope/will take longer/will cost more.

If between the In and Out and the Assumptions there still is some ambiguity it should be spelled out in the explanation section.

Identify the Project Sponsor

This is the person that can at any time stop the project in it's tracks, and it is likely that they will not be attending the meeting you have booked. You need a Project Sponsor as part of any project as they are the ones who approve the payments and will allow the sign off of the project. The Project Sponsor will be the point of contact for either the Head of Projects, General Manager, or the Managing Director if at any stage of the project things are not going to plan.

Even though things are going to plan, it's not always due to things caused by the Projects team. There could be a change of requirements that you believe will delay the delivery or increase the cost of the project, there could be issues with a 3rd party supplier beyond the clients or project teams control, and in a worse case scenario there could be a working relationship issue between the client and project teams.

What ever the issue, having the Project Sponsor involved at the very beginning allows the project teams to pass the difficult conversations on to senior members and just focus on delivering the project.

Project Cost		Number of Sponsors
Ł15k -Ł30k 		        1
Ł30 - Ł50			1
Ł50 - Ł100			1
Ł100+				1

Identify the Project Stakeholders

These are the people that are going to be working with you throughout the entire project. It is best to catch up with the Project stakeholders individually to run you through what they think the project is going to deliver. Projects that have 3 or less stakeholders can be done as a group because

1. It's less likely someone will control the meeting and override others comments, and
2. you will not have the time/budget to conduct individual sessions.

Each Project Stakeholder will be responsible for a particular section of the project you are working on. You will often find that one of the Project Stakeholders take on the role of the Project Sponsor for most of the project because the Sponsor has more than this project to worry about. While they are assuming this role you should get buy in from the Sponsor exactly what this particular Stakeholder can or can not sign off on. Depending on the Sponsors management style and IT knowledge, they will give them one of three levels of management

1. Complete free reign over the project
2. Free reign over changing the scope providing no budget/delivery dates are affected
3. Ability only to sign off on scope that is agreed.

Obviously not all stakeholders needed to have individual sessions. For instance you wouldn't sit down with the Network Administrator and ask what they want to achieve from the project, however you would ask what project and ongoing role they will be playing with the client and maybe set up a meeting with our own System Adminstrators, so use your own digression.

• Project Manager
• Designer/Design Agency
• Database Administrator
• Lead CMS/Content Editor
• 3rd Party Vendors (existing system integrations)
• Printer
• Creative Director
• Web Developer
• Programmer

The typical number of stakeholders depending on the project

Project Cost		Number of Stakeholders

¬Ł15k - ¬Ł30k 		        1
¬Ł30 - ¬Ł50			2 - 3
¬Ł50 - ¬Ł100			5 - 7
¬Ł100+				7+

This is just the tip of the iceberg when it comes to online web project delivery, however I hope it provides you with enough insight and some tips and tricks on how to set the base of the project and make the initial project meetings run a little smoother. Sat, 29 Jan 2011 11:59:42 +0000 http://surfthedream.com.au/writing/scoping-web-projects http://surfthedream.com.au/writing/nerdy-thursday-links-12 justincavery@gmail.com (Justin Avery)

This week I was down in Brighton twice learning about the iOS platform and taking a closer look at Google Chrome Browser Extensions with @mahemoff.

I've not got as much time this week, so there's links to more information on the iOS Development Course and Building Google Chrome Extensions.

Mobile Web Development

• http://www.vodori.com/blog/phantom-limb.html - Phantom Limb - this gives you pretend touch interface with your web application. A bit clunky, but it works.
• http://www.slideshare.net/fling/designing-mobile-experiences - An amazing 300+ slide looking at the mobile UX
• http://tinysrc.net/ - resizing images based on the device you're running, and with the added benefit that ONLY the right sized image comes down too.

Extra.....

• http://garmahis.com/reviews/ipad-tools-tips-design/ - some tips if you want some further reading

Front end security

• http://www.smashingmagazine.com/2011/01/11/keeping-web-users-safe-by-sanitizing-input-data/ - This raises some good points and we should look at the way we're implementing Matrix. Any user generated content should be printed on the frontend with the ^striphtml or ^htmlescape keyword modifiers attached. This removes the possible issue of having xss exploits.

Could this be done in Matrix?

• http://mashable.com/2011/01/10/goo-gl-gets-an-api/ - Has anyone considered building a URL shortener in matrix. Take 1 asset builder, 1 js random string generator, 1 simple edit interface to update webpaths, a little bit of js front end error checking.... voila.

Cool Stuff

• https://github.com/makr/tdom.git - This is a nice little 404 page with a nice mouse over affects. oohhhh, rotaty thingy.
• http://mashable.com/2011/01/11/how-wordpress-themes-actually-work-infographic/ - While the infographic is specifically for Wordpress I'd like to see us do a similar layout for Matrix sites. I've had a few goes at doing this on a moleskin, but would like to see someone with some

HTML5

• http://blogs.sitepoint.com/2011/01/18/dont-forget-about-html5s-little-guys/ - everyone is raving about HTML5, I even got some tongue-in-cheek business cards made up, bu there are a few little semantic fellows that are getting lost in the hype. Make sure you don't forget the little guys.
• http://adactio.com/journal/4267/ - Jeremy Keith has a look at the semantics of HTML5 and poses the question as to whether we should have a <maincontent> tag to go along with the <header> and <footer> tags

CSS3

• http://cssglobe.com/post/9435/pure-css3-post-tags/ - A nice little tutorial to add some flare to the post tags (which will be changing on this site very shortly).

Before I get a chance to write this up properly I've updated my list of notes taken during the session. It is the second time I've seen Michael Mahemoff. You can also read his blog of the event.

google developer relations.  periodic table of elements.


Existing extensions:

awesome screenshot

control freak - update css and js on the page, apply all sites, just the domain or just the page.


http://code.google.com/apis/feed/v1/devguide.html get the feed.

If the extension is flickering you can set the width and height.


search for chrome extension badge text to update your icon with some information.

make manifest.json

geolocation is one of the permissions that you accept upfront.

Create this for the Director of Lemons.

browser actions (on the grey bit) or page actions (on the white url bar)

omnibox extensions
add a prefix in the url bar and use the following text to do anything with the bar.  USE THIS FOR FUNNELBACK SEARCH OF DOCUMENTS ON THE FLOOR!!!  so a squiz employee would type "fb title of document" and press enter to get the information back.

contextual menus



Extension Patterns: Run in the Back Ground

 - Background Page.  All the extensions run like a background page. (background.html and you need background permissions.)  Powerful concept because you can sit there and wait for information and then alert the user through Growl for an update.  Can continue to upload in the background.  Can do SETI at home in the background.  Saweeeeeet!

github mahemoff for the control freak.

webworkers 

sharedworkers: 


github/mahemoff/countdown ........

runs background when chrome isn't running.]


get users history for a recommendation application/engine.

difference between a extension and an app is that there's a launch in an app.  A packaged app is just a reference to a local file.

User chromium if you want to develop on the bleeding edge.

http://appmator.appspot.com

Drop Mocks = awesome app

weather bug - london vs darwin

html5rocks.com - article about writing to and reading from a file.

softwareas.com rss feed that thang!

You've been duped into thinking there was something at this URL when there really isn't. I've built this site and moved some of that pages around and removed some of the others.

Seeing as we've got off on the wrong foot let me introduce myself. My name is Justin Avery and I work for a web agency in London as the Head of Technical Consultation. I provide advice to clients around developing their online business and produce technical solutions, specification and briefs for our development team to build, or back to the client to do inhouse.

Recently I've been writing about The true size of Africa, All the single ladies, and Why responsive design is like more than just water, and am always looking to add more articles and visuals to the site.

*note that this is a first draft of this and most of the links have been omitted. check back in a day to get the updates with links to all resouces*

Well it's the end of a very long day in Brighton and I've managed to yet again find myself with a pint of Landlords at the Rabbit.

Today I came down from London to attend a one day course on iPhone development run by@aral balkan. Aral is the developer of the Feathers App, a twitter client that allows for cute icons, and has been around the world of iOS development since you could download xcode (and a few years before that as well).

Morning Session

The day started off slow which is as to be expected for a single day course. Aral described the types of devices that the course was covering, and basically what you need to take into consideration when developing any kind of iOS application, i.e. what generation is the device, does it have a camera, does it support multi-tasing, does it have a back and front camera etc etc. Nothing in too much detail, but an overall introduction into things you should take into consideration (which is especially good when scoping out project with clients, even if you're not going to get on the tools and build them yourself you need to be aware of such things).

iPads, iPod touch, iPhone 1/2/3/4, retina display, physical pixels, dimensions and orientations......we talked about them all. NEXT!

Next we took a look at some of the important resources you may need/should be referring to when taking on your project. Aral has his own little URL shortener (only because he obviously loves the t.co that twitter have introduce *insert link to his complaits*)

Human Interaction Guides (read them NOW)

• http://thelink.is/iphonehig
• http://thelink.is/ipadhig
• http://thelink.is/osxhig

Heard of "Let me google that for you?"

this is the iOS developer version of it. Look before you ask.....

• http://thelink.is/iosdevcenter

Wireframing

• http://thelink.is/imockups (iPad app)
• http://thelink.is/istencils
• http://thelink.is/ipadwireframeeps
• http://thelink.is/keynotopia (pretty cool, I must look into key note for interactive wireframing

Analytics for apps

• http://thelink.is/appfigures
• http://thelink.is/flurry (used to be pinch analytics, Apple might not accept the app if this is on it, aral has removed it from feathers)

Apart from those pretty cool resources the two main things that I got from our morning session were these two quotes from aral.....

"Don't think of the iphone as a phone, think of it as a touch interface to your application when designing your app. Same goes for the iPad."

"Context is everything in mobile."

Morning Session - part du

From here on in we hit the keyboards. The first thing we looked at were web based applications and including frameworks like JQTouch. We began to utilise some of the meta tags that Safari mobile would take into consideration like no zoom and view ports. I only wrote one note for this entire session which was......

"If you're disabling the zooming then you need make sure you make accessible options for users that need larger text."

Basically, plan for everything you can. If you're going to disable or relay on something always being available then make sure you've got all the options covered. For example, if you're always relying on the software keyboard remember that users can use a bluetooh keyword which then disables the software keyboard.

Plan!

Of course, this was just a web app framework that allowed you to mimic the interaction UI of the iOS, you still were not able to get access to the iOS native functions (camera, acceleraometer) unless you wrapped this up in PhoneGap and create a downloadable application,

The other issue with this approach is that EVERYTHING is rendered in the WebView and the application has to render the HTML which is MUCH slower than anything else we reviewed.

One really annoying part of moving JQTouch into PhoneGap was that after the initial index.html file that is the home of the application, all other pages had to be stripped of the html, head, body tags and you could only be left with the structural div elements and content tags. PANTS!

On the other hand, we did a quick example of taking a photo and getting it on the application page WOOT!

WOOT!

This is the index with the camera coolness......(right click and view the source code to see this)

<html>
<head>
	
<meta name="viewport" content="width=default-width; user-scalable=no" />

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<title>DrillDown</title>
<link rel="stylesheet" href="jqtouch/jqtouch.css" type="text/css" />
<script type="text/javascript" charset="utf-8" src="phonegap.js"> //Just added comments here to make the code window work on the blog postjsender</script>
	

"html_tag_brackets"><link rel="stylesheet" href="jqtouch/theme.css" type="text/css" >/>
"html_tag_brackets"><script src="jqtouch/jquery-1.4.2.js"></script>>
"html_tag_brackets"><script src="jqtouch/jqtouch.js"></script>>
  
"html_tag_brackets"><script>>
 // Initialize JQTouch.      var jqt = new $.jQTouch();
"html_tag_brackets"></script>>
  
  
 
    "html_tag_brackets"><script type="text/javascript" charset="utf-8">>


	// If you want to prevent dragging, uncomment this section	/*
	function preventBehavior(e) 
	{ 
      e.preventDefault(); 
    };
	document.addEventListener("touchmove", preventBehavior, false);
	*/
	
	function onBodyLoad() {
		document.addEventListener("deviceready",onDeviceReady,false);
	}
	
	/* When this function is called, PhoneGap has been initialized and is ready to roll */
	function onDeviceReady() {
		// do your thing!		
	}
	
	// Using the PhoneGap API (found in phonegap)    
	function takePhoto() {
		navigatior.camera.getPicture( cameraSuccess, cameraFailure);
	}
	
	function cameraSuccess(imageData) {
		var image = document.getElementByID("myImage");
		image.src = "data:image/jpeg;base64," + imageData;
	}
	
	function cameraFailure(imageData) {
		alert("Failed because: " + message);
	}
	
    "html_tag_brackets"></script>>
  "html_tag_brackets"></head>>
  "html_tag_brackets"><body onload="onBodyLoad()">>
  	  "html_tag_brackets"><div id="jqt">>
      "html_tag_brackets"><div id="home">>
        "html_tag_brackets"><div class="toolbar">>
        "html_tag_brackets"><h1>Home</h1>>
        "html_tag_brackets"></div>>
        "html_tag_brackets"><ul>>
          "html_tag_brackets"><li class="arrow"><a href="about.html">About</a></li>>
          "html_tag_brackets"><li class="arrow"><a href="blog.html">Blog</a></li>>
          "html_tag_brackets"><li class="arrow"><a href="contact.html">Contact</a></li>>
		  "html_tag_brackets"><li><a href="javascript:takePhoto():">Take Photo</a></li>>
        "html_tag_brackets"></ul>>

  "html_tag_brackets"><img id="myImage" width="300px" >/>
  
  "html_tag_brackets"></div>>
  

  "html_tag_brackets"><div id="about">>
            "html_tag_brackets"><div class="toolbar">>
    "html_tag_brackets"><h1>About</h1>>
    "html_tag_brackets"></div>>
    "html_tag_brackets"><a class="back" href="#">Back</a>>

    "html_tag_brackets"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>>

"html_tag_brackets"><p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>>
  "html_tag_brackets"></div>>  
    "html_tag_brackets"><div id="blog">>        
      "html_tag_brackets"><div class="toolbar">>
    "html_tag_brackets"><h1>Blog</h1>>
      "html_tag_brackets"></div>>
    "html_tag_brackets"><a class="back" href="#">Back</a>>

    "html_tag_brackets"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>>

"html_tag_brackets"><p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>>
  "html_tag_brackets"></div>>  

    "html_tag_brackets"><div id="contact">>
      "html_tag_brackets"><div class="toolbar">>
    "html_tag_brackets"><h1>Contact</h1>>
      "html_tag_brackets"></div>>
    "html_tag_brackets"><a class="back" href="#">Back</a>>

      "html_tag_brackets"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>>

"html_tag_brackets"><p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>>
  "html_tag_brackets"></div>>   

  "html_tag_brackets"></div>>

  "html_tag_brackets"></body>>
</html>

PANTS!

This is the rest of the html pages...... seriously the entire file.... not html tags or nuffin.....(right click source again)

<!-- I couldn't work out how to get this all to display in the front end.  Yes, I am stupid. -->
<!--

  <div id="blog">
            <div class="toolbar">
    <h1>Blog</h1>
    </div>
    <a class="back" href="#">Back</a>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>

<p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
  </div>  
-->

Native App Frameworks

We began to look at other frameworks that still allowed for another buffer between you and Objective C.

Dashcode

If you are happy with the Apple UI and only want to create something simple, Dashcode is worth a lool. We used the PodCast example and were quickly able to pull through the most popular podcasts from Jeremy Keiths HuffDuffer into an app.

You get Dashcode as part of the xcode download from the Apple Developer centre *link*

Nimble

This was by far my favourite part of the day, although 6 hours after we were using it I seem to have forgot most of what we learned....... I suppose it's a good thing that Aral provides a USB key with everything on it.

While Nimble is another Framework that will use the WebView it also has a pretty bloody handy API that you can call by JAVASCRIPT to write native elements.

I hear you....... what the hell is he talking about?

Where as the JQTouch would contain what you see above, Nimble has the following......(right click... you know...)

<!-- I couldn't work out how to get this all to display in the front end.  Yes, I am stupid. -->
<!--
<script>
	var records = [
	{title: "About", subtitle: "more information.", callback: "itemTapped(0);", page: "about.html"},
	{title: "Blog", subtitle: "more information.", callback: "itemTapped(1);", page: "blog.html"},	
	{title: "Contact", subtitle: "more information.", callback: "itemTapped(2);", page: "contact.html"}
	];
	
	var navController = new NKNavigationController();
	navController.setTitle("iOS Mojo");
	
	function itemTapped (index) {
	NKLog("Callback: item taped: " + index);
	
	navController.gotoPage(records[index].page);
    }	
	
	var table = new NKTableView();
	table.init(0,0,320,480,"plain");
	table.insertRecords(records);
	table.show();
	
</script>
-->

The brilliant thing about this is that when you see NK... used in the syntax it is calling a native fucntion on the same name except replace the NK with UI.

This has a two fold benefit of being FASTER than a WebView, and also it means that you will get used to the native terminology and availabe functions. If you run into issues with one of the NK functions, add UI to the beginning of it and refer to the Apple Developer Resoureces. BAM!

What does this really mean? It means that you're application will run MUCH faster, and that's about all you should need to know.

There's more to this story, but my train is leaving and I've got some WIRE to watch...... more soon!

Today is a good day.

Looking out the window of my train to Brighton I can see the sun is just peaking through the clouds as we pass the Battersea Power Station on my way to an iOS course run by Aral Baker.

A few minutes earlier I was sat at Caffe Ritazza at the Victoria Station sipping my coffee (scolding my tongue actually), reading through the rubbish that is the Metro paper, when a few guys wearing paint splattered overalls sat down on an adjoining table.

They were obviously painters, or paint ballers, and I eve's dropped into their conversation.

The "Hammer", so named based on his East London accent and obvious West Ham Tattoos, appeared to be explaining who was going to be working at each of the locations for the day.

Apparently Mike was going to be working with the Hammer in Pimlico.

"No, no, no, no, no, no, no, NO!" says "Jordy", another painter standing with his extra special extension handle he was cradling like a que that was owned by Steve Davis.

"Mike is supposed to be working with me at the Canada Water job!" Jordy continued to explain.

After some discussion around the details of both of the jobs the conversation ended with Jordy saying "Screw them then (Canada Water), they still owe me money for the first job and they can wait to have this finished then".

What had just happened?

Well it's the same thing that happens every day with Contractors with too much work and not enough staff to cover.  You stop looking at how you can best serve all of your customers and begin to look at how you can minimise dissruption to the most valuable customers while still giving enough of a service to the others without them wandering off to get someone else to do the work.

A horrible thought that someone would be giving you less than their best, after all you're paying them for a service, but it is an unfortunate fact when it comes to doing business with most Services.

This isn't just related to painting or delivering websites, it also spans across builders, plumbers, electricians, flight attendents, resteraunts, taxi drivers, utilities.... the list goes on.

How do I make sure I'm not affected?

You are going to be in one of those groups at some stage during your life whether you like it or not.  You'll either be offering something you can't deliver, or expecting something you're not going to get.

The Client

As the client you can take certain precautions to ensure that what you are expecting will be delivered on time.  Some of these might not be possible in every situation but give them a go.....

• Be the big client, try and be the one they drop things FOR
• Ensure that you can go elsewhere to get the job done, the sound of a clients footsteps leaving is often followed by a big push of work
• Be the client people want to help.  If they like you the won't want to dissapoint you and may put you infront of bigger clients, or do the work in their own time
• Promise repeat business.  If you're looking to invest further down the line then the provider will want to make sure you stick with them.

The Provider

While you are responsibile for the delivery of the service you're offering, everyone knows that in order to grow the Company profits you need to run a tight ship, which often means having less resources than required.  It's not a secret, everyone knows, so here are a few things to make that feel better for the client

• Say No. Sometimes you just have to turn work away.  It goes against everything you believe, but not having a client is better than having one that is complaining about you
• Update update update. If you're going to let some work slide, tell the client.  It's hard to do, but at least they know up front. It's much better to do this upfront then have them angry calling you a week later.
• Hire. There is a fine line between too many people and too few people.  It takes at least 3 months to train someone to be effective, and if you're other staff are over worked the chances are they are looking elsewhere.
• Give something for nothing.  It doesn't have to be a big thing, but by giving something to the client they weren't expecting means they will feel indebited to you and will let something slide in the future.
• Be honest. If you can't be honest with someone then you're living a lie, and that will hurt both your business and yourself.

At the end of the day the Customers will always want more then they paid for and the Providers will always be trying to turn a profit.  Keep your options open, say no sometimes, stay in touch and be honest, and everything will work out just fine.

This article is courtesy of the extremely intelligent Adam Fisher. Thanks Fisher!

If anyone wants the home and end keys on the macs to work in a more standard way like windows (put the cursor to the end or beginning of the current line), this quick process will fix them nicely in many programs (including TextMate).

Look in /Library for a folder called KeyBindings - create it if it doesn't exist. Inside this folder, create a file called DefaultKeyBindings.dict that contains the following:

{
    	/* Remap Home / End keys */
    	"\UF729"  = "moveToBeginningOfLine:";               	/* Home     	*/
    	"\UF72B"  = "moveToEndOfLine:";                     	/* End      	*/
    	"$\UF729" = "moveToBeginningOfLineAndModifySelection:"; /* Shift + Home */
    	"$\UF72B" = "moveToEndOfLineAndModifySelection:";   	/* Shift + End  */
}

A few friends of mine are opening a set of studios in SE1. I spent the weekend snowboarding with the owners and the guys running the studios and they're all very sound and talented peoples.

About Studio 180

The Studio

Studio 180 is a converted Georgian terrace containing five unique artists studios. Ideally situated in central London (SE1) it is close to transport links and the nearby cultural hub of Southbank. Each studio has been purposefully tailored, drawing on both the original features of the building and intimate nature of the space. It also benefits from being partnered with Make Space Studios, an already established and vibrant art community within walking distance.

The intention behind 180 was to create an intimate working environment that inspires resident artists to explore and develop their practice. The building hosts a playful domesticity and unique layout that invites both potential collaboration and support network from fellow artists.

Each studio has its own unique charm. Throughout the terrace original Georgian features have been exposed which include cast iron fire places, timber dividing walls, high ceilings and natural light

Studio Rates

• Green Studio - 3.9m x 3.9m x 2.8 (H) = Ł456 pcm inc;
• Yellow Studio - 3.3m x 3.7 x 2.7(H) = Ł396 pcm inc;
• Pink Studio - 4.7m x 3.7 x 2.7(H) = Ł516 pcm inc;
• Turquoise Studio - 3.4m x 3.7m x 2.7 (H) = Ł396 pcm inc;
• Red Studio - 4.7m x 3.8m x 2.1m (H) = Ł450pcm inc. Studio shares will be considered.

Location

180 Lambeth Road has a rich history. It was originally part of a long terrace, however after the demolition of much of the street to make way for the Waterloo rail links it has had many incarnations. Petrol station, residential use, corporate offices and more recently it was left derelict and abandoned. It was made famous in the1946 film ‘Passport to Pimlico’. It has now been repurposed once more, this time as art studios, contributing to the burgeoning art scene of South East London.

Lambeth North and Waterloo stations are within 10 minutes walk and all public transport links are excellent. Locally, Lower Marsh and Southbank boast an eclectic mix of galleries, cafes, bars, theatres and book shops.

Artists

Artists have 24 hour access and there is wi-fi internet and heating throughout the building. 180 has onsite shower and toilet facilities, as well as two communal spaces, comprising of a kitchen and utility room. There is off street parking for loading and a van available for hire at very affordable rates.

Studio contracts will comprise of a one month deposit, Ł20 admin fee and are on a rolling monthly basis.

Enough about, I want!

Contact

To apply for a studio contact info@makespacestudios.co.uk along with a CV/bio and images, or include a link to your website.

More information on the PDF flyer

I've just read Scott Berkuns article about how "All ideas are made of other ideas. It was a short post, however I'd also seen his Keynote presentation on the same topic during the Web Directions Conference in London.

It got me thinking, at 8am, and this is what I managed to get out of my still cloudy early morning pre-dietcoke brain

If you looked at ideas in the same way that you look at an object you could postulate that you can continue to break the object down until you reach the core parts. The core parts then become the building blocks on which all other objects are built.... string theory for instance.

But /can/ you treat an idea in the same way as an object? I don't think so.

Ideas are based on other ideas are based on other ideas...... They become an abstract thought in a myriad of minds where each person has their own understanding of how a single idea is broken down into other ideas.

Has anyone tried to take a single idea and map it back as far as it can go? It would be great to see it how it evolves and how the connections are drawn *heads off with pencil and paper*

Today we had a client looking to represent some renovation work on a historic piece of pavement dating back to the 10th Century.

Before we embarked on sketching out the possible layouts for the time line we discussed the data/information that we needed to display to the user so that we could work out the most suitable layout. We then began considering a few of the possible variables around the time line and ended up with the following list ideas/concerns

• Timeline is only for this project currently, but we may want to reflect multiple projects on a single time line
• Although spanning 11 centuries, most of the restoration work for this project has been done over the past 20 years, so we don't want the timeline to be too heavily weighted on one side
• The timeline needed to be accessible, from IE6(ergh) to smart phones and tablets
• Not Flash only (see above)
• Differentiate between content. Not just between the Projects but also between news stories, press releases, images and video

Once we had a better understanding about the information we were dealing with wet began to sketch out a few possible layouts for the information. Unfortunately (for us) the clients budget is not able to stretch very far, probably because they spend all their money or restoring the old, so we looked to draw inspiration from timelines that already exist.... and possibly frameworks that would assist in reducing the development/implementation time.

Timeline Inspiration

• MIT's Simile Timeline - a great framework that is pretty easy to put into place.
• tribalddb.nl - These guys use a timeline for their whole website.
• AP's News Timeline - I really liked the way you can separate the different content on the left, and the color visualisation
• Dipity Timline (see an example below) - Great because you only need to pass it a feed.

Other timeline ideas

We're still working out which pieces can be taken from these examples and how to fit it together. If you have worked on a timeline in the past or have come across some good examples I'd love to hear about it. I'm in the process of adding comments, but for now you can email me at justincavery (at) gmail (dot) com.

Timeline Example

Dipity Example

SIMILIE Example

Random

• http://clientsfromhell.net - please don't post any thing from our clients here, but it's nice to have a quick look through and see that people go through the same pain (and often worse)
• http://stopwilson.com - DOS style blog site. Very cool!
• http://superuser.com/questions/231273/what-are-the-windows-a-and-b-drives-used-for - Seriously, kids these days have no idea how easy they've got it. Anyone for a 34 disk install of Windows 95?
• http://jhische.com/workforfree.html - Should you work for free? Follow the path to enlightenment.

Mobile

• http://blogs.nitobi.com/steve/2010/12/14/phonegap-getting-started-screencasts - Phone gap screen casts to get you started moving HTML/CSS/JS web applications onto native phone applications

CSS

• http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/ - CSS RESET Styles - the 2011 version - as always make sure you read the comments.... it's a conversation, not a presentation.
• http://www.spritebox.net/ - an easy way to get the hang of sprites (this automatically creates the CSS for you)
• http://cssuseragent.org/ - An interesting look at using User Agents to avoid hacking your CSS.

Education

• http://lanyrd.com/video/ - This could go under lots of topics, but you can watch loads of great presentations here.

Video

• http://h264.code-shop.com/trac/wiki/Mod-H264-Streaming-Apache-Version2 - Set up fake streaming from a non streaming server.  This will allow you to link to certain parts of the video file through flash players like JW Long Tail.
• http://firefogg.org/ - Convert videos to OGG format from Firefox.  Firefox/Mozilla believe in an open web, which is why the OGG (.ogv) video format is the only video type that Firefox currently support through their video tag implementations.
• http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html - Just when you thought that Google won't be going out on a limb for a while, they've struck h.264 support from Chrome.  This leaves Chrome supporting OGG and WEMB formats only, and will probably go a way to putting h.264 out of the mass market on the internet.  It seems as though Google are going down the path of Mozilla.

Browsers

• http://gs.statcounter.com/press/firefox-overtakes-internet-explorer-in-europe-in-browser-wars - Firefox finally takes the lead over internet explorer, at least in Europe.

iOS Development

• http://idevrecipes.com/ - If you're looking to build an iApp then check out some tutorials on how to achieve UI elements we're used to seeing.

If you're not already aware, I'm moving this site across from the www version to a html5 non-subdomained version.

As part of the move I'm going to update all my video file formats so that it can be enjoyed in all HTML5 wonder.

There are hundreds, thousands, of resources on the internet for HTML5 Video formats, however I really like DiveintoHTML5 so that's where I went.

Keep your eye on the visual section of this site for the change, and check back here to see all the issues I have during the process (like having to update my ffmpeg settings to encode for webm and download ffmpeg2theora).

Update 10/01/2011

I had a bit of trouble on Sunday night getting the files uploaded onto the CMS and then being able to render correctly on the front end.

The first issue was with the Mime Types of the files.  Apache already had MimeTypes for OGG (.ogv) and MP4 (.mp4) format, however it was lacking WEBM support (.webm).

After updating the Mime.conf file within the apache configuration settings I thought that I'd be on the road to success, but it was a little bit more bumpy.  For some reason the mp4 and ogv files were working fine, however the webm versions were not being recognised.  I had already commented on twitter about the point of running webm when you didn't need to use it to cover all of the browsers, however Justin Cormack replied to confirm that webm does offer better quality for the same bitrate (and therefore size and save on bandwidth)

Today Laura and I are back in Thame for Charlie (her fathers) birthday.  As always when you're back at home you tend to go through old boxes and pull out things that have been packed away forever, whether they be scrapbooks, old letters, photos, or in this case an old Hi8 Canon Video Camera.

As with all things old, Analogue was the only way data was transferred and "digital" was only a distant possibility on the horizon.  This means that most of the old video cameras have only an AV out which leaves few ways to covert the footage over to DVD via the Mac.

After a little bit of searching forums and some searches on Amazon I came across the  EZ Video Capture Card which provides the ability to do just that.

It only goes for a little over £15.00 and it means that you've got a way to copy ANY AV footage, including you're old VHS, over to digital so you can then put it on to DVD or keep on your external hard drive or S3 storage.

I've decided I'm tired of looking at Laura's laptop with IE and seeing this site render like shit.

To overcome this I've decided to get Virtual Box running on my Mac with at least IE 7 and IE 8 (which has been later dropped off to just running IE7).

Unfortunately there is no ready made download for this, but I came across this nice tutorial from http://chadnorwood.com/2009/05/06/testing-ie-on-a-mac/ http://shapeshed.com/journal/testing_with_ie6_ie7_and_ie8_on_virtualbox/ http://socket7.net/article/how-to-run-ie-on-your-mac-with-virtualbox

To start with, go and get the following....

• Virtual Box
  
• Versions of IE you want  .....or rather need.  No one wants IE
• Qemu  - sudo port install qemu (if you don't have Darwin Ports installed then google it and follow someones download instructions)
• Unarchiver
  

Now that you've got those and have installed Unarchiver and Virtual Box, right click and open one of the .exe files you downloaded from Microsoft using UnArchiver.  You should probably set up some of the preferences first so the extract is contained within a single folder.

Once you've extracted them copy them over to /Library/VirtualBox (yes copy, of you fuck this bit up you'll have to extract them again).  I've done this with IE6/7/8 for XP and it comes to 4.2 gig, so make sure you've got some space available)

Go to Terminal and run the following for each image

cd /Library/VirtualBox/<image>

VBoxManage internalcommands sethduuid <image>.vhd

From here on in I just followed all of Socket7's instructions.... so make sure you go there and click on a banner or something to give them some well deserved $£€'s

One thing that you should pay attention to is that you will get the silly "Windows Guarantee Advantage" which is by no means a guarantee of anything at all.  You're going to have to reboot, and when you do it will force you to register, but because you haven't got the interwebs yet you won't be able to register online.  Follow the prompts for the telephone registration and surprisingly it all works perfectly.  I've only got 30 days on this XP copy, but with a bit of duplication magic and snapshot gold you can keep it forever and ever.

fuck fuck FUCK!

That was just plain embarrassing. Australia's batting attack can't muster 180 runs between them, while a cross eyed metro columnist can rack that up on his own. Lucky he's not from SA.

Which brings me to the busted tooth baldheaded beard wearing GIT Prior. I swear the sight of him irritates me as much as the site of Ponting to the England fans.

Then we come to the Australian bowlers. It's not difficult, it's called line and length. And when someone says line and length they don't mean short and outside off or full and on leg. Not too fucking difficult.

This must be like supporting the English football team, you watch them in practice and they're perfect, but put the Country colours on them and place a bit of pressure and they forget the get PAID to do the job.

Right, now on to the referral system.

I know full well this is being said because I'm a sore loser, and that Australia we're probably dealt the same fortune during the test series (and if not probably will some time later), but tell me that the umpire now doesn't have to check for no balls. Do they get a pay cut with this as well?

Alright alright, I can see the benefit of checking no balls, but what about Bells dismissal? Did anyone hear the commentary on that? I saw it on replay this morning with no sound and it looked as though he was given out by Dar, referred by Bell (which took him a while, if you know you're not out you just say), and then they couldn't see a hot spot on the bat, however the ball didn't seem to brush past anything else except for the bat. I think if you can't confirm that the noise was caused by something else then you need to go back to the umpires decision, regardless of which way that went. I think something similar happened against an Aussie batsmen which later showed on snick'o that there was an edge.

Ahhhhhh, rant done.

I thought this was a pretty funny way of looking at movies in Space and the pure rubbish that goes along with it.

Surprisingly we're missing a few well known space orientated movies including E.T and Star Trek, but at least they covered all of the Star Wars Movies.

Here's a better look at the categories

• There's no sound in space
• Not all planets have Earth gravity
• Planets should have diverse climates, instead of one unified climate across a "desert planet" or "forest planet."
• It shouldn't be too easy to communicate with alien creatures, without some kind of high-technology "translator" explanation.
• And it definitely shouldn't be too easy for humans to interbreed with aliens.
• Humans exposed to vacuum without a spacesuit shouldn't explode or shatter. And a "hull breach" where the ship's crew is exposed to vacuum should kill everyone instantly.
• You can't have fires in space, unless there's oxygen leaking out somehow.
• Asteroids or other objects shouldn't be able to float close together without falling into each other's gravity
• People shouldn't be able to dodge lasers and other speed-of-light weapons
• And there's no reason why someone would move in slow-motion in zero gravity.
• Faster-than-light travel is probably not ever going to be possible.

Original Post by io9.com Tue, 04 Jan 2011 11:54:09 +0000 http://surfthedream.com.au/visual/inaccurate-science-space-movies http://surfthedream.com.au/visual/untitled-by-dave-johnson justincavery@gmail.com (Justin Avery)

Here is an awesome video put together by David Johnson.

The whole thing was hand painted by Dave.

A friend of mine has asked me to turn his book into an iPad application.

The first thing I asked him was "Why do you want an iPad application when you can have an ebook that is available across multiple devices?"

He replied with "Because I want a cool book."

I can't argue with that.

So now I've got a bunch of high definition videos and high resolution images, a printed copy of the book and a word document containing all of the content.

From here I figure the first task will be to sketch out all of the interaction design for the iPad, and organise the content into a format that is compelling reading/viewing and not based on the constraints of the printed media.

Unfortunately I'm without an iPad myself, which may very well be a difficult place to start building this. But what I lack in hand held technology I make up for with experience in interaction design, and mainly around what DOESN'T work.

So step one, I'm off to my pen and paper to sketch some layout and navigational ideas before I turn towards omnigraffle to do a little bit more polishing, and then it's head first.

I'm still trying to decide whether to use Starks jqtouch, or try out the baker framework. I've had a friend suggest using InDesign and Digital Content Bundler, but I'm thinking that sticking with HTML5, CSS3 and a bit of javascriptery will get the best results.

I've just come across this pretty amazing site that features some excellent design examples.

Looks like good design is updated on a daily basis, so it's worth adding to your RSS Reader or making it one of your morning stops when getting set for work in the morning.

There are some risque sites featured here, much like the Photography of Henrik Adamsen you can see below, but there are lots of other good examples (just be careful when opening some images at work).

• Photograhpy by Herik Adamsen
• Ipad Application by Jonas Eriksson
• Infographics by Gavin Potenza

What better time than Christmas to show an infographic about the joy of giving

Tom Shand of the http://www.theinternet.co.nz sent me an email earlier today to show me Hyphenator.js, but I'm wondering why the demo didn't include the example below......

This is a very long sentance and right at the end of it there seems to be a breakintheword.

This is a very long sentence and right at the end of it there seems to be a breakintheword.

Below I'm using the wbr tag, but I'd like to know if it's possible to do this and have a - Hyphen added when it decides to move to the next line.

Anyone?

XFN 1.1 Creator

This user interface, and the code behind it, is provided as an example for the benefit of XFN developers, and to demonstrate the clear one to one correspondence between XFN relationship values and the code that can be used to represent those values. XFN Creator 1.0 by Matt Mullenweg. XFN Creator 1.1 update by Tantek Çelik.

Hire Me

Twitter

Flickr

Facebook

Linked In

• The true size of Africa

  17 May 2012

  Africa is a big place. In fact, judging by this infographic is HUGE.

  Read more

• All the single ladies

  03 May 2012

  After a bizarre series of events someone came up with the slogan for Chocolate Al.

  

  Read more

• Why responsive design is like more than just water

  30 Apr 2012

  It turns out that responsive design has effectively been around since the dawn of time, and it's not just water that shows similarities to this new web design technique.

  Read more

• Infographic on Wildfire Jobs

  19 Apr 2012

  I was initially really keen to show off the Wildfire jobs infographic however I recently received a letter from them denying my request for a job that I had sent through aaaages ago.

  If I'm perfectly honest the application was a bit rubbish. There was no resume and the cover letter was just asking to meet up for a chat to see what the workplace and work was like. I am going to assume that it went straight to HR and was put on the bin without too much notice.

  Read more

• Responsive Web Design Resources

  14 Apr 2012

  The site is still in production at the moment and will live on responsivedesign.is once our awesome designers come up with a skin for our media query based mobile first layout.

  Sign up to the newsletter now to receive a Responsive Design Weekly overview.

  Read more

• Watch out IOS, Android is here - infographic

  03 Apr 2012

  The infographic included in this post puts it all into perspective, highlighting the major Android and iOS milestones over the course of the past five years.

  So sit back, grab a cup of coffee (or mimosa), and soak in this rather astonishing history-in-the-making lesson.

  Read more

• The hottest web job trends for 2012

  02 Apr 2012

  Take a look through the popular areas of the web industry and find the pay scale, skill needs, who's hiring and bunch of other information. It's very much focussed at the United States, so take everything with a grain of salt.

  Read more

• Justin Avery Facebook Monster Infographic

  01 Apr 2012

  I'm not the most prolific user of Facebook these days from a personal point of view, however I do have several business pages that I maintain including Javery Design and Responsive Web Designs.

  Read more

• Communication

  19 Mar 2012

  The most effective use of communication is visual communication. You can explain how to do something to someone ten times and they will tell you they understand it.

  Read more

• Create Visual.ly Infographics with Facebook Pages & Twitter Tags

  14 Mar 2012

  Visual.ly has come out with a new way to create infographics..... or poster type pictures that everyone now accepts as being an infographic

  Read more

You're no blue smarty in my book!

I wanted to spend more time on the video but I would have had to start the project before I met you to do what I wanted to do.  I did have a quick look at trying to do it with Natural Confectionary style ad's, but I want to do that with you all when I get back.

Due to the lameness of the video you've also go these two quick downloads

Sarah's Birthday MP3

Sarah's Birthday M4A

Miss ya lots, HAPPY BIRTHDAY, hugs and kisses from Darwin

xoxoxoxoxoxoxoxoxoxoxoxoxoxoxo (see my x and o key are working now)

Lyrics

We met a last year working vodka revolution 

you had your hair pulled back and I could tell you wanted to do me

No that's just a lie, you waannnnted some one more senior

You called me up and said you had a spare room

I met your house mates and I could tell that they're cool

Pretty soon I'd moved in to yooooouuuuur oooooold room

and now it is your birthday 

and I can't be there

To say Happy Birthday

Sarah when you get back home make sure you scream

my name as you walk up the stairs.

For a month this year we did a lot of travelling

Trevi fountain, cinque terra, and a bit of tooth aching 

sleeping in the car and showering by the car park

and the time we drank snake bites with the aussies

walked through clapham common looking to steal babies

B M X and Tat e and the long hours in the lounge room

and now it is your birthday 

and I can't be there

To say Happy Birthday

Sarah when you get back home make sure you scream

my name as you walk up the stairs. 

Alistair Mennie catches some of the biggest waves ever ridden in Ireland and ever caught on Video.

Update: The crazy Irish West Coast has now unleashed a new beast, Prowlers.

Prowlers is the latest uncovered big wave spot, watch the guys surfing Prowlers here