Responsivator!

Responsive Web Design is pretty darn cool, but it is hard sometimes for people to wrap their heads around it. Whether you are trying to share a cool responsive website or do a creative review, telling people to change their browser window size just doesn’t cut it. With that in mind, a few weeks ago I created, open sourced and released Responsivator!

There are plenty of viewport testing tools out there (apparently even including one named Responsinator) but none that worked quite the way I wanted

First, I didn’t want their to be ads. Even better, I wanted a way to show these websites with no clutter at all. With Responsivator!, you can do that. Just add the hide header option to the end of the url, like this: http://dfcb.github.com/Responsivator/?site=http://css-tricks.com&header=hide

Also, it is possible to customize the sizes and frame labels that get displayed. For example, if you only want to show the phone sizes of a website, you can do this: http://dfcb.github.com/Responsivator/?site=http://css-tricks.com&sizes=320×480:Phone%20(portrait),480×320:Phone%20(landscape).

As one of the first projects released on my developer group’s Github account, I’m very please to see that based on the traffic stats, it is a huge success. After the initial burst of popularity due to getting to the front page of Hacker News and a nice article on Webmonkey, it continues to get about 500-1,000 page views a day. You can expect to see a lot more cool projects come out from us in the upcoming year.

Help Prevent FOUC!

Do your web pages suffer from FOUC? Now, you can prevent FOUC with 2 easy steps!

Step #1 – Add this to the head of your document:

<style type="text/css">
  .no-fouc {display: none;}
</style>
<script type="text/javascript">
  document.documentElement.className = 'no-fouc';
</script>

Step #2 – Add this to your document ready event:

$('.no-fouc').removeClass('no-fouc');

Pro-Tip – If you want to get all fancypants, instead of adding the .no-fouc class to the top level of the document, you could add it to individual page elements so that only they are hidden (or have your own .no-fouc custom styling) during page load.

Please help spread the word about how to prevent FOUC and eradicate it from the internets. Also available in gist form.

BigVideo.js

A few weeks ago, I started working on a website project at work. One of its features involved video that filled the page’s background, to the edge of the window on all sides. There are lots of great examples of this effect out on the web. There are even some plugins, such as Tubular, but as far as I could tell, no plugin that worked exactly the way I needed. I needed more control over the functionality and to build a fluid player.

So, I thought, a perfect opportunity to build another cool plugin. I considered creating my own HTML5 video api, but after taking a look at Video.js and all the code that went into making that work, I decided, uh, no freaking way! Much better to stand on the shoulders of giants and use their API.

Next, I spoke to my boss about open sourcing it. We had just started a Github group account for the dev team in Chicago, so I put BigVideo.js up there as our first public repo. Hopefully, it will be the first of many.

Like I had done previously for Scrollorama, I released it to Hacker News. I was hoping and even expecting it to hit the front page, but was thrilled to see it hit #1.

There is still some work to be done getting the Flash fallback to work optimally, but all in all, I’d say it works pretty darn good. It is really neat seeing it pop up here and there and there on the internet. I have some more stuff in the works for this and other little projects, so stay tuned..

Prototype Camp

Today I gave a talk at Prototype Camp Chicago entitled “The Never Ending Quest To Build Cool Stuff’. My session started right after Jared Spool finished his opening keynote (no pressure!). If you were there, great! Hope you enjoyed it. All of my content, including slides, links and bonus material, can be found here.

After my talk, I was able to attend some other sessions before I had to leave. Here are my notes:

Dan LeBoeuf
Testing Tools of On-Device Mobile Prototypes

A variety of approaches to conduct and capture On-Device Mobile test sessions. Dan took us on a tour mobile prototype testing tools and walked through options and decisions made while building Manifest’s custom configured research facility. Some of the more interesting tools he looked at were:

  • Proton Presentations – Ever wanted to easily run HTML5 based presentations and prototype applications from your local iPad or iPhone? Proton makes it possible, with a simple application that is part flash drive, part presentation application, and part iOS application development utility.
  • Reflection – AirPlay mirror your iPhone 4S, iPad 2 or the new iPad to any Mac or PC, wirelessly (and then you can record the output)
  • Screencast Video Recorder – Android app for recording video with audio from your Android device. It can also take snapshots.
  • Cydia (jailbroken iOS devices, shows fingertaps)
  • EvoCam – $30 – An app for outputing webcam streams.
  • IP Cameras – An Internet protocol camera, or IP camera, is a type of digital video camera commonly employed for surveillance, and which unlike analog closed circuit television (CCTV) cameras can send and receive data via a computer network and the Internet.
  • Mr. Tappy – An attachment for filming mobile phones.

Param Rengaiah
How to Build CMS–Free Websites

Param started off by referencing Divya Manian’s talk on Designing in the Browser and then featured some quotes about design and development.

“Design doesn’t work when its separate from development.”
– Andy Clark

“Real web designers write code. Always have. Always will.
– Jeffrey Zeldman

Every website is HTML+CSS+JS, no matter what the back end is. Let’s build systems that only use this. His proposed solution was to use Static Website Generators, the easiest and yet most flexible and powerful option for a developer/designer, and is great for prototyping.

Param’s favorite combination: Jekyll (Website Generator) + Github (Hosting) + Prose.IO (Content Authoring)

Other options: Octopress (for blogging) and Jekyll-Bootstrap (great for getting started faster, not for customization)

