Ad ‹› developer communication and technology (+e-commerce as bonus)

Don’t panic
Now in large friendly letters*

* The joke is pretty much lost if you haven’t read the hitchhikers guide to the galaxy
Author: Niklas Bivald

Monday, October 18, 2010

AD ‹ - › Developer
Communications (and tech + good to know stuff)



AD ‹ - › Developer communications (and tech)
I don’t do developing!

“I'm an art director - I don't do developing”


Why would you need to learn this? Usually ADs
that are none-digital.

Short answer: You need the basics

- Like an architect who don’t
understand how buildings work

- Like a car designer that doesn’t
feel the need to know how cars
are built.

The house would collapse, car crash. So
does many digital campaigns.

Monolog or dialog?

Monolog or dialog?


What do you think?

Monolog: you come up with:

- Ideas

- Make the graphics

And simply hand over all things to the developer
and go for lunch

Dialog: You jointly ﬁgures out a solution to many
problems.

Discussion

Monolog or dialog?

Monolog or dialog?


You donʼt have to have a developer to every creative
meeting.

Regularly take you ideas through a developer or
a person with technical knowledge.

Can be a developer, technical director, your damn
cat for all that matters :)

Please Please Please....

Don’t run an idea in front of a client if
you haven’t talked to a developer


Please: Don’t run an idea in front of a client
if you haven’t talked to a developer

It’s just common sense,

A developer knows what is doable and
how things can be improved

So, what else can a developer do for you?

What a developer can do for you

What a developer can do for you


- Fresh perspective and ideas
- Possible, impractical or impossible?

The better synced you are with your developers, the
better your end-product will be.

You will be ashamed if you need to return to your
client stating the idea you presented isnʼt doable in
your time frame.

He will:
- Ask you thousand questions.
- Force your abstract ideas concrete

Prioritize

Prioritize


Experienced developer will give you suggestions
on how you can cut development time,
! - Sometimes a small change in
! your layout can cut down development
! times with days, even weeks.

Itʼs then up to you to prioritize. Is the function
worth it? Can it be changed in any way?

Forcing a developer to make your exact solution
without listening is plain old stupid. He knows
the technical aspects.

In the end...

Life’s irony

You need a developer to know the
details in what you want to develop


You often need a developer to know what you want
to develop.

Itʼs one of lives ironies.

However, not every developer is a saint.

How often have you gotten:

It can’t be done

“It can’t be done”
Don’t let them get away with this answer!


The most none-constructive answer you can get.

Usually:
- Standard reply if you havenʼt explained
in detail
- Some small detail canʼt be done and
he doesnʼt bother explaining it.
- He feels that he isnʼt part of the process
- He doesnʼt have enough information

Look out for those people.

Donʼt let them get away with this answer!

Reply:

It can’t be done

“What can’t be done?”
“Which parts can be done?”
“What can be changed to make it possible”


Reply:
“What can’t be done?”
“Which parts can be done?”
“What can be changed to make it possible”

Then you can change you solution accordingly.

It might also be the fact that developers
fear change

Fear of change

Developers fear change
... let’s try to understand why


Why?

- A designer can fairly easy change designs

- A developer in-progress can’t.
(Bound by frameworks and code)

This creates fraction: Listen to the developer. -
Small changes can make huge differences for
him.

Another problem... is EGO
I’m stealing graphics from a presentation by Sean
Gerety, @IdeaKitchn (Sean Gerety),
@fwdanimation, Casey Edwards, here.

Ego boils down to...

Introduction

@IdeaKitchn (Sean Gerety),
@fwdanimation, Casey Edwards,

Kill the ego

Kill the ego - You need each other


In the end, just remember that you need
each other to make the client happy.

So just...

Introduction

@IdeaKitchn (Sean Gerety),
@fwdanimation, Casey Edwards,

Hug it out... (I love these graphics)

Now that we sorted that out... how do you
prepare you idea for your developer?

Help your developer

Help your developer


Doing good preparations saves you a lot of trouble
" -" Development will be easier and faster
" - " You will actually save development time

