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