HTML & CSS for Visual Designers Workshop

The Chopping Block, Inc.

This presentation is an HTML page.

Press key to advance.

Toggle notes with the 2 key.

Zoom in/out: Ctrl or Command + +/-

Having issues seeing the presentation? Read the disclaimer

This presentation was printed from an HTML page.

A fully interactive version of these slides containing examples and links to further resources can be found at:
http://choppingblock.com/presentations.

This page is based on the HTML5 Slideshow by Marcin Wichary, Ernest Delgado, Alex Russell and Brad Neuberg:
https://github.com/html5rocks/www.html5rocks.com

Intro

Chopping Block

World Domination Through Graphic Design

Since 1996

Edge Link 03 01 ChopMain

Intro

Chop Shop

Shirts For Designers, And Nerdy Designers

Since 2004

Edge Link 03 Chop Shop Store Main

Notes:

  • With Shirts Like This, Who Needs Pants.

Intro

Teaching

NYC @ School of Visual Arts

Since 1998

  • Edge Link 03 01 SvaTriptic01 A01 03 Mfai
  • Edge Link 03 01 SvaTriptic01 A01 05 Mpsdp
  • Edge Link 03 01 SvaTriptic01 A01 07

Take exceptionally talented creative professionals.

  • Teach them how to work digitally.
  • Teach them how to build for & communicate online.
Today is the day I finally learn HTML & CSS!

- Your Mind

Intro

Our Workshop

HTML & CSS for Visual Designers

Gulp

  • Great, how much time to we have?
  • Three hours! (no questions)

How is he going to pull this off?

  • You need to understand the basic principles.
  • You need a solid foundation.
  • You need to have the right tools.
  • You need to know how to help yourself learn.
  • You need reference files you can trust.
  • You must be fearless!

Just like any other medium.

Intro

Good Times

There Has Never Been A Better Time...

Sweet

  • The web has matured & standards are here.
  • HTML5 & CSS3 is a reality.
  • Tablets & Smartphones are real.
  • Publishing systems are everywhere and mostly free.

And the important one:

Notes:

  • The capabilities and potential of modern browsers is growing daily
What heck is HTML5
& CSS3?

- Many of us

Then

1997

When The Internet Was A Fad

Kinda Sucked

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

Then

1997

There Was Flash...

Kinda Worked

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

Notes:

  • As long as you had the right Flash plugin.

Since Then

Evolution

Looks Like HTML Grew Up

10 Years Later

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

HTML5

Projects

Did You Know This Was Possible?

Holy Cow

3d:

Notes:

  • Look at how those are built and ask yourself: How would a desktop design tool begin to make this?

Today

Browsers

The Next Generation...

About Time

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

Today

Technology

And what is supported...

Nothing New

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

Today

Mobile Browsers

Webkit

Interesting

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

STRETCH

Room Full Of Designers

Reality Check

Ok great, how do I
start making stuff?

Foundation

Let's Forget About The Technology

Focus

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

Foundation

Concept

Imagine The Greatest Poster In The World

Pretend

02 MagicPoster1

Foundation

Concept

Now Make It A Magic Poster

Magic

02 MagicPoster2

Notes:

  • There is nothing more magical than a robot riding a unicorn.

Foundation

Concept

Hang It Up - Sideways

-90°

02 MagicPoster3 A02

Foundation

Concept

It's Magic, Remember

Fixed

02 MagicPoster4 A02

Foundation

Concept

Resize It (Smaller)

Scrunch

02 MagicPoster5 A02

Foundation

Concept

Put It In Your Pocket

Portable

02 MagicPoster6 A02

Foundation

Question

How Do We Begin To Design For That?

Think

02 MagicPoster7 A02
  • Multiple canvas sizes
  • Fixed positioning
  • Flexible positioning
  • Rigid containers
  • Flexible containers
  • Spacing/padding control
  • Transparency support
  • Advanced Type Control
  • (And so on...)
  • One copy of the content!
  • Universal Poster Support!

Notes:

  • What do we need? Where do we start?
  • We will have to select stuff. Position them dynamically based upon size.
  • multiple layouts
  • multiple sizes
  • fixed and flexible containers
  • shifting sizes
  • We never know how big the canvas is.
  • How it works on a computer, mobile device, etc...

Foundation

Solution

We turn our attention to HTML & CSS

Since 1995

    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

Tools

Where Do We Start

Ahh

Master the medium, not the tools.

Tools

Photoshop

Didn't Teach You Photography.

Photo

03 PhotoshopTeach1 A01

Notes:

  • Nobody ever says: "I want to be a photographer, I'll just learn Photoshop"
  • Truth be told, this one is a bit of a stretch. I think it holds up well in context tho.

Tools

InDesign

Didn't Teach You How Print Works.

Print

03 InDesignTeach1 A02

Tools

Dreamweaver

Won't Be Teaching You How The Web Works.

Web

03 DreamweaverTeach1 A01

Notes:

  • Like other tools, it will help you work once you know what you are doing.
  • Learn the foundation of HTML & CSS, before you deal with a new UI.

Tools

There Is No Silver Bullet For HTML & CSS.

Boom

03 SilverBullet1 A01

Notes:

  • There might be one day, so far... no.

Tools

The Secret

Just between you & me

Fact

