SXSW Interactive Part 4: HTML5 and CSS3

Posted on: Mar. 24, 2010  |  By: Lisa Holmes  |  Category: Technology
Tags: CSS3, HTML5, SXSW

Sessions attended: “CSS3 with HTML5″, “Is Canvas the End of Flash”, “HTML5 Accessibility”
Twitter hashtags: #css3designhtml5 #canvasendflash #html5accessibility

Keeping up with the latest technologies is an ongoing part of a web designer’s job. Currently in the works are new features that will be available through the use of HTML5 and CSS3. While not all of the new features are currently supported by most browsers, there are some elements that can be used now. (see the Summary of Browser Support link below)

• video and audio file embedding: will simplify adding A/V content to your website with a simple embed tag. This is reported to be the most exciting change for 2010.
• animation: yes, animation without Flash or the need for a plug-in.
• rounded corners: a great alternative to creating graphics for rounded corners on boxes and tabs
• multiple background images in one element: provides greater design flexibility while eliminating the need for extra code to nest elements for using more than one background image
• multiple columns for text: while multiple columns do currently exist on websites, there is no way to wrap text from one to another seamlessly like this new feature will allow. Look for more magazine-type layouts to emerge with multi-column layouts.
• drop shadows for boxes and text: no more graphic files for text and boxes with drop shadows!

CANVAS AND FLASH

Canvas is an element in HTML5 that allows for controlling graphics through javascripts. Since it is seamlessly integrated with the browser, it does not require a plug-in and is viewable by mobile devices. Compared to Flash, Canvas renders fast and has good performance in the browser. Good applications for Canvas include simple animations, building graphs, games, and image composition. While Canvas is supported by the latest versions of Mozilla Firefox, Google Chrome, Safari, and Opera, it is not natively supported by Internet Explorer.

Flash is a very rich interactive tool that has been in use since 1996 and has an installed user base at approximately 95%. Flash has a toolset advantage over Canvas since it is a graphics-based program that easier for designers and artists without programming skills to use. However, since the introduction of the iPhone, and now the iPad, a disadvantage of using Flash is no support on either device. How will Flash be implemented in the future? While it was suggested that the next Creative Suite include a “Flash wrapper” for use on non-Flash supported devices, another idea is the creation of a tool that outputs HTML5, CSS and javascript from Flash-like files.

The next year promises to be an interesting one for both Canvas and Flash as we see what develops for each, especially where smart phones and mobile devices are concerned since this is becoming a bigger part of the market everyday.

More info:

• WC3: World Wide Web Consortium
• Summary of browser support for HTML5 and CSS3
• 22 Handy HTML5 and CSS3 Tools, Resources and Guides
• HTML5 Doctor
• Yes, You Can Use HTML 5 Today

• Subscribe

  • RSS Feed
  • Subscribe by email

• Search

• Categories

  • About Us
  • Content
  • Graphic Design
  • Marketing
  • Our Projects
  • Sustainability
  • Technology

Tags

A/E/C AIGA AIGA Portland blog CD clients CMS Community content design economic development Flash Graphic Design green design illustration infographics inspiration Interactive interactive infographics Kansas City living principles map design Marketing marketing communications multimedia optimization planning Portland Print Communications pro bono RSS SEO social change Social Media strategic marketing Sustainability SXSW techniques Website Design WebVisions WordPress workforce writing yulan Yulan Studio

• Archives

  • 2012
  • 2011
  • 2010
  • 2009
  • 2008
  • 2007