Flash is often referred to as if it’s an all or nothing proposition. In fact HTML and Flash play together very nicely, and even without specialized knowledge it is possible to leverage the power of Flash to spice up your HTML sites.

sIFR is the Flash ‘widget’ that has gained the widest acceptance by the wider web design community. In a nutshell sIFR is a JavaScript/Flash tool for replacing boring HTML headings with Flash text, which can be rendered in any font you please. This ingenious technique makes complex typographic control in HTML sites a reality rather than a pipe dream. What makes sIFR so appealing is that it doesn’t sacrifice accessibility or pollute your HTML markup, and visitors who don’t have the Flash player will still see the regular HTML text.

Using the same principle, swfIR allows you to apply a bevy of visual effects to any image on your website. Drop shadows, rounded corners, rotation and borders can all be added to an image as it loads.

While sIFR and swfIR enhance HTML content for visual appeal, one of Flash’s great strengths is the ability to add multimedia playback to a site. MP3 playback in Flash has been possible for quite some time, and more recently Flash has proven itself to be a big player in online video too, as the success of YouTube testifies. Probably the most powerful embeddable Flash multimedia player is Anarchy Media Player, which can play back MP3 and flv (Flash video) along with a host of other formats.

Another area where Flash shines is creating photo galleries and slideshows. Undoubtedly the slickest Flash photo gallery application is SlideShowPro (http://www.slideshowpro.net/), although it costs $25 and requires the Flash authoring tool. Another good option is MonoSlideshowPro, which doesn’t require the authoring tool.

As you can see, with a little know-how even a novice can use Flash to add complex interactivity, multimedia playback and eye candy to their sites, without having to forego the many benefits of HTML.

Those of us responsible for designing the front-end of websites have traditionally concerned ourselves with producing clean layouts rather than clean markup. Today, improved education about the importance of web standards means that web designers are likely to pay as much attention to what happens “under the hood” as what we see in the browser window. Writing code that validates is an essential part of the web standards equation, but a more subtle concept to grasp is that of writing semantic (X)HTML markup.

The semantics of markup refers to its meaning. When marking up an HTML document it is important to choose HTML elements that best describes the content they contain. For example, the most important heading on a page should be marked up as an < h1 >. Similarly, if your page contains a list of ‘related articles’ which appear in no particular order, these would be marked up as an unordered list. The key to writing semantic markup if to think about your content in terms of what it means rather than how you want it to look.

When it comes time to apply visual styles to our markup, we should also pay attention to the way we name our CSS id and class attributes. If we label our HTML elements using a semantic naming convention we avoid tying our markup to its visual presentation. Imagine an error message paragraph assigned class=”big-red-text”. What happens if later we decide that error messages should actually be white on a blue background? We can change our CSS rule to effect this visual change, but our CSS class will still be called “big-red-text”. A more semantic way to name the class might have been class=”error-message”, which of course describes the content’s meaning rather than its presentation.

Thinking semantically not only improves your a site’s accessibility, it also makes it easier to maintain in the long term. The goal of CSS is the effective separation of content from its presentation, but without semantic markup and naming conventions that goal will remain an elusive one.

Opera Small Screen Rendering

Mockups, HTML templates, databasing, content management, hosting - there’s a lot to consider when developing a website. In the rush to put a site live on time and under budget, one important aspect of the process is often woefully neglected: testing. Sure, debugging a website isn’t most people’s idea of fun, but early testing and bug detection can save you a costly redesign later on. A thoroughly tested website also makes a great marketing tool. It speaks volumes about your level of professionalism, and will keep your clients coming back for more.

In a nutshell, testing a website means using the site under a broad range of conditions, and seeing if any gremlins come out of the woodwork. Is the site still functional with JavaScript turned off? Does it break if the user doesn’t have the latest Flash plugin installed? Will your layout hold up as well in Internet Explorer as it does in Firefox? What about on a Mac? Or a PC? (more…)

Typography is a sadly neglected aspect of the web design process, an oversight traditionally blamed on the technical limitations and unpredictability of the medium. While it is true that the web may not offer designers the same typographic freedom as print, all it takes is careful consideration and a little typographic fine tuning to bring website layouts to life.

Choosing the right typeface
Although we only have a handful of ‘web safe’ fonts at our disposal, selecting an appropriate typeface is still crucial to the success of a design. Each typeface evokes a certain mood, which needs to be matched to the project at hand: Georgia reflects an academic yet vibrant attitude, whereas a sans-serif face like Arial is more austere in tone. If sticking to one font seems too limiting you can judiciously mix and match typefaces to add variety to your layout. Consider the elegant typography of A List Apart, which utilizes Georgia for headlines, Times for bylines, and Verdana for body copy. (more…)

Thanks to the wonderful world of “Web 2.0″ we have recently witnessed a proliferation of web applications, offering services from mapping to social bookmarking, photo sharing to user generated video. For a web developer one exciting aspect of this new breed of web apps is the ability to extract data from them by means of an API (Application Programming Interface) and reuse it on your own website. If you have ever seen a YouTube video embedded on a blog or myspace page then you will know how powerful this concept is, but using APIs (and a little ingenuity) the potential exists for far more creative implementations. Here are a few examples to whet your appetite: (more…)