Param’s best example of a site that uses this technique was Development Seed, which switched from Drupal to Jekyll.

Param has created Sunrise, an open source blank template for Jekyll.

Christopher Webb
Supercharge Your Toolchain: Haml, Sass, Coffee, Git, & Heroku

Christopher started the talk saying that he wished he could go back in time and teach his past self some of the tools he knows about now. #1 on his list: that you don’t need to know Ruby to use these cool tools.

HAML – The purpose of HAML is to make markup beautiful. Compiles to HTML. HTML is ugly, takes too much time to maintain. HAML is cleaner and easier to read/maintain.

SASS – Stands for Syntactically Awesome Stylesheets. SASS compiles to CSS and gives you all kinds of functionality like variables, mixins, inheritance and functions. Results in smaller, more maintainable CSS that is great for larger sites. He also touched on SCSS, which is another CSS pre-processor, but you can use it on legacy codebases to introduce this added functionality to your stylesheets.

CoffeeScript – Another preprocessor, this one for JavaScript. It is basic an alternate syntax that some developers prefer, and also prevents some of the bad practices that can sneak their way into JavaScript code.

Chris then rapidly talked about various other tools like GruntJS, Codekit, Yeoman, Git and Heroku.

Dennis Kardys
Replacing Photoshop Comps with HTML Prototypes in the Real World

Dennis sees big opportunities in the real world, where there are so many examples of broken web things. Web design is harder than ever, and he thinks that is a good thing. Our current methods of wireframing and annotating require too much imagination to understand what is going on.

He presented Samantha Warren’s Style Tiles as an example of a better approach. Jeremy Keith’s Pattern Primer is a method for presenting design as a system. Designing in the browser has caught on quite a bit lately, but is an obstacle for those who don’t code and can result in limiting design by constricting the imagination to just ‘put stuff in boxes’.

Dennis talked about what an ideal tool for the new web design process would look like. Then he presented a solution that he and his company is working on that theyv’e hilariously dubbed Code Name: Mammal Paw. It incorporates the Style Tiles and Pattern Primer approaches, but also brings UI into the mix.

He talked about the process of collaborating with clients in this prototype-based approach. First, they find UI patterns and start designing a modular system. For example, a media block, that gets extended for different layout circumstances, abstracting the styles. Structurally, the prototypes share a design guide html file, baseline/pattern css files and then different styles that can be presented as design options.

Some pitfalls with the approach. How much to show? How to keep the code organized? It is a new approach, so there are probably unknown issues that will pop up.

Stuff I Learned At SXSW, Part 2

I knew a lot of the stuff that was talked about in the Killer App Design session by Jonathon Morgan, but there was still plenty of valuable food for thought and ideas in there. Also, he was an engaging, comfortable speaker with a good sense of humor, which made for a nice way to start the day.

Some things I took away:

  • Instead of using a class name (which can change) to select, use a semantic data- attribute (for example data-action="reveal").
  • Jonathon proposed ditching AJAX for WebSockets in your app whenever that is possible.
  • Use Web Workers for JS multithreading to optimize your app.
  • I have a fine understanding of the module pattern, but need to get into pub/sub more.
  • Jasmine and Selenium are the tools of choice for testing large scale JS apps.

There were plenty of other things he touched on as well. Check out the slides at http://bit.ly/html5sxsw.

Scrollorama

Over my holiday/new-baby-time-off break, I took some time to work on a couple new jQuery plugins that I’ve been thinking about. I’m a fan of the various cool scrolly sites out there like this and this. I also dig slideshow presentation plugins like deck.js and reveal.js

With that in mind, I’ve created Scrollorama, the jQuery plugin for doing cool scrolly things. Basically, it lets you animate elements on the page based on the browser window’s scroll position. You can see what I mean by checking out the project demo page on Github.

The other plugin I made is scrolldeck.js, which is for making vertically scrolling slide decks. It uses Scrollorama and keyboard listening to manage the slide transitions. You can see it in action on its demo page, and also in some example scrolldecks I created. “What The Heck Is Responsive Web Design?” is a scrolldeck that demonstrates a variety of features, particularly animation builds. “Infographics Are Cool” is a demo of how to create a scrolldeck of full screen images. Lastly, I created a parallax scrolldeck demo of how to use it with the Parallax jQuery Plugin.

sizeit.js

Last week, I posted sizeit.js, a javascript utility for responsive web design, to github. It is a simple script that detects screen width and loads external css. Works kinda like media queries. Why not just use media queries? This article outlines some of the problems with them.

The reason I created sizeit was for building web apps. Many times it is necessary to show different content or functionality in an app based on the user’s screen size. At the end of his new book, Responsive Web Design, Ethan Marcotte suggests using javascript for just this purpose. He uses a simple slideshow as an example, recommending javascript size detection for determining which size images to load or whether to display a static image as alternate content.

If you’re building an app that, by its very nature, requires javascript, then why not also use it for size detection, and ditch media queries altogether? I’m not the first to use this approach. Nathan Smith, the developer behind 960 Grid and formalize, created adapt.js to do screen width detection and css loading.

One of the sizeit.js features I like is its size setting is available use in other javascript on the page, which is useful in the kinds of apps I work on and in scenarios like Marcotte presented in his book.

Up next, as a byproduct of recent projects, I’m creating a single page app sort-of-boilerplate that I’ll be posting to github that uses sizeit.js and some other techniques.