AD - Developer communication and Technology

Don’t panic
Now in large friendly letters*

For those of you who haven’t read the Hitchhikers Guide to the Galaxy, the joke is lost.

Technology
How to develop and how to talk with developers

Two lectures
Todays lecture =
interact with developers. Prepare idea.

Next lecture HTML/CSS.

You will have to code. How many has a basic understanding of HTML/CSS?

Dates to remember

• 7th
- How to interact with developers
• 12th

- HTML/CSS Workshop + assignment

• 15th
- 18:00 Deadline individual assignment

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

Why the heck do you need to learn this? Usually ADs that are none-digital.

You need the basics of how things work.

- Like an architect who don’t understand

how buildings work

- Like a car designer don’t need to know how

cars are built.

House would collapse, car would crash. So does many digital campaigns.

Monolog or dialog?

What do you think?

Monolog: you come up with all the 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

Dialog

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

You should 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 :)

A developer can

- Bring a fresh perspective and ideas
- Tell you straight away if something is possible, impractical or impossible
- The better synced you are with your developers, the better your end-product will be:

The closer your end-product will be to your idea

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

- A developer will ask you thousand questions.
- He will force you to make your abstract ideas concrete

- The developer knows what is doable and how things can be improved

Save the whales..
(Help your developer)

Itʼs quite simple:

The more detailed you are,
The more questions you can answer before he asks them

The more impressed heʼll be
The more he can focus on doing his job: Developing a kick-ass solution

Prioritize

An experienced developer will give you suggestions on how can 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 web. He can make your solution more web friendly.

In-house our out-sourced?

Depending on if you are working with in-house developers or outsource it to a third-
party parts of your process will vary. Usually in-house developers will be more in-
process since they usually sit side-by-side. They are usually easy to use as a
resource, easier to drag ideas to or simply drink a beer with.

When using out-sourced (or out-of-office) developers you usually prepare more
formal briefs to work from. How to write those will be covered in a second.

Are you fixed priced,
or on an hourly rate?

When working on any project. No matter if you are a developer or AD.

I’ve been talking a lot about preparations and those actually depend a lot on if you are
fixed or on an hourly rate.

If you are hired per hour, or hire someone per hour one could argue that you would
need less preparations and specifications. Just remember that time flies.

If you charge a fixed-price for your project, and hire a developer per hour remember
that any mid-project changes can drastically increase your costs.

Seen this happen many times. Let the developer work for two week, change the
direction totally, and he’ll have to scratch pretty much everything he has done. You
just lost 68 000. Was it worth it?

If you hire someone on a hourly rate you take accountability for his progress! If you
hire someone on a fixed budget, you get what you specified. But if you didn’t specify
it, you’ll have to pay extra for it.

If ﬁxed: Calculate hours
required, then add 20% for
shit happens

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

One of lives ironies is that you often need a developer to know what you want to develop.

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

How to prepare you idea (for a developer?)

Okay, you have you 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

To be sure that you covered all your angles and worked out your ideas

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

Good for you. Your a minority.

Why?

Doing good preparations saves you a lot of trouble

-
Development will be easier and will go 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

Generic is the enemy, be speciﬁc!

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

Work out your ideas

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

User must be able to change his avatar

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.

Problem #1: The AD/CD does not know
himself how he wants it.

He has probably no idea,

Or if he has, he isnʼt sharing

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

The AD would probably choke if I told him
this could take 2-3 weeks because he think
“it’s not so much to do”

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

Discussion

Logged in users need to be able to change
certain parameters (jacket, hair) on his
avatar. The exact changes needed is attached
below. 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 is included
below.

[Add brief for “change your avatar page”
here]

Now 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

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

No text on 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 be best:
The one where you have all this information ﬁrst
hand, or the one were you constantly would need
to squeeze in new things (error messages,
notiﬁcations, hover effects etc)

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

Use cases?

When working on larger sites, donʼt forget your use cases. It will help you see it from a users
perspective, not to mention give you a checklist of pages to sketch.

