The term “Responsive Web Design”was coined by Ethan Marcotte, in anan article published by A List Apart.Loosely deﬁned, it means adaptingto various screen sizes, using a ﬂuidgrid and @media queries in CSS.
Ethan also wrote a book… http://abookapart.com/products/responsive-web-design
Upon hearing about thisnew design technique, I…1. Felt shock and denial: “Whoa, no way!”2. Felt guilty for making a ﬁxed-width grid.3. Bargained: “Maybe it’ll just go away?”4. Felt depressed, over how little I knew.5. Started looking up: “Maybe I can learn?”6. Reconstructed my way of thinking.7. Felt acceptance and hope: “I can do this!” http://www.recover-from-grief.com/7-stages-of-grief.html
Yes, those are (very looselyinterpreted) the variousstages of grief. Essentially,responsive design has bothobliterated, and breathednew life into, our ﬁeld.
Like accessibility, RWD works best with advanced planning…#FAIL
Designers “throwing it overthe wall” to developers is nolonger an ideal workﬂow.Nowadays, all of the cool kidsare working collaboratively. http://ﬂickr.com/photos/camknows/8374910613
Text editors and IDE’s that support Sass/SCSS syntax Aptana BBEdit Chocolat Coda http://aptana.org http://barebones.com/bbedit http://chocolatapp.com http://panic.com/coda E Text Editor Eclipse Emacs Espresso http://e-texteditor.com http://eclipse.org http://gnu.org/software/emacs http://macrabbit.com/espresso GEdit Komodo Netbeans PhpStormhttp://projects.gnome.org/gedit http://activestate.com/komodo-ide http://netbeans.org http://jetbrains.com/phpstorm PyCharm RubyMine SubEthaEdit Sublime Text ^ http://jetbrains.com/pycharm http://jetbrains.com/ruby http://codingmonkeys.de/subethaedit http://sublimetext.com/dev TextMate Vim Visual Studio nd http://macromates.com http://vim.org http://microsoft.com/visualstudio We recomme http://sass-lang.com/editors.html
For the past two years or so, my preferredapproach to rapid prototyping templates(with Sass & Compass) has been Serve…http://get-serve.com
Continuing the analogy, Serve is like… http://hdwallpapers.in/the_avengers-wallpapers.html
Since I can’t show you NDA’d client stuﬀ I’ve made using Serve, we are going to look at one of my personal projects. http://unsemantic.com
I think of wireframes and prototypes like this… http://blogs.pennmanor.net/hstsa/nasa/nasa-space-project
This is the index.html.erb home page “view” ﬁle.
_layout.html.erb points to application.html.erb This ﬁle has one code snippet… <%= render :template => "/layouts/application" %>
<%= yield %> outputs the view ﬁle (index, etc.)
Next up, let’s look at theSass variables partial…
Which is imported by the base grid ﬁle… Okay, cool.
Which is imported bythe responsive partial…Eh? Another @import?
Which is ﬁnally imported by application.sass… Seriously, what the?
Bear with me. There’s a point to all of this. We’ll get to it. Dude, there’d better be.
So, after all of that, we endup with a tightly compiled,single application.css ﬁle.Eh? What about all the@import statements? HTTPrequests, fool. C’mon man!
That’s the beauty of Sass. If you@import a *.sass (or *.scss)ﬁle, it becomes part of thesingle, compiled *.css ﬁle.Rage subsiding? Okay, good.Still, why all the @import daisychaining? Glad you asked! :)
← The astute observers amongst you perhaps have noticed what looks like a big compost heap of compiled CSS ﬁles. Oh, you saw that? Well…