striking a balance: middle ground in front-end development
DESCRIPTION
My presentation from 2008 Webmaster Jam Session, in Atlanta, GA.TRANSCRIPT
http://flickr.com/photos/marcusjb/2813736862/
Striking aBalance
Finding middle ground inFront–End Development
Hi. I’m Nathan Smith, a designer andfront-end developer @ Viewzi.com
Viewzi 101 – Intro Video(Learn more about Viewzi: www.viewzi.tv or www.viewzi.com)
http://viewzi.tv/?dl=viewzi101
Who am I, really?
* A few classes left, finishing up online.
– Expectant father! :)
– Master of Divinity*
– Published author
– Started Godbit.com
– Created 960.gs
– ENTJ Personality
Designers vs.Developers
?
http://flickr.com/photos/iamaaronmartin/2858991878/
Stereotypical perceptions
http://nbc.com/chuck/
In reality, more collaborative
http://flickr.com/photos/tbisaacs/2849275119/
But still quite competitive!
http://flickr.com/photos/tbisaacs/2871685626/
Steve BrewerDeveloper
Travis IsaacsDesigner
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
Life used to be so much simpler. But nowadays...
(Best Viewed In)
http://www.flickr.com/photos/avalonstar/2822957764/
Gotta catch ‘em all! o_O;New Challenger!
We really needInteroperability
In order to keeppace with change:
Web Standards = 3 legged stool:
• HTML• CSS• JavaScript
Accessibility falls flat if any of these three are done incorrectly.
AaronScheidiesWorld ClassTriathlete
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
“Far from being something that is added to a site, accessibility is something we need to e n s u re i s n ’ t re m ove d . F ro m t h a t 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.”
Jeremy Keith – JS Expert
http://flickr.com/photos/kimli/2671627954/
http://flickr.com/photos/edtarwinski/226266619/
http://boston.com/bigpicture/2008/07/antiterrorism_exercises_in_chi.html
http://wikipedia.org/wiki/Ultimate_Wolverine_vs._Hulk
We are PassionateAbout 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...
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)
jQuery Yahoo! User Interface Library
jQuery YUI
Ninjas master a variety of tools
Use a framework as an extension of yourself, not just as a crutch.
(not just one)
http://imdb.com/title/tt1046173/
Macro vs. Micro Semantics
http://flickr.com/photos/leoffreitas/332360959/ http://flickr.com/photos/kennysarmy/2493464978/
– HTML / XHTML– ID, class names– Microformats– Machine code
– Correct tags– Accessibility– Attribute usage– Search Engines
http://flickr.com/photos/97607362@N00/1102286373/
Why Use a VersionControl System?
– Provides fall-back point
– Prevents over-writing
– Helps w. accountability
– Track change history
– Any operating system
– Schedule server tasks
– ♥ Project management
last codecommit
http://flickr.com/photos/acidflask/128102331/
Design by Commi!eeaka Village Stew
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?
Text
“Designing by community I feel is different.
There are a lot of people in the Drupal
community. Many hundreds with a strong
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. AndersonWhy I’m Not a Manager
“When you have the right people on your team, what qualifies as management is really a b o u t c r e a t i n g a platform from which eve ryone can t rack themselves. That, and f iguring out how 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/
http://imdb.com/title/tt0268978/
JohnMaynardKeynesFather ofModernEconomics
– Extraverted / Introverted
– Sensing / iNtuitive
– Thinking / Feeling
– Perceiving / Judging
Myers-Briggs Personalities
http://humanmetrics.com/cgi-win/JTypes1.htmhttp://wikipedia.org/wiki/Myers-Briggs_Type_Indicator
ISTJ ISFJ INFJ INTJ
ISTP ISFP INFP INTP
ESTP ESFP ENFP ENTP
ESTJ ESFJ ENFJ ENTJ
INT
RO
VE
RT
EX
TR
AV
ER
T
SENSING INTUITIVE
JUD
GIN
GJU
DG
ING
PE
RC
EIV
ING
THINKING THINKINGFEELING
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
ENTJ - “I’m really sorry you have to die.”
http://wikipedia.org/wiki/Teenage_Mutant_Ninja_Turtles
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-l e v e l i n t h e i r a r e a o f expertise. The functions of a web team can be categorized into five specialist groups: Design, Client-Side, Server-Side, Content, and Support.”
— Cody Lindleyhttp://tinyurl.com/team-effort
http://veer.com/products/detail.aspx?image=ISP2009547
We All Want to UseElegant Techniques
– CSS Drop Shadows
– PNGs + Alpha Channels
– Ems instead of Px fonts
– sIFR Text Replacement
– JavaScript Animations
– Drawing on <canvas>
– Elastic page layouts
(because we love the praise from peers)
http://tinyurl.com/slide-tackle
Can’t Be Afraidto 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; }};
http://tinyurl.com/assembly-line
Paradigm Shift: Agile Workflow
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 old colonel of arti l lery, 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 Changeby Robert Nisbet
http://flickr.com/photos/gilliamhome/291509949/
Apple’s Me.com
http://960.gs/
“Embrace Constraints”– 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.
css
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 :)
•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.
Summation of Presentation
sonspring.comtwitter.com/nathansmith
That’s a wrap. Keep in touch!