AIGA In Control Web Design Conference Keynote

AIGA CINCINNATIIN CONTROL

WEB DESIGN WORKSHOP CONFERENCE

KEYNOTE DAY 2Christopher Schmitt | @teleject on twitter

WE HAVE A PROBLEM

DO SOMETHING

DO SOMETHINGAMAZING

DO SOMETHINGAMAZINGr

IT’S OKAY TO TAKE THINGS

FOR GRANTED

WE EMBRACE WHAT IS AND DON’T WORRY

ABOUT MAKING SOMETHING AMAZINGr

WHAT HAPPENS IS WE ADAPT TO THE SURROUNDINGS

THIS IS DESIGNING FOR THE ENVIRONMENT

THIS IS ADAPTINGTO THE ENVIRONMENT

WEB-SAFE COLORS

FFCCCCFF9999

FF6666

FF3333

FF0000

CC0000

990000

660000

330000

FFCCCCFF9999

FF6666

FF3333

FF3300

CC3300

993300

663300

333300

FFCCCCFF9999

FF6666

FF6633

FF6600

CC6600

996600

666600

333300

FFCCCCFF9999

FF9966

FF9933

FF9900

CC9900

999900

666600

333300

FFCCCCFFCC99

FFCC66FFCC33

FFCC00

CCCC00999900

666600333300

FFFFCC FFFF99

FFFF66

FFFF33

FFFF00

CCCC00

999900666600

333300

CCFFCC

CCFF99

CCFF66

CCFF33

CCFF00

CCCC00

999900

666600

333300

CCFFCC 99FF99

99FF66

99FF33

99FF00

99CC00

999900

666600

333300

FFCCCC

FF9999

FF6666

FF3333

FF0033

CC0033

990033

660033

330033

FFCCCC

FF9999

FF6666

FF3366

FF0066

CC0066

990066

660066

330033

FFCCCC

FF9999

FF6699

FF3399

FF0099

CC0099

990099

660066

330033

FFCCCC

FF99CC

FF66CC

FF33CC

FF00CC

CC00CC990099660066

330033

FFCCFF

FF99FF

FF66FFFF33FF

FF00FFCC00CC

990099

660066330033

CCCCFF

CC99FFCC66FF

CC33FFCC00FF

CC00CC

990099

660066

330033

CCCCFF9999FF

9966FF

9933FF

9900FF

9900CC

990099

660066

330033

CCCCFF9999FF

CCCCFF

9999FF

CCCCFF

9999FF

CCCCFF

9999FF

CCCCFF

9999FF CCCCFF

9999FF

CCCCFF

99CCFF

CCFFFF

99FFFF

CCFFCC 99FF99CCFFCC 99FF99CCFFCC 99FF99

CCFFCC99FF99

CCFFCC99FF99

CCFFCC99FF99

CCFFCC99FFCC

66FF66

66FF33

66FF00

66CC00

669900

666600

333300

66FF66

33FF33

33FF00

33CC00

339900

336600

333300

66FF66

33FF33

00FF00

00CC00

009900

006600

003300

66FF66

33FF33

00FF33

00CC33

009933

006633

003333

66FF66

33FF66

00FF66

00CC66

009966

006666

003333

66FF99

33FF99

00FF99

00CC99

009999

006666

003333

66FFCC

33FFCC

00FFCC

00CCCC

009999

006666

003333

66FFFF

33FFFF

00FFFF

00CCCC

009999

006666

003333

66CCFF

33CCFF

00CCFF

00CCCC

009999

006666

003333

6699FF

3399FF

0099FF

0099CC

009999

006666

003333

6666FF

3366FF

0066FF

0066CC006699

006666003333

6666FF

3333FF

0033FF

0033CC003399003366003333

6666FF3333FF0000FF0000CC

000099

000066

000033

6666FF

3333FF

3300FF

3300CC

330099

330066

330033

6666FF

6633FF

6600FF

6600CC

660099

660066

330033

Cht

Copyright©1998-1999ChristopherSchmitt

AMAZINGr

WEB FORM ELEMENTS

• Checkboxes

• Input:

• File

• Radio

• Text

• Select:

• Multiple Items

• Single Item

• Submit Button

• Textarea

FORM ELEMENTS

CSS PROPERTIES

• background-color• background-image• border• border-color• border-style• border-width• color• font-family• font-size• font-weight

• height• letter-spacing• line-height• margin• padding• text-align• text-decoration• text-indent• width• word-spacing

