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 don’t 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, let’s 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 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.” 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 don’t really care if youuse 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 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 speciﬁcally http://microformats.org

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

CSS gets no ♥ at the Semantic Web partyThe term “Semantic Web” refers to W3C’svision 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 let’s get this straight... Semantics live here<tag class="peanut_butter jelly">Yummy content</tag> Not here ... 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)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 <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

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

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

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

JavaScript books I’ve 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.I’ll forever be known as “the 960 guy.”But I guess that’s not so bad... Right?

What’s 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, there’s 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<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>  <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 = ﬁrst, 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

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 OmniGrafﬂe 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 doesn’t 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. Don’t add any extra elements2. Don’t 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 <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. */}

Still true: “Smart CSS ain’t 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: Olav Bjørkøyhttp://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 aren’t 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

960’s 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 tomorrow’s technology, today!”The mere fact we’re even able to use ittoday makes it today’s technology.As designers and developers, it’s 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 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 conﬁg <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>

What about adding JavaScript page-weight? 845 bytesMiniﬁed, 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...“Don’t worry about problemssmaller than a gnat’s backside.”Note: If the extra HTTP request for JS is aconcern, the ﬁle size is small enough to justinclude 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

To reiterate: I don’t care if you use 960.gs or Adapt.js 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 ﬁt, I’d 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 don’t have to!

It’s 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 didn’t think I would like Sass, but I do. Oh, andif you’re 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.

http://moodle.moamagrammar.nsw.edu.au	403
http://note.chayn1k.ru	286
http://blog.sven.co.za	280
http://www.softworkr.com	159
http://www.johansetiawan.com	159
http://notes.chayn1k.ru	135
http://drupal7.knowd.co.jp	85
http://web.jagansindia.in	58
http://paper.li	56
http://eablog.churchill.fr	48
http://www.grangewebdesign.com	39
http://a0.twimg.com	29
http://patrickbickham.wordpress.com	28
http://duleygrafix.blogspot.com	17
http://us-w1.rockmelt.com	14
http://twitter.com	14
http://trunk.ly	13
http://posterous.com	10
https://zeus.proxistep.com	10
https://twitter.com	9
http://localhost	9
http://www.linkedin.com	8
http://www.svenwelzel.com	5
http://svenwelzel.com	4
http://www.mongodb.org	4
url_unknown	4
http://softworkr.posterous.com	3
http://www.slideshare.net	3
http://edicolaeuropea.blogspot.com	3
http://www.twylah.com	2
http://translate.googleusercontent.com	2
http://www.istikbal.gr	2
http://www.sven-welzel.de	2
http://www.onlydoo.com	2
http://dev.toeska.cl	1
https://www.socialtext.net	1
http://www.conversedigital.com	1
http://drupal7.knowd.co.jp&_=1335602902796 HTTP	1
http://psicologiaorganizada.blogspot.com	1
http://aprendersociales.blogspot.com	1
http://www.edu.xunta.es	1
http://www.society30.com	1
http://mashup.inf.unisi.ch	1
http://www.tsc-consult.de	1
http://educadorinfantil.blogspot.com	1
http://www.bamboohouseindia.org	1
http://koleksisoalan.blogspot.com	1
http://www.lotura.com	1
http://www.freelancit.com	1
http://cappuccinodigital.ning.com	1
http://www.google.com	1

Refresh OKC

by Nathan Smith on Apr 19, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

52 Embeds 1,923

Statistics

Refresh OKC — Presentation Transcript