• Responsive Design 1 – CSS Tricks
• Responsive Design 2 – cacaotour.com
• Responsive Design 3 – Boston Globe
• example WordPress Theme

Responsive Design Features

• Responsive Design by Ethan Marcotte

Media Query support and shims

• Media Query Support by Browser Version from caniuse.com
• javascript shim to add basic media queries to IE6,7,8
• IE First?!
• Mobile First
• Frameworks to look at: Bootstrap, 320up, HTML5 Mobile Boilerplate, gridless

Miscellany

• great overview of Responsive Design
• Fluid embedded videos for Responsive Design
• Elastic Video
• The arguments against Responsive Design

Must Reads for Advanced Users

• Best Article on Responsive Images on the web
• Pragmatic Responsive Design
• Server-Side Techniques

The cool thing about this badge- it is available as a downloadable PSD file that you can customize with your own photo. (I even included a conference button for you!)

You can read more about it or download the avatar to show your support for Photoshop World here.

Kevin

One of the big announcements made during the Day 1 Keynote was the new Adobe Touch apps. These apps will expand your creativity using tablet devices. Many of these apps will utilize the new Adobe Creative Cloud also announced during the keynote. I will focus on each of these apps as more information becomes available. The apps will be available on Android devices first, followed soon after on iOS.

Adobe Debut allows you to view and present your Creative Suite files from the cloud on your mobile device. Users will be able to access native Photoshop, Illustrator and InDesign files including comps and layers!

Adobe Collage allows you to combine images from the web (Google Images), cloud files and other sources to create a “Moodboard” (collage). You can also add type, scale and edit your images using built in tools.

Adobe Kuler finally comes to mobile devices, allowing you to create and share a color theme with other users both through the app and the existing Kuler website.

Adobe Proto allows users to develop interactive wireframes and prototypes including multitouch features directly on their tablet device. With simple tools and a “Gesture Guide” you can easily design a user experience in real-time as the client explains their idea to you.

Finally, is my favorite – Adobe Photoshop Touch. Yes that’s right, Photoshop on your tablet. Levels, Curves, even Layers will now be available on your tablet via this awesome app. Not only will you have many more tools and options at your fingertips, but you will also be table to roundtrip files directly to your Photoshop application on your computer.

So very exciting times are coming from Adobe and I can’t wait to share insights and overviews with you. Stay tuned!

Thanks to the folks at NAPP and Photoshop World, I have published a PDF guide for attendees of Photoshop World in Las Vegas. Check out the link below to view the PDF.

Photoshop World Blog

Download An Insider’s Guide to Photoshop World

This year’s event featured hands-on workshops the day before the actual conference with John Farrar, Pariah Burke and Dave Hogue. I wasn’t able to attend because my colleague A.J. Wood and I ended up on NBC Action News promoting the conference. Here’s AJ behind the scenes and below is the clip:

Day 1 kicked off with the keynote address given by Paul Trani, Adobe Flash Platform Evangelist, showing off some voodoo magic: importing Flash to multiple devices (including iPad), all controlled by one mobile device. Very exciting and a preview of things to come.

Here’s a sneak peek at another piece of cutting edge technology. My understanding is it’s called a “can” and it helps when you are projecting off multiple devices. (ha ha!)

Speakers this year covered everything from Frameworks, Ajax and jQuery to InDesign, Fireworks, mobile apps, and design. The attendees I spoke with during lunch seemed very impressed and inspired by the depth of knowledge presented at this conference.
My session took place on Day 2 and lead into the Ending Keynote. I covered Adobe Photoshop CS5 (of course) and my workflow. Here is a shot of the session (courtesy of  A.J. Wood):

Wrapping things up this year were Tom Green (no, not THAT Tom Green!), Adobe Educational Leader and all-around Canadian treasure, and Jim Babbage, a recent Adobe hire as Solutions Consultant. Not only were they insightful, taking a design from FW to DW and Catalyst, but also very entertaining.
Overall I feel that this conference is a huge success and a must-attend for anyone from either side of the fence – developer or designer. The power of the speakers and information provided is some of the best I have ever seen. Later this week I will be posting highlights and resources covered in my session.

Straighten

The straighten feature now allows you to instantly straighten and crop an image based on the ruler tool (found under the eyedropper). Simply drag your ruler along a horizon line or other reference and then click the “Straighten” button (now found in the options bar). Boom! Instant straight and cropped image. But wait! You say you don’t want it cropped? No problem. Undo once and the uncropped image appears.

Sharpen Tool

The sharpen tool has long been a tool to avoid in Photoshop, causing color noise and over-sharpening issues in the past. Now the tool has been “reformulated” to better serve your sharpening needs. Simply use the tool with the “Protect Detail” option checked in the options bar and adjust your strength accordingly. It is now easier to control and gives you better results.

On-Screen Brush Adjustments

Since I do a lot of retouching, this has become one of my favorite enhancements. You can now visually adjust the size of your brush on screen using your mouse. On a Mac, hold Ctrl+Opt and drag left/right to change the size and up/down to adjust the softness. On Windows, hold Alt+Right Click again, dragging the mouse to adjust.

Heads-Up Display Color Picker/Sampling Ring

Another great feature added to CS5 is the combination of the Heads-Up Color Picker and the eyedropper Sampling Ring.

The HUD Color Picker is activated by holding down (Mac) Ctrl+Opt+Cmd or (Win) Ctrl+Alt+Cmd and clicking on the image. The default picker is “Hue Strip” shown on the left, but you can also change to another option, the “Hue Wheel” shown on the right:

To change your version, simply go to your General Preferences and at the top of the dialog box is a pull down for your HUD Color Picker.

There are many other features inside of Photoshop CS5 from the JDI program, including layer enhancements and other little gems, but that is for another post. Exploring and familiarizing yourself with all the JDI enhancements can greatly improve your Photoshop experience. Enjoy!

This year will be my overall 5th year at Photoshop World (4th in a row) and I have been honored to be a guest blogger for the event this year. Check out my post at the Photoshop World Blog. While you are there, check out the events and register to attend the MUST SEE Photoshop Conference in the world.

C2 is a rapidly growing, innovative and energetic firm based in Milwaukee’s Third Ward, with an established Madison presence. We provide design software training (only Adobe Authorized Training Center in WI) and creative staffing services to a wide range of clients including advertising agencies, design, marketing and PR firms, as well as in-house creative departments for larger organizations. A family-owned business, C2 believes success can be combined with a comfortable, flexible work environment. Our culture reflects that of our clients: fun and funky, with a purpose.

We take pride in our active membership and participation in Madison & Milwaukee’s creative community through our support of professional organizations like AIGA-WI, BMA-Milwaukee, Creative Alliance MKE, Design Madison, AAF-Madison, United AdWorkers, MIMA and WPPC. C2 also hosts and provides speakers for quite a few meetups and user groups. So many in fact, we had to blog about it!

Position overview:

C2 currently seeks a dynamic, self-motivated business development professional, a hunter, if you will, who will help C2 continue to build relationships with new and current staffing and training clients throughout southeastern WI.

The right person will manage business development activities and provide some account management for placement of creative professionals (web and graphic designers, production artists, marketing and public relations professionals, copywriters, art directors and creative directors, etc.) and for our software training clients in Milwaukee, Madison, Sheboygan, Kenosha and all parts in between.

Scope of responsibilities to start:

• 40% new business prospecting/establishing relationships–day/evening networking, C2 sponsored events, client visits, outbound calls, connecting via social media, coffee, lunch, etc.
• 40% account management/relationship extension and penetration–see above plus inbound calls, exit interviews with talent and clients,
• 20% administrative functions–using CRM to track contact with prospects, existing clients, etc.; measuring actual performance with internal metrics

About you:

The future member of the C2 family loves people, networking, building relationships and the hunt. The right candidate is kind, friendly and disciplined, has a well developed sense of humor, works comfortably both independently and as a part of team.

This position requires a process-driven work ethic, dependability, attention to detail and consistent follow-through. Ideal candidates have an established network and can effectively connect within the design community. We will consider applicants with B2B sales experience in the staffing industry or the graphic design/advertising/marketing/creative industry. Candidates with experience in both staffing and the creative industries will knock our socks off!

