Refresh OKC

  • Published on
    17-Aug-2014

  • View
    241.513

  • Download
    2

Embed Size (px)

DESCRIPTION

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

Transcript

  • 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.
  • 960 SHIps WITH PrINtABlE *.PDf SKeTCHSHeEts, BeCAUSe sOmEtIMeS THe BeStDEsIGn ToOl IS No ToOl At ALl!WE OfTeN JUMp RIgHT INtO DEsIGn OrCODe SoFtWARe, BUt SKeTCHInG THIngSOUt CAN Be MUCH mOrE eFfICIEnT.WHEn I WOrKED AS AN InFoRmATIoNARCHItECt, SoMe Of mY BeSt WOrK WASDOnE SImPlY USInG PeN AnD PApEr.
  • 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
  • ...