AIGA In Control Web Design Conference Keynote
126
AIGA CINCINNATI IN CONTROL WEB DESIGN WORKSHOP CONFERENCE KEYNOTE DAY 2 Christopher Schmitt | @teleject on twitter
-
Upload
christopher-schmitt -
Category
Technology
-
view
828 -
download
2
Transcript of 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> </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
