Striking a
Balance
Finding middle ground in
Front–End Development
http://flickr.com/photos/marcusjb/2813736862/

Hi. I’m Nathan Smith, a designer and
front-end developer @ Viewzi.com

http://viewzi.tv/?dl=viewzi101
Viewzi 101 – Intro Video
(Learn more about Viewzi: www.viewzi.tv or www.viewzi.com)

Who am I, really?
– Expectant father! :)
– Master of Divinity*
– Published author
– Started Godbit.com
– Created 960.gs
– ENTJ Personality
* A few classes left, finishing up online.

Designers vs.
Developers

Stereotypical perceptions
?
http://flickr.com/photos/iamaaronmartin/2858991878/ http://nbc.com/chuck/

In reality, more collaborative
http://flickr.com/photos/tbisaacs/2849275119/

But still quite competitive!
Steve Brewer Travis Isaacs
Developer Designer
http://flickr.com/photos/tbisaacs/2871685626/

Front-End Developers are like midfielders,
balancing in between offense and defense.
We ensure that designers get the glory, and the
server-side guys can stick to what they do best.

“Inverse, Multi-Headed Hydra”
In the world of web-development,
there are many “dragons” sharing
the same public facade: ASP.NET,
ColdFusion, Java, Perl, PHP, Ruby,
Python, etc. To render in a browser,
all data has to pass through HTML.
Front-end isn’t a bad place to be. :)
http://santi.elfwood.com/hydra.jpg.html

(Best Viewed In)
Life used to be so much
simpler. But nowadays...

New Challenger!
Gotta catch ‘em all! o_O;
http://www.flickr.com/photos/avalonstar/2822957764/

In order to keep
pace with change:
We really need
Interoperability

Web Standards
= 3 legged stool:
• HTML
• CSS
• JavaScript
Accessibility
falls flat if any of
these three are
done incorrectly.

Aaron
Scheidies
World Class
Triathlete
Aaron recently received
his Doctorate of Physical
Therapy from University
of Washington.
He is a world record
holder amongst Olympic
distance triathletes.

Aaron was born with a
juvenile form of macular
degeneration called
Stargardt’s disease. His
vision is 20/400 vision,
while people with full
sight see 20/20.
Aaron is pictured here
setting a world record
with Ben Collins. They
rode a tandem bicycle,
ran and swam tethered.
He finished in 01:58:08 at
Dallas, TX on 10/14/07.

Retro-Fitted Accessibility
FAIL

Jeremy Keith – JS Expert
“Far from being something that is added to
a site, accessibility is something we need to
ensure isn’t removed. From that
perspective, the phrase ‘making a site
accessible’ isn’t accurate...”
“Accessibility is not a plug-in. It’s not
something that can be bolted onto a site
after the fact. So here’s what I’m proposing:
From now on, instead of talking about
making a site accessible, I’m going to talk
about keeping a site accessible. Join me.”

http://flickr.com/photos/kimli/2671627954/

http://flickr.com/photos/edtarwinski/226266619/

http://boston.com/bigpicture/2008/07/antiterrorism_exercises_in_chi.html

We are Passionate
About our Work
Photoshop vs. Fireworks
Mockups vs. Prototyping
Ruby on Rails vs. Django
Frameworks vs. Custom
Flash vs. Web Standards
Mac vs. PC - MS vs. Apple
Release Date for HTML5?
Jeff Croft vs. Everybody...
http://wikipedia.org/wiki/Ultimate_Wolverine_vs._Hulk

As the CS3 product cycle was
wrapping up, Adobe's user interface
designers started showing their ideas
for subsequent releases... I think my
initial reaction can be boiled down to
three letters: WTF? \"Are you telling
me,\" I asked, \"that we're going to put
a huge, battleship-gray box into the
background on the Mac, as it is on
Windows? Why would we do that?\"
http://blogs.adobe.com/jnack/2008/06/future_photoshop_ui.html

JavaScript is discussed intensely:

