refresh okc

101
Refresh Oklahoma City http://refreshokc.org http://960.gs

Upload: nathan-smith

Post on 21-Apr-2017

261.348 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Refresh OKC

Refresh Oklahoma City

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

Page 2: Refresh OKC

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 theseslides as well. These links are at the end, too.

Page 3: Refresh OKC

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.

Before we get started, let’s agree: Code is not magic

Page 4: Refresh OKC

Veteran “ninjas” master a variety of tools – Not just one.

Use a framework as an extensionof yourself – Not just as a crutch.

BY HAND

FRAMEWORK

http://imdb.com/title/tt1046173

Page 5: Refresh OKC

“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.”

Christian Heilmann — developer evangelist at Mozilla

http://thinkvitamin.com/code/web-development-is-moving-on-are-you

Page 6: Refresh OKC

“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.”

Matthew Anderson — designer at OneHub.com

http://onehub.com/past/2009/5/13/why-we-chose-960gs-css-framework

Page 7: Refresh OKC

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!

Allow me to clear up a (potential) misconception...

Page 8: Refresh OKC

Semantics can reside in microformats’ class names,because parsers are built to look for them specifically

http://microformats.org

Page 9: Refresh OKC

The W3C’s “Semantic Web” doesn’t involve CSS

http://www.w3.org/DesignIssues/Semantic.html

Page 10: Refresh OKC

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)

CSS gets no ♥ at the Semantic Web party

http://www.w3.org/standards/semanticweb

Page 11: Refresh OKC

<tag class="peanut_butter jelly">Yummy content</tag>

Semantics live here

Not here

So let’s get this straight...

... Except in the case of microformats.

Page 12: Refresh OKC

Jeff Croft’s “Frameworks for Designers” article

http://www.alistapart.com/articles/frameworksfordesigners

Page 13: Refresh OKC

Jeff Croft was never one to mince words...

http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks

Page 14: Refresh OKC

Don’t be a Luddite (Note: I was with Sass/SCSS)

http://en.wikipedia.org/wiki/Luddite

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.

Page 15: Refresh OKC

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

Page 16: Refresh OKC

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

Page 17: Refresh OKC

Um, okay, but why grids?

“My design skillz are so awesome,I’ve never needed to use grids.”

#anyways #whatevs #whocares #sobored

Page 18: Refresh OKC

For design that’s really, really, ridiculously good looking

http://en.wikipedia.org/wiki/Zoolander

Also, to do otherthings good too.

Page 19: Refresh OKC

The reason I create and use CSS frameworks is because I hate doing mundane tasks repeatedly (yawn).

I’d rather be working in JavaScript.

FYI: I don’t especially love CSS.

Page 20: Refresh OKC

Co-author

Tech editor Tech editor

jQueryEnlightenment.com

oreilly.com/catalog/9780596159788

JavaScriptEnlightenment.com

JavaScript books I’ve worked on...

All involving Cody Lindley, who has been a JavaScript mentor to me: http://codylindley.com

Page 21: Refresh OKC

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! :)

Front-end is the opposite of a mythological hydra

http://en.wikipedia.org/wiki/Lernaean_Hydra

Page 22: Refresh OKC

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

#anyways #whatevs #whocares #sobored

Page 23: Refresh OKC

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.

What’s this whole 960.gs thing all about?

Page 24: Refresh OKC

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.

Page 25: Refresh OKC

The 960 Grid System is an effort to streamlineweb development by providing commonly useddimensions, 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! :)

Page 26: Refresh OKC

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.

12, 16, and 24 columns available by default

Page 27: Refresh OKC

Show meteh codez!

#anyways #whatevs #whocares #sobored

Page 28: Refresh OKC

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>

Page 29: Refresh OKC

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>

Page 30: Refresh OKC

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>

Page 31: Refresh OKC

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>

Page 32: Refresh OKC

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>

Page 33: Refresh OKC

http://960.gs/demo.html

Page 34: Refresh OKC

http://960.gs/demo.html

Page 35: Refresh OKC

Have fixed-width grids become too pervasive?

http://twitter.com/jcroft/status/49880667374354433

Page 36: Refresh OKC

Have fixed-width grids become too pervasive?

http://twitter.com/nathansmith/status/49882179379015680

Page 37: Refresh OKC

http://grids.heroku.com

Many more possibilities via grid generators

Page 39: Refresh OKC

Adobe Fireworks 960.gs extension (Photoshop too)

Page 40: Refresh OKC

Grids can accelerate progress while maintaining order

http://www.flickr.com/photos/meckert75/3732780382

Page 41: Refresh OKC

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

Page 42: Refresh OKC
Page 43: Refresh OKC
Page 44: Refresh OKC
Page 45: Refresh OKC
Page 46: Refresh OKC
Page 47: Refresh OKC
Page 48: Refresh OKC

“Our best practices are killing us” – Nicole Sullivan

http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us

Three best practice myths...

1. Don’t add any extra elements2. Don’t add classes3. Use descendent selectors exclusively

Page 49: Refresh OKC

“Our best practices are killing us” – Nicole Sullivan

http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us

Three best practice myths...

1. Don’t add any extra elements2. Don’t add classes3. Use descendent selectors exclusively

Page 50: Refresh OKC

