Refresh Oklahoma City http://refreshokc.org —
http://960.gs

Relax. Please don’t try to
take notes feverishly. Email — http://sonspring.com/contact Twitter — http://twitter.com/nathansmith Slides — http://slideshare.net/nathansmith/refresh-okc Feel free to email me later, and download these slides as well. These links are at the end, too.

An important discipline when using
any framework is striving to understand the underlying language. In other words, use it as a tool – Not a black box. Before we get started, let’s agree: Code is not magic

Veteran “ninjas” master a variety
of tools – Not just one. Useaframeworkasanextension ofyourself–Notjustasacrutch. BYHAND FRAMEWORK http://imdb.com/title/tt1046173

“Our craft is becoming a
commodity and the people in charge don’t care about the quality of the markup, CSS or how short our JavaScript is. What matters is how fast you can get it to market, how many people it reaches and how cheaply it can be built.” Christian Heilmann — developer evangelist at Mozilla http://thinkvitamin.com/code/web-development-is-moving-on-are-you

“Point being, choose your battles
wisely. In the time you could argue the relevance of naming conventions like these – I just built a 16-column layout.” Matthew Anderson — designer at OneHub.com http://onehub.com/past/2009/5/13/why-we-chose-960gs-css-framework

Truth be told, I don’t
really care if you use the 960 Grid System or not. I tell people who get all emotional over “semantics” (ID & classes have none) that it takes less energy to not use something than to argue about it. It also takes considerably more energy to do research. Being ignorant is blissful and easy! Allow me to clear up a (potential) misconception...

Semantics can reside in microformats’
class names, because parsers are built to look for them specifically http://microformats.org

The W3C’s “Semantic Web” doesn’t
involve CSS http://www.w3.org/DesignIssues/Semantic.html

The term “Semantic Web” refers
to W3C’s vision of the Web of linked data. Semantic Web technologies enable people to create data stores on the Web, build vocabularies, and write rules for handling data. Linked data are empowered by technologies such as RDF, SPARQL, OWL, and SKOS. — World Wide Web Consortium (W3C) CSS gets no ♥ at the Semantic Web party http://www.w3.org/standards/semanticweb

<tag class="peanut_butter jelly">Yummy content</tag> Semantics
live here Not here So let’s get this straight... ... Except in the case of microformats.

Jeff Croft’s “Frameworks for Designers”
article http://www.alistapart.com/articles/frameworksfordesigners

Jeff Croft was never one
to mince words... http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks

Don’t be a Luddite (Note:
I was with Sass/SCSS) http://en.wikipedia.org/wiki/Luddite The Luddites were a social movement of British textile artisans in the nineteenth century who protested – often by destroying mechanized looms – against the changes produced by the Industrial Revolution, which they felt were leaving them without work and changing their way of life.

Added semantics via role="..." &
HTML5 tags <header role="banner"> <nav>...</nav> </header> <div role="main"> <article> <section>...</section> </article> <aside>...</aside> </div> <footer role="contentinfo"> ... </footer> http://adactio.com/journal/4267 — http://dev.w3.org/html5/html4-differences/#new-elements

Added semantics via role="..." &
HTML5 tags <header role="banner"> <nav>...</nav> </header> <div role="main"> <article> <section>...</section> </article> <aside>...</aside> </div> <footer role="contentinfo"> ... </footer> http://adactio.com/journal/4267 — http://dev.w3.org/html5/html4-differences/#new-elements

Um, okay, but why grids?
“My design skillz are so awesome, I’ve never needed to use grids.” #anyways #whatevs #whocares #sobored

For design that’s really, really,
ridiculously good looking http://en.wikipedia.org/wiki/Zoolander Also, to do other things good too.

The reason I create and
use CSS frameworks is because I hate doing mundane tasks repeatedly (yawn). I’d rather be working in JavaScript. FYI: I don’t especially love CSS.

