Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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.

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Veteran “ninjas” master a variety of tools – Not just one. Use a framework as an extension of yourself – Not just as a crutch. BY HAND FRAMEWORK http://imdb.com/title/tt1046173

Slide 5

Slide 5 text

“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

Slide 6

Slide 6 text

“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

Slide 7

Slide 7 text

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...

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Yummy content Semantics live here Not here So let’s get this straight... ... Except in the case of microformats.

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

Added semantics via role="..." & HTML5 tags ...
... ...
... http://adactio.com/journal/4267 — http://dev.w3.org/html5/html4-differences/#new-elements

Slide 16

Slide 16 text

Added semantics via role="..." & HTML5 tags ...
... ...
... http://adactio.com/journal/4267 — http://dev.w3.org/html5/html4-differences/#new-elements

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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?

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

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! :)

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Typical use case for a 12-column grid
I am 1/3 wide.
I am 1/3 wide.
Me too!
I am 1/2 wide.
I am 1/2 wide.

Slide 29

Slide 29 text

Typical use case for a 12-column grid
I am 1/3 wide.
I am 1/3 wide.
Me too!
I am 1/2 wide.
I am 1/2 wide.

Slide 30

Slide 30 text

Nested grids & Column rearrangement
First nested grid.
Middle. No special class.
Last nested grid.
Last in markup, first visually.

Slide 31

Slide 31 text

Nested grids: alpha = first, omega = last (per row)
First nested grid.
Middle. No special class.
Last nested grid.
Last in markup, first visually.

Slide 32

Slide 32 text

Column rearrangement (SEO maybe)
First nested grid.
Middle. No special class.
Last nested grid.
Last in markup, first visually.

Slide 33

Slide 33 text

http://960.gs/demo.html

Slide 34

Slide 34 text

http://960.gs/demo.html

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Adobe Fireworks 960.gs extension (Photoshop too)

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

“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

Slide 49

Slide 49 text

“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

Slide 50

Slide 50 text

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...

Slide 51

Slide 51 text

How would you style these links?

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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.

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

How to use Adapt.js = A human-readable config // 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' ] };

Slide 79

Slide 79 text

How to use Adapt.js = A human-readable config // 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' ] };

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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 .

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

Sencha Touch http://sencha.com/touch

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

jQuery Mobile http://jquerymobile.com

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

Blueprint CSS Framework http://blueprintcss.org

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

Less Framework 4 http://lessframework.com

Slide 92

Slide 92 text

http://cssgrid.net 1140 CSS Grid

Slide 93

Slide 93 text

The Square Grid http://thesquaregrid.com

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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)

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

“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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

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.

Slide 101

Slide 101 text

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.