SlideShare ist ein Scribd-Unternehmen logo
1 von 102
Downloaden Sie, um offline zu lesen
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/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
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 you
use 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!
Semantics can reside in microformats’ class names,
because parsers are built to look for them specifically

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 party
The term “Semantic Web” refers to W3C’s
vision of the 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)

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

Um, 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 CSS
frameworks is because I hate doing
mundane tasks repeatedly (yawn).
I’d rather be working in JavaScript.
JavaScript books I’ve worked on...

Co-author
Tech editor

Tech editor

jQueryEnlightenment.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 #sobored

But 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 rapid
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.
960 SHIps WITH PrINtABlE *.PDf SKeTCH
SHeEts, BeCAUSe sOmEtIMeS THe 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.
“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 default

The 12-column grid is divided into portions that
are 60 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.
#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> <!-- Yuck, I know -->
<div class="grid_6">
I am 1/2 wide.
</div>
<div class="grid_6">
I am 1/2 wide.
</div>
</div>
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> <!-- Yuck, I know -->
<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 = first, 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
http://960.gs/demo.html
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
Many more possibilities via grid generators

http://grids.heroku.com
Templates available for your weapon of choice...

Acorn

Fireworks

Flash

InDesign

GIMP

Inkscape

Illustrator

OmniGraffle

Photoshop

Visio

Expression
Design

QuarkXPress
Adobe Fireworks 960.gs extension (Photoshop too)
Grids can accelerate progress while maintaining order

http://www.flickr.com/photos/meckert75/3732780382
Michael Phelps following a painted line at the bottom
of a pool doesn’t make him a less talented swimmer.

http://livinggallery.oneindia.in/main.php?g2_itemId=32903
960 grid psd
960 grid psd
960 grid psd
960 grid psd
960 grid psd
960 grid psd
“Our best practices are killing us” – Nicole Sullivan

Three best practice myths...
1. Don’t add any extra elements
2. Don’t add classes
3. Use descendent selectors exclusively

http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
“Our best practices are killing us” – Nicole Sullivan

Three best practice myths...
1. Don’t add any extra elements
2. Don’t add classes
3. Use descendent selectors exclusively

http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
Take all “rules” in development with a grain of salt

Sensibly revised...
1. Add extra elements sparingly
2. Add classes thoughtfully
3. 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 Vinn

http://www.subtraction.com/2004/12/31/grid-computi
Inspiration: Cameron Moll

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

http://www.cameronmoll.com/archives/2006/12/gridding_the_960
Inspiration: Olav Bjørkøy

http://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 Boulton

http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1
Frameworks are kind of like sheet music. They are
organized, and can keep teams on the same page.

http://www.flickr.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.0
http://host.sonspring.com/yui3_grid

310px

150px
Percentage-based grid, screenshot in Chrome 10.0
http://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?

VS

Doing a fixed-width design 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.
Pet peeve: “Use tomorrow’s technology, today!”

The mere fact we’re 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.
Where media queries fall short, JavaScript shines

http://twitter.com/igorskee/status/52152273178079232
Smart JS hackers = Context-aware image sizing

http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing
Symphony + Jazz = Crazy ~ Like playing jazz flute

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 config
<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>
How to use Adapt.js = A human-readable config
<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 bytes
Minified, Adapt.js is less than 1 KB.
(Allow me to put into perspective)
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
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 fit,
I’d encourage you to create one!
Sencha Touch

http://sencha.com/touch
Dojo Mobile

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

http://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 how
to use jQuery 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 :)

http://sonspring.com/journal/960-grid-system
I finally distilled my approach to forms

http://formalize.me
960 grid psd
I prefer using Sass to expedite writing CSS

I didn’t think I would like Sass, but I do. Oh, and
if you’re going to use Sass, use Sass, not SCSS.
http://sass-lang.com
Questions? Comments? Hate mail? :)

Email — http://sonspring.com/contact
Twitter — 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.

Weitere ähnliche Inhalte

Was ist angesagt?

