Surf the Dream A discourse of links and articles from Justin Avery

Category Archive: Writing

  1. The Art of Innovation – Guy Kawasaki at Gartner Barcelona

    Leave a Comment

    1) Make Meaning… not money

    Make the world a better place. When you are building something ask yourself “is this making the world a better place?”

    2) Make Mantra

    Most people come up with a Mission Statement. Most mission statements are developed through the following process.

    1. 50 senior employees have an off site week. This is usually run out of a hotel with a golf course
    2. The company will bring in an external consultant. Most often a woman. Most often wearing all black and a turtle neck. Most often she will also have a dual career and moonlight as a lemans coach because getting a mission statement is similar to delivering a baby.
    3. Cross functional team building. Fall into each others arms and sing Kumbaya.
    4. Once this has happened for 2 days everyone is pissed off that their time has been wasted so they want at least one word in the missions statement. This is why Mission statements are super long and bullshit.

    Don’t have a mission statement, have a mantra.

    • FedEx: Peach of Mind
    • Nike: Authentic Athletic Performance

    Explain your goal in 3 words.

    3) Jump to the next curve

    In the beginning there were ice farmers. Ice farmers would go to frozen lakes and rivers and cut lines in the ice and farm the ice. This is 1.0.

    Next came centralised ice factories. These were huge buildings filled with giant freezers. The freezers would produce the ice and they would have vans that would go out and deliver the ice to people who needed it. This is 2.0.

    Lastly came the fridge. This is your own personal ice factory. This is 3.0.

    The Ice Farmers never jumped to become Ice Factories. The owners of Ice Factories never jumped to build Fridges.

    You must be able to jump to the next curve.

    You should always define yourself by what you provide, not what you do. These examples were all about providing a clean and cold environment, not about the farming or the factories or the machine.

    • Uber: Transport
    • AirBnB: Hotels
    • TaskRabbit: Errands

    4) Roll the Dice

    You need to be able to stand out from the crowd. The chances are there’s going to be other people competing in your area. You need to roll the dice.

    For that you need to focus on 5 things

    1. Depth: Reef came out with a thong with a beer bottle attached in the sole. This doubled its usefulness.
    2. Intelligence: MyKey from Ford allows the owner of the car to program the key and set a maximum speed of the car. Intelligence.
    3. Complete: If you’re building a service then provide it entirely. Produce documentation, API’s, Video training, Webinars.
    4. Empowering: The product should make you feel like you can accomplish more. The Dell is just shit. It competes on price. The Apple Air makes you feel empowered, like you can do anything.
    5. Elegant: Herman Miller changed the face of chairs through a beautiful elegant design.

    5) Don’t worry, be crappy.

    Ship your product even though it has some shitty bits. That doesn’t mean ship a shitty product, it means it doesn’t have to do everything before you ship 1.0.

    By being first to launch you gain all the benefits because there’s nothing else out there that can compete with you.

    6) Let 100 flowers blossom

    If people want to use your product in a different way, go with it and reproach the market in a new way.

    A skin care product called “Skinbesoft” was released. It was a luxury product that was targeted at middle aged women to help keen their skin looking young and soft. The product sold well with their target market, however it wasn’t because it kept their skin soft. Instead the mothers found that it was an excellent insect repellent and wasn’t as harsh as DDT on the skin of their children.

    This was the point at which they should have kept the product but changed their approach and marketed it in a different way.

    Let your product blossom where ever it can.

    7) Polarize People

    Great products polarise people. Great products create emotion, emotions can cause polarity.

    This of the Mac vs Windows, the iOS vs Android. The iPhone and Samsung S4. These consumers are polarised and LOVE their product. Great products polarise people.

    8) Churn, baby Churn

    Listen to your customers after launch. Adapt to your changing customers needs. If you’re willing and able to churn then you’re in the perfect place to jump to the next curve.

    If you miss the next curve you’ll never make the double jump.

    Don’t be afraid to churn and adapt to the changing market. Focus on what you’re providing, not how you’re doing it.

    9) Niche thyself

    On a simple graph of Uniqueness vs Value. Gartner or another analysis will charge you $500,000 to explain this to you. Here’s the break down in 4 simple bullet points ($125,000 per point).

    1. Unique=0, Value=100: This corner, bottom right, is all about the price. It’s the Dell approach to computing. The value of Dell is huge however it’s not unique at all, therefore you’ve got thousands of competitors all vying for the best price.
    2. Unique=100, Value=0: This corner, top left, is called the Stupid corner. You have a product that is completely unique, but there’s absolutely no value in it. Quit, or be acquired by Google.
    3. Unique=0, Value=0: This corner, bottom left, is the corner. This is the dogfood .com example. When the boom hit people bought This was based upon the following idea. There are 69,926,000 dogs with owners in the US. Each of those dogs will eat at least 1 can of dog food every day. That’s 69,926,000 cans of dog food consumed every day, or 25,522,990,000 cans of dog food every year. The supply chain of dog food goes Cow – Killed – Chopped – Canned – Store – Consumer. By cutting out the Store you could save the consumer the hassle of driving to the store and the additional markup on dog food to help pay for the storefront and employees to stack the shelves and serve the customer at the till. If you could conservatively get 1% of the market and made just $1 per can of dog food then your income would be $699,260 PER DAY; $4,894,820 PER WEEK; and $255,229,900 PER YEAR. Even at 0.5% of the market that is a huge amount of profit. To get that 1% you need to be cheaper or more convenient. You can drop the price by $1 because you’re without the storefront and employee’s, but now you need to factor in the shipping costs to send out these cans of dog food to your 1% of home shoppers. That adds the $1 back onto the price. Well lets focus on the convenience. Now the dog owners don’t have to get in their car and drive all the way to the store, but because the dog food is delivered by a courier then they need to be at home to receive the dog food, and the courier will be there between 8am and 12pm, or 1pm and 5pm. Now the dog owner has to stay at home for half the day to buy a can of dog food for the same price they can get it from the shop because it’s more convenient for them… oh wait it’s not. Finally, because you can make over 1/4 of a trillion dollars with just 1% of the market you have,,, and thousands of other competitors. ZERO VALUE, ZERO UNIQUENESS.
    4. Fandango – Buy tickets for a movie and guarantee your seat. You don’t need to line up when you get there. Unique and convenient.
      Smart Car.

    10) Perfect your pitch.

    Customise your introduction. This creates a sense of comfort within the room that the pitch is designed just for the client. Take pictures of yourself with the product they sell, the the city they are based… something to customise your pitch.

    Follow the 10 – 20 – 30 rule.

    10: Slides. No more.

    20: Minutes. No more. It could take 40 minutes to get the wifi and projector working… you need to be able to nail your pitch with the time you have left. No one has ever been disappointed that a meeting has finished before the hour mark.

    30: Point Size. This is the easiest to read. If you need to reduce the point size to fit text on the screen then you’ve got too much text. What usually happen 15 seconds into a presentation like this is that the audience will realise you’re reading the slide and work out that they can read faster than you can talk… and then you’ve lost them. Another way to look at it is halve the audience age. 70yo=35pt, 60yo=30pt, 40yo=20pt.

    11) Don’t let the bozo’s drag you down.

    Read more

  2. The Web Is Thursday night playlist

    Leave a Comment

    One of the great things about The Web Is conference is the sideshows.

    This year on the Thursday night there’s a musical get together at the Founders Hub. Apparently there are plenty of instruments for people to join in with, you just need to learn Walk (Foo Fighters) and 20th Century Boy (T. Red).

    Read more

  3. Creating content in less than 5 minutes a day

    1 Comment

    Creating content is one of the hardest things to do when it comes to having a website or a blog. I’m going to share with you the easiest way to create great content daily on your site and across a series of social networks in under 5 minutes.

    This post will show you how to be consistent by setting up some automatic rules:

    • auto post to your blog when you bookmark a page.
    • automatically tweet when you blog
    • automatically share with facebook when you blog


    Read more

  4. Delete Google Analytics Properties

    Leave a Comment

    Over the past few years I’ve picked up more than my fair share of domain names, and along with them Google Accounts. It’s recently got so bad that I can’t actually add any more GA accounts any more.

    Now I can breathe easy as Google have recently announced that you can now delete old properties.

    Google Analytics Delete Property
    Google Analytics now provides you a delete option

    There are some caveats around this and it’s important to understand the consequences of losing the data you’ve gained on these properties.

    Read more

  5. Permission errors when using sudo

    Leave a Comment

    XKCD Comic about Sudo

    Sudo is usually the command that gets me past any permission issues on the server or my Mac.


    Today I was working my way through setting up Grunt for a responsive project and I was running into issues with the Compass part of the grunt file.

    After some googling I found I needed to update the gems and reinstall compass.

    This through permission errors even when prefixing the command with sudeo

    sudo gem update --system && gem install compass

    After a bit of searching I came across a tip that fixed the problem

    access root terminal by typing sudo -s

    I’m not sure why, but this worked a treat.

    Read more

  6. Designing a Mobile App

    1 Comment

    Mobile apps go through a variety of what I would refer to as “Design” stages. In this article I”m not talking about the visual design of the application, that’s certainly not where my skills lie, but instead I’m talking about the functional design of the application, the user experience and the data required to make it both usable for the customer as well as for the client.

    The approach I went through for this project came from the years of experience I had in engaging with clients to develop thier websites but mainly from the video series from Keynotopia creator Amir Khella.

    Step 1: Interview your stakeholders

    I’m going to guess that you’re approaching this problem from one of two ways

    1. You’ve got a great idea for an App and you want to know what to do next
    2. Someone has come to you to help them with their app and you want to know what to do next.

    Regardless of the position you are in you can still follow the same next steps.

    Talk to the stakeholders

    Book a meeting with the key stakeholders for the app. You want to chat about exactly why they want an app and how the project is going to be judged as a success. What are the main business drivers around the project, are they to increase engagement, make money, lower phone calls or visits to physical stores?

    Even if you are in the first category where it is your own idea it is really important that you ask these questions for yourself so that you are clear about what you need and you can appraoch the next phases in a logical structured approach.

    Talk to the customers

    Once you’ve talked with the stakeholders I find it beneficial to meet and speak with actual people that will be using the applicaiton. Ask them some of the following questions

    • Do they find the overall idea useful?
    • Will they download it?
    • Would they pay for it?
    • How often would they use it?
    • Would they prefer to just do this on a website?
    • Is there anything missing from the app concept?
    • Is there anything that isn’t needed in the concept?

    Talk to IT & Marketing

    This presumes that the inital stakeholder discussions were with the business owners. The Managing Directors, CEO’s, General Maagers, the people who have the vision (and the sign off for budget). The IT and Marketing teams are going to want to be involved, in fact they’ll force their way into the project, so it’s well worth consulting with them ahead of time.

    IT Team

    If the application is going to require data to be hosted then these guys are the ones that will be building or supporting that system. The chances are that the data being captured by the app will also need to be pushed around to other existing business systems or require reporting agaist. If you can spend some time with IT you will be able to find out the limitations of their existing systems, or it might throw up some valuable inforamtion about the way the data will need to be structured because of an existing system or a new system project that you weren’t aware.

    Marketing/Communcations Team

    Although I’m not covering off the visual design as part of this article it is a large element a project like this. The Marketing/Communications (MarComs) team will need to explain the tone of voice the company has and also point you towards any rebranding ideas they’ve got as well as existing material that might help you get an idea of how the visual layer might need to work.

    A great example is the way the company markets to their customers. Are the divided into segments like Business and Personal, perhaps segmented by country, maybe there segmented by services the company provide. This is most likely a detail that escaped the MD’s interview but something that becomes incredibly important at launch.

    Another great reason to talk to the MarComs is that the app could give them another outlet for messaging and reaching their customers.

    Step 2: High Level Overview

    The first step you need the following:

    • Paper
    • Pencil

    The aim of this phase is to get an overview of the key requirements for you app.

    • What functions will it have?
    • Where does the data need to flow?
    • Do the interactions need to be created, read or written?

    Below is an illustration of the application I was preparing for the client. The main screen is the center of the application and is what everyone will see by default when opening the app. From the main screen you need to be able to create items, read items (both ones that you’ve created and other items that have been created by other users) and update settings.

    The high level overview for the application

    For this process you don’t need to get into the tiny details of what you can do on each screen, that step is coming up shortly. You just want to capture the overall purpose of the application, the bigger picture of what it needs to do to function.

    If during the next phase you come across other features that you might have missed, or alternatively the client introduces additional requirements, then you can always come back here and make changes to this diagram.

    This article is a work in progress, check back for step 4 continuing below…..

    Step 4: Wireframing the Screens (creating the dots)

    The high level overview for the application

    Step 5: Process flows (joining the dots)

    The high level overview for the application

    Read more

  7. Chaining pseudo selectors

    Leave a Comment

    I’ve been working on a sales dashboard for work that highlights the number of sales, number of meeting, contribution to the overall targets and a few other things that make a member of the sales team proud they’re hitting their targets.

    The layout requirements I had for this part of the dashboard was

    • Zebra background to differentiate rows.
    • Gold Border around the top performer
    • Golden Crown sat upon the top performer

    Here’s what we’re after….

    The layout we are aiming for….

    Zebra background with pseudo selectors

    The zebra background is done through the use of the nth-child approach.

    .sales-team:nth-child(2n) { background: #eee;}

    What we’re doing here is saying we want to select the element with the style .sales-team and then for every second element, (2n), we should add a background: #eee;. That’s that problem sorted.

    The next part is getting the golden border and the crown to appear.

    Psu, psu, psuedo

    This is where we apply a border and the crown on the first element.

    The border can be added by selecting the :first-of-type pseudo element.

    .sales-team:first-of-type { border: solid 5px gold;}

    The next requirement is to add the crown as a background image. Now I wanted this to sit on the top corner of the first row so that it spills out of the container on the angle.

    To accomplish this I wanted to add a :before pseudo element and use that as the background image for positioning, but I needed it to run on the same :first-of-type element.

    Fortunately you can daisy chain pseudo elements together so I ended up with

    .sales-team:first-of-type:before {
        content: '';
        background-image: url(../images/crown.svg);
        background-repeat: no-repeat;
        background-size: 75%;
        position: absolute;
        width: 150px;
        height: 150px;
        top: -45px;
        left: -40px;
        -webkit-transform: rotate(-18deg);
        -moz-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        -o-transform: rotate(-18deg);
        transform: rotate(-18deg);

    The above code we are selecting the first element with :first-of-type, and then creating a :before pseudo element to contain the Crown.SVG file. This hook is then used to position the background image on the top left side of the element a rotate the crown.

    The result is something that works quite nicely and cheers up the sales team, or at least the one at the top of the table.

    Read more

  8. Responsive Design is still hard/easy — Dan Mall

    1 Comment

    During the 2014 Beyond Tellerand Conference Dan Mall shared his tips and tricks on how to work smarter in todays responsive world.

    Henry Ford: 1907 : A motor car for the great multitude. He had a dream that everyone should have access to a motor car. He created an auto line assembly.

    Moving line assembly reduces price, lower the skill level (make it easier to build things so the barrier to entry for people is very low), Brings workers to the work (they stand on the line, there’s no wandering around to find the work), well paid workers would stay even though the work was boring.

    We still build our agencies around this exact model. Why?

    Frameworks (not processes)

    We need Frameworks in our workflow, not processes.

    Newtons cradle is a process. We pick up a ball and we know what will happen.

    Newtons Cradle
    Newtons Cradle

    Football is a framework. There are rules, constraints, a controlled environment but what happens on the pitch is a surprise. The aim is to put the ball into the net, but how we go about that is up to us, it’s up to our opponents (or clients). We need agencies to be like this.

    As an industry we work in a traditional waterfall methodology. UX->Design->Development

    Tracks in a waterfall project are like running tracks. It’s a race to finish, and you do it without knowing what is happening in the other lanes (nor do you care).

    Waterfall to Agile in 6 easy payments

    1. Extend the previous track slightly past the normal finishing time to create an overlap with the next step. Like a relay race — there’s a period of hand off.
    2. Exntend that time a little longer. Get the the next phase to start slightly earlier to make it a longer collaboration.
    3. Extent to maximum involvement. throughout the entire process.
    4. Create appropriate tapering. Scatter the touch points so people aren’t on full time all the time.
    5. Focal Points. Start at the same place, finish at the same place.
    6. Rinse and repeat this approach.

    A modern web design process – 4 easy payments

    1. Plan

    Research (check out jennifer brook): ask people how they use the current site.
    Hypothesize: Go off and think how the best approach to the website will look, how the design will work. Guess the best approach and validate that with some research on the web to back that up.

    2. Inventory

    Content Inventory /content Strategy: Add / Edit / Remove (content strategy approach)
    Performance Inventory: Karel Knop (RWD Images article), Tim Kadlec performance article. Check the blog on this.
    If you want to be perceived as faster than your competitors you need to be 20% faster.
    Pattern Inventory: Pattern Lab. Use a spreadsheet to develop all of these elements.
    What you’re shooting for in any project is the highest level of fidelity in the shortest amount of time.

    Visual Inventory:

    All deliverables are designed to start conversations.

    3. Sketching

    Linear design, list out the things that should be on the page. Add boxes to the page and block out elements. It’s really easy to make a bunch of boxes responsive. Great way to sketch in code.
    Bearded do this in the browser. Sparkbox do this.
    Good example, try and find the link to this

    Element Collage Sketching

    RIF examples – check Dan’s site. These are small elements that were designed in photoshop that were outside the making element collages extend over width rather than height makes it easier for the client to understand that it’s not a website.

    Prototype Sketching

    Each sketch has one problem to solve and one solution.

    once you have all the pieces sketched in code you can start adding the together. How does it scale with more divs, more css, more js.

    4. Assemble

    Using the term presets over templates is great. Templates sounds like things can not be changed, but presets give you the feel that you get a template that you can updated and change to suite your needs.

    When we switched from table based layouts to CSS we had all the same conversations we’re having today about RWD. The premise of RWD in the terms of flexible grids, flexible media and media queries that’s easy, it’s the stuff that goes with it, the workflow, the way we work clients, that’s the hard part.

    Read more

  9. Content in a Zombie apocalypse

    Leave a Comment

    @karenmcgrane – president of the WYSIWYG haters club

    Print is amazing, you put the words on the paper and there it stays. No updates. We’re fine.

    100 of years of printing press history, thousand of years of experience in written material.

    The web was created to allow anyone to update a URL from anywhere and to be accessible to anyone anywhere.

    The arrival of the mobile has finally faced us with the fact that the web is different. It’s not a like a printed page on a fixed canvas. We have no control over the device it will be consumed upon.

    A new platform will arrive soon, we’re not sure what it will be yet, but we’re going to have to work out a way to publish to it.

    Televisions, cars… they’re all getting screens. Forget the screen in the car though, there will be a combined interface with input devices (voice).

    Voice might not be working now (audio interfaces), but touch faced the same problem and when it was solved it revolutionised the way we live our lives.

    When you look at a new interface with audio, things like emphasis vs italics becomes important, because the emphasis will have a different tone of voice.

    Google Glass – the SEGWAY for mobile.

    Watches might be the next thing. Too small, but in combination with a headset and headphones.

    Digital Signs: want one single place to manage the content and push out to mobile, digital signs, website.

    The internet fridge is not the future, but it is a sign of things to come. The cook top might be a screen that will be able to be used.

    So how do we really approach true separation from content and form.

    In the past we never consiered separating the theme of what you want to covey in a message from a physical content itself (i.e. writing), now we’re trying to do this with the web.

    The problem with WYSIWYG is that we’re giving content authors an antiquated approach to creating content that was originally created for the printer.

    XEROX built a GUI and wysiwyg just to sell printers. THE WEB IS NOT A LASER PRINTER.

    We are fighting a war between blobs and chunks. Blobs are old wysiwyg styled content. Chunks are metadata, content elements that can be reused.

    Cards are the future of the web (they’re not). Cards are like pages but they’re tiny.

    Content Modeling

    Find out what all the little bits and pieces you are using. It allows the NPR create once and publish everywhere model.

    1. What type of content do you have?
      article, product, events, profiles, etc.
    2. Attributes
      “fields” or “content objects” (content objects might have markup that separates content instead of individual fields).
      Recipes: ingredients, steps, category, chef, cuisine, diet, equipment, holiday, occasion, method, season, servings, awards, theme. Check @eaton (jeff eaton) for case study.

    Nobody reads your PDF. Ever. 33% never downloaded. 40% downloaded fewer than 100 times. This is for The World Bank between 2008-2012.

    We are using PDF’s as a bandaid for people being able to create content on the web. This is literally like printing a page. Literally. This is not the way to proceed in the future. Sure, it might be easier for many people to create PDF’s, but it creates a wider content problem of an unstructured set of content that can not be reused by anyone.

    Read more