• 3+ years consultative selling experience in staffing/custom service or creative industry
• Successful track record of identifying, developing and closing business, and maximizing all opportunities
• Comfort with metrics-driven sales culture and outside sales
• Ability to identify, qualify and address client challenges with speed and scruples
• Dynamic entrepreneurial spirit and influential communication style
• Demonstrable strategic, organized, solution-based selling skillsSelf-starter with the initiative to effectively build and execute a sales territory/plan
• Bachelor’s Degree preferred, with emphasis in business/marketing/communications
• Must be more than computer literate…ideal candidate is proficient or savvy with Mac or Windows OS, social media properties (LinkedIn, Plaxo,  Facebook, Twitter), Customer Relationship Management software, MS Office, email programs, smart phones, etc.

Compensation & benefits:

C2 offers a fun, flexible work environment, healthy base + commission, a competitive benefits package-including health/dental insurance & FSA, 401K, smart phone with data plan and more.
How to apply:

If this position sounds it was tailor-made for you, go to C2′s talent application portal, http://www.c2gps.com/be_talent.html to start the online application. You’ll be prompted to select skills. Please select Account Executive from the drop down box and an accompanying self rating. You may select other skills that reflect your capabilities, but understand any software skills selected may prompt an electronic pre-screen. You’ll then be asked to provide brief descriptions of your expertise and background. Finally, you’ll be asked to upload your resume and any other information you’d like us to have.

What is D2WC? I’ve been asked that question many times, so I thought I would give my own personal insight into the importance of Designer/Developer Workflow and also speak a little about the conference itself.

In the past, there was traditionally a “wall” between the “designers” and the elusive “developers.” The designer would come up with an amazing design that would shake the media to its core, then pass it off to the developer who would try to bring it to life. Or a developer would come up with a great idea for an app or site that would give the client all they would need and would then have the designer create artwork to fit inside the wireframe. Needless to say, communication between these two artists (I call developers artists as well because let’s be honest – the things they do with code is a work of art at times) could be – no – must be better.

Thats where the D2W Conference comes in. With the stellar lineup of speakers including Tom Green, Seb Lee-Delisle, Paul Trani, Rob Huddleston and more, you will learn to break down the barrier between designer and developer. As a designer, you can learn how to take your designs further down the pipeline using Adobe Fireworks or Flash Catalyst, or learn HTML terms and lingo to help better communicate with your developer. As a developer, you will be exposed to the cutting edge of UI, UX, AJAX, Flex and more to bring complex designs to life and closer to the original design. Not to mention there will be topics covering mobile, communication, social media and more.

All of this is packed into two full days of sessions (July 15th & 16th), and with the optional day of hands-on training (July 14th) this conference is sure to make you a more effective part of your designer/developer team.

As a bonus, I have a code for readers of the C2 100% Fresh Blog to get a $95 discount on the regular 2-day conference registration. Use the code speakerGuest when registering.

The conference takes place in Kansas City, Mo. If you are thinking to yourself, “Wow, KC is too far for a conference,” think of it this way – a direct flight round-trip ticket is cheaper than driving these days!

For more info or to register go to www.d2wc.com

Recently we were invited to host a NEW user group, the MobileMKE group, which will focus on design and development for the smaller screens. At their inaugural meeting on Tuesday, April 26, a raucous group of coders and web designers hammered out future meeting topics and format to make the most of the meetup.

May 17 the Milwaukee Web Design Meetup comes to C2 to talk about microformats. Join us!

Other regularly hosted meetings:

Madison Web Design & Development Meetup
Drupal414
MoGraph Meetup
Milwaukee Adobe User Group
Milwaukee Graphic Design Meetup

Occasional guests:

PHP Meetup
Web414

Groups who invite C2 instructors to speak at their meetings:

Madison InDesign User Group
Madison Adobe User Group
Milwaukee InDesign User Group
Spreenkler Meetup

When we here at C2 say that we provide full service support for the creative industry, we mean it!

Well I’ve asked some Adobe folks to help explain what is going on and why we are seeing a mid-cycle update. (Kidding, they didn’t do these just for me!)

Here is Adobe Senior VP Johnny L. explaining why we have CS5.5:

There are several new features in CS5.5 but the main products affected are:

InDesign – with new digital publishing powers

Dreamweaver – with HTML5 and Mobile Authoring enhancements

Flash Catalyst v. 1.5 – resizability support, wireframing and prototyping enhancements

Premiere Pro - faster editing tools, multiscreen delivery

Flash Professional - improved mobile app development

(Also CS 5.5 will ship with Acrobat X)

So as you can see the main focus of the .5 update is Digital Publishing and Mobile App Development.

Photoshop, Illustrator, Bridge and other apps remain the same – there are no .5 updates.

“Do I need to buy this? Is CS5 outdated?”

The answer is simple – if you are developing mobile apps using Adobe products or designing print documents that you wish to publish to ePubs or tablet devices, then you should seriously consider upgrading to CS5.5. If you don’t do either of those it’s probably not a necessary purchase.

The Biggest Change in Creative Suite

With the announcement of CS 5.5, Adobe also released information about a new program for CS users called Subscriptions. This means that you can “lease” any Creative Suite product for as long as you need it instead of purchasing the entire package at full price.

Click HERE for a great FAQ regarding Subscriptions.

TO APPLY:

Go to http://www.c2gps.com/be_talent.html

Follow directions for completing pre-screens and submitting your resume and samples (or URLs)

Questions about the position? Call Erica 414-431-0062 or go to http://www.c2gps.com/contact_us.html

Finn Digital seeks Interactive UX Design Lead

This position is responsible for designing and producing the interactive visual and overall user experience for all projects.

Primary areas of media will include:

• internet
• mobile
• barcode
• email
• interactive games
• motion graphics
• video
• tradeshows

About you:

3-5 years of experience in similar role

Passionate about motivating creativity and innovation

Experience planning and creating project strategies and concepts

Motivated, disciplined and organized to produce and achieve in a collaborative, team-based environment

Personal drive to experiment with and learn and own new media or skill sets

Ability to accurately estimate hours/effort for projects

Ability to positively provide and receive constructive contributions in a collaborative, team-based environment

Ability to educate co-workers and clients

Abreast of technology and design trends, tools and techniques

What you’ll do:

Develop wireframes for user experience design and information architecture using best practices

Develop multiple visual styles for a given project or prospective client

Present, review and discuss your design direction with clients

Creatively present design concepts and PowerPoint/Keynote media

Design for consumer and business-to-business audiences

Assist in front-end production, HTML/CSS/JavaScript

Understand basic development principles and ability to work closely with development team

Maintain a strong, consistent visual style for outbound communications

Assist in continual refinement of design and production workflow

Manage occasional outsource design production

Co-present in new business pitches

Your environment:

Mac or Windows environment available

Your own office

The perks include:

Competitive Salary, Health, 401k, Flexible Schedule, Parking, Professional Development, Monster Energy Drink, Stone Creek Coffee, Wii, Xbox 360, Downtown Milwaukee Location and…motivated, sharp, down-to-earth, easy-to-work-with co-workers.

When you click “Open” an import dialog box will appear. This will give you several options, including document size (which is based on your existing .psd settings), resolution (remember 72 ppi for the web!) and layer options. You should always choose “Maintain Layer Editability Over Appearance”  as this will keep your existing layer structure including text layers.  I also prefer to import my guides. Now, if you created a multiple version file using Layer Comps, you can also choose which Layer Comp you wish to import.

When your .psd file opens, you will notice that you have all your layers separated out in the proper order in the Fireworks Layers Panel. Two things to note- there is also a new Layer Group/Folder above your layers called “Web Layer” which is necessary to allow web actions  and your text is still editable so you can modify if needed.

Next time we will start to populate our website pages using Master Pages and talk about States.

On Tuesday, March 22nd I had a presentation at the WPPC all about publishing to the iPad. During my presentation I mentioned a series of links to various online publishers who can help you transform your InDesign layout into a application for the iPad and other tablets. As promised, here are the links that I mentioned in my session.

• Adobe Digital Publishing Suite
• Meri Media
• Press Run
• Roving Bird
• Aquafadas
• Woodwing Software