Decoupling the Front-end with Modular CSS
Decoupling the Front-end with Modular CSSDecoupling the Front-end with Modular CSS
Decoupling the Front-end with Modular CSSJulie Cameron
 
Intermediate Dreamweaver (2007)
Intermediate Dreamweaver (2007)Intermediate Dreamweaver (2007)
Intermediate Dreamweaver (2007)Matteo Wyllyamz
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える拓樹 谷
 
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)shinobu tsutsui
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Deepak Sharma
 
Doctype html public
Doctype html publicDoctype html public
Doctype html publicEddy_TKJ
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?Denise Jacobs
 
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesJazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesSimon Willison
 
10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)Emily Lewis
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignDebra Shapiro
 
The Future of Web Attacks - CONFidence 2010
The Future of Web Attacks - CONFidence 2010The Future of Web Attacks - CONFidence 2010
The Future of Web Attacks - CONFidence 2010Mario Heiderich
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
Modular HTML & CSS
Modular HTML & CSSModular HTML & CSS
Modular HTML & CSSShay Howe
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSNaga Harish M
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreRuss Weakley
 
HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?Chris Mills
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the WildRich Quick
 
The DiSo Project and the Open Web
The DiSo Project and the Open WebThe DiSo Project and the Open Web
The DiSo Project and the Open WebChris Messina
 

Was ist angesagt? (20)

Decoupling the Front-end with Modular CSS
Decoupling the Front-end with Modular CSSDecoupling the Front-end with Modular CSS
Decoupling the Front-end with Modular CSS
 
