Plone advent calendar: HTML & CSS in 2010

The Japanese Plone community asked me to post an entry for the final entry of their advent calendar.

¹ If you can read Japanese, the Plone advent calendar can be found here. Since there has been a lot of Plone-related posts in the advent calendar¹ so far, I thought we’d go back and look at the new landscape of web development that has emerged in the last couple of years. It is a good time to teach yourself something new, or just dig deeper into the technologies you work with every day.

Most of us learned HTML and CSS the piecemeal, iterative way — we found our way around the standards as part of various projects, and gradually got better at it. Especially those coming from a coding background found it easier to not properly teach ourselves the “front-end” of web technologies, and often learned through copy & paste programming.

The browser world has come a long way since I taught myself the basics back in 1996 — and sometimes I forget how far we have come since then. Internet Explorer came and went, and the open web triumphed. Designing a site in 2009 that has no special support for IE6 is actually a feasible idea, something that seemed very remote just a few years ago.

So if I had to start teaching myself web technologies today, I would start with the following articles — which should be a good starting point even if you consider yourself a seasoned web developer — the web is very different from what it was just a few years ago:

• Dive into HTML5 — you can use HTML5 features, today. Excellent guide from Mark Pilgrim, still under development.
• Why Programmers Suck at CSS Design — a great, entertaining primer on CSS for everyone.
• CSS Techniques I Wish I Knew When I Started Designing Websites — a good list of stuff you still have to know about when it comes to CSS.
• Make Your Mockup in Markup — are you still designing web sites in Photoshop? Think again.
• jQuery Tutorials — every site uses JavaScript to enhance the user experience these days, and jQuery is a vital tool in your belt. Great for both quick prototyping and large-scale web sites.
• Teach yourself a grid system for layout — I of course recommend the Deco Grid System (which is part of the upcoming Plone 4 and 5 releases), but any grid system will do if you prefer others. Deco is just easier, less weird, and light-weight.
• Finally, two useful tools for designing and prototyping web sites: Mockingbird for creating wireframes, and Color Scheme Designer for the æsthetically challenged among us.

Hopefully, these links can teach you something new and exciting for 2010.

Happy holidays, wherever you are this time of year! With the final release of Plone 4 out soon, and Plone 5 development well underway, 2010 looks to be Plone’s best year yet!