" - " It makes sure you covered all the angles
" -" It ﬁnds holes in your theories before client /
developer see it

- The developer will be impressed

How to prepare your ideas

How to prepare you idea
(for a developer)


Okay, youʼve hugged your developer, now itʼs time to
work.

You have an idea and you want to prepare it for a developer.

What you need to understand is that this is not for the
developer per se, but:

" - Covered all your angles
" - Worked out the nitty gritty in your ideas

If this feels basic to you,
If you do all this

Good for you. Your a minority.


Generic is the enemy, be speciﬁc!


This is the single most important point: You need to be
speciﬁc

Real world example
building a community with a large swedish youth
company.

Each user has a 3d avatar.

One of the key points of this community according to
the AD and CD is that the user should be able to
change his avatar.

The actual brief we got (on a “start programming” level)
was.

How to prepare your ideas: Real world example

User must be able to change his avatar


...

How to prepare your ideas: Real world example

We want it by friday


Thatʼs how deep the developer briefs usually are.

This is ﬁne if itʼs part of the concept phase
where everyone is working on the kinks and
details of the parts. But to start program on?
Impossible.

Even with a design for it, itʼs impossible.

Several issues here, ﬁrst...


First problem:
They don’t know what they want


He has probably no idea,

Or if he has, he isnʼt sharing

Either way itʼs like pulling teeth from a
developer perspective.


Second problem:
“It’s not so much to do”


They would probably choke if I told him
this could take two weeks or more
because “it’s not so much to do”

We’ll get back to the time issue, but
ﬁrst..


How would you formulate:
User must be able to change his avatar?


Discussion


Logged in users need to be able to change certain
aspects on his avatar:

* Jacket
* Hair

With a limited number of options on each. The exact
changes needed is attached below. The AD will
prepare each option for each parameter. They should
be changed from the “change your avatar page” on
your control panel. Sketches for all pages are included
below.

- Add wireframe for “change your avatar page” here -

Something like this in the end

How to prepare your ideas:

Sigh...
That was boring, wasn’t it?


Boring, but itʼs necessary.

Someone need to think about the details

Somebody will probably have to document them.

Unless you want your developer guessing. You
donʼt


What about:
White text on a white t-shirt?


Hereʼs were we get nitty gritty. So far weʼve only been
thorough.

" - What about error messages?
" - What will happen if you have white text on a white t-
shirt?

A developer can help you here. He should know that
you need stuff as:

" - Error messages
" - Notiﬁcations"
" - On mouse over effects


What about:
No text or no t-shirt?


What happens if there are no content?

Does you layout still look great?

Have you planned for that?


Which end-product would you prefer?
a) The one where you have all this information first hand
b) The one were you constantly would need to squeeze in new
things (error messages, notifications, hover effects etc)


a) The one where you have all this
information first hand

b) The one were you constantly would need to
squeeze in new things (error messages,
notifications, hover effects etc)

I would go for the second one.


Does two weeks still sound like much
time?


The avatar
The display of the avatar
The change avatar page
Error handling
Notiﬁcations
Database connections
Check if every webbrowser
Unit tests

It all adds up.

How to prepare your ideas: The usual suspects

The (un)usual suspects
(after a while you learn the answer the usual questions)


Iʼve prepared a quick check-list with the usual
suspects:

Youʼll learn them after a while.

How to prepare your ideas: The usual suspects

What are you doing (in detail)?
Which parts of the site is HTML?
Which parts are Flash?
AJAX/HTML5?
Do the user need to log in?
Exactly what data is saved?
Error messages?
Transitions and animations?
What parts would need graphics (messages, transitions, etc)?
Which pages do we have?
How does the user navigate between those pages?
What content should be editable? (CMS)


What are you doing (in detail)?
Which parts of the site is HTML?
Which parts are Flash?
AJAX/HTML5?
Do the user need to log in?
Exactly what data is saved?
Error messages?
Transitions and animations?
What parts would need graphics (messages, transitions, etc)?
Which pages do we have?
How does the user navigate between those pages?
What content should be editable? (CMS)

