of 102 /102
Refresh Oklahoma City http://refreshokc.org http://960.gs

Refresh OKC

Embed Size (px)


Slides for a talk at Refresh OKC http://refreshokc.org/2011/03/21/upcoming-april-meeting

Text of Refresh OKC

  • Refresh Oklahoma City http://refreshokc.org http://960.gs
  • Nathan Smith = Principal UI Architect @projekt202 we make software make sense http://sonspring.com http://projekt202.com
  • Relax. Please dont try to take notes feverishly.Email http://sonspring.com/contactTwitter http://twitter.com/nathansmithSlides 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.
  • Before we get started, lets agree: Code is not magic 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.
  • Veteran ninjas master a variety of tools Not just one. FRAMEWORK BY H AND Use a framework as an extension of yourself Not just as a crutch. http://imdb.com/title/tt1046173
  • Christian Heilmann developer evangelist at Mozilla Our craft is becoming a commodity and the people in charge dont 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. http://thinkvitamin.com/code/web-development-is-moving-on-are-you
  • Matthew Anderson designer at OneHub.com 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. http://onehub.com/past/2009/5/13/why-we-chose-960gs-css-framework
  • Allow me to clear up a (potential) misconception...Truth be told, I dont really care if youuse the 960 Grid System or not.I tell people who get all emotional oversemantics (ID & classes have none)that it takes less energy to not usesomething than to argue about it.It also takes considerably more energy to doresearch. Being ignorant is blissful and easy!
  • Semantics can reside in microformats class names,because parsers are built to look for them specically http://microformats.org
  • The W3Cs Semantic Web doesnt involve CSS http://www.w3.org/DesignIssues/Semantic.html
  • CSS gets no at the Semantic Web partyThe term Semantic Web refers to W3Csvision of the Web of linked data. SemanticWeb technologies enable people to createdata stores on the Web, build vocabularies,and write rules for handling data. Linkeddata are empowered by technologies suchas RDF, SPARQL, OWL, and SKOS. World Wide Web Consortium (W3C) http://www.w3.org/standards/semanticweb
  • So lets get this straight... Semantics live hereYummy content Not here ... Except in the case of microformats.
  • Jeff Crofts 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
  • Dont be a Luddite (Note: I was with Sass/SCSS)The Luddites were a socialmovement of British textileartisans in the nineteenthcentury who protested often by destroyingmechanized looms againstthe changes produced bythe Industrial Revolution,which they felt were leavingthem without work andchanging their way of life. http://en.wikipedia.org/wiki/Luddite
  • Added semantics via role="..." & HTML5 tags ...
    ... http://adactio.com/journal/4267 http://dev.w3.org/html5/html4-differences/#new-elements
  • Added semantics via role="..." & HTML5 tags ...
    ... http://adactio.com/journal/4267 http://dev.w3.org/html5/html4-differences/#new-elements
  • #anyways #whatevs #whocares #soboredUm, okay, but why grids?My design skillz are so awesome, Ive never needed to use grids.
  • For design thats really, really, ridiculously good looking Also, to do other things good too. http://en.wikipedia.org/wiki/Zoolander
  • FYI: I dont especially love CSS.The reason I create and use CSSframeworks is because I hate doingmundane tasks repeatedly (yawn).Id rather be working in JavaScript.
  • JavaScript books Ive worked on... Co-author Tech editor Tech editorjQueryEnlightenment.com JavaScriptEnlightenment.com oreilly.com/catalog/9780596159788 All involving Cody Lindley, who has been a JavaScript mentor to me: http://codylindley.com
  • Front-end is the opposite of a mythological hydra 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! :) http://en.wikipedia.org/wiki/Lernaean_Hydra
  • #anyways #whatevs #whocares #soboredBut I digress.Ill forever be known as the 960 guy.But I guess thats not so bad... Right?
  • Whats this whole 960.gs thing all about?The premise of the system is ideally suited to rapidprototyping, but it would work equally well whenintegrated into a production environment. Thereare printable sketch sheets, design templates, andCSS les that have identical measurements.
  • Dogfooding = When you use your own product 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, theres also a 24-column version. NOM, NOM, NOM I use 960 regularly! :)
  • 12, 16, and 24 columns available by defaultThe 12-column grid is divided into portions thatare 60 pixels wide. The 16-column grid consistsof 40 pixel increments. Each column has 10pixels of margin on the left and right, whichcreate 20 pixel wide gutters between columns.The 24-column grid is also included. It consistsof columns 30 pixels wide, with 10 pixel gutters,and a 5 pixel buffer on each side of the container.
  • #anyways #whatevs #whocares #sobored Show me teh codez!
  • 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.
  • 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.
  • Nested grids & Column rearrangement
    First nested grid.
    Middle. No special class.
    Last nested grid.
    Last in markup, first visually.
  • Nested grids: alpha = rst, omega = last (per row)
    First nested grid.
    Middle. No special class.
    Last nested grid.
    Last in markup, first visually.
  • Column rearrangement (SEO maybe)
    First nested grid.
    Middle. No special class.
    Last nested grid.
    Last in markup, first visually.
  • http://960.gs/demo.html
  • http://960.gs/demo.html
  • Have xed-width grids become too pervasive? http://twitter.com/jcroft/status/49880667374354433
  • Have xed-width grids become too pervasive? http://twitter.com/nathansmith/status/49882179379015680
  • Many more possibilities via grid generators http://grids.heroku.com
  • Templates available for your weapon of choice... Acorn Fireworks Flash InDesign GIMP Inkscape Illustrator OmniGrafe Photoshop Expression QuarkXPress Visio Design
  • Adobe Fireworks 960.gs extension (Photoshop too)
  • Grids can accelerate progress while maintaining order http://www.ickr.com/photos/meckert75/3732780382
  • Michael Phelps following a painted line at the bottomof a pool doesnt make him a less talented swimmer. http://livinggallery.oneindia.in/main.php?g2_itemId=32903
  • Our best practices are killing us Nicole SullivanThree best practice myths...1. Dont add any extra elements2. Dont add classes3. Use descendent selectors exclusively http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
  • Our best practices are killing us Nicole SullivanThree best practice myths...1. Dont add any extra elements2. Dont add classes3. Use descendent selectors exclusively http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
  • Take all rules in development with a grain of saltSensibly revised...1. Add extra elements sparingly2. Add classes thoughtfully3. Avoid descendent selector kludge...
  • How would you style these links?
    • Home
    • About
  • Use only the selectors that are necessary..menu a { /* Terse = Get er done! */}ul.menu li a { /* Too heavy = Overkill. */}
  • Still true: Smart CSS aint always sexy CSS http://www.digital-web.com/articles/smart_CSS_aint_always_sexy_CSS
  • Inspiration: Khoi Vinnhttp://www.subtraction.com/2004/12/31/grid-computi
  • Inspiration: Cameron Mollhttp://www.cameronmoll.com/archives/2006/12/gridding_the_960
  • Inspiration: Cameron Mollhttp://www.cameronmoll.com/archives/2006/12/gridding_the_960
  • Inspiration: Olav Bjrkyhttp://bjorkoy.com/2007/08/launch-blueprint-a-css-framework
  • Inspiration: Brandon Schauer http://www.adaptivepath.com/ideas/e000863
  • http://www.adaptivepath.com/ideas/e000863
  • Inspiration: Mark Boultonhttp://www.markboulton.co.uk/journal/comments/ve-simple-steps-to-designing-grid-systems-part-1
  • Frameworks are kind of like sheet music. They areorganized, and can keep teams on the same page. http://www.ickr.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
  • Hicksdesign.co.uk = Beautiful responsive web design http://hicksdesign.co.uk
  • Media queries for mobile arent a magic bullet http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold
  • LifeChurch.tv - Separate site for mobile & desktop http://m.lifechurch.tv http://www.lifechurch.tv
  • Percentage-based grid, screenshot in Firefox 4.0http://host.sonspring.com/yui3_grid 310px 150px
  • Percentage-based grid, screenshot in Chrome 10.0http://host.sonspring.com/yui3_grid 309px 149px
  • 960s 24 column grid = Exact multiples of 10 http://960.gs/demo_24_col.html
  • Whither: Grid framework or Responsive design? VSDoing a xed-width design using a grid framework isrelatively easy. Whereas, doing a responsive designthat looks solid at every resolution is multivariate andthere is not (yet) an automated, foolproof solution.
  • Pet peeve: Use tomorrows technology, today!The mere fact were even able to use ittoday makes it todays technology.As designers and developers, its easy toget so caught up in wanting to use thelatest and greatest (to a fault) that weforget to try and tackle present-dayproblems with proven technologies.
  • Where media queries fall short, JavaScript shines http://twitter.com/igorskee/status/52152273178079232
  • Smart JS hackers = Context-aware image sizinghttp://lamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing
  • Symphony + Jazz = Crazy ~ Like playing jazz ute http://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy
  • Adapt.js - Serve 960s (or any) CSS dynamically http://adapt.960.gs
  • Note: Not an endorsement, just a Twitter link... http://twitter.com/zeldman/status/59432011693166592
  • For what its worth, a lot of people linked to it...
  • How to use Adapt.js = A human-readable cong
  • How to use Adapt.js = A human-readable cong
  • What about adding JavaScript page-weight? 845 bytesMinied, Adapt.js is less than 1 KB.(Allow me to put into perspective)
  • 60 40 pixel JPG @ 70% quality = 908 bytes 908 bytesMy son, guring out that the wind can spin pinwheels http://www.ickr.com/photos/nathansmith/5625332824
  • Or, as my dad used to tell me as a kid...Dont worry about problemssmaller than a gnats backside.Note: If the extra HTTP request for JS is aconcern, the le size is small enough to justinclude inline in the documents .
  • Not to go all Ron Burgundy on you, but... Kind of a [small] deal I didnt set out to write a terse snippet of JavaScript. Thats 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
  • To reiterate: I dont care if you use 960.gs or Adapt.js In fact, heres 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 t, Id encourage you to create one!
  • Sencha Touchhttp://sencha.com/touch
  • Dojo Mobilehttp://dojotoolkit.org/features/mobile
  • jQuery Mobilehttp://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
  • 1140 CSS Grid http://cssgrid.net
  • 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)
  • Forms = Quite possibly, the worst part of web design To prevent developers from wasting countless hours on styling dumb form elements Note: I wasted countless hours styling dumb form elements, so you dont have to!
  • Its been awhile in the making...Future plans include a tutorial on howto use jQuery to add styling hooks toform elements, since I know fromexperience that is no cup of tea. Source = Me when announcing 960.gs in 2008! Excuse = New HTML5 elements set me back :) http://sonspring.com/journal/960-grid-system
  • I nally distilled my approach to forms http://formalize.me
  • I prefer using Sass to expedite writing CSSI didnt think I would like Sass, but I do. Oh, andif youre going to use Sass, use Sass, not SCSS. http://sass-lang.com
  • Questions? Comments? Hate mail? :)Email http://sonspring.com/contactTwitter http://twitter.com/nathansmithSlides http://slideshare.net/nathansmith/refresh-okc Thanks for attending my presentation! Feel free to email or say hi on Twitter.