choppingblock.com, portfolio, blog

chopshopstore.com

Take exceptionally talented creative professionals.

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

• Great, how much time to we have?
• A week, a day? oh, one evening...

What does "need to know" mean to this guy?

• A strong foundation in HTML.
• The interactive project process.
• Tools & the cool stuff.
• Design trends (Web Fonts & Responsive Design).

Like any other medium.

• Let's start with the basic principles...

• The web has matured & standards have arrived.
• HTML5 is an reality.
• Tablets are real & they are instigating change.
• Publishing systems are everywhere and mostly free.
• There is competition and rapid growth everywhere.

And the important one:

• The web has grown in the direction of the designer.
  • HTML5 Rocks - CSS3 Section
  • LOST WORLD'S FAIRS

• Barely any standards.
• Great typography -> images of words.
• Limited animation & interactivity.
• SLOW JavaScript.

• Cross platform, cross browser.
• Any typeface.
• Unparalleled animation, interactivity, sound...
• The web kinda stepped forward. (old gabocorp)

• Next generation browsers.
• CSS (for designers) happened, and then CSS3.
• JavaScript got FAST*
• Mobile adoption is fueling HTML5 growth.

• Lost World's Fairs*
• HTML5 Twitter Canvas Experiment
• 20 Things I Learned About Browsers and the Web
  Wow that's neat, how did they do that?
• Shape Type, the letter shaping game
• Baroque.me: Bach Cello Suites No. 1
• Anything at creativejs.com

3d:

• Keep watching mrdoob.com
• ROME: 3 Dreams of Black an interactive film.

• More resiliency (performance, speed, stability)
• Cross-platform functionality (web standards)

• Core technology within all "Next Gen" browsers.
• Plugins provide additional technology.

• WebKit is an open source web browser engine.
• Embraces HTML5, successful on mobile platforms.

“Ok great, how do I
start making stuff?”

• Lets talk about making something.
• Forget about how it's printed.
• How it works on a computer, mobile device, etc...

The longer we hypothesize about a (desktop) tool that could enable us to build a Magic Poster, the more we would inevitably be drawn to solutions already present in HTML & CSS.

• HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items. -wikipedia
• CSS is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. -wikipedia

The design concepts that distinguish interactive from print/traditional mediums are:

• Hypertext, and therefore navigation.
• Limitless (yet limited) canvas size.
• Flexible, data driven content.
• Dimensionality, Overlay & Interactivity.

Each item on that list could easily be the subject of an additional presentation, class or workshop.

“Master the medium, not the tools.”

It's Easier than learning (Ps, Ai, Ae, etc...)

• Basic knowledge + 40 HTML tags, 20 CSS styles.
• If you use styles, you already kinda know it.
• You copy and paste most of it.
• Nobody starts a new page/project from scratch.

HTML & CSS just work.

• It's browsers that you don't like.
• You ever seen what Postscript looks like?
• Dreamweaver is a browser.
• Dreamweaver is also a text editor!

Dreamweaver has a lot going for it*.

TextMate is a force for greatness.

• As of today, there are no all in one solutions (apps) that reliably the same kind of experience for HTML5, that Flash Professional does for Flash.
• HTML is a fast moving target.
• We can draw or animate (it's markup), but a text editor has no boundaries*.

Are There Any Contenders? Yes:

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

• If you can read.
• If you can copy & paste.
• You can do this.

“Designers shouldn't have to learn code.”

“HTML isn't code, it's a markup language.”

• Tedious markup possibly, but NOT code.
• Our history as designers is paved with tedious processes and creation techniques.

Current foundation of digital design/communication.

• HTML is the Markup Language.
• CSS selectors style the HTML tags.
• JavaScript is the 'native' code language.

Browser plugins offer additional functionality.

• Adobe Flash
• Microsoft Silverlight
• Apple Quicktime
• Unity Web Player

Make a folder (or pick a folder).

• Start saving working examples, experiments.
• Collect, learn & re-use.

Learn the art of asking (Google) for help.

• Use search prefixes like "HTML" & "CSS" to learn.
• Use "-" to eliminate what you don't need. (example)

Your browser is the best learning tool you have.

• Enable the 'Develop' menu in Safari. (link)
• Add the 'Developer Toolbar' and 'Firebug' to Firefox.

• CSS: The Definitive Guide, 3rd Edition
• HTML5 For Web Designers
• CSS3 For Web Designers
• Responsive Web Design

Consisting of 1 optional declaration & 2 top level tags:

<!DOCTYPE html>

<html>
  <head>
    <title>My Web Page</title>
    The stuff you don't see.
  </head>

  <body>
    The stuff you see.
  </body>
</html>

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5

<!DOCTYPE html>

Learn more: w3schools > Doctype Declaration

<head>
  <title>SampleHTMLProject01</title>
  <meta name="author" content="The Chopping Block, Inc." />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  
  <link rel="stylesheet" href="styles.css" media="screen"/>
  
  <style type="text/css" media="screen">
    CSS styles for just this page.
  </style>
  
  <script type="text/javascript" charset="utf-8">
    JavaScript code for just this page.
  </script>
</head>

<div id="header">
  <h1>Site Title</h1>
  <h2>Site Tagline</h2>
</div>

<ul class="navbar">
  <li><a href="index.html">Home</a></li>
  <li><a href="portfolio.html">Portfolio</a></li>
  <li><a href="http://wordpress.com/myblog">Blog</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetur...</p>

Learn more: w3schools > Primary HTML Tags

Is this good HTML?

• We structure the content of our HTML with the glassy eyed aspiration of the "Semantic Web".
• We establish the content, not the presentation.
• Remember 3rd grade, when you learned to make a book report outline? It's like that with tags.

Examples:

• Sample HTML Project 01 (with CSS)
• CSS Zen Garden (example & inspiration)

It consists of only 3 parts:

selector { property: value; }

Real world example:

body {
  background: #eeeeee;
  font-family: “Trebuchet MS”, Verdana, Arial, serif;
}

You can combine selectors:

h1, h2, h3 { color: #f60; }

Learn more: cssbasics.com

You can select any existing tag:

<body>, <h1>, <h2>, <h3>, <ul>, <img>, <a>, etc...

body { background-color: #ccc; }

You can select any tag with a custom class attribute:

<h2 class="subtitle">Custom Graphics</h2>

.subtitle { background-color: #ccc; }

You can select any tag with a custom id attribute:

<h2 id="subtitle">Custom Graphics</h2>

#subtitle { background-color: #ccc; }

Within the head of your HTML File:

<head>
  <title>SampleHTMLProject01</title>
  
  <link rel="stylesheet" href="styles.css" media="screen"/>

</head>

Dreamweaver has a really solid CSS explorer.

Espresso is a life changing CSS tool.

Learn the box model: w3schools > CSS Box Model

Background images: w3schools > CSS Background

Styling Text: w3schools > CSS Text

Coding Clean and Semantic Templates

30 HTML Best Practices for Beginners

“No really, get to the
cool stuff?”

• Great example at (requires chrome)
  slides.html5rocks.com/#web-fonts

What you need to know:

• You are looking at them! (and here)
• Read: Web Fonts at the Crossing
• Quick Guide to Webfonts Via @Font-Face

Key Resources

• typekit.com
• Google Web Fonts
• The Font Squirrel*

• Great example at (requires chrome)
  slides.html5rocks.com/#css-columns

What you need to know:

• Read: Introducing the CSS3 Multi-Column Module

Image 1 Image 2 Image 3 Image 4

Richard Bradshaw's CSS3 Tutorials!

• Using CSS3 Transitions, Transforms and Animation
• Simple, robust, hardware accelerated (Webkit).
• The sliding transforms shown above.

• Great example at (requires chrome)
  slides.html5rocks.com/#video-audio

Yup, you just copy and paste:

<video src="movie.webm" poster="movie.jpg" controls>
	This is fallback content to display if the browser
	does not support the video element.
</video>

Multiple Sources (better compatibility).

<video poster="movie.jpg" controls>
	<source src='movie.webm' type='video/webm; codecs="vp8.0, vorbis"'/>
	<source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'/>
	<source src='movie.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
	<p>This is fallback content</p>
</video>

• More info at wikipedia.org/wiki/HTML5_video

• Great example at (requires chrome)
  slides.html5rocks.com/#canvas-2d

Hey, That's Visual:

// make
for ( var i=0; i<n; i++ ) {
	c.fillStyle = "hsla("+ 10*i +", 100%, 50%, 1)"; 
	c.fillRect( (barWidth + spacing)* i , 0,barWidth,barHeight);
};

• Ai->Canvas plug-in exports Adobe Illustrator to HTML5 Canvas. It's Awesome.

Sample File: View, AiToCanvasProject.zip

Modernizr feature detection framework.

jQuery simplifies browser anomalies.

Easel.js is modeled after the Flash DisplayList

• Zoe AIR app, swf animations to sprite sheets.
• Pretty quick on a mobile.

Paper.js is modeled after Scriptographer for Ai

• Fantastic demos and tutorials.

Processing.js is modeled after the Processing language

Other Handy Canvas Stuff:

• Great game sprite sheet tutorial with EaselJS.
• Awesome canvas loader animations.
• Meet Seb Lee-Delisle, and his files.

Lettering.js is a force for good

• Has lots of great examples.

Kerning.js is inspired by Lettering.js

Using JavaScript to emulate parallax:

• Jparallax is a handy jQuery plugin.
• It's a great subtle effect - GitHub 404.
• Then there is the Nike Better World project. how?
• And the Volkswagen Beetle Scroll.

• My favorite teaching example is
  Shadowbox.js

You want to add something like this to your site:

All you have to do is:

1. Download the javascript, place in HTML folder.
2. Connect it to your HTML file.
3. Add the following to any HTML image link:

   <a href="myimage.jpg" rel="shadowbox">My Image</a>

Sample File: View, ShadowboxJsDemo.zip

Joe Lambert's CSS3 & JavaScript Transitions Link

What you need to know:

• It Started with this: Responsive Web Design
• Now there is this: Responsive Web Design Book
• Both From this guy: Ethan Marcotte

Inspiration

• 50 Examples and Best Practices

Responsive Web Design Frameworks

• Responsive Web Design Templates and Frameworks
• Twitter Bootstrap*

Common frustrations & fears:

• Learning takes time, time takes money.
• Web design gets awfully complicated.
• Do you expect me to mock up three different versions of that insanely complex layout?
• Complicated takes time, time takes money.
• How do you get a design approved?
• How do you know if it's going to work?
• Do I just get a book on Dreamweaver?

Structure (Wireframes)

• Separate the function & content from the design.
• Wireframes are a BIG part of the creative process.

Functionality

• Build a prototype. Talk about it.

Look & Feel (Concept Boards)

• Allow the design (and the designer) to run free.
• Reduce the complexity & capture a feeling.

Bring everything together

• Play on the strengths of the medium itself.

• That's a sketch (an idea), you can work from here.

• This does not help anybody, this is just an idea.

Chopping Block Wireframe Examples

A wireframe is a blueprint, blueprints have standards.

• You can measure it - you can build it.
• Sample copy - word count and content approval.
• Pixel perfect width, ad's, video and Flash embeds.
• Yes, wireframes have grids. - 960.gs
• Adobe Illustrator, save time & design over top of it.

A wireframe can/should establish the functionality.

A wireframe can be creative.

• The freedom to think visually. Sans final design.

A wireframe is a discussion document.

Chopping Block Concept Board Examples

Lessen the content, increase the exploration.

• Pick 4 to 6 relative sample elements.
  (navigation, images, sample feature, etc...)
• Explore the formal design possibilities.
• Keep multiple versions on each page (as a catalyst).
• Make compositions, present well, react quick.

Wireframes are there to field the content questions.

Concept board design work is scalable.

• Bring in another designer (or an intern).

• It's ok to borrow your own ideas!

Chopping Block Full Project Examples

Move forward with project design (with a safety net).

• Merge the approved wireframes with the approved look & feel.
• Tedious at times yes, but you should have a really solid direction and blueprint.
• Keep the wireframes up to date as scope shifts.

Depending on the project, development can start now.

• Once things are approved, sometimes its faster to build out full design using CSS.

“This is what the web was supposed to be.”

This Presentation will be posted online at:

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

Questions, comments or more info:

• Matthew Richmond - twitter
• choppingblock.com
• portfolio.choppingblock.com
• blog.choppingblock.com
• chopshopstore.com