The Madison Web Design & Dev Meetup is a great group of web professionals of all skill levels and a fantastic resource for the Madison web community. If you’re very experienced you’ll find peers you can discuss the most advanced development topics with and anyone just dipping their toes into web design can get real world answers they’ll understand from working professionals in the field.

You can find all their contact info here:

http://www.meetup.com/madisonwebmeetup/

If you’re interested in learning more about HTML5 (and CSS3 and Javascript) here is a list of the sites visited/discussed during my presentation.

A very short history of the web – from basic text to the equivalent of the printed page

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

http://web.archive.org/web/19961017235908/http://www2.yahoo.com/

http://web.archive.org/web/19961225070933/http:/www.bestbuy.com/

http://www.csszengarden.com/?cssfile=/206/206.css&page=0

Examples of HTML5, CSS3 and Javascript – applications in the browser window

http://www.apple.com/html5/

http://radikalfx.com/files/collage/demo.html

http://www.kesiev.com/akihabara/

http://htmlfive.appspot.com/static/gifter.html

http://mrdoob.com/projects/harmony/

http://html5demos.com/

HTML5 references and browser capability resources

http://diveintohtml5.org/

http://www.w3schools.com/html5/html5_reference.asp

http://caniuse.com/

http://beta.html5test.com/

http://www.findmebyip.com/

http://www.findmebyip.com/litmus/

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

http://html5demos.com/

HTML5 & CSS3 feature detection and Javascript browser enhancement

http://www.modernizr.com/

http://diveintohtml5.org/detect.html

http://remysharp.com/2009/01/07/html5-enabling-script/

http://css3please.com/

http://www.fontsquirrel.com/fontface/generator

Exercise showing the new HTML5 semantic tags in use

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

New HTML5 Attributes

http://www.w3schools.com/html5/html5_ref_standardattributes.asp

New HTML5 Events

http://www.w3schools.com/html5/html5_ref_eventattributes.asp

New HTML5 Form Elements, Types and Attributes
(Note: Only the Opera browser currently has a noticeable amount of support for these new features)

http://people.opera.com/brucel/demo/html5-forms-demo.html

http://www.w3schools.com/html5/html5_form_input_types.asp

http://www.w3schools.com/html5/html5_form_elements.asp

http://www.w3schools.com/html5/html5_form_attributes.asp

Geolocation
(Note: these demos are only useable on mobile devices for the most part)

http://www.html5rocks.com/tutorials/geolocation/trip_meter/

http://www.drdobbs.com/web-development/225600440

http://developer.practicalecommerce.com/articles/2066-An-Introduction-to-HTML5-Geolocation

Local Storage

http://www.html5rocks.com/tutorials/webdatabase/todo/

Session Storage

http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-09-sessionstorage-demo.html

Web Workers

http://html5demos.com/worker

http://www.drdobbs.com/web-development/225701170

HTML5 Audio Tag

http://code.coneybeare.net/getting-html5-audio-tag-and-flash-fallback-to

http://www.html5rocks.com/tutorials/audio/quick/

http://html5doctor.com/native-audio-in-the-browser/

HTML5 Video Tag

http://jilion.com/sublime/video

http://camendesign.com/code/video_for_everybody

http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback

HTML5 Canvas Tag

http://www.kesiev.com/akihabara/

http://www.canvasdemos.com/

http://html5games.com/

https://developer.mozilla.org/en/canvas_tutorial

http://thinkvitamin.com/dev/html-5-dev/how-to-draw-with-html-5-canvas/

http://www.rgraph.net/

http://www.html5rocks.com/

New HTML5 Tags

article
aside
audio
canvas
command
datalist
details
embed
figcaption
figure
footer
header
hgroup
input*
keygen
mark
meter
nav
output
progress
rp
rt
ruby
section
source
summary
time
video

*(input itself is not new but there are so many new input types and attributes that I want to draw attention to those)

Existing tags that have been redefined in HTML5 (some subtly)

!DOCTYPE – simplified, shortened
a – used for hyperlinks ONLY, name is no longer valid attribute, must have href.
address – new rule when address is in article tag
b – stylistically offset
em – stress emphasis
hr – paragraph-level thematic break
i – alternate voice
legend – legend can now be used with figure tag and details tag in addition to fieldset tag
menu – list form controls, no longer deprecated
small – side comments and small print
strong – strong importance

Removed Tags

acronym
applet
basefont
big
center
dir
font
frame
frameset
noframes
s
strike
tt
u
xmp

On the surface it seems easy: web pages seem to be printed pages delivered onscreen instead of on a printed page.

They’re not. Granted they look somewhat like printed pages when viewed on a computer display but that’s only on the surface.

When was the last time you sent a book to print where the first page was 11 inches high, the second was 23.5 inches high and the third page was an interactive form where someone could order a product and have it delivered instantly? The “page” metaphor breaks down fairly quickly when you start looking at the details.

One of the fundamental problems print designers have to grapple with is that there is a different set of design goals for the printed page vs the web page.
I would break down the design goals for the printed pages as follows:
1 – Effective Communication – via content and design of that content
2 - Layout the content in a manner that will render pixel perfect at a very specific set of dimensions.
3 - there is no step three