Nobody builds this interactive stuff from scratch.
  • The internet is the coolest box of legos ever.
  • Frameworks, Libraries, Content Management Systems (free) are everywhere.
  • Hey Designers: peek at Codrops & Unheap

Tools

No Really

It's Not That Bad.

Relax

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.
  • Don't forget to bookmark caniuse.com

HTML & CSS just work.

  • It's browsers that have historically sucked.
  • You can use any tool you want, as long as you know what it is doing for you.

Notes:

  • You ever seen what Postscript looks like?

Basics

Sketchbook

Still the best tool for the job

Not Dead

Edge Link 03 Sketchbook
  • But requires you to understand the medium.

Basics

Core Tools

The interactive designers short list

Core Stuff

You like, you master, you trust:

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

application

Photoshop

Adobe Systems

Link Photoshop image

The undisputed bitmap heavyweight champ.

template

The Grid System

The kind people of the Internets

Link The Grid System image

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.
  • Responsive stuff - I like Pure & Foundation

application

Illustrator

Adobe Systems

Link Illustrator image

Illustrator is the most versatile tool we have found.

plugin

Ai to Canvas

A MIX Online Production

Link Ai to Canvas image

Exports Adobe Illustrator to HTML5 Canvas

application

Web Browser

Google, Apple, Mozilla, Microsoft, etc...

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

application

Dreamweaver

Adobe Systems

Link Dreamweaver image

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.

application

TextMate

Macromates

Link TextMate image

TextMate is the best text editor you have ever used.

application

Sublime Text

Jon Skinner, Sublime Inc.

Link Sublime Text image

A sophisticated text editor for code, markup and prose.

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

application

Brackets

Adobe Systems

Link Brackets image

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

application

Espresso

MacRabbit

Link Espresso image

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).

Tools

Editors / Apps

You are kidding right?

No Really

  • 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:

Notes:

  • If tomorrow you find a great new JavaScript library, you might have trouble using it with your application.

Tools

Editors / Apps

No Really:

Facepalm

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

Tools

Confusion

Found From Time To Time:

Quote

Designers shouldn't have to learn code.

Tools

Clarification

Just Like Typesetting Instructions

Fact

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

Learning

The Newer Media Trinity

Breakdown

Current foundation of digital design/communication.

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

Learning

Online

Use The Medium To Learn The Medium.

Cheap

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.

Learning

Web Via Print

Fantastic Nerd Web Design Books Do Exist

Print

Edge Link 03 03 Books1 A01 HTML and CSS: Design and Build Websites HTML5 For Web Designers CSS3 For Web Designers Responsive Web Design
Learn enough HTML &
CSS to be fearless.

  • Stand on the shoulders of giants. (borrow code)

HTML 101

Structure

It's Just A 'Plain Text' File.

Markup

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>

HTML 101

Doctype

An Instruction To The Web Browser

Alert

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

HTML 101

Head

The Stuff You Don't See

Markup

<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>

Notes:

HTML 101

Body

The stuff you see.

Markup

<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

HTML 101

Body

The stuff you see.

Markup

Is this good HTML?

Examples:

CSS 101

Designers Already Understand This Part

Style

05 StylePanels1 A01

Notes:

  • Print Designers have been using styles sine before the web.
  • HTML & CSS is evolving in your direction!

CSS 101

Syntax

The Syntax of CSS Is Simple

Basics

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

CSS 101

Selectors

You Select/Style Any Part Of Your HTML

Targeting

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; }

Notes:

  • If you think this is complicated, take another look at the style dialog boxes in Ai & Id.

CSS 101

Remember

You link your HTML File to a CSS File

Linked

Within the head of your HTML File:

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

</head>

CSS 101

Links

Core CSS Design Concepts

Knowledge

Edge Link 03 05 MoreLearning01 A01

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

STRETCH

Just Tell Me About Web Fonts

Need More

No really, get to the
cool stuff?

service

Typekit

Adobe Systems

Link Typekit image

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.

service

Font Squirrel

The Font Squirrel team

Link Font Squirrel image

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

library

jQuery

The jQuery Project Team

Link jQuery image

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

library

Skrollr

Alexander Prinzhorn

Link Skrollr image

Skrollr is parallax scrolling for the masses

library

Lettering.js

The jQuery Project Team

Link Lettering.js image

Lettering.js is a force for good

Tools

Platforms

Customizable Content Management Systems

Easy

Artist/portfolio Based Solutions*

Geeky developer (build your own) frameworks**

Notes:

  • An overwhelming amount of projects these days are built upon these platforms.
  • You don't volunteer to build this type of thing from scratch. Remember the guy who built the toaster from scratch.

platform

Wordpress

The Wordpress Team

Link Wordpress image

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.

platform

Squarespace

The Squarespace Team

Link Squarespace image

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.

platform

Indexhibit

Daniel Eatock & Jeffery Vaska

Link Indexhibit image

Indexhibit is simple, because simple is really good

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

platform

Cargo

Cargo Collective, Inc.

Link Cargo image

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.

Tools

Management

OMG How Do You Manage?

BOOM

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...

Notes:

  • An overwhelming amount of projects these days are built upon these platforms.
  • You don't volunteer to build this type of thing from scratch. Remember the guy who built the toaster from scratch.

Thanks

2012 - HOW Interactive Design

Fin

This Presentation will be posted online at:

Questions, comments or more info: