choppingblock.com, portfolio

chopshopstore.com, samples

Take exceptionally talented creative professionals.

• Teach them how to work digitally.
• Teach them how to build for & communicate online.

• Lots of good stuff, how much time do we have?

How is this guy going to pull this off?

• How is this guy going to pull this off?

• Digital tools complement your creativity...

You like, you master, you trust:

• A Think/Design/Drawing/Production Tool
• A Web Browser (with Developer tools)
• A Text (HTML/CSS/JavaScript) Editor

The undisputed bitmap heavyweight champ.

• Pixel level control, when you need it most. We often bring our vector art in for final prep.
• Color Management for Web/Mobile. And iOS Tools
• When applicable use a Grid System

Everything old is new again...

• thegridsystem.org has everything you need to know.
• 960.gs is still a great place to start. Mostly for the demos & Photoshop/Illustrator templates.

Illustrator is the most versatile tool we have found.

• UX & Wireframe Tool, Design Tool - Our Templates.
• Symbols, 9-slice, Pixel Preview, Ps, VectorScribe
• Export multiple artboards as png's with this script.
• Export vectors to the HTML5 canvas with this ------>

Exports Adobe Illustrator to HTML5 Canvas

• Because we can't just Draw Boxes All Day
• Sample File: View, AiToCanvasProject.zip

An ongoing membership to everything* Adobe.

• $30 to %50 a month gives you access to every app, cloud services and more.
• Stay current, start and stop as you like.
• Digital Publishing Suite Single Edition just added!

• Safari & Chrome are based upon Webkit.
• The Web Inspector is the source of all power. see

The code part of the Creative Suite.

• If this is the only text editor on your computer, then it's a fine one for you to use.
• Comforting visual CSS editor, auto complete
• Lots of templates and layouts built in.

TextMate is the best text editor you have ever used.

• FAST, reliable, simply extensible, loved by many.
• Geeky screencast of html/css shortcuts & snippets.
• Add our Chop TextMate bundle to quickly scaffold HTML5 Projects

A sophisticated text editor for code, markup and prose.

• Very similar, and newer than TextMate.
• Cross platform, which is a big deal!

Recently revealed! Web based, go go Adobe...

• A free, open-source code editor for the Web
• Lee's intro post/video here
• Dev build alpha page here
• Github repository (source files) here

• As of today, there is no all in one solutions (apps) that reliably offer the same kind of experience for HTML5, that Flash Professional did for Flash (or Illustrator did for PostScript).
• HTML is a fast moving target.
• The modern web is a double edge sword.

Are There Any Contenders? Yes:

• Adobe Edge Motion and Interaction Design
• Sencha Animator
• Tumult Hype
• Adobe Muse (code name)

The best CSS editing and design option for designers

• Just for the live preview and CSS editor panel.
• Live preview with code completion and GUI inputs.
• Local files & hosted projects (like Wordpress).

• There is a lot to be learned from well formed page layout templates like these Perfect multi-column CSS liquid layouts.
• Every Designer, Developer and IA team should be comfortable using Web Grid Systems
• If you are going to be doing any development (or working with developers), you need to study the HTML5 Boilerplate template.
• Twitter Bootstrap and Foundation 3 are approachable and powerful responsive design frameworks that are good to prototype with.

• Start with this article Web Fonts at the Crossing
• You can create or convert some desktop font files to web font files. Due to licensing issues, it's common to use a hosted web font solution.
• Quick Guide to Webfonts via @font-face
• Don't forget to mention icon fonts.

The easiest way to use Real Fonts on your website

• Included with a Creative Cloud subscription, affordable as a stand alone purchase.
• Supported by almost every website service ever!
• Easy to use, does require a little CSS knowledge.

It's really about the Font Squirrel Generator

• Convert (some) of your desktop fonts to web fonts
• Font conversion creates fantastic documentation for using your web fonts. Giddyup Sample
• Decent library of commercial use free fonts too

Industry standard, cross-browser Javascript Library

• A write-less, work (almost) everywhere solution.
• So widely used, so adequate, it's hard to tech/learn JavaScript without jumping straight into it.
• learningjquery.com or even better Code School

Skrollr is parallax scrolling for the masses

• Github page with more examples.
• Then there is the Nike Better World project (now not as cool). Here is another example. Search for how.
• And the Volkswagen Beetle Scroll.

Lettering.js is a force for good

• Lots of great examples, like Lost World's Fairs.
• Kerning.js is inspired by Lettering.js
• Little demo.

• Wordpress
• Squarespace
• Drupal*
• Expression Engine*

Artist/portfolio Based Solutions*

• Indexhibit
• Cargo Collective

Geeky developer (build your own) frameworks**

• Ruby on Rails
• Code Ignitor

• It's all the same.
• If you can read.
• If you can copy & paste.
• You can do this.

Wordpress is the dominant publishing platform.

• Host at wordpress.com. or download and install it on your server for free.
• Open source, massive community & documentation.
• PHP based, endlessly* extendable.

An approachable modern hosted website platform

• Built by designers for designers just like you.
• The closest thing we have ever found to truly 'code-less' web design and development. Yet still full of customization options for the geekier kids.

Indexhibit is simple, because simple is really good

• Some places host indexhibit projects, but most people install it on their own server (it's free).
• The CMS is designed for artists/designers. Posts are broken down into exhibits & galleries.

Cargo Collective is the big brother to Indexhibit

• Wildly popular with artists/designers as it is also designed primarily as a portfolio and project CMS.
• Also a hosted platform, free to use but you pay if you want to map your domain to your site.

Project Management

• Tools like Basecamp by 37 Signals is an Epic win for design teams. It can run a whole studio as well as redefine how your internal design teams run.
• Gather Content

Time Tracking (or Awareness)

• What do you mean you dont know how long that took? Harvest is a force for greatness.

When Nothing Else Works

• Dropbox rarely fails.
• That sketchbook...

This Presentation will be posted online at:

• http://choppingblock.com/presentations
• It contains all the links and notes you need.

Questions, comments or more info:

• @choppingblock - twitter
• choppingblock.com
• portfolio.choppingblock.com
• blog.choppingblock.com
• chopshopstore.com