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.