Estimates

A real estimate takes time (hours/days)
(and requires answers)


This is important but often overlooked. A
real estimate takes time, hours, days even.

If you ask for a rough estimate, make sure
you ask for a detailed one later!

I know project managers that has asked for a
very rough estimate that later landed in the
real budget, and presented to the client.

Estimates

A rough estimate is a rough estimate
(with emphasis on rough)


Just to be clear here: A rough estimate is a
rough estimate. Use if carefully.

Be on the lookout for someone who answers
too quickly on a real estimate. They arenʼt
covering your back.

Coffee?

Coﬀee?
End of part I


Coffee?

One last thing about developers...


Everyone wants to do cool things
! - But itʼs a question of time
! - This is why you need to get them
involved early

Find or hire a social developer to be on
your concept meetings
! - Find someone you can rely on

Web techniques

Web techniques


Learn differences between techniques

Be able to choose technique depending
on requirements

Know pros and cons

Web techniques

Developing: Front and back end


Two kinds of programming

One programmer can do both, or you
can specialize

Front end is all the visible stuff on your
computer

Back end is on the server and does the
heavy lifting

Web techniques

You need both


Front end is the nice interfaces, the buttons,
the 3d effects

Back end allows you to save content, to save
images, to send emails, to get twitter feeds.
Back end is responsible for serving the front
end.

Typical back end: Not visible stuﬀ, sending
emails, saving content, serving content, user
authentication, login, registration

Time wise..

Web techniques

A developer will most likely separate the two:
2 weeks front end, 4 week back end


Back end is usually more complexed on a
technical level. Many systems working
together.

Anyway...

Web techniques

Enough back end, let’s go front end


Front end is were you will be working.

The designs you produce are front end.

Letʼs break down front end into smaller pieces

Web techniques

HTML/CSS, Javascript and Flash


I usually separate between techniques:

HTML/CSS

Javascript

Flash

Here weʼll go through their pros and con

Web techniques



Foundation of everything visible

Platform from everything is launched

Pro: Static, Search engines like it, blind people like
it. Everyone can read it.

Cons: Static, not beautiful, by itself does not do 3d
or video.

In order to serve any content you need HTML
(Even with ﬂash)

Moving to CSS..

Web techniques



If HTML = building blocks

CSS is how they are positioned and how they
look

Colors
Positions
Fonts

Together with HTML/CSS you have a nice
looking static site. But what if you a dynamic
site?

Example? hyperisland.se

Web techniques


With HTML/CSS

Web techniques


With only HTML.

Still visible, not not very pretty.

Enough HTML/CSS, letʼs move on

Web techniques



Javascript is added upon HTML and is a way to
manipulate both HTML and CSS.

Javascript makes stuff move (Twitter example?)

Pro: "
" " - Makes stuff move" "
" " - Initialize Flash
" " - Makes stuff dynamic

Cons:
" " - Cannot show video on itʼs own
" " - Search engines donʼt do javascript
" " - Blind people donʼt do javascript.
" " - Errors cripple the page.


Web techniques

(movie with twitter example removed)


With only HTML.

Still visible, not not very pretty.

Enough HTML/CSS, letʼs move on

Web techniques



Application-in-an-application. That means that when you
visit a HTML site with ﬂash on it, Flash is actually a own
application. Flash can do pretty much what it wants in itʼs
own boundaries.

Pros:
" " - Can show video"
" " - 3d

Cons:
" " - Bloated, Heavy
" " - Search engines donʼt do Flash at all,
" " - Long time to load,
" " - Blind donʼt do ﬂash.
" " - Right click menus.

Flash looks the same in all browsers, but html/css does

Web techniques

Different browsers - different looks


Sites look different in different browsers.
Mainly Internet Explorer.

Developing for Firefox, then you need to check:
Internet Explorer 7 and 8.

Often 80% of development, 20% checking in
other browsers.

Letʼs go back to flash.

Doing Flash the good way