7.2 55.567

8b2

8.59

1.52.03.0

34b

1

7.2 9 1.52.03.0

234b

3,520screengrabs

AMAZINGr

Text Indent

Text Decoration

Font Family

Border Color

Font Weight

Word Spacing

Height

Color

Background Image

Border

Font Size

Border Style

Letter Spacing

Padding

Margin

Background Color

Width

Radio Buttons

Check Boxes

File Uploads

Select(Multi)

Select(One)

Input Text

Text Area

Text Indent

Text Decoration

Font Family

Border Color

Font Weight

Word Spacing

Height

Color

Background Image

Border

Font Size

Border Style

Letter Spacing

Padding

Margin

Background Color

Width

Radio Buttons

Check Boxes

File Uploads

Select(Multi)

Select(One)

Input Text

Text Area

MacFF3MacS4b

IE7 IE6 ChromeWinOp9

WinS4bWinS3

MacS3WinFF3 IE8b2

LET BROWSER VENDORS KNOW WHAT YOU WANT

• Internet Explorer

• http://blogs.msdn.com/ie/contact.aspx

• Opera

• http://my.opera.com/community/forums/forum.dml?id=24

• http://groups.google.com/group/opera.wishlist/topics

• Safari

• http://lists.webkit.org/mailman/listinfo/webkit-dev

• Google Chrome

• http://groups.google.com/group/chromium-dev

LOVE CODE

Semantic Markup

91http://www.w3.org/TR/html4/index/elements.html

<h1><a href="http://www.usa.gov/">United States of America</a></h1>

<ol><!-- Listing of States --> <li><a href="http://www.alabama.gov/"><strong>State of Alabama</strong><i></i></a></li>

<li><a href="http://www.ct.gov/"><em><strong>State of Connecticut</strong></em><i></i></a></li>

...

</ol>

Some Common HTML Errors

• <p>&nbsp;</p>

• <p> ... <br><br><br> ... <br><br><br>...

• <h2>Subject Matter<br></h2>

• <p><h2>Subject Matter</h2></p>

• <p><img ></p>

Clearing Out the Content

Striping

13

a[href="http://delaware.gov/"] em { background: white; top: 50px; left: 0; } a[href="http://www.georgia.gov/"] em { top: 100px; left: 0; } ...

Pooling the Stars

h1 a { position: absolute; width: 440px; height: 350px; background: #002868; text-indent: -9999em; margin: 0; padding: 0; z-index: 20; }

Stars

a[href="http://www.alabama.gov/"] i { background-image: url(stars.gif); display: block; position: absolute; top: 13px; left: 13px; z-index: 50; width: 24px; height: 23px;}

Texture

#easel em { width: 955px; height: 50px; display: block; background: #BF0A30; position: absolute; top: 0; left: 0; z-index: 1; background-image: url(flag_bkgd.png); background-position: 50%; background-attachment: fixed; }

Stretching

Setting Fonts with Ems

• “Default size in all browsers is 16 pixels”

• Multiply default size by 62.5%, you get 10px

• http://clagnut.com/blog/348/

• http://www.alistapart.com/articles/howtosizetextincss/

body { font-size: 62.5%; margin: 10px 0 0 0; padding: 0; text-align: center;}

#easel h1 a { position: absolute; width: 21.5em; height: 17.5em; background: #002868; text-indent: -9999em; margin: 0; padding: 0; z-index: 20; background-image: url(flag_bkgd3.png); background-position: 50%; background-attachment: fixed;}

OMG! Stars

i:after { content: "M"; color: white; font-size: 2em;}

i:after { content: "\48"; // unicode font-family: "Zapf Dingbats"; color: white; font-size: 2.5em; font-style: normal;}

HOW AMAZING AREOUR WEB SITES?

http://dev.opera.com/articles/view/mama-markup-validation-report/

(X)HTML

JavaScript CSS

noun

verb adjective

S.E.O.

INCREASES ACCESSIBILITY

BROWSER-AGNOSTIC SITES

I DIDN’T GET INTO WEB DESIGN

CAUSE I LOVE THE WEB (OR CODING)

I GOT INTO WEB DESIGN BECAUSE I LOVE DESIGN

DO AMAZING THINGSCAUSE YOU KNOW IT’S WORTHWHILE

r

WT

F?LO

LZ!

What is the something you would do

with the money you think you need?

DO SOMETHINGAMAZINGr