“It can’t be done”

The most none-constructive answer you can get.

Usually because:
- Either you havenʼt explained it in detail
- Developer sees some small detail that canʼt be done and
doesnʼt bother with explaining it.

Look out for those people.

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.

Part 2: Web techniques

More hands on

Learn differences between techniques

Be able to choose technique depending on requirements

Know pros and cons

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

You need both

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 check when plan
lands.

Back end is responsible for serving the front end.

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.

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

Facebook Example (Login)

What is front end and back end when logging into Facebook?

www.facebook.com

Enough back end, let’s go front end

Front end is were you will be working.

The designs you produce are front end.

Splitting the front end

HTML/CSS, Javascript and Flash

I usually separate between three techniques:

HTML/CSS

Javascript

Flash


HTML is the foundation of everything visible

HTML is the 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


HTML is the raw building blocks

CSS is how they are positioned and how they look


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

Javascript makes stuff move.

Pro: Makes stuff move, is used to 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.


Flash is an 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: Standalone application, Can show video, 3d
Cons: Bloated, heavy, search engines donʼt do HTML at all, long time to load, blind donʼt do
ﬂash. Right click menus

Ajax - Web 2.0?

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

Up until 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”.

Facebook Example
(HTML, no CSS, no Javascript)

Flash Example: Thefwa.com
(Right click, Print, SEO links, JS)

Different browsers - different looks

Just take a quick note of this: Sites look different in different browsers. Mainly Internet
Explorer.

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

Often 70% of development, 30% checking in other browsers. Now that IE 6 is outdated, that is
looking slightly better.

Search Engines and loading times

About now you are probably asking yourself: Why does he keep talking about the damn
search engines and if something is slow to load.

Search engines: For e-commerce sites, if Google doesnʼt see you, youʼre out of business.
Google ranking means everything.

You get Google ranking by having a search engine optimized site, that is: making sure Google
can read you content.

Loading times affect you more then you would know. Amazon noticed that if the load time get
0.1 second slower, they loose 1% of their orders. Thatʼs millions of dollars.

Break down your ideas
30 minutes

What are you doing (in detail)?
Which parts of the site is HTML?
Which parts are Flash?
AJAX?
Do the user need to log in?
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)

How does HTML look?

• HTML is pure structurized text. CSS
complements this HTML.

Basics
<html>

<head>

Page head. Contains mostly non-visible elements such as the page
title, CSS files to be loaded in externally, information about the
page language. Also browser specific contents (such as a CSS file
that should only be shown for IE)

</head>

<body>

</body>

</html>

Basics

<html>

<head>

</head>

<body>

Page content, all visible content will end up here.

</body>

</html>

A simple example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<title>Portfolio of Niklas Bivald » The Future Playing Ground, Third Edition</title>
<meta name="description" content="Portfolio of Niklas Bivald, a Hyper Island student and founder of Bivald/IT." />
<link href="/css/portfolio.css" media="screen" rel="Stylesheet" type="text/css" />
<link href="/css/myprintfile.css" media="print" rel="Stylesheet" type="text/css" />
<link href="/css/myprintfile.css" media="print" rel="Stylesheet" type="text/css" ></link>
</head>
<body>
<h1>Header</h1>
<p>Text</p>
</body>
</html>

A larger example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<title>Portfolio of Niklas Bivald » The Future Playing Ground, Third Edition</title>
<meta name="description" content="Portfolio of Niklas Bivald, a Hyper Island student and founder of Bivald/IT." />
<link href="/css/portfolio.css" media="screen" rel="Stylesheet" type="text/css" />

</head>
<body>
<h1>Rubrik</h1>
<p>Text</h1>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-274857-3";
urchinTracker();
</script>
</body>
</html>

AD - Developer communication and Technology

More Related Content

What's hot

Similar to AD - Developer communication and Technology

Recently uploaded

AD - Developer communication and Technology