We are using our 995 x 768 px document as described in Part 1. First, I am going to add in a background color (white) on my Layer 1 and rename it background. I prefer to do this method or you can turn your white background layer into a traditional layer by double-clicking the background layer or dragging the lock icon to the trash in the Layers Panel. White will be temporary but will allow you to see the guides before we change to the final background.

Next, I am going to establish some guides for the design. Based on my sketch, I know that I want a title area at the top and some navigation on the left, leaving me a large content area on the lower left portion of the page.

Next, I am going to bring in all my graphic assets. As you add layers it is imperative that you name you layers – no exceptions. This critical step means the difference between effectively working in Fireworks or wasting time trying or organize after the fact.

I used the rounded rectangle vector shape tool to create some placeholders for buttons that I will be adding later in Fireworks. I also kept my text layer live and did not rasterize it. No need to because Fireworks will keep it live. I am also making sure that my background image does not go beyond the edges of my document. I do not need to waste the file size on unused parts of my image and also I don’t intend on moving it around.

Notice that I did not add any content beside my image and title to this page. I intend for this to become a master page in Fireworks, allowing me to distribute certain assets across all my pages. Any additional content from here on out will be handled in Fireworks.

So our next step is to import into Adobe Fireworks, but that is going to have to wait til Part 3.

In Part 1 we will be talking about setting up your project.

To start, we need a design and a site map. Something on paper that we can refer to and use as a guide as we start out with out new website. Not having a design in mind beforehand can lead to inconsistent user experience and poor implementation of your design. If you can’t think of a good design, start by coming up with a list of what you want to include in the site (or use your client’s list) and create a site map. For our site, I am going to want a homepage, contact page, about us page, portfolio page and links page (which may or may not be included on the about us page depending on the design).

Based on that is the design and site map I sketched out:

Next, open Photoshop. The reason we are starting here is many people are familiar with Photoshop and it’s interface and tools. This is a great way to get started – use something you already know. If you are not that familiar with Photoshop or are comfortable using Fireworks, you may also design it in there as well. The overall principles are the same.

Go to File>New. In the new document dialog box, we are going to start with the Web preset of 1024 x 768 pixels. However, we will need to customize the size. The width will be adjusted to 995 pixels.

The reason for this size is even with a widescreen/cinema display a web page needs to take into account scrollbars and other browser interface items that will reduce your active web page size. Think of it this way – you never really work on a document in Fullscreen mode without toolbars and panels – same thing with viewing a webpage. You don’t hide your browser window to fit a page fully on screen.

The other option we are going to change is to leave the background transparent. We will add in a background color later and it saves us a step to already have the background on it’s own layer.

In part 2, we will be implementing our design in Photoshop to create a template for the pages.

Here are some of the sessions that I will be presenting:

From InDesign to the iPad and Android Apps
Wired, the New Yorker, Time, and Esquire are all doing it… Learn how you can you get your content out of InDesign and on to the iPad. What solutions are currently available? What’s coming down the pipeline?

Let’s Talk PDF: Best Practices for PDF Workflows
There’s PDF and then there’s PDF! Learn the best practices for making efficient, print-ready PDFs on Mac and Windows.

• Export vs. Distill
• Tweaking PDF export presets for optimum output
• What to do when the printer says “convert type to outlines”
• PDF/X1, 3, and 4 – why, when, where, who, and how!

InDesign Beyond Print: Interactive PDFs, SWFs, and iPad and Tablet Apps
InDesign is the world’s best layout tool, but that doesn’t mean only print layout! Learn how InDesign makes it easy to create interactive PDF files, SWF (Flash) files, EPUB documents, and iPad/Tablet apps.

• Building presentations
• 5 Keys to a successful EPUB export
• Building navigation links efficiently
• Making smaller and faster interactive PDF files
• SWF vs. FLA from InDesign
• Building apps for iPad and Android

Starting next week I will be publishing a step-by-step guide on creating a web prototype in Fireworks. Keep watching for part 1: How to set up your document!

Fireworks Handout

Also, I am announcing the D2W Conference is back again this year with another great line up of Designers and Developers (D2) showcasing Workflows (there’s the W) to help you become a more effective web guru.

