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.
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.” Christian Heilmann — developer evangelist at Mozilla http://thinkvitamin.com/code/web-development-is-moving-on-are-you
could argue the relevance of naming conventions like these – I just built a 16-column layout.” Matthew Anderson — designer at OneHub.com http://onehub.com/past/2009/5/13/why-we-chose-960gs-css-framework
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 use something than to argue about it. It also takes considerably more energy to do research. Being ignorant is blissful and easy! Allow me to clear up a (potential) misconception...
Web of linked data. Semantic Web technologies enable people to create data stores on the Web, build vocabularies, and write rules for handling data. Linked data are empowered by technologies such as RDF, SPARQL, OWL, and SKOS. — World Wide Web Consortium (W3C) CSS gets no — at the Semantic Web party http://www.w3.org/standards/semanticweb
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, which they felt were leaving them without work and changing their way of life.
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! :) Front-end is the opposite of a mythological hydra http://en.wikipedia.org/wiki/Lernaean_Hydra
prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design templates, and CSS files that have identical measurements. What’s this whole 960.gs thing all about?
BeSt DEsIGn ToOl IS No ToOl At ALl! WE OfTeN JUMp RIgHT INtO DEsIGn Or CODe SoFtWARe, BUt SKeTCHInG THIngS OUt CAN Be MUCH mOrE eFfICIEnT. WHEn I WOrKED AS AN InFoRmATIoN ARCHItECt, SoMe Of mY BeSt WOrK WAS DOnE SImPlY USInG PeN AnD PApEr.
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. “Dogfooding” = When you use your own product NOM, NOM, NOM — I use 960 regularly! :)
pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. The 24-column grid is also included. It consists of columns 30 pixels wide, with 10 pixel gutters, and a 5 pixel buffer on each side of the container. 12, 16, and 24 columns available by default
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> <!-- Yuck, I know --> <div class="grid_6"> I am 1/2 wide. </div> <div class="grid_6"> I am 1/2 wide. </div> </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> <!-- Yuck, I know --> <div class="grid_6"> I am 1/2 wide. </div> <div class="grid_6"> I am 1/2 wide. </div> </div>
<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>
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>
using a grid framework is relatively easy. Whereas, doing a responsive design that looks solid at every resolution is multivariate and there is not (yet) an automated, foolproof solution. VS
even able to use it today makes it today’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.
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>
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>
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>.
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
better. You should explore every option, and choose one that makes sense to you. Or, if nothing seems like a good fit, I’d encourage you to create one! To reiterate: I don’t care if you use 960.gs or Adapt.js
to add styling hooks to form elements, since I know from experience that is no cup of tea.” — Source = Me when announcing 960.gs in 2008! — Excuse = New HTML5 elements set me back :) It’s been awhile in the making... http://sonspring.com/journal/960-grid-system
http://twitter.com/nathansmith Slides — http://slideshare.net/nathansmith/refresh-okc Thanks for attending my presentation! Feel free to email or say “hi” on Twitter.
nathansmith
ajstarks
wattlaa
satomium1
warwatkar
root_recruit
cremacrema
fumiyaakasaka
yud0uhu
webnaut
kinakobooster
jouykw
takaikanako
ammeep
danielanewman
phodgson
eitanlees
bluesmoon
sstephenson
zakiyama
bkeepers
robhawkes
yeseniaperezcruz
eileencodes