[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover
 
Intermediate Dreamweaver (2007)
Intermediate Dreamweaver (2007)Intermediate Dreamweaver (2007)
Intermediate Dreamweaver (2007)
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
 
Html5 public
Html5 publicHtml5 public
Html5 public
 
What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
 
Doctype html public
Doctype html publicDoctype html public
Doctype html public
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
 
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesJazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
 
10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
The Future of Web Attacks - CONFidence 2010
The Future of Web Attacks - CONFidence 2010The Future of Web Attacks - CONFidence 2010
The Future of Web Attacks - CONFidence 2010
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
Modular HTML & CSS
Modular HTML & CSSModular HTML & CSS
Modular HTML & CSS
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the Wild
 
The DiSo Project and the Open Web
The DiSo Project and the Open WebThe DiSo Project and the Open Web
The DiSo Project and the Open Web
 

Ähnlich wie 960 grid psd

Does my DIV look big in this?
Does my DIV look big in this?Does my DIV look big in this?
Does my DIV look big in this?glen_a_smith
 
Even faster web sites
Even faster web sitesEven faster web sites
Even faster web sitesFelipe Lavín
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web DevelopmentRachel Andrew
 
MySQL Schema Design in Practice
MySQL Schema Design in PracticeMySQL Schema Design in Practice
MySQL Schema Design in PracticeJaime Crespo
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012Bastian Grimm
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle
 
Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksRandy Connolly
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Clarissa Peterson
 
A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf HamburgA High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf HamburgDr. Arif Wider
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
Responsive Design: Out of the Box and Down the Rabbit Hole
Responsive Design: Out of the Box and Down the Rabbit HoleResponsive Design: Out of the Box and Down the Rabbit Hole
Responsive Design: Out of the Box and Down the Rabbit HoleDan Moriarty
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with ServeNathan Smith
 

Ähnlich wie 960 grid psd (20)

Does my DIV look big in this?
Does my DIV look big in this?Does my DIV look big in this?
Does my DIV look big in this?
 
Even faster web sites
Even faster web sitesEven faster web sites
Even faster web sites
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
 
Class15
Class15Class15
Class15
 
Remix
RemixRemix
Remix
 
MySQL Schema Design in Practice
MySQL Schema Design in PracticeMySQL Schema Design in Practice
MySQL Schema Design in Practice
 
SMACSS Workshop
SMACSS WorkshopSMACSS Workshop
SMACSS Workshop
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Look ma! No images!
Look ma! No images!Look ma! No images!
Look ma! No images!
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
 
Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS Frameworks
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 
Juggling
JugglingJuggling
Juggling
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 
A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf HamburgA High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
 
Evolution of CSS
Evolution of CSSEvolution of CSS
Evolution of CSS
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Responsive Design: Out of the Box and Down the Rabbit Hole
Responsive Design: Out of the Box and Down the Rabbit HoleResponsive Design: Out of the Box and Down the Rabbit Hole
Responsive Design: Out of the Box and Down the Rabbit Hole
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with Serve
 

Kürzlich hochgeladen

Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 

Kürzlich hochgeladen (20)

Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 

960 grid psd

  • 2. Nathan Smith = Principal UI Architect @projekt202 we make software make sense™ http://sonspring.com — http://projekt202.com
  • 3. 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.
  • 4. 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.
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. Allow me to clear up a (potential) misconception... Truth be told, I don’t really care if you use 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!
  • 9. Semantics can reside in microformats’ class names, because parsers are built to look for them specifically http://microformats.org
  • 10. The W3C’s “Semantic Web” doesn’t involve CSS http://www.w3.org/DesignIssues/Semantic.html
  • 11. CSS gets no ♥ at the Semantic Web party The term “Semantic Web” refers to W3C’s vision of the 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) http://www.w3.org/standards/semanticweb
  • 12. 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.
  • 13. Jeff Croft’s “Frameworks for Designers” article http://www.alistapart.com/articles/frameworksfordesigners
  • 14. Jeff Croft was never one to mince words... http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks
  • 15. 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, which they felt were leaving them without work and changing their way of life. http://en.wikipedia.org/wiki/Luddite
  • 16. 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
  • 17. 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
  • 18. #anyways #whatevs #whocares #sobored Um, okay, but why grids? “My design skillz are so awesome, I’ve never needed to use grids.”
  • 19. For design that’s really, really, ridiculously good looking Also, to do other things good too. http://en.wikipedia.org/wiki/Zoolander
  • 20. FYI: I don’t especially love CSS. The reason I create and use CSS frameworks is because I hate doing mundane tasks repeatedly (yawn). I’d rather be working in JavaScript.
  • 21. JavaScript books I’ve worked on... Co-author Tech editor Tech editor jQueryEnlightenment.com JavaScriptEnlightenment.com oreilly.com/catalog/9780596159788 All involving Cody Lindley, who has been a JavaScript mentor to me: http://codylindley.com
  • 22. 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
  • 23. #anyways #whatevs #whocares #sobored But I digress. I’ll forever be known as “the 960 guy.” But I guess that’s not so bad... Right?
  • 24. What’s this whole 960.gs thing all about? The premise of the system is ideally suited to rapid 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.
  • 25. 960 SHIps WITH PrINtABlE *.PDf SKeTCH SHeEts, BeCAUSe sOmEtIMeS THe 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.
  • 26. “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! :)
  • 27. 12, 16, and 24 columns available by default The 12-column grid is divided into portions that are 60 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.
  • 28. #anyways #whatevs #whocares #sobored Show me teh codez!
  • 29. 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> <!-- Yuck, I know --> <div class="grid_6"> I am 1/2 wide. </div> <div class="grid_6"> I am 1/2 wide. </div> </div>
  • 30. 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> <!-- Yuck, I know --> <div class="grid_6"> I am 1/2 wide. </div> <div class="grid_6"> I am 1/2 wide. </div> </div>
  • 31. 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>
  • 32. Nested grids: alpha = first, 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>
  • 33. 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>
  • 36. Have fixed-width grids become too pervasive? http://twitter.com/jcroft/status/49880667374354433
  • 37. Have fixed-width grids become too pervasive? http://twitter.com/nathansmith/status/49882179379015680
  • 38. Many more possibilities via grid generators http://grids.heroku.com
  • 39. Templates available for your weapon of choice... Acorn Fireworks Flash InDesign GIMP Inkscape Illustrator OmniGraffle Photoshop Visio Expression Design QuarkXPress
  • 40. Adobe Fireworks 960.gs extension (Photoshop too)
  • 41. Grids can accelerate progress while maintaining order http://www.flickr.com/photos/meckert75/3732780382
  • 42. Michael Phelps following a painted line at the bottom of a pool doesn’t make him a less talented swimmer. http://livinggallery.oneindia.in/main.php?g2_itemId=32903
  • 49. “Our best practices are killing us” – Nicole Sullivan Three best practice myths... 1. Don’t add any extra elements 2. Don’t add classes 3. Use descendent selectors exclusively http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
  • 50. “Our best practices are killing us” – Nicole Sullivan Three best practice myths... 1. Don’t add any extra elements 2. Don’t add classes 3. Use descendent selectors exclusively http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
  • 51. Take all “rules” in development with a grain of salt Sensibly revised... 1. Add extra elements sparingly 2. Add classes thoughtfully 3. Avoid descendent selector kludge...
  • 52. How would you style these <a> links? <ul class="menu"> <li> <a href="/">Home</a> </li> <li> <a href="/about">About</a> </li> </ul>
  • 53. Use only the selectors that are necessary. .menu a { /* Terse = Get ‘er done! */ } ul.menu li a { /* Too heavy = Overkill. */ }
  • 54. Still true: “Smart CSS ain’t always sexy CSS” http://www.digital-web.com/articles/smart_CSS_aint_always_sexy_CSS
  • 62. Frameworks are kind of like sheet music. They are organized, and can keep teams on the same page. http://www.flickr.com/photos/avlxyz/3280803912
  • 63. Like jazz, responsive design is contextual. No two approaches are exactly the same.
  • 64. Responsive Web Design - using @media queries http://www.alistapart.com/articles/responsive-web-design
  • 65. Hicksdesign.co.uk = Beautiful responsive web design http://hicksdesign.co.uk
  • 66. Media queries for mobile aren’t a magic bullet http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold
  • 67. LifeChurch.tv - Separate site for mobile & desktop http://m.lifechurch.tv — http://www.lifechurch.tv
  • 68. Percentage-based grid, screenshot in Firefox 4.0 http://host.sonspring.com/yui3_grid 310px 150px
  • 69. Percentage-based grid, screenshot in Chrome 10.0 http://host.sonspring.com/yui3_grid 309px 149px
  • 70. 960’s 24 column grid = Exact multiples of 10 http://960.gs/demo_24_col.html
  • 71. Whither: Grid framework or Responsive design? VS Doing a fixed-width design 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.
  • 72. Pet peeve: “Use tomorrow’s technology, today!” The mere fact we’re 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.
  • 73. Where media queries fall short, JavaScript shines http://twitter.com/igorskee/status/52152273178079232
  • 74. Smart JS hackers = Context-aware image sizing http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing
  • 75. Symphony + Jazz = Crazy ~ Like playing jazz flute http://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy
  • 76. Adapt.js - Serve 960’s (or any) CSS dynamically http://adapt.960.gs
  • 77. Note: Not an endorsement, just a Twitter link... http://twitter.com/zeldman/status/59432011693166592
  • 78. For what it’s worth, a lot of people linked to it...
  • 79. How to use Adapt.js = A human-readable config <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>
  • 80. How to use Adapt.js = A human-readable config <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>
  • 81. What about adding JavaScript page-weight? 845 bytes Minified, Adapt.js is less than 1 KB. (Allow me to put into perspective)
  • 82. 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
  • 83. 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>.
  • 84. 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
  • 85. 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 fit, I’d encourage you to create one!
  • 91. HTML5 Boilerplate - Mobile http://html5boilerplate.com/mobile
  • 95. Respond.js - Parses CSS3 @media queries https://github.com/scottjehl/Respond
  • 96. 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)
  • 97. 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!
  • 98. It’s been awhile in the making... “Future plans include a tutorial on how to use jQuery 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 :) http://sonspring.com/journal/960-grid-system
  • 99. I finally distilled my approach to forms http://formalize.me
  • 101. I prefer using Sass to expedite writing CSS I didn’t think I would like Sass, but I do. Oh, and if you’re going to use Sass, use Sass, not SCSS. http://sass-lang.com
  • 102. Questions? Comments? Hate mail? :) Email — http://sonspring.com/contact Twitter — 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.