Doing Flash the good way:
Usability, Links, Alternative content


Usability: Should be easy to use
Links: COPY+PASTE the URL

SEO Content without Javascript


Doing Flash the good way takes time:
You need to make Flash,
Plus the alternative content


You need to make Flash
Plus alternative content (but don’t
style it)

What if we don’t have alternative
content?


Flash Example: www.thelotteryoﬂife.co.uk
Google, Right click, Print, SEO links, JS


- If a blind can’t “see it”,
- Google can’t read it.
- Use Links
- http://www.seo-browser.com/

Example


Can you print it?

V Can you bookmark it?
Can you send it to a friend?
Can Google read it?


Ask you developers this:
Can you print it
Can you bookmark it
Can you send it
Can Google Read it

Ajax

The “almost new” web:
Ajax - Web 2.0 - Facebook


When youʼre talking about web 2.0 you often mention
AJAX.

Recently you needed Flash to do dynamic stuff
such as advanced layers, effects, animations.

Now you can do most of that natively in your browser.

Using Advanced Javascript. Ajax is what powers
Facebook and Twitter.

It takes less time to load, it feels “lighter”. You donʼt
need to refresh the page on every click.

Ajax

Can you print it?

V Can you bookmark it?
Can you send it to a friend?
Can Google read it?


Ask you developers this:
Can you print it
Can you bookmark it
Can you send it
Can Google Read it

HTML 5

The “new new” web:
HTML 5 and CSS 3


Most of you have probably heard about HTML 5
and CSS 3.

I wonʼt go very deep into them, but itʼs good for
you to know this.

HTML 5

Minimizes dependencies on Flash and JS
Plays videos without Flash

V Can animate without JS
Better structure for Google
Better support for PUSH


Play videos without Flash
Animate without JS
Better structure for Google
PUSH data

HTML 5

The real-time web:
PUSH content to the user in real-time,
Instead of traditional GET every X sec.


PUSH or the real-time web allows you to PUSH
content to users.

Traditionally you load a site, disconnect and read
it.

If you need updates, you poll them every X
seconds.

PUSH allows us to send when we want it, how
often we want to.

HTML 5

There’s always a catch (HTML5/CSS3):
Not fully supported (in a long time)
Needs alternative content


Evolution goes slow, itʼs quite some time before
all supported them.

So for now, you STILL need
alternative content for HTML5.

On that note, Letʼs go deeper into why itʼs so
important.

Letʼs talk about Google really quickly before
we drink more coffee.

Search Engine Optimization

Making sure Google can read you:
Content, Structure, In-links


Google is smart - as long as it can read
your content.

It needs valid structure and good links

Also, you need people to link you.

It can’t read ﬂash!
It can’t read Javascript!

So how does Google rank pages?


Making sure Google can read you:
SEO (Search Engine Optimization)


All the things Google knows about you measures up in
Page Rank. The higher the high you appear in the
search result.

PR is between 0 and 10
Everything above 4 is good

I could spend a week on search engine optimization
alone, but it’s better if you research it independently.

SEO is basically:

- Optimizing titles

- Content

- Pages

- Links to improve your ranking.

Coffee

Coffee
End of part II


Flow charts and wireframes

Flow charts and Wireframes:
The process and the structure


Work out and visually describe what to
do.

Keeps everyone (including the client) on
the same page. Allows for decisions
without graphics.


Flow charts and Wireframes:
Forces you to think!


- A way to break down what you need to
do
- Easier to estimate

Either plan the website, or plan for
headaches and missed deadlines.

Show wireframes, not designs. Get a sign-
oﬀ.

Let’s check out a ﬂow chart



Sample workﬂow



Moving on to wireframes, I’m not going
to talk to much about this example. It’s
pretty obvious how things look.

But let’s talk about what to consider
when doing wireframes


Improving the wireframes:
Things to consider


Helps you map out your entire site:

- Function over form. No nice fonts!
- Decide who’s in charge
- Deadlines
- Involve designers, developers,
customer
- Do every page
- Include ads
- Include admin features