Take all “rules” in development with a grain of salt

Sensibly revised...

1. Add extra elements sparingly2. Add classes thoughtfully3. Avoid descendent selector kludge...

Page 51: Refresh OKC

How would you style these <a> links?

<ul class="menu"> <li> <a href="/">Home</a> </li> <li> <a href="/about">About</a> </li></ul>

Page 52: Refresh OKC

Use only the selectors that are necessary.

.menu a { /* Terse = Get ‘er done! */}

ul.menu li a { /* Too heavy = Overkill. */}

Page 53: Refresh OKC

http://www.digital-web.com/articles/smart_CSS_aint_always_sexy_CSS

Still true: “Smart CSS ain’t always sexy CSS”

Page 54: Refresh OKC

Inspiration: Khoi Vinn

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

Page 55: Refresh OKC

http://www.cameronmoll.com/archives/2006/12/gridding_the_960

Inspiration: Cameron Moll

Page 56: Refresh OKC

http://www.cameronmoll.com/archives/2006/12/gridding_the_960

Inspiration: Cameron Moll

Page 57: Refresh OKC

Inspiration: Olav Bjørkøy

http://bjorkoy.com/2007/08/launch-blueprint-a-css-framework

Page 58: Refresh OKC

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

Inspiration: Brandon Schauer

Page 60: Refresh OKC

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

Inspiration: Mark Boulton

Page 61: Refresh OKC

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

Page 62: Refresh OKC

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

Page 63: Refresh OKC

Responsive Web Design - using @media queries

http://www.alistapart.com/articles/responsive-web-design

Page 64: Refresh OKC

http://hicksdesign.co.uk

Hicksdesign.co.uk = Beautiful responsive web design

Page 65: Refresh OKC

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold

Media queries for mobile aren’t a magic bullet

Page 67: Refresh OKC

Percentage-based grid, screenshot in Firefox 4.0

310px

150px

http://host.sonspring.com/yui3_grid

Page 68: Refresh OKC

309px

149px

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

Page 69: Refresh OKC

http://960.gs/demo_24_col.html

960’s 24 column grid = Exact multiples of 10

Page 70: Refresh OKC

Whither: Grid framework or Responsive design?

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.

VS

Page 71: Refresh OKC

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.

Page 72: Refresh OKC

http://twitter.com/igorskee/status/52152273178079232

Where media queries fall short, JavaScript shines

Page 73: Refresh OKC

Smart JS hackers = Context-aware image sizing

http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing

Page 74: Refresh OKC

Symphony + Jazz = Crazy ~ Like playing jazz flute

http://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy

Page 75: Refresh OKC

Adapt.js - Serve 960’s (or any) CSS dynamically

http://adapt.960.gs

Page 76: Refresh OKC

Note: Not an endorsement, just a Twitter link...

http://twitter.com/zeldman/status/59432011693166592

Page 77: Refresh OKC

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

Page 78: Refresh OKC

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>

Page 79: Refresh OKC

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>

Page 80: Refresh OKC

845 bytesMinified, Adapt.js is less than 1 KB.(Allow me to put into perspective)

What about adding JavaScript page-weight?

Page 81: Refresh OKC

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

My son, figuring out that the wind can spin pinwheels

908 bytes

http://www.flickr.com/photos/nathansmith/5625332824

Page 82: Refresh OKC

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 a concern, the file size is small enough to just include inline in the document’s <head>.

Page 83: Refresh OKC

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

Page 84: Refresh OKC

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!

To reiterate: I don’t care if you use 960.gs or Adapt.js

Page 85: Refresh OKC

Sencha Touch

http://sencha.com/touch

Page 86: Refresh OKC

http://dojotoolkit.org/features/mobile

Dojo Mobile

Page 87: Refresh OKC

jQuery Mobile

http://jquerymobile.com

Page 89: Refresh OKC

Blueprint CSS Framework

http://blueprintcss.org

Page 90: Refresh OKC

HTML5 Boilerplate - Mobile

http://html5boilerplate.com/mobile

Page 91: Refresh OKC

Less Framework 4

http://lessframework.com

Page 92: Refresh OKC

http://cssgrid.net

1140 CSS Grid

Page 93: Refresh OKC

The Square Grid

http://thesquaregrid.com

Page 94: Refresh OKC

Respond.js - Parses CSS3 @media queries

https://github.com/scottjehl/Respond

Page 95: Refresh OKC

And the listgoes on...

But you get the point. There are plentyof options out there to choose from.

(I just want to mention two more things)

Page 96: Refresh OKC

To prevent developers fromwasting countless hours onstyling dumb form elements

Note: I wasted countless hours styling dumb form elements, so you don’t have to!

Forms = Quite possibly, the worst part of web design

Page 97: Refresh OKC

“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 :)

It’s been awhile in the making...

http://sonspring.com/journal/960-grid-system

Page 98: Refresh OKC

http://formalize.me

I finally distilled my approach to forms

Page 99: Refresh OKC
Page 100: Refresh OKC

http://sass-lang.com

I prefer using Sass to expedite writing CSS

I didn’t think I would like Sass, but I do. Oh, andif you’re going to use Sass, use Sass, not SCSS.

Page 101: Refresh OKC

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.