Compare that with our design goals for a web page:
1 - Effective communication – does the page answer the visitors problem
2 - Page is usable on all devices (any operating system, computer, phone, tv, other)
3 - Page is usable at all screen sizes (cell phone to 30 inch display)
4 – Page works in older browsers (and future browsers)
5 - Search engine friendly
6 - Downloads quickly
7 – Accessible for those with disabilities
8 - Text can be resized by user for readability
9 - Avoid frames or tables for layout (old techniques that interfere with the other design goals)
10 - No storyflow across multiple columns (don’t make the user scroll up and down)
11 – Page looks good in all modern browsers (Internet Explorer, Firefox, Safari, Opera)(and the ancient Internet Explorer 6)

Printed pages are pixel perfect and use a rigid design.

Web pages are multipurpose and require flexible design principles.

So, what’s a print designer to do?

Attend our Web Design For Print Designers Made Easy 1 day conference. You’ll have the web design process expained in print design terms – not coding jargon and you’ll see what exactly is required to make the transition to creating web pages as I create a web site starting from just a Photoshop layout.

In the print world, if you know how to use InDesign or Quark you essentially know how to create any document or page (with a couple caveats based on background knowledge like: placed images need the proper resolution, no accidental spot or RGB colors, etc). What you see is what you get.

Web design is different in that just knowing the Dreamweaver program does not allow you to make proper web pages. Or maybe a better way to put it is that there is much more required background knowledge before you will be able to build a professional, useful, successful web page. With that knowledge, Dreamweaver is a great tool for building websites but that background knowledge needs to come first.

What do you need to know before Dreamweaver is useful?

1 – You need to learn the rules for saving images for the web. Easy.

2 – HTML is how you get “stuff” on the page. You need to learn HTML and semantic markup (a fancy way of saying “tag things by their meaning, not their look”). It sounds like programming but it’s really not, it’s typing. You have to learn about 10 basic tags for HTML and then you’re up and running. You can get a working knowledge of HTML in a couple hours. Fairly easy to learn.

3 – You need to learn CSS (Cascading Style Sheets). This is, admittedly, the difficult part of web design. Everything you think of as “Design” is CSS on the web – from font control to page layout. CSS has to be created by hand by typing text to create a set of rules – you can’t use a tool like the frame tool InDesign to draw a box. This isn’t as difficult as it may sound – you only use about 20 CSS properties on a regular basis so that’s another 20 words to understand. But yes, CSS takes a while to learn because it’s really more about judgement and problem solving than learning some “code words”. And that’s why when people ask me “Why isn’t there a program where I put stuff where I want it then makes a web page for me?” I have to tell them there isn’t a program like that because the act of laying out a web page involves creativity, judgement and problem solving and no program can do that for us (yet).

Acceptance that web design is not done the same way as print design is the first step.

We have 3 web related classes:

In our Standards-Based Web Design class we use Dreamweaver as we learn the 3 topics above and we create websites at the highest level of professionalism – what’s known as “Standards Based web design” – This class has my strongest recommendation.

We do have a Dreamweaver specific class that teaches all the “parts” of Dreamweaver but it is for people who are part of a team that already uses Dreamweaver and that person is not responsible for creating pages but maybe updating them or doing a couple specific things using Dreamweaver. Recommended only for special cases.

We also have a class dedicated to Creating HTML Email - even though they may look the same, the rules are completely different for web pages and email HTML pages. This class uses a very specific subset of Dreamweaver’s tools along with Photoshop.

By booking your classes by the end of next week we’ll help you use up your budget before the end of the year and save money by honoring 2007 rates for all classes booked in the first quarter of 2008.

We’ll even come to you! Our instruction for up to 4 hours of on-site training for up to 6 people is only $850.00* and for up to 9 hours of instruction is only $1400.00*. What if you don’t have a training room? You can also rent machines from us and we’ll set them up for your staff’s use during the training! (*plus travel if you’re more than 30 minutes away).

And don’t forget, all of our instruction comes with a reference textbook & follow up support from our Certified Instructors.

We currently have the following days open for your on-site, custom training – just contact Tiffany (that would be me) to arrange your class!

Photoshop/Illustrator Instruction:
December 17 December 19 December 27 December 28
January 2 January 3 January 4 January 9
January 10 January 16 January 17 January 23
January 23 January 24 January 30 January 31

Quark/InDesign Instruction:
December 17 December 20 December 28 January 2
January 3 January 4 January 8 January 11
January 14 January 15

Flash/Dreamweaver Instruction (including Actionscripting 3.0!):
December 28 January 9 January 11 January 18
January 23 January 24 January 28 January 29
January 30 January 31

Video Instruction:
December 19 December 20 January 2 January 3
January 4 January 14 January 15 January 16
January 18

And don’t forget about $5.00 Fridays! January 18, in conjunction with Studio Two, we’ll go over tips & tricks in deciding whether or not to use stock photography vs. original and we’ll show you time-saving trips for color correction & retouching. Get more information.

Did you miss the How to WOW with Direct Mail $5.00 Friday in October? We’re having round two on February 22. We ran out of space last time, so get your seat early.