I will be returning this year with a session on Web Prototyping with Design Premium. My session will feature how to take your web designs from Adobe Photoshop and Illustrator and create interactive comps using Adobe Fireworks and Flash Catalyst. A great session for designers!

This year’s conference will also feature some really big names including Justin Seeley, Tom Green (with whom I have accepted a “skee-ball deathmatch” challenge), Paul Trani, Doug Winnie, Rob Huddleston, and more!

The conference is in Kansas City on July 15-16 with several in-depth hands-on pre-conference sessions on July 14. Find out more at www.d2wc.com .

January started out with the 10th anniversary of Adobe InDesign (the real date was in March but we all celebrated early!) followed up by Adobe releasing “The Future of Publishing”. This was the first public announcement of Adobe partnering with magazine publishers, such as Condé Nast to bring printed materials direct to digital media using the Creative Suite.

February also had a birthday with Photoshop turning 20 years old. Scott Kelby and the crew from NAPP celebrated with a live presentation featuring Adobe’s Sr. Art Director Russel Brown taking us through the history of Photoshop in his own unique and entertaining way.

March roared in with a lot of CS5 sneak peeks from the Adobe team. None more exciting than “Patch Match” or as it has become known as today – Content Aware Fill.

April. Apple denies Flash on their mobile products via their developer agreement terms. Hence begins the fight between Apple and Adobe. “I Heart Flash”, “I’m with Adobe” and other grass roots campaigns start up on social media sites. Adobe places a full-page ad in newspapers taking the high road in the dispute.

May 1 was the official launch date of Creative Suite 5. After hinting at advances in digital media and publishing technology, the day was finally here. C2 launched CS5 in a big way with live events in Milwaukee and Madison. The word was out and people were impressed with the improvements.

June featured the Designer/Developer Workflow Conference and Love Your Photographer Week. It also brought us Flash 10.1 for mobile which improved runtime and bloat on mobile devices. Still not on iPhone or iPad…

July flew by with presentations by Jim Conway on HTML 5 and my manifesto on why you should be using Adobe Fireworks for your prototyping. July also brought us several new C2 Mini-Courses. These 4 hour courses are designed to maximize your time with targeted topics, such as Photoshop Retouching and PDF Forms with Acrobat.

August brought us a major update to the Photoshop.com site and Photoshop Express for mobile devices. Speaking of mobile- Droid, HTC and other mobile companies announced their addition of Flash Player 10.1 on their OS. August also ended with Photoshop World – the national convention for Photoshop professionals.

September was the launch of Photoshop and Premiere Elements 9. This was the first time both were available on Mac and Windows platforms. Pixel Bender along with a slew of updates came out.

October will be remembered for the Rally to Restore Sanity and/or Fear. Kidding.  It will be one of the biggest moments of the year- Adobe MAX. If you haven’t seen the keynotes from MAX (there were two) you really are missing out. Day 2 was far more entertaining, but both were focused on the future of media and how Adobe will take you there.

November. iPad. Finally. After some legal woes, Apple releases their Developer restrictions for the iPad, which allows Adobe to reignite it’s focus on taking print further. As previewed in the MAX keynote a month before, a new set of tools were announced to help designers take their ideas further than ever before.

Martha Stewart Living on iPad

And now here we are in December. Looking back, there were a lot of things that we will remember in 2010 besides changes in our industry. But hopefully this retrospective will help you re-ingite your creative spark and curiosity for what is coming around the next corner.

Happy New Year everyone!

First, go to your File>Scripts menu. Here you will find a plethora of Layer options.

One of the top questions that I am asked is “How can I separate my layers into individual files?”

In the Scripts menu you can use Export Layers into Files.

Also under here you will find Delete All Empty Layers, Flatten All Layer Effects and Layer Comps to Files. All priceless.

Enjoy!

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://html5advent.com/

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/

CSS3

http://css3please.com/

http://www.fontsquirrel.com/

http://www.alistapart.com/articles/responsive-web-design/

Some Favorite jQuery Plug-ins

http://jquery.malsup.com/cycle/

http://flowplayer.org/tools/index.html

http://nyromodal.nyrodev.com/

Use HTML5, CSS3 and javascript to make native applications

http://www.phonegap.com/

http://www.appcelerator.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