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

Category Archive: Writing

  1. Write as you do

    Leave a Comment

    As you work your way through a problem that you haven’t faced before always try and make some time to document your process.

    Lately I’ve been working on a few projects that have been out of my usual comfort zone. They’ve involved a little more javascript and a bit more system administration work. While I don’t consider myself to be an expert in either of those fields, I have found that I’m pretty good and finding the right google search term to get the right answer.

    On a few occasions the results I have found have managed to get me 90% of the way, but some tweaks have been required to get it all working in my particular scenario. At this point I should have written down my actions and captured the results through here. My Blog. My Web Log of what happens. The place I write to remind me about stuff. This would allow me to reference my own instructions again should I need them, and also provide the 100% correct solution for someone with my same problem.

    Unfortunately I’ve been a little lazy and not had as much time to document these findings recently, and as a result I can no longer remember what I had solved. What I do know is that some time down the track I will lose that time 10 fold trying to resolve the same problem.

    Always write down what you’re doing when discovering something new, it will help me out one day too.

    Read more

  2. Aaron Draplin on logo design

    Leave a Comment

    This is a fantastic short video as Aaron Draper takes you through the approach to designing a logo. Super inspirational and made me want to start creating immediately.

    Most logos aren’t designed in fifteen minutes, but most designers aren’t Aaron Draplin. Aaron’s a Portland fixture by way of the Midwest, the owner of Draplin Design Co., and an advocate of “blue collar” design: design that works. Here he takes our logo design challenge, creating a dozen iterations of a logo for a fictional construction company. Not inspired? Just wait. Watch as he sketches, brings his ideas into Illustrator, and tests and tunes the different iterations. The logos Aaron creates prove design can elevate any company or brand. Along the way, he provides tips for freelancing, finding inspiration, and providing clients context for logos that won’t just live in PDFs.

    Read more

  3. 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 dot.com corner. This is the dogfood .com example. When the dot.com boom hit people bought petfood.com. 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 petfood.com, dogfood.com, pets.com, dogs.com 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

  4. 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

  5. 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

    (more…)

    Read more

  6. 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

  7. 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.

    Usually.

    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

  8. 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

  9. 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….

    pseudo-selectors-example
    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