Co-author Tech editor Tech editor
jQueryEnlightenment.com oreilly.com/catalog/9780596159788 JavaScriptEnlightenment.com JavaScript books I’ve worked on... All involving Cody Lindley, who has been a JavaScript mentor to me: http://codylindley.com

There are many “dragons” sharing
the same public facade in web development: ColdFusion, Java, .NET, Perl, PHP, Ruby, Python... To render in a browser, it all has to pass through HTML. So, I think that front-end is a good place to be! :) Front-end is the opposite of a mythological hydra http://en.wikipedia.org/wiki/Lernaean_Hydra

But I digress. I’ll forever
be known as “the 960 guy.” But I guess that’s not so bad... Right? #anyways #whatevs #whocares #sobored

The premise of the system
is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design templates, and CSS files that have identical measurements. What’s this whole 960.gs thing all about?

960 SHIps WITH PrINtABlE *.PDf
SKeTCH SHeEts, BeCAUSe sOmEtIMeS THe BeSt DEsIGn ToOl IS No ToOl At ALl! WE OfTeN JUMp RIgHT INtO DEsIGn Or CODe SoFtWARe, BUt SKeTCHInG THIngS OUt CAN Be MUCH mOrE eFfICIEnT. WHEn I WOrKED AS AN InFoRmATIoN ARCHItECt, SoMe Of mY BeSt WOrK WAS DOnE SImPlY USInG PeN AnD PApEr.

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. If you like, there’s also a 24-column version. “Dogfooding” = When you use your own product NOM, NOM, NOM — I use 960 regularly! :)

The 12-column grid is divided
into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. The 24-column grid is also included. It consists of columns 30 pixels wide, with 10 pixel gutters, and a 5 pixel buffer on each side of the container. 12, 16, and 24 columns available by default

Show me teh codez! #anyways
#whatevs #whocares #sobored

Typical use case for a
12-column grid <div class="container_12"> <div class="grid_4"> I am 1/3 wide. </div> <div class="grid_4"> I am 1/3 wide. </div> <div class="grid_4"> Me too! </div> <div class="clear"></div> <!-- Yuck, I know --> <div class="grid_6"> I am 1/2 wide. </div> <div class="grid_6"> I am 1/2 wide. </div> </div>

Typical use case for a
12-column grid <div class="container_12"> <div class="grid_4"> I am 1/3 wide. </div> <div class="grid_4"> I am 1/3 wide. </div> <div class="grid_4"> Me too! </div> <div class="clear"></div> <!-- Yuck, I know --> <div class="grid_6"> I am 1/2 wide. </div> <div class="grid_6"> I am 1/2 wide. </div> </div>

Nested grids & Column rearrangement
<div class="container_12"> <div class="grid_6 push_6"> <div class="grid_2 alpha"> First nested grid. </div> <div class="grid_2"> Middle. No special class. </div> <div class="grid_2 omega"> Last nested grid. </div> </div> <div class="grid_6 pull_6"> Last in markup, first visually. </div> </div>

Nested grids: alpha = first,
omega = last (per row) <div class="container_12"> <div class="grid_6 push_6"> <div class="grid_2 alpha"> First nested grid. </div> <div class="grid_2"> Middle. No special class. </div> <div class="grid_2 omega"> Last nested grid. </div> </div> <div class="grid_6 pull_6"> Last in markup, first visually. </div> </div>

Column rearrangement (SEO maybe) <div
class="container_12"> <div class="grid_6 push_6"> <div class="grid_2 alpha"> First nested grid. </div> <div class="grid_2"> Middle. No special class. </div> <div class="grid_2 omega"> Last nested grid. </div> </div> <div class="grid_6 pull_6"> Last in markup, first visually. </div> </div>

http://960.gs/demo.html

http://960.gs/demo.html

Have fixed-width grids become too
pervasive? http://twitter.com/jcroft/status/49880667374354433

Have fixed-width grids become too
pervasive? http://twitter.com/nathansmith/status/49882179379015680

http://grids.heroku.com Many more possibilities via
grid generators

Templates available for your weapon
of choice... Acorn Fireworks Flash InDesign GIMP Inkscape Illustrator OmniGraffle Photoshop QuarkXPress Visio Expression Design

Adobe Fireworks 960.gs extension (Photoshop
too)

Grids can accelerate progress while
maintaining order http://www.flickr.com/photos/meckert75/3732780382

Michael Phelps following a painted
line at the bottom of a pool doesn’t make him a less talented swimmer. http://livinggallery.oneindia.in/main.php?g2_itemId=32903

“Our best practices are killing
us” – Nicole Sullivan http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us Three best practice myths... 1. Don’t add any extra elements 2. Don’t add classes 3. Use descendent selectors exclusively

“Our best practices are killing
us” – Nicole Sullivan http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us Three best practice myths... 1. Don’t add any extra elements 2. Don’t add classes 3. Use descendent selectors exclusively

Take all “rules” in development
with a grain of salt Sensibly revised... 1. Add extra elements sparingly 2. Add classes thoughtfully 3. Avoid descendent selector kludge...

How would you style these
<a> links? <ul class="menu"> <li> <a href="/">Home</a> </li> <li> <a href="/about">About</a> </li> </ul>

Use only the selectors that
are necessary. .menu a { /* Terse = Get ‘er done! */ } ul.menu li a { /* Too heavy = Overkill. */ }

http://www.digital-web.com/articles/smart_CSS_aint_always_sexy_CSS Still true: “Smart CSS
ain’t always sexy CSS”

Inspiration: Khoi Vinn
http://www.subtraction.com/2004/12/31/grid-computi

http://www.cameronmoll.com/archives/2006/12/gridding_the_960
Inspiration: Cameron Moll

http://www.cameronmoll.com/archives/2006/12/gridding_the_960
Inspiration: Cameron Moll

Inspiration: Olav Bjørkøy
http://bjorkoy.com/2007/08/launch-blueprint-a-css-framework

http://www.adaptivepath.com/ideas/e000863
Inspiration: Brandon Schauer

http://www.adaptivepath.com/ideas/e000863

http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1
Inspiration: Mark Boulton

Frameworks are kind of like
sheet music. They are organized, and can keep teams on the same page. http://www.flickr.com/photos/avlxyz/3280803912

Like jazz, responsive design is
contextual. No two approaches are exactly the same.

Responsive Web Design - using
@media queries http://www.alistapart.com/articles/responsive-web-design

http://hicksdesign.co.uk Hicksdesign.co.uk = Beautiful responsive
web design

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold Media queries for mobile
aren’t a magic bullet

LifeChurch.tv - Separate site for
mobile & desktop http://m.lifechurch.tv — http://www.lifechurch.tv

Percentage-based grid, screenshot in Firefox
4.0 310px 150px http://host.sonspring.com/yui3_grid

309px 149px Percentage-based grid, screenshot
in Chrome 10.0 http://host.sonspring.com/yui3_grid

http://960.gs/demo_24_col.html 960’s 24 column grid
= Exact multiples of 10

Whither: Grid framework or Responsive
design? Doing a fixed-width design using a grid framework is relatively easy. Whereas, doing a responsive design that looks solid at every resolution is multivariate and there is not (yet) an automated, foolproof solution. VS

Pet peeve: “Use tomorrow’s technology,
today!” The mere fact we’re even able to use it today makes it today’s technology. As designers and developers, it’s easy to get so caught up in wanting to use the latest and greatest (to a fault) that we forget to try and tackle present-day problems with proven technologies.

http://twitter.com/igorskee/status/52152273178079232 Where media queries fall
short, JavaScript shines

Smart JS hackers = Context-aware
image sizing http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing

Symphony + Jazz = Crazy
~ Like playing jazz flute http://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy

Adapt.js - Serve 960’s (or
any) CSS dynamically http://adapt.960.gs

Note: Not an endorsement, just
a Twitter link... http://twitter.com/zeldman/status/59432011693166592

For what it’s worth, a
lot of people linked to it...