Use cases

Use cases?


Before we leave the sketching, donʼt forget
your use cases. It will help you see it from a
users perspective.

Deﬁne your customer and give him a proﬁle,
ideas, views. Now look through their eyes.

When all the planing is done itʼs time to
choose, should you develop it in-house or out-
source?

The cost of development

Development costs
In-house our out-sourced?


Your process will vary.
In-house developers will be more in-process since
they usually sit side-by-side:

- Easy to use as a resource

- Easier to drag ideas to

- Easier to drink beers with.

Out-sourced developers you usually more formal
briefs to work from.

You need an in-house developer or someone to
bounce ideas with when out-sourcing
development. To make sure your briefs cover
everything.


Development costs
Are you fixed priced,
or on an hourly rate?


Preparations depend on if you are fixed or on an hourly
rate.

If your hire per hour it’s easy to do less preparations
and specifications. Just remember that time flies.

If you hire per hour remember that any mid-project
changes drastically increase your costs.

Seen this happen many times:

- Let the developer work for two week

- Change the direction totally

He’ll have to scratch pretty much everything he has
done. You just lost 50 000. Was it worth it?


Fixed price:
Calculate hours required, then add 20%
for shit happens


It’s a good rule of thumb, add 20% for
shit happens :)

A good thing to remember on a ﬁxed
budget is...


Fixed price:
If you hire someone on a fixed budget,
you get what you specified. If you forget
things, you’ll have to pay extra for it.


If you hire someone on a fixed budget,
you get what you specified. If you forget
things, you’ll have to pay extra for it.

Meanwhile,


Hourly rate:
If you hire someone on a hourly rate, you
take accountability for his progress!


If you hire someone on a hourly rate, you take
accountability for his progress!

This might sound weird, but it mainly because if
you keep changing your mind, you’re the reason
the project gets delayed.


Hourly rate:
Time ﬂies! have incremental deadlines


The main thing to remember with hourly rate is that
time ﬂies.

Make sure to have short incremental deadlines

Enough about preparations...


Moving on:
What to do when the site is released?


When the site is released, your work is not
done!

Work hard to improve the site!

Make sure you...

Measure everything

Measure everything!
You need the data,
Google Analytics is king,
Tag every button!
A/B testing


Measure everything:

- Page views

- How the users moved

- Measure errors (like failed sign

ups) to early spot errors.

Also..

Speed is key

Making sure your visitors stay:
Speed is key!


More in e-commerce section,
But Speed is a factor in your Google
ranking.

Slow sites mean less proﬁts. More
about that on e-commerce

But before we take a break and go
there...

Measure everything

Measuring success!
You can’t succeed your customers
expectations if you don’t define success.


Make sure you define success.

What is success?

You can’t succeed your customers
expectations if you don’t define
success.

Coffee?

Coffee?
End of part III


e-commerce
Important things to know



This is a smaller side-presentation focusing on
key points for e-commerce.

E-commerce

E-commerce is complex:
Large sites, “real money”, complex


E-commerce is complex.

Large sites

Real money

E-commerce

E-commerce is complex:
Structure is everything


Structure is everything
Wireframes, Flow charts,
The works

E-commerce

Choosing a system:
Have you specs ready


Choosing a e-commerce system is hard:
- You need your specs
- Cover your angles
- No system is perfect

After the site is released, make sure
you track every button.

E-commerce

Make sure you
Track every button


Track every button.

GA is great: Track pages, in-link, out-
links, buttons

GA is great for tracking, but you also
need to...

E-commerce

Make sure you
Monitor! (goals and alerts)


Not only track everything,
But monitor everything!

Create goals in Google Analytics:

- Community: Created user

- What would you have for goal?

Use alerts to get mail if something
starts breaking or user habit changes
rappidly.

Example alert: 50% more traffic suddenly
(blogger in-link)

E-commerce

Make sure you
Use thunnels, monitor speed


Use tunnels, get to know your
visitor

Know how long a checkout takes

Know how fast a page loads!

