Have been learning lots of new web technologies lately, including HTML5, CSS3, cross-browser font support, the 960 grid system, and a couple of JQuery plug-ins. I have browsed and perused many a web site in search of tutorials and info needed to learn these new web goodies…and found some very useful sites amidst of a lot of bad ones. I am including them here in hopes of saving you time in your quest to learn some of these new technologies.

HTML5 and CSS3

HTML 5 is here and is quite easy to learn. In particular, HTML5 allows you to specify form functionality that previously required JavaScript. Here is a link on creating forms in HTML5 that I found useful:

Improve your forms using HTML5

And I am absolutely loving CSS3 and the ability to round borders, add text shadows, use two backgrounds for one element, etc. IE currently does not support CSS3 but IE9 will. Due to various levels of browser support, some of these nifty CSS3 changes can be a bit code-intensive, but hopefully as more browsers get on board, this will eventually change.

This is a comprehensive tutorial on designing using both HTML5 and CSS3 without using images…my favorite of all I’ve seen on this subject so far.

Building a HTML5/CSS3 Website Layout Without Images – Part 1

Cross-Browser Web Fonts

Also supported in CSS3, this feature enables you to use a wide variety of True Type Fonts (TTF) for your web sites and not be limited to the few standard ones that most browsers recognize. Basically you download the font (making sure you are not infringing on copyrights) upload to your server, link that font in your CSS. This works in most browsers, although a separate EOT format is required for IE (of course!) Cross-browser fonts links are supported in Chrome 4 but not Chrome 3.

Here is a good site on this:

Expand Your Font Palette Using CSS3

This is also addressed in the site referenced at Building a HTML5/CSS3 Website Layout Without Images – Part 2

and includes a helpful chart on browser support for font-face support.

960 Grid System Mockups

There are several CSS frameworks out there useful for designing and developing sites using a grid system. I like the 960 Grid System. It is a bit rigid and takes a bit of changing some of your coding habits, as you cannot add margins or padding to the block elements themselves or the grid will break. There are a number of sites out there showing how to design a mock-up using the 960 grid system. I found these two especially helpful:

Design a Clean Web Layout with the 960 Grid – fairly simple

Design A Fresh Blog Theme On The 960 Grid – more advanced

Here’s another more advanced mock-up, which I haven’t tried yet, but hope to soon:

Design a Beautiful Website From Scratch

Coding using the 960 grid system.

It was harder finding a good tutorial that actually helped you code the 960 grid system. Here’s one I found that is pretty good. If you know of any others, I would love to hear from you!

Prototyping With The Grid 960 CSS Framework

IE6 Fixes

And I would be remiss if I didn’t include this site on listing some common fixes for IE6. If you are like me and have fought many battles with this ancient browser and just can’t wait till it goes away, check out this link for some standard fixes for IE6, which ought to make your life as a web designer just a little easier.

10 Fixes That Solve IE6 Problems

Update – 8.23.10

A couple more links to some great design tutorials, some for the 960 grid system:

35 Tutorials for Creating Website Layouts in Photoshop

40+ Greatest Web Interface Design Photoshop Tutorials, Part I

Have tried several of these and found them to be very helpful for upgrading my design skills.

At some point, I would love to design a site for a medical or dental office. I have already designed a site for a massage clinic at karuna-massage.com.

I would love to do something more artsy as well, such as a gardening site. This is one my favorite sites because its so clean and simple, yet visually appealing: reallywildflowers.co.uk

Visit drkdesign.com to view all my web design work and find out more information about my web design and content writing services.

So to hopefully save you a little time and frustration, here are a few plugins I am using that I’m very happy with:

Contact Form 8 – This contact form is easy to set up and fairly easy to customize.

Exclude Pages from Navigation – Frankly, I’m surprised this isn’t part of the basic Word Press page setup. If you want to set up a page to link to from your sidebar or another page, but don’t want it included in the top-level menu, you can just uncheck a box that says “Include this page in user menus.”

Collision Testimonials – I had to go through several Testimonial plugins before finding this one, which lists a random testimonial or reference in your sidebar and changes from page to page. This plugin also allows you to create a page with all the testimonials listed. The only thing it doesn’t have is a “View More” link after the testimonial in the sidebar which takes you the full Testimonial page.

NextGEN Gallery – this is an awesome gallery and extremely easy to set up. Gone are my days of setting up galleries manually or using third party services such as Jalbum. This plugin enables you to click a button from the function bar above your page, and voila…you get thumbnails and a gallery/slideshow of your photos. Couldn’t be easier.

NextGEN Resize - a companion to the gallery that automatically resizes oversized photos.

Calendar – a simple plugin that allows you to specify events for a specific date and displays them in your sidebar.

Quick Subscribe – this adds a field for visitors to subscribe to your blog using their email.

Redirect – redirects a page to another page within the site or an external link. This is useful for when you don’t have any content for a top-level page and want to direct visitors directly to the submenu pages.

I will add more as I find them. I hope you will find these useful.

My interest in WordPress was piqued after looking at the new site for Figure Skaters Online, the umbrella site for websites that I design for U.S. champion figure skaters. The webmaster gave the site a complete face lift with a ton of added functionality to satisfy fans of the upcoming Winter Olympics in Vancouver, Canada.

For those non-designers or coders who just want to set up a blog, WordPress offers an intuitive graphical user interface. Designers and coders who want to delve in more deeply can use WordPress to set up complete web sites and e-commerce stores.