How to use Adapt.js =
A human-readable config <script> // Edit to suit your needs. var ADAPT_CONFIG = { // Where is your CSS? path: 'assets/css/', // false = Only run once, when page first loads. // true = Change on window resize and page tilt. dynamic: true, // Optional callback... myCallback(i, width) callback: myCallback, // First range entry is the minimum. // Last range entry is the maximum. // Separate ranges by "to" keyword. range: [ '0px to 760px = mobile.css', '760px to 980px = 720.css', '980px to 1280px = 960.css', '1280px to 1600px = 1200.css', '1600px to 1920px = 1560.css', '1920px = fluid.css' ] }; </script>

How to use Adapt.js =
A human-readable config <script> // Edit to suit your needs. var ADAPT_CONFIG = { // Where is your CSS? path: 'assets/css/', // false = Only run once, when page first loads. // true = Change on window resize and page tilt. dynamic: true, // Optional callback... myCallback(i, width) callback: myCallback, // First range entry is the minimum. // Last range entry is the maximum. // Separate ranges by "to" keyword. range: [ '0px to 760px = mobile.css', '760px to 980px = 720.css', '980px to 1280px = 960.css', '1280px to 1600px = 1200.css', '1600px to 1920px = 1560.css', '1920px = fluid.css' ] }; </script>

845 bytes Minified, Adapt.js is
less than 1 KB. (Allow me to put into perspective) What about adding JavaScript page-weight?

60 × 40 pixel JPG
@ 70% quality = 908 bytes My son, figuring out that the wind can spin pinwheels 908 bytes http://www.flickr.com/photos/nathansmith/5625332824

Or, as my dad used
to tell me as a kid... “Don’t worry about problems smaller than a gnat’s backside.” Note: If the extra HTTP request for JS is a concern, the file size is small enough to just include inline in the document’s <head>.

Not to go all “Ron
Burgundy” on you, but... “Kind of a [small] deal” I didn’t set out to write a terse snippet of JavaScript. That’s just how easy the problem was to solve. Seriously though, consider what will be best for your project. Nothing is a magic bullet. Code is just code. http://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy

In fact, here’s a slew
of alternatives you might like better. You should explore every option, and choose one that makes sense to you. Or, if nothing seems like a good fit, I’d encourage you to create one! To reiterate: I don’t care if you use 960.gs or Adapt.js

Sencha Touch
http://sencha.com/touch

http://dojotoolkit.org/features/mobile
Dojo Mobile

jQuery Mobile
http://jquerymobile.com

http://jeromeetienne.github.com/jquery-mobile-960

Blueprint CSS Framework
http://blueprintcss.org

HTML5 Boilerplate - Mobile
http://html5boilerplate.com/mobile

Less Framework 4
http://lessframework.com

http://cssgrid.net
1140 CSS Grid

The Square Grid
http://thesquaregrid.com

Respond.js - Parses CSS3 @media
queries https://github.com/scottjehl/Respond

And the list goes on...
But you get the point. There are plenty of options out there to choose from. (I just want to mention two more things)

To prevent developers from wasting
countless hours on styling dumb form elements Note: I wasted countless hours styling dumb form elements, so you don’t have to! Forms = Quite possibly, the worst part of web design

“Future plans include a tutorial
on how to use jQuery to add styling hooks to form elements, since I know from experience that is no cup of tea.” — Source = Me when announcing 960.gs in 2008! — Excuse = New HTML5 elements set me back :) It’s been awhile in the making... http://sonspring.com/journal/960-grid-system

http://formalize.me I finally distilled my
approach to forms

http://sass-lang.com I prefer using Sass
to expedite writing CSS I didn’t think I would like Sass, but I do. Oh, and if you’re going to use Sass, use Sass, not SCSS.

Questions? Comments? Hate mail? :)
Email — http://sonspring.com/contact Twitter — http://twitter.com/nathansmith Slides — http://slideshare.net/nathansmith/refresh-okc Thanks for attending my presentation! Feel free to email or say “hi” on Twitter.