960_grid | Responsive Web Design | Semantic Web

Refresh Oklahoma City

http://refreshokc.org — http://960.gs

Nathan Smith = UX designer @ projekt202

http://sonspring.com — http://projekt202.com

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.

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

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

Allow me to clear up a (potential) misconception. 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! . I don’t really care if you use the 960 Grid System or not.. Truth be told.

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

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

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

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

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

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

http://en.wikipedia. which they felt were leaving them without work and changing their way of life.Don’t be a Luddite (Note: I was with Sass/SCSS) 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.org/wiki/Luddite .

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

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

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

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

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

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

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

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

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

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

NOM — I use 960 regularly! :) . There are two variants: 12 and 16 columns. there’s also a 24-column version. If you like. which can be used separately or in tandem. NOM. NOM. based on a width of 960 pixels.“Dogfooding” = When you use your own product The 960 Grid System is an effort to streamline web development by providing commonly used dimensions.

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

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

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

</div> <div class="grid_6"> I am 1/2 wide. I know --> <div class="grid_6"> I am 1/2 wide. </div> </div> . </div> <div class="grid_4"> I am 1/3 wide.Yuck.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"> Me too! </div> <div class="clear"></div> <!-.

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

No special class. 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 omega"> Last nested grid. first visually. </div> <div class="grid_2"> Middle.Nested grids: alpha = first. </div> </div> <div class="grid_6 pull_6"> Last in markup. </div> </div> .

first visually. No special class. </div> </div> <div class="grid_6 pull_6"> Last in markup. </div> </div> . </div> <div class="grid_2 omega"> Last nested grid.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.

html .gs/demo.http://960.

gs/demo.html .http://960.

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 .

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

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

gs extension (Photoshop too) .Adobe Fireworks 960.

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

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

.

.

.

.

.

.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Pet peeve: “Use tomorrow’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. today!” The mere fact we’re even able to use it today makes it today’s technology.

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

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

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

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

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

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

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

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

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

60 × 40 pixel JPG @ 70% quality = 908 bytes

908 bytes

My son, figuring out that the wind can spin pinwheels

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

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

com/touch .Sencha Touch http://sencha.

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

com .jQuery Mobile http://jquerymobile.

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

Blueprint CSS Framework http://blueprintcss.org .

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

Less Framework 4 http://lessframework.com .

1140 CSS Grid http://cssgrid.net .

The Square Grid http://thesquaregrid.com .

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

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

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

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

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

.

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

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

Sign up to vote on this title
UsefulNot useful