Striking a
Balance
 Finding middle ground in
 Front–End Development




                      http://flickr.com/photos/mar...
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.vi...
Who am I, really?
– Expectant father! :)

– Master of Divinity*

– Published author

– Started Godbit.com

– Created 960.g...
Designers vs.
Developers
Stereotypical perceptions

                      ?



http://flickr.com/photos/iamaaronmartin/2858991878/   http://nbc.com...
In reality, more collaborative




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




...
Front-End Developers are like midfielders,
  balancing in between offense and defense.




We ensure that designers get th...
“Inverse, Multi-Headed Hydra”
In the world of web-development,
there are many “dragons” sharing
the same public facade: AS...
(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 incorre...
Aaron
            Scheidies
            World Class
            Triathlete


Aaron recently received
his Doctorate of Phys...
Aaron was born with a
juvenile form of macular
degeneration called
Stargardt’s disease. His
vision is 20/400 vision,
while...
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 i...
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
                                 ...
As the CS3 product cycle was
wrapping up, Adobe's user interface
designers started showing their ideas
for subsequent rele...
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)




                           ...
Macro vs. Micro Semantics


 –   Correct tags                                   –   HTML / XHTML
 –   Accessibility       ...
Why Use a Version
Control System?              last code
                               commit
– Provides fall-back point
...
Design by Commi ee
              aka Village Stew

http://flickr.com/photos/acidflask/128102331/
Several years ago in
                                              Yakima, Washington
                                    ...
Mark Boulton: Designing by Community?


     “Designing by community I feel is different.
     There are a lot of people i...
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 r...
“He who thinks he
leads, but has no
followers, is only
taking a walk.”

— John C. Maxwell
  21 Irrefutable Laws of Leaders...
John
                                   Maynard
                                   Keynes
                                ...
Myers-Briggs Personalities
– Extraverted / Introverted
– Sensing      / iNtuitive
– Thinking     / Feeling
– Perceiving   ...
SENSING                        INTUITIVE




                                                        INTROVERT
JUDGING



...
ENTJ - “I’m really sorry you have to die.”
ENTJs have a natural tendency to marshall and direct.
This may be expressed wit...
I think of the ideal web team
 as operating much like the
 Ninja Turtles. Each one is
 dangerous in his own right,
 but to...
We All Want to Use
Elegant Techniques
(because we love the praise from peers)


– CSS Drop Shadows

– PNGs + Alpha Channel...
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...
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...
Apple’s Me.com
http://960.gs/
“Embrace Constraints”
css
      – Mark Kraemer

      All modern monitors support at
      least 1024×768 pixel resolution...
The 960 Grid System is an effort to streamline
web development by providing commonly used
dimensions, based on a width of ...
The basis of the grid is ideally suited to rapid
prototyping, but it would work equally well
for workflow in a production ...
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 incremen...
<div class=quot;container_12quot;>
    <div class=quot;grid_7 prefix_1quot;>
        <div class=quot;grid_2 alphaquot;>
  ...
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 ...
That’s a wrap. Keep in touch!
        sonspring.com
        twitter.com/nathansmith
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
Upcoming SlideShare
Loading in...5
×

Striking a Balance: Middle Ground in Front-End Development

11,245

Published on

My presentation from 2008 Webmaster Jam Session, in Atlanta, GA.

Published in: Design, Technology
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,245
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
212
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Striking a Balance: Middle Ground in Front-End Development

  1. 1. Striking a Balance Finding middle ground in Front–End Development http://flickr.com/photos/marcusjb/2813736862/
  2. 2. Hi. I’m Nathan Smith, a designer and front-end developer @ Viewzi.com
  3. 3. http://viewzi.tv/?dl=viewzi101 Viewzi 101 – Intro Video (Learn more about Viewzi: www.viewzi.tv or www.viewzi.com)
  4. 4. 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.
  5. 5. Designers vs. Developers
  6. 6. Stereotypical perceptions ? http://flickr.com/photos/iamaaronmartin/2858991878/ http://nbc.com/chuck/
  7. 7. In reality, more collaborative http://flickr.com/photos/tbisaacs/2849275119/
  8. 8. But still quite competitive! Steve Brewer Travis Isaacs Developer Designer http://flickr.com/photos/tbisaacs/2871685626/
  9. 9. 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.
  10. 10. “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
  11. 11. (Best Viewed In) Life used to be so much simpler. But nowadays...
  12. 12. New Challenger! Gotta catch ‘em all! o_O; http://www.flickr.com/photos/avalonstar/2822957764/
  13. 13. In order to keep pace with change: We really need Interoperability
  14. 14. Web Standards = 3 legged stool: • HTML • CSS • JavaScript Accessibility falls flat if any of these three are done incorrectly.
  15. 15. 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.
  16. 16. 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.
  17. 17. Retro-Fitted Accessibility FAIL
  18. 18. 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.”
  19. 19. http://flickr.com/photos/kimli/2671627954/
  20. 20. http://flickr.com/photos/edtarwinski/226266619/
  21. 21. http://boston.com/bigpicture/2008/07/antiterrorism_exercises_in_chi.html
  22. 22. 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
  23. 23. 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? quot;Are you telling me,quot; I asked, quot;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?quot; http://blogs.adobe.com/jnack/2008/06/future_photoshop_ui.html
  24. 24. JavaScript is discussed intensely:
  25. 25. JavaScript is discussed intensely: (I happen to agree)
  26. 26. Yahoo! User jQuery Interface Library
  27. 27. jQuery YUI
  28. 28. 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/
  29. 29. 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/
  30. 30. 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/
  31. 31. Design by Commi ee aka Village Stew http://flickr.com/photos/acidflask/128102331/
  32. 32. 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/
  33. 33. 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.”
  34. 34. Leadership & Team Dynamics http://wikipedia.org/wiki/Lion
  35. 35. 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
  36. 36. “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/
  37. 37. John Maynard Keynes Father of Modern Economics http://imdb.com/title/tt0268978/
  38. 38. 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
  39. 39. 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
  40. 40. 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... quot;I make these little plans that really don't have any importance to anyone else, and then feel compelled to carry them out.quot; While quot;compelledquot; 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
  41. 41. 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
  42. 42. 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
  43. 43. Can’t Be Afraid to Slide Tackle http://tinyurl.com/slide-tackle
  44. 44. 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; } };
  45. 45. Paradigm Shift: Agile Workflow http://tinyurl.com/assembly-line
  46. 46. Automate processes, but in moderation http://flickr.com/photos/polvero/2656367141/
  47. 47. 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/
  48. 48. Apple’s Me.com
  49. 49. http://960.gs/
  50. 50. “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.
  51. 51. 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.
  52. 52. 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.
  53. 53. Inspiration: Khoi Vinh
  54. 54. Inspiration: Cameron Moll
  55. 55. Inspiration: Olav Bjørkøy
  56. 56. Inspiration: Brandon Schauer
  57. 57. 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.
  58. 58. <div class=quot;container_12quot;> <div class=quot;grid_7 prefix_1quot;> <div class=quot;grid_2 alphaquot;> ... </div> <div class=quot;grid_3quot;> ... </div> <div class=quot;grid_2 omegaquot;> ... </div> </div> <div class=quot;grid_3 suffix_1quot;> ... </div> </div>
  59. 59. 12 column grid measurements
  60. 60. 16 column grid measurements
  61. 61. Look Ma! WJS uses 960.gs :)
  62. 62. 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.
  63. 63. That’s a wrap. Keep in touch! sonspring.com twitter.com/nathansmith
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×