E-commerce

What is your
Shopping cart abandonment rate


When a customer starts an order/
checkout but doesn’t ﬁnish it.

Anywhere from 20% » 70%

It’s all about maximizing proﬁt,
minimizing drop outs.

E-commerce

Where do you
Loose your customers?


Monitor your loopholes:

- How many people do you loose?
- Where do you loose them?

Now that you know where you loose
your customer, how do you improve
your site?

E-commerce

Make sure you
Do small (incremental) updates!


Hard to measure the success of each
part if a huge launch

It also opens up for serious drops in
traffic/sales.

The solution is to use small updates,
and test them throughly.

E-commerce

Make sure you
Use A/B split testing


A/B testing means that you create an
alternative function (page, section,
ﬂow etc.) which is small and deﬁnable.

Then run them side by side, with a
small percentage of your users getting
the new page. Then measure success.

I thought I’d through some do &
don’ts for A/B testing..

E-commerce

#1 good to know when A/B testing:
Make sure you run them side by side


It’s easy to be lazy and run A for 2
weeks, then B for 2 weeks. Don’t do it,
you can’t trust the result.

E-commerce

Don’t scare your users
(a.k.a test on new users)


Don’t scare your users. You don’t want
to hurt your regular visitors.

Also, if a user gotten the new look, they
should always get the new look.

E-commerce

Make it cross-site


If you are testing a new button for
example, use the new one on the
entire site!

And last..

E-commerce

Be prepared for a surprise


It’s quite common that the result that
works best is not the one you had in
mind. Trust the stats.

We’re gonna move away from the
testing to good-to-know statistics,
but first briefly the check-out flow and
search.

E-commerce

Tips and tricks
The check-out ﬂow


One of your most important ﬂows is
the check-out.

- As few steps as possible

(4 most)

- Don’t require registration!

- Break it down to logical

steps (1 step for shipping, etc)

- Measure where people exit

Work hard to improve it - it will show.
Next is search

E-commerce

Tips and tricks
Search and you shall ﬁnd


Search is important. As many as
40-70% of shoppers navigate
through your search at one point or
another. Yet this is often ignored...

Make sure to:

- Fix misspellings (like Google)

- Quick view a result (image expand
etc)

- Add to cart (express checkout)

Roxy.com does this well


www.roxy.com


Roxy is a good example

But why am I talking so much about
page speed? experience, smooth user
ﬂows?

Bottom line is...

http://www.roxy.com/search/
index.jsp?

E-commerce

“27% are less likely to buy from a
retailer oﬀ-line if they had a bad
experience online”


“27% are less likely to buy from a
retailer oﬀ-line if they had a bad
experience online”

Talking about speed...

E-commerce

“40% of users would abandon a site if it
takes more than 3 seconds to load”


“40% of users would abandon a site if it
takes more than 3 seconds to load”

Imagine that impact on an e-commerce
site.

E-commerce

“0.1 sec slower pages dropped -1%
from Amazons sales”


“+100 ms slower pages = -1% in sales
(Amazon)”

Google tried the same..

E-commerce

from Google search traﬃc”


from Google search traﬃc”

Well, that was some short statistics. Of
course there is much more out there.
But we can only cover so much, and this
lecture ends here.

E-commerce

Rounding it all oﬀ...
Closing words


e-commerce is an exiting ﬁeld. It will
continue to grow and grow. Looking at the
e-commerce sites out there we have a lot
of work ahead of us.

Just make sure to measure everything,
and more importantly hug your
developer.

That’s all for me, I will be sending out a
Google Form about how you experienced
the lecture.

Coffee?

Coffee?
End of e-commerce


e-commerce
Important things to know



Ad ‹› developer communication and technology (+e-commerce as bonus)

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Ad ‹› developer communication and technology (+e-commerce as bonus)

Semelhante a Ad ‹› developer communication and technology (+e-commerce as bonus) (20)

Último

Último (20)

Ad ‹› developer communication and technology (+e-commerce as bonus)

Notas do Editor