JavaScript is discussed intensely:
(I happen to agree)

Yahoo! User
jQuery Interface Library

jQuery YUI

Ninjas master a variety of tools
(not just one)
Use a framework as an
extension of yourself,
not just as a crutch.
http://imdb.com/title/tt1046173/

Macro vs. Micro Semantics
– Correct tags – HTML / XHTML
– Accessibility – ID, class names
– Attribute usage – Microformats
– Search Engines – Machine code
http://flickr.com/photos/leoffreitas/332360959/ http://flickr.com/photos/kennysarmy/2493464978/

Why Use a Version
Control System? last code
commit
– Provides fall-back point
– Prevents over-writing
– Helps w. accountability
– Track change history
– Any operating system
– Schedule server tasks
– Project management
http://flickr.com/photos/97607362@N00/1102286373/

Design by Commi ee
aka Village Stew
http://flickr.com/photos/acidflask/128102331/

Several years ago in
Yakima, Washington
there was a church split
over whether to use
organ music in worship.
Ironically, those who
left to start a new
church now have a far
more extravagant
organ than the original
congregation ever did.
They remain divided.
http://flickr.com/photos/ultrahi/102732191/

Mark Boulton: Designing by Community?
“Designing by community I feel is different.
There are a lot of people in the Drupal
community. Many hundreds with a strong
Text
voice. Providing very early releases—in
fact, opening up the process completely—
draws reaction. Within that reaction, if
there is enough of it, we can identify
trends. And I think trends in feedback is
the key to Designing by Community.”

Leadership &
Team Dynamics
http://wikipedia.org/wiki/Lion

Stephen P. Anderson
Why I’m Not a Manager
“When you have the
right people on your
team, what qualifies as
management is really
about creating a
platform from which
everyone can track
themselves. That, and
f i g u r i n g o u t h ow to
challenge folks so that
they are delivering their
best. This assumes a lot
of trust and faith in their
abilities, and not in your
ability to hand-hold.”
http://tinyurl.com/not-a-manager

“He who thinks he
leads, but has no
followers, is only
taking a walk.”
— John C. Maxwell
21 Irrefutable Laws of Leadership
http://flickr.com/photos/rantes/91307782/

John
Maynard
Keynes
Father of
Modern
Economics
http://imdb.com/title/tt0268978/

Myers-Briggs Personalities
– Extraverted / Introverted
– Sensing / iNtuitive
– Thinking / Feeling
– Perceiving / Judging
http://humanmetrics.com/cgi-win/JTypes1.htm
http://wikipedia.org/wiki/Myers-Briggs_Type_Indicator

SENSING INTUITIVE
INTROVERT
JUDGING
ISTJ ISFJ INFJ INTJ
ISTP ISFP INFP INTP
PERCEIVING
ESTP ESFP ENFP ENTP
EXTRAVERT
JUDGING
ESTJ ESFJ ENFJ ENTJ
THINKING FEELING THINKING

ENTJ - “I’m really sorry you have to die.”
ENTJs have a natural tendency to marshall and direct.
This may be expressed with the charm and finesse of a
world leader or with the insensitivity of a cult leader.
The ENTJ requires little encouragement to make a
plan. One ENTJ put it this way... \"I make these little
plans that really don't have any importance to anyone
else, and then feel compelled to carry them out.\"
While \"compelled\" may not describe ENTJs as a group,
nevertheless the bent to plan creatively and to make
those plans reality is a common theme for NJ types.
http://typelogic.com/entj.html

I think of the ideal web team
as operating much like the
Ninja Turtles. Each one is
dangerous in his own right,
but together under the right
leadership become more
than the sum of their parts.
“At least half of the team
members should be senior-
level in their area of
expertise. The functions of a
web team can be categorized
into five specialist groups:
Design, Client-Side, Server-
Side, Content, and Support.”
— Cody Lindley
http://tinyurl.com/team-effort
http://wikipedia.org/wiki/Teenage_Mutant_Ninja_Turtles

We All Want to Use
Elegant Techniques
(because we love the praise from peers)
– CSS Drop Shadows
– PNGs + Alpha Channels
– Ems instead of Px fonts
– sIFR Text Replacement
– JavaScript Animations
– Drawing on <canvas>
– Elastic page layouts
http://veer.com/products/detail.aspx?image=ISP2009547

Can’t Be Afraid
to Slide Tackle
http://tinyurl.com/slide-tackle

VIEWZI._launchUrl = function(urlStr, plugin) {
if (plugin === 'flash' && new_window === true) {
if (YAHOO.env.ua.opera) {
return;
} else if (YAHOO.env.ua.gecko || YAHOO.env.ua.ie) {
window.open(urlStr);
} else {
var new_a = document.createElement('a');
new_a.href = urlStr;
new_a.style.position = 'absolute';
new_a.style.overflow = 'hidden';
new_a.style.visibility = 'hidden';
new_a.style.display = 'block';
new_a.style.width = '0';
new_a.style.height = '0';
new_a.style.fontSize = '0';
new_a.target = '_blank';
new_a.innerHTML = '';
document.body.appendChild(new_a);
var fake_click = document.createEvent('MouseEvents');
fake_click.initMouseEvent('click', true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
new_a.dispatchEvent(fake_click);
new_a.parentNode.removeChild(new_a);
}
return true;
}
};

Paradigm Shift: Agile Workflow
http://tinyurl.com/assembly-line

Automate processes, but in moderation
http://flickr.com/photos/polvero/2656367141/

A moment before firing, two
members of the gun crew
ceased all activity and came
to attention for a three-
second interval extending
throughout the discharge of
the gun. He summoned up an
o l d co l o n e l o f a r t i l l e r y,
showed him the pictures,
and pointed out the strange
behavior… “Ah,” he said
when the performance was
over, “I have it. They are
holding the horses.”
p. 124 of Social Change
by Robert Nisbet
http://flickr.com/photos/gilliamhome/291509949/

Apple’s Me.com

http://960.gs/

“Embrace Constraints”
css
– Mark Kraemer
All modern monitors support at
least 1024×768 pixel resolution.
960 is divisible by 2, 3, 4, 5, 6,
8, 10, 12, 15, 16, 20, 24, 30, 32,
40, 48, 60, 64, 80, 96, 120, 160,
192, 240, 320 and 480.

The 960 Grid System is an effort to streamline
web development by providing commonly used
dimensions, based on a width of 960 pixels.
There are two variants: 12 and 16 columns,
which can be used separately or in tandem.

The basis of the grid is ideally suited to rapid
prototyping, but it would work equally well
for workflow in a production environment.
There are printable sketch sheets, Photoshop
and Fireworks templates, and a CSS framework
that contain identical column measurements.

Inspiration: Khoi Vinh

Inspiration: Cameron Moll

Inspiration: Olav Bjørkøy

Inspiration: Brandon Schauer

The 12 column grid is divided into portions
that are 60 pixels wide, whereas the 16
column grid consists 40 pixel increments.
Each column has 10 pixels of margin to either
side, which stack to create gutters that are
20 pixels wide between each of the columns.

<div class=\"container_12\">
<div class=\"grid_7 prefix_1\">
<div class=\"grid_2 alpha\">
...
</div>
<div class=\"grid_3\">
...
</div>
<div class=\"grid_2 omega\">
...
</div>
</div>
<div class=\"grid_3 suffix_1\">
...
</div>
</div>

12 column grid measurements

16 column grid measurements

Look Ma! WJS uses 960.gs :)

Summation of Presentation
•Strive to write elegant code.
•Slide-tackle when necessary.
•Choose the right framework.
•Know thy personality type.
•Train an “inverted-T” skill-set.
•Be passionate + pragmatic.

That’s a wrap. Keep in touch!
sonspring.com
twitter.com/nathansmith