In my recent article, we discussed 7 Reasons to Consider SVGs Instead of Canvas. SVGs are ideal if you require a scalable diagram such as a chart or logo which can be altered or animated using JavaScript DOM methods.

So … what are SVGs and how do we use them? This is the first part in a series articles about the vector image format.

What Are SVGs?

SVGs are vector graphics. Rather than defining the color of each pixel like you would in a bitmap (JPEG, PNG, GIF, BMP etc.), vector graphics define lines and shapes, e.g. draw a black line from co-ordinate 0,0 to 100,100. This has a number of advantages: vectors are easy to modify, generally require smaller files and are scalable to any dimension without losing quality — which makes them ideal for responsive web design. Bitmaps remain the best choice for photographs or very complex images (note that SVGs can include embedded bitmaps).

SVG is a royalty-free web standard maintained by the W3C SVG Working Group. Version 1.0 of the technology was originally proposed in 1999. Version 1.1 is the most recent standard with version 2.0 expected in 2013.

There are a couple of other flavors: SVG Tiny and SVG Mobile. These are simplified profiles or subsets of the full SVG specification which target devices with reduced computational and display capabilities. These standards largely relate to how rendering engines parse the image; an SVG 1.1 file can be rendered on a device which supports SVG Tiny but some effects such as gradients and opacities would not be applied.

How are SVGs Defined?

SVGs are declared using eXtensible Markup Language (XML). It uses tags like HTML — the following code draws a white circle with a black border:

<circle cx="100" cy="100" r="50" stroke-width="4" stroke="#000" fill="#fff" />

Be aware that XML is stricter than HTML. You cannot, for example, omit a closing tag since this will make the file invalid and the SVG will not be rendered.

The W3C SVG1.1 specification defines 14 main features:

1. Basic shapes: straight lines, polygons, circles, ellipses, and rectangles with or without rounded corners.
2. Paths: outlined or filled paths containing curved or straight lines.
3. Text: on straight or curved paths in any direction.
4. Painting: fills and outlines using solid colors, gradients, patterns, transparency, and markers (line terminators such as arrow heads).
5. Color: fill and stroke properties defined using standard 3 or 6-digit hex or rgb values.
6. Gradients and patterns: CSS3-like gradient declarations or bitmap backgrounds.
7. Clipping, masking and compositing: using elements to outline regions which can be painted.
8. Filters: effects applied to all elements within a container, e.g. blurring, lighting, color adjustments, etc.
9. Linking: hyperlinks to other documents.
10. Interactivity: attaching event handlers using JavaScript.
11. DOM Scripting: accessing and manipulating SVG elements using the Document Object Model.
12. Animation: built-in animations using Synchronized Multimedia Integration Language (SMIL).
13. Fonts: text glyphs defined in an SVG file which can be used as a standard font.
14. Metadata: titles, descriptions, subjects, creators and other properties about the SVG image.

Cascading Stylesheets in SVGs

SVGs also support embedded or external CSS rules. Like HTML, the selectors can target tag types or IDs and classes assigned to specific elements. CSS properties and values generally follow element attributes. For example, this CSS renders every circle in the SVG with the same white fill and black border color:

circle
{
	stroke: #000;
	fill: #fff;
}

SVG Creation Tools

Creating SVGs in a text editor is possible but it’s a slow process, error-prone and not much fun. Fortunately, there are several open source and commercial tools which allow designers and non-programmers to easily create SVG images:

• Inkscape
• OpenOffice or LibreOffice Draw
• svg-edit

Therefore, a design team could create a great-looking chart which a programmer can modify by applying real data to specific elements.

However, note that some graphics packages may not create the most optimal code or apply their own XML extensions.

SVG Browser Support

Although the technology has been available for more than a decade, SVG use within browsers was held back by Internet Explorer which first provided support in IE9. Today, most desktop and mobile browsers can handle SVGs and it is a recognized HTML5 standard.

Browser implementations vary, but SVGs can either be:

• viewed as a separate file directly in a web browser.
• embedded as an XML section within an HTML page.
• defined as an external page resource within img, object or the old embed tags (or as an iframe, although that’s effectively viewing the SVG file)
• set as background image in CSS.

There are a number of plug-in and shim options if you require SVG support in Internet Explorer 8.0 and below. Several fallback to Vector Markup Language (VML); a technology used in Microsoft products which influenced the SVG standard:

• Raphaël — JavaScript/VML
• AmpleSDK — JavaScript/VML
• svgweb — JavaScript/Flash
• Batik — Java toolkit

SVG Performance in Browsers

SVG XML must be parsed to render images on-screen and represented in memory as a Document Object Model. As with HTML pages, performance will be affected if you attempt to move or manipulate SVGs containing a large number of elements. In extreme cases, the redraw will be noticeable.

For this reason, it’s often preferable to use the HTML5 canvas tag for fast action games with hundreds of animated items. However, you may be able to adopt SVGs for some aspects, e.g. a player’s spaceship could be a simple SVG which can be moved, rotated, scaled and warped over a canvas-generated background.

SVGs and Accessibility

Owing to their XML data structure, SVGs provide better accessibility than bitmap images. At a basic level, meta data, short text and long text alternatives can be applied to any SVG image.

That said, screen reader support is poor. SVGs were not considered a viable browser technology until the release of IE9 so vendors did not consider them a priority. The situation will undoubtedly improve.

In the short term, you could consider transforming SVG XML into a text-based alternative using XSLT.

SVGs and Search Engine Optimization

Unlike bitmaps, XML is inherently machine-readable so static SVG files can be read, parsed and indexed by search engine bots. Google has been indexing SVG content since August 2010 and results can be found in the standard and image search systems.

Replacing a few PNGs with SVGs is unlikely to improve your rankings. However, if you’re displaying data as images without textual fall-backs, switching to SVGs could offer an SEO boost.

In my next SVG article we’ll create our first images without the use of a graphics package!

Create a 3D Typography Poster in Illustrator

Illustrator CS5 has some amazing tools that help you create really amazing 3D typography effects. If you’d like to step away from Photoshop for a while and brush up on your Illustrator skills, try this vectorized typography tutorial.

Create a Stylish Badge in Adobe Photoshop

Badges are a great way to display information on any blog or website. Due to their eye-​​catching quality, they grasp the visitor’s attention instantaneously. There are many resources for generic badges on the web these days; however, it’s always better to make your own.

Creating Good Designs from Bad Design Ideas: Three Client Types and How to Handle Them

We’ve all had some tricky clients with hard-to-manage expectations. Whether your client’s ideas are impractical, vague, or unrealistic, these tips and tricks can help you transform “bad ideas” into something that both you and the client will love.

10 Ways to Add Life to a Mascot or Character

They say that “first impressions are lasting impressions,” and it’s no different when it comes to the characters and mascots that you design. Careful alterations, depth, detail, and color can go a long way and can make even the simplest designs look amazing. Learn how to add life to your own mascots and characters.

Creating Your Own User Interface in Photoshop

Photoshop is great for taking your work from an abstract concept to a polished design. You can set up a steady workflow for almost any scenario, whether you are a photographer, graphic designer, web designer, or even a designer of mobile applications. In this tutorial, we will walk through the process of creating your own UI in Photoshop.

You’re using Dropbox right? If not, you should — it’s rapidly become one of the most useful applications ever devised. The concept is simple; install the Dropbox application on your PCs, smartphones and tablets and it creates a magic folder which synchronizes all its files across all your devices. As a bonus, it’s useful for backing-up, accessing files online, extracting historical versions, exploiting the API and sharing files with other users. With a free 2GB account, it’s no wonder venture capitalists have invested 48 gazillion dollars in the company.

Unfortunately, Dropbox sharing could lead to complications. The first stumbling block was that users needed to sign-up and install the Dropbox application. That may be easy for you, but try explaining it to more technically-challenged users — like those who are yet to appreciate the differences between files and folders. You then need to ensure users click a sharing link and navigate to the correct place on their file system. Finally, just as you got everything working, someone would delete an essential file which disappeared from everyone’s Dropbox folder (I mention no names — you know who you are!)

Fortunately, the situation’s just become a whole lot easier. You can share a file or folder with anyone just by sending them a link. They don’t require a Dropbox account and they’re even provided with a great online file viewer so it may not be necessary to download files.

Easy sharing should be activated in your Dropbox application (try rebooting or restarting Dropbox if it’s not). Right-click any file in your Dropbox folder and select Get link from the Dropbox menu. The file will be shown in your browser — simply copy the URL and share with whoever needs it.

Alternatively, log on at Dropbox.com, navigate to the file or folder you want to share and click its Get link icon.

To remove sharing, visit the shared URL again, click the cog icon at the top-right of the screen and select Remove link. You can also click Links on the website’s menu to view your shared files and remove any links.

Easy sharing is an amazing new feature which is certain to attract new users to Dropbox. You could even use it as a rudimentary CDN for your website. Let us know if you think of other interesting uses.

The web is primarily a visual medium with a little audio here and there. HTML5 supports the video and audio tags but our other senses have been shamefully neglected. Until now.

The W3C will shortly announce three new HTML5 elements which support alternative sensory interfaces:

• <texture> for touch
• <aroma> for smell, and
• <flavor> for taste

HTML Usage

The new elements will normally be used as wrappers for other items. For example, you might want to apply a fresh grass odor to an image of a field, e.g.

<aroma fresh="50%" sweet="20%" warm="35%">
	<img src="myfield.jpg" alt="field" />
</aroma>

The categorization attributes will vary depending on the tag, e.g.

• texture: smoothness, firmness, flaccidity, temperature
• aroma: sweet, pungent, acrid, fragrant, warm, dry, sour
• flavor: sweetness, sourness, saltiness

The volume and muted attributes are also supported to indicate the strength of odors and flavors.

However, unless you’re a chemical expert, defining these attributes isn’t easy. For that reason, all tags can use the src and type attributes to point to sensory definition files which contain one or more textures, aromas or flavors, e.g.

<aroma src="cheese.odor" type="stilton">
	<img src="stilton.jpg" alt="stilton cheese" />
</aroma>

Vendors will provide several pre-defined sensory packs within their browsers. However, Chrome’s representation of Roquefort is likely to differ from IE’s; it may be several years before we reach agreed sensory standards. Fortunately, it will be possible to develop your own definition files if compatibility issues arise.

CSS Properties

Textures, odors and flavors can also be applied from CSS. For example, our online cheese shop could link to a Stinking Bishop page:

<a id="stinking" href="stinking-bishop.html">
	<img src="stinking-bishop.jpg" alt="stinking bishop cheese" />
</a>

CSS could apply an appropriate aroma, flavor and texture as the user hovers over or focuses on the link. Sensory definition files or classifications can be used:

a#stinking:hover, a#stinking:focus {
	aroma: url("cheese.odor") stinkingbishop 50%; /* pack, type, volume */
	flavor: url("cheese.taste") stinkingbishop 98%; /* pack, type, volume */
	texture: 25% 30% 20; /* smoothness, hardness, temperature (degrees C) */
}

JavaScript APIs

JavaScript APIs will be available for the new sensory elements. For example, you could mute or change the volume (strength) of a sensory tag, e.g.

var cheese = document.getElementById("stinking");
var c = 0;
Pungent();
function Pungent() {
	cheese.aroma.volume = c + "%";
	c += 5;
	if (c < 100) setTimeout(arguments.callee, 500);
}

This example increases the cheese odor over time. Note that aroma-generating devices are likely to have slower response times than screen output: thorough testing will be required to ensure aromas and flavors don’t clash.

Hardware Support

Hardware devices which support these sense elements will be introduced during the next year. One of the first is a multi-sensory mouse by Ollofipra, the Scandinavian PC manufacturer. It uses a patented rubber mesh to change shape, texture and temperature. It also emits a range of smells and the central wheel generates different flavors. The company hopes to add the technology to touch-sensitive monitors so they become lick-able.

Please note that the W3C specifications for the sensory elements are at an early daft stage and implementation changes are inevitable. However, the future looks promising and the tags have potential to revolutionize web interfaces. You should certainly discuss it with your colleagues today.

If you are a web designer looking to learn new skills, or even just to listen in on conversations about your passion, then podcasts might just be the ticket for you. You can listen in the car, at work, or even at the gym, to gain new insights into your career. Talk about multi-tasking! Here are 5 of my favorite web design podcasts:

1. The Big Web Show

The Big Web Show focuses on a special guest each episode. This is great, because this allows each episode to take a new direction, usually going in depth into what the guest’s specialty is, or is really passionate about. It is produced by the 5by5 Network and features topics like web publishing, art direction, content strategy, typography and more. Big Web has a very loose format, but still manages to pack in a lot of great  information, and the guest format brings in new perspective each and every episode.

2. The Web Ahead

Also produced by the 5by5 Network, The Web Ahead is the more technical cousin of The Big Web Show. More dedicated to the web developer, the show hosted by Jen Simmons focuses on the changing technologies and future of the web. They discuss such topics as HTML5, mobile, responsive web design, iOS, and Android. There are all topics that web designers should be well aware of, even if they are on the front-end.

3. The Deeply Graphic DesignCast

With only 8 episodes under its belt, Deeply Graphic has already found its stride. While not exclusively devoted to web design, many of their episodes do focus on it. Already, there is a 2 part episode all about the web design trends of 2012, as well as an episode dedicated to online portfolio websites. Most of the other episodes focus on general business-side topics that print as well as web designers can apply to their business. Produced by The Deep End design studio in Los Angeles, the three hosts have varied experience, and weigh in on issues from different viewpoints, which makes for a very interesting and entertaining show.

4. Shop Talk

Shop Talk is a podcast with a twist… its also a live call-in show! The two hosts, Chris and Dave share a genuine enthusiasm about web design and development that is infectious. They have guests on a regular basis and they have a lot of fun talking about some really geeky things. But I just happen to be a geek too, so it fits into my day perfectly.

5. The Boagworld Show

Boagworld combines entertaining banter and great information into an extremely listenable package. They follow the format which I like, one topic per episode. But these guys take it a step further, and organize their podcasts into “seasons” of 6 episodes each. Each season is its own umbrella topic, and each episode fits nicely under that umbrella.

We’re lucky enough to work with some pretty talented authors. None more so than Rachel Andrew, who has recently completed the 4th edition of her hugely popular “The CSS Anthology”.

We asked Rachel to share her insights and thoughts on writing the “The CSS3 Anthology, 4th Edition – Take Your Sites to New Heights“, and here is what she had to say ….

“… This version of The CSS Anthology marks the book’s fourth edition. It was first published in 2004, included sections such as “How do I hide CSS from Netscape 4?”, and explained to readers how to use the box-model hack to cater for Internet Explorer 5 and 6 displays. While the second and third editions left these earlier browsers behind, the actual techniques we were using stayed relatively the same.

Ever since the first edition, I’ve strived to give examples that I’d be happy to use in my work. This is not a book of experimental or cutting-edge CSS with pages and pages of theory; rather, it’s a book of the tips, tricks, and solutions that I use every day. I’ve kept to this philosophy in the fourth edition while still introducing much that is new and interesting. The CSS3 we cover is very well supported; however, chapter 7 provides advice on how to support older browsers in your work. Just as I needed to give advice to developers supporting Netscape 4 in the first edition, I recognize now that many of you still need to deal with Internet Explorer 6 and 7. My aim is to suggest practical ways of supporting users of older browsers—saving you from dwelling on it.

In the final chapter of The CSS3 Anthology, I discuss CSS layout. While the tools that exist for layout have changed little over the last two years, the types of devices that we need to design websites for have altered massively. Our sites are now viewed on a whole range of mobile devices—from smartphones to tablets such as the iPad. Responsive design aims to tackle the challenge of designing one site that provides a great user experience, regardless of the device, and my final examples will introduce you to this important topic.

All the examples in The CSS3 Anthology come with an explanation to help you understand the solution, as well as point out any potential issues or alternate approaches. There are often several ways to solve a problem with CSS; the right solution will depend on the browsers you need to support, or certain elements in your design. By providing an understanding of why a solution works and what else you might need to consider, I hope to reveal how you can start making your own decisions when approaching any problem.

This is a really exciting time for front-end development, and it’s my hope that this book gives you the confidence to start using some of the new features of CSS3, helps you to find answers to CSS problems that you might have, and enables you to explore CSS further. I’ve really enjoyed writing this book, and I trust you’ll gain a lot from it too…”

For a very limited time, we’re offering a special launch pricing on this must-have CSS resource.

Mobile-friendly Web Designs in Minutes with Foundation

Designing for the smaller displays, slim bandwidth, and touch-​​based interactivity of mobile devices can be very tedious if you’re doing it from scratch. Yet mobile framework like Foundation can make those essential mobile accommodations surprisingly easy.

Create Your Own Custom Brushes in Photoshop

Creating your own personal set of Photoshop brushes is easier than you might think. We’ll help you build a brush and tailor it for your purposes with settings like Jitter, Scattering and Textures.

What is an Artworker?

Artworkers have a wide and varied role that can’t be described as definitively as “illustrator” or “graphic designer.” But, despite the somewhat nebulous nature of their job, artworkers have an important, technical, detail-​​oriented position.

30 Websites with Awesome Mascots

Catchy, memorable brand names and stylish logos are assets to any budding business. However, a mascot with unique appeal can foster a friendly, personal relationship between company and customer.

Have you tried Kuler?

Getting bogged down with color-based conundrums can blow away your timeline, slow down your design work and frustrate you at the very beginning of the project. Never fear: Kuler can show you an impressive array of variations on just a single starting color.

If you’re a die-hard coder who needs nothing more than coffee and Vim, perhaps web development isn’t for you. It’s varied. While you certainly need top-notch coding skills, you can’t avoid handling media and graphics. Yes, graphics. Probably in Photoshop.

Photoshop seems a little odd when you first use it. The interface isn’t quite standard on any OS platform and some features will confuse you initially. Persevere with it, though, and you’ll never want to use another graphics package again. Fortunately, there are several ways to make your life a little easier…

1. Quickly Select a Layer

If you’ve received a PSD from a designer, you’ll either find they’ve flattened it (yeah, thanks) or it contains thousands of layers. To locate the layer you need, switch to the Move tool (V), hold down Ctrl and click the element you want. Alternatively, right-click it to view a menu of all layers under the cursor.

2. Easier Layer Management

Navigating multiple layers can be painful. Photoshop offers several options to help you manage long lists:

1. Assign a name: double-click a layer’s name to change it.
2. Assign a color: right-click the eye icon and choose a color.
3. Group layers: click the folder icon (circled) and drag layers into it. Folders can have sub-folders and be re-arranged, renamed, colored, collapsed or hidden.

3. View a Single Layer

It’s often necessary to isolate a single layer. You can do that by switching off every unnecessary ‘eye’ icon but that can take a while if you have many layers. A quicker solution is to hold down Alt and click the ‘eye’ icon on the layer you want. Repeat the action to re-enable the other layers.

4. Apply the Same Style to Another Layer

You can move styles from one layer to another by dragging the “fx” icon on the right-hand edge of the layer block. Hold down Alt at the same time and it’ll duplicate the styles.

5. Create Snapshots

I often find myself undoing several actions to return to a previous state, e.g. when creating graphics in multiple sizes. Clicking undo or finding the correct historical state isn’t always practical. Snapshots are a great option; click the snapshot icon in the History palette and Photoshop will create a copy of the current state which you can return to at any time.

6. Accurate Guides

Guides are useful when you’re lining up elements and slicing images. To quickly add a horizontal or vertical guide, view the rulers (View > Rulers or Ctrl+R), click the ruler and drag the guide to your image.

You should be aware that Photoshop allows guides anywhere — even half way through a pixel. This can lead to inaccurate slicing or unwanted anti-aliasing effects. To prevent the problem, create a rectangular selection first then drag the guide to the selection’s edge where it will snap accurately into place.

7. Multiple Undo

Ctrl+Z performs a standard undo. However, pressing it again undoes the undo — it becomes a redo! If that’s causing you grief, select Edit > Keyboard Shortcuts then expand the Edit in Application Menus. Remove “Ctrl+Z” in Undo/Redo and add it to the “Step Backward” setting.

8. Pick Colors from Anywhere on Your Screen

For years, I used a color picking tool to grab a hex code, opened the color palette and copied it in. There’s no need. When using any of Photoshop’s color-picker tools, click anywhere on an image then drag the cursor off the Photoshop window to any part of the screen.

The only drawback with this method is that you can’t switch to a hidden application — you may need to make the Photoshop window smaller so more of your screen is visible.

9. Easy Ruler Rotations

You’ll often receive images taken by the photographer after they’d had a few drinks. Fortunately, it’s easy to rotate pictures to their natural orientation using the ruler tool (under the same toolbar icon as the eye-dropper).

Draw a line along the horizon in the direction you want to rotate, i.e. if it needs to be rotated clock-wise, draw from left to right. Now select Image > Image Rotation > Arbitrary from the menu — the dialog will show the ruler angle so you can simply click OK.

10. Personalize Your Workspace

Developers are a pedantic bunch. We spend hours organizing our desktops and IDEs so we can save a few seconds on repetitive tasks! Photoshop is a complicated beast and it can take time to open and position palettes and windows how you want them. To ensure it can’t be messed with, click the chevron icon at the top-right and save a new workspace.

Do you have any great Photoshop power tips?

Microsoft has revealed the new Windows 8 logo. I wouldn’t normally write an article about it but this is the first major redesign in 22 years. And since most of us use Windows every day, that’s a fairly big deal.

Are you ready? Here goes…

While it’s no London 2012 logo, I can’t help feeling a little underwhelmed.

Changing your brand is not something companies (should) do on a whim. Microsoft state the new logo reflects the re-imagination of the Windows operating system with clean lines, simple colors and the new Metro interface. They also admit the old logo was a flag rather than a window. Did it ever confuse you?

I’m not totally convinced. The font is a little simplistic and why is the window icon shown in perspective when Windows 8 looks flat?

It’s a bold move that’s likely to divide user opinion. Much like Windows 8. So let’s take a brief trip through history to see how Microsoft reached this point…

Windows Vista/7

The semi-transparent full-color Aero theme had a big influence on the Vista/7 logo and start button:

It’s still recognizable as the Windows logo, but the highlights, shadows and gradients made it feel more modern.

Windows XP

XP remains the world’s most-used OS eleven years after its release. Again, the logo matched XP’s default theme and, while it looks a little basic today, it was a fairly radical step forward at the time…

Windows 3+

In the decade leading to XP, all versions of Windows including 3.x, NT, 95, 98, Millennium and 2000 used a variation of the flag with familiar motion trails:

It looked fairly dated in the 1990s, but that’s the period Microsoft became the most dominant OS maker on the planet. The logo is business-like and businesses flocked to Windows.

Windows 1.0

Do you remember the original Windows logo from the 1980s? Me neither. Does it remind you of anything?…

We’ve come full circle. Almost three decades of tweaks and redesigns has resulted in a logo which looks almost identical to the one first used in 1985. I think I prefer the original — although a sans-serif font would improve it.

Whatever your opinion, you better get used to it. The Windows 8 logo will appear everywhere in the lead up to the new OS release!

Award-winning mobile game Cut the Rope is an immediate favorite for anyone who plays it. It’s as fun as it is adorable. So we had an idea: let’s make this great game available to an even bigger audience by offering it on the web using the power of HTML5.

To do this, Microsoft’s Internet Explorer team partnered with ZeptoLab (the creators of the game) and the specialists at Pixel Lab to bring Cut the Rope to life in a browser. The end result is an authentic translation of the game for the web, showcasing some of the best that HTML5 has to offer: canvas-rendered graphics, browser-based audio and video, CSS3 styling and the personality of WOFF fonts.

You can play the HTML5 version of Cut the Rope at: www.cuttherope.ie.

We think that the HTML5 version makes the web more fun and it demonstrates the advances in standards support made in the latest version of Internet Explorer. With that in mind, we want to share some of the cool “behind the scenes” technical details used on this project to help you build your own HTML5 sites and ultimately get ready for the Windows 8 Store!

Cut the Rope running in IE9 as an HTML5 application, ported from the original iOS source code.

A screenshot of one of the specially designed levels that are uniquely available in this version.

Objective-C to JavaScript

In bringing Cut the Rope to a new platform, we wanted to ensure we preserved the unique physics, motion, and personality of the experience. So early on we decided to approach this game as a “port” from the native iOS version (rather than a rewrite). We kicked off the project with an extensive investigation of the original Objective-C codebase. Turns out it’s a big and complex game. The native iOS version consists of about 15,000 lines of code (excluding libraries)! The most complex parts of the codebase are the physics, animation, and drawing engines. They’re complex on their own, but made even more so by the fact that all three are tightly connected and highly optimized.

It was a daunting task: get this code into a browser while maintaining the unique personality and incredible quality that gamers are accustomed to. To accomplish this, we bet on JavaScript.

In the past, JavaScript had a reputation of being a slow language. Frankly, that reputation was initially valid. Older JavaScript engines were designed for simple “scripting” kinds of tasks (hence the name). Today, however, JavaScript engines have been highly optimized. With features like just-in-time compilation, JavaScript now can execute at near native speeds.

Beyond that, we know that coding for JavaScript is different from – and requires a different kind of mindset than – coding in a compiled language. As we ported the game from Objective-C, we knew we would need to embrace the task of making these sorts of changes and optimizations.

One obvious example was the lack of structs in JavaScript. Structs are lightweight aggregations of related properties. It’s easy to use a JavaScript object to hold a set of properties, but there are important differences between that approach and a proper struct. The first difference is that structs get copied whenever they’re assigned to a variable or passed to a function. So, a function written in a compiled language like Objective-C can modify a struct passed as a parameter without affecting the value in the caller. Even within a function, assignment of a struct to a different variable will copy the values. JavaScript objects, on the other hand, are passed by reference. So when a function modifies an object parameter, the changes will be visible to the caller.

An easy way to mimic the nature of structs is to create copies of JavaScript objects for assignment or parameter passing. In native languages there is typically very little overhead to using structs. Creating an object in JavaScript is much more expensive, so we had to be very careful to minimize the number of allocations. Particularly on assignments, whenever possible we tried to copy individual properties rather than creating entirely new object instances.

Another example is the object oriented nature of the Objective-C codebase. In lieu of traditional object-based inheritance, JavaScript offers prototypical inheritance, inheritance based on the Prototype property. This is a highly simplified form of object inheritance that really isn’t compatible with a traditional object oriented language like Objective-C. Fortunately, there are a variety of class libraries that can help you write object-oriented programming (OOP) style code for JavaScript; we made use of a very simple one that was written by John Ressig (of jQuery fame). (Note that ECMAScript5, the specification for the newest version of JavaScript, also includes some support for classes but we opted not to use it in this port due to our lack of familiarity with that version of the language coupled with our aggressive development schedule).

In addition to porting from Objective-C to JavaScript, we also needed to port our graphics code from OpenGL to the HTML5 Canvas API. Overall, this went really smoothly. Canvas is an amazingly fast rendering surface, especially in a browser where that API is hardware accelerated (like Internet Explorer 9).

An example of drawing the ropes with aliased lines using the canvas API.

Surprisingly, we encountered a few areas where the Canvas provides more functionality than does the version of OpenGL ES that was used by the mobile version of Cut the Rope. One example is drawing anti-alias lines. Drawing anti-aliased lines in OpenGL requires tessellating a line into a triangle strip and fading the opacity of the end caps to complete transparency. The HTML5 canvas automatically handles anti-aliasing for lines drawn with its line API. This meant we actually needed to remove code from the OpenGL version. Unwinding the array of triangle vertices in the OpenGL code also gave us much better performance over trying to natively copy the triangle strip method of drawing lines.

In the end, we have nearly 15,000 lines of code executing in the browser (it’s been minified so if you view the source code in your browser, it will be many lines fewer than that). Anticipating the complexity associated with that much code, Denis Morozov (the Director of Development at ZeptoLab) asked a fair question early on: will HTML5 give us the speed and performance that we need for this game?

To answer that, we created an early “performance” milestone, one where we focused on getting a minimal version of the most intense parts of the game running. Namely, we wanted to see what the ropes looked like and whether we could handle the complex physics engine in the browser.

Performance

Three weeks into the project, we finally had the basics of the physics and drawing engines in place with a simple timer to bootstrap the animation. We could now render a couple of ropes, a star, and an Om Nom sprite into the game scene. Progress! By week four, we had included some basic mouse interaction and with that we could actually play the game! We were testing performance along the way, but we wanted to let the team at ZeptoLab give us their feedback.

When we shared the code with ZeptoLab, they were pleasantly surprised by the performance (particularly the speed and smoothness from the game) that we were seeing in modern browsers. To be honest, we had been holding our breath just a little. We expected JavaScript to be fast but the physics calculations were intense and had to happen in real-time. This is a great example of where common preconceptions about the “slowness” of JavaScript turn out to be wrong. The latest generation of JavaScript engines is incredibly fast.

In this case, we were previewing the game in Internet Explorer 9. When you load the game, Internet Explorer 9’s Chakra JavaScript engine pre-compiles the code on a background thread—just as a compiler would compile a language like Objective-C or C++. It then, in real time, sends the compiled code (byte-code) to the game thread for execution. The result is near-native execution speeds. Amazingly, this is something that you just get for free from the JavaScript engine—we didn’t have to do anything special in the code.

Framerate test results early in the project (note that framerates are capped at 60FPS)

Our bet on JavaScript was paying off, so we turned our attention to hardware and browsers. With Internet Explorer’s hardware-accelerated rendering stack and our experience with Disney Tron and other HTML5 sites, we didn’t have any concerns about its ability to run the game perfectly on our test machines. We were easily hitting our capped goal of 60 FPS (frames per second). We wanted to be sure, however, that the game ran well on other hardware with other browsers. Here’s what we saw after some preliminary testing.

Based on those numbers, we set 30 FPS as our minimum bar. We decided that when the browser goes below that threshold, we would notify the user. They could still play the game, but we’d inform them that it could feel a little bit sluggish. This ensures that we support the huge diversity of hardware and software that’s out there and provide the best experience we can to all of the game’s visitors.

Two things we want to point out. One, the current version of the game works best on desktop PCs and Macs with a mouse. We have not added the support for touch based input yet, but this is something we’re considering for future versions.

Second, the current version of Chrome (version 16) has known issues related to media playback that make sound unpredictable in Cut the Rope. We researched workarounds and have attempted to re-encode the media in multiple formats (including WebM), but haven’t found a format or MIME configuration or anything else that will reliably fix the problem. These appear to be browser bugs and known issues. More importantly, the game continues to be playable and enjoyable in spite of the intermittent audio. In light of that, while we can say Internet Explorer 9 users get a great plug-in free experience, Chrome and some Firefox users could have run into an audio problem but will notice we fall back to a flash plugin to ensure that sound effects and music will work.

Tools

A great thing about HTML5 is that you don’t need to learn a new language to unlock the power of this new technology. If you know and understand JavaScript, you already have access to all that a modern browser can do. You could even create your own game like this!

Code Editor and Development Environment

Visual Web Developer 2010 Express is a free download and a great editor for even experienced web developers.

A screenshot from the profiler that shows the disproportionate amount of time being spent in Calc2PointBezier, a function that’s used to caculate the positions of the rope segments.

There are some great free tools that make working with JavaScript and HTML5 easy. Much of our development was done in Visual Web Developer 2010 (the “express” version is available for free here). This is a really robust web editor with autocompletion for JavaScript and CSS. It’s great that the express version is free! We did most of our testing in Internet Explorer 9 on Windows 7 and from time to time we would also test on Firefox, Chrome, Safari, and in Internet Explorer 10 developer preview. In general, all major browsers have a very consistent implementation of the HTML5 features we used and, in most cases, anything we tested in Internet Explorer 9 “just worked” everywhere else.

Check out our Resource Loader!

Cut the Rope has unique and very detailed visual styling – lots of media in the form of images, sounds and video – which comes at a small cost. The result is that the whole game is much bigger than an average website. Combined, it’s around 6 MB (compared to 200-300K for a typical site). That much media can take a little while to download and we can’t start the game until we know everything is there. A traditional web page is pretty forgiving if you’re missing an image or two but the HTML5 canvas API (drawImage) will fail if the image isn’t available.

To tackle this challenge, we wanted to create a resource loader that downloads all of the content we need for the page and gives us good feedback as things are downloaded. This bit of code does a bunch of smart things:

1. It deals with the peculiarities of how different browsers handle downloads and how they inform you of their progress.

2. It lets you make smart decisions about the order in which things are downloaded (you might want to start big files first, for example, or maybe download all of the menu images before you get the game images).

3. Finally, it gives you smart events as things arrive so that you can show the user progress or even start part of the game when the first group is completed.

Building these types of libraries is tricky to do well. Since we’re really pleased with how this all came together, we wanted to share the code for our resource loader with you. The result is PxLoader, a javascript Resource Loader library that you can user to make preloaders for HTML5 applications, games and sites. It’s open source and free. You can grab it from the top of the page, or just click here.

Performance Tools in Internet Explorer

Another indispensable tool in the development process was the JavaScript Profiler in Internet Explorer 9. Profiling lets you discover hot spots and bottlenecks in your code. At one point in our first performance related milestone, we nearly called it quits when we discovered that on some machines we were stuck at 20 or 30 FPS.

We did some initial code reviews, but nothing was jumping out. We loaded the game with the profiler and immediately saw that we were spending a lot of time inside the satisfyConstraints() function. That function calculates some of the math related to the physics of the ropes. The Objective-C implementation which we had ported was written recursively, passing a new object into each successively deeper call.

With some guidance from Microsoft, we decided to replace the recursive function with an “unpacked” iterative version of the same code. The results were amazing. We saw a 10x improvement in every browser! Frankly, we would have never found that without the profiling tools in Internet Explorer 9.

What’s next?

At BUILD in September, Microsoft showed a developer preview of Windows 8. With this announcement, the HTML5 story got more interesting because Metro style applications can be created using a variety of developer toolsets, including HTML5. This means that web developers can take code that was written for the web and easily and seamlessly port it to Windows 8. The investment in immersive experiences online now can pay off in real profits later with the Windows Store.

In fact, with very little extra work, we were able to port this HTML5 experience to a Windows 8 Metro style app. Read about Cut the Rope and its integration with the Windows Store in this blog post.

We are excited to see what developers can build today with HTML5. You can download Internet Explorer 9 and find other beautiful sites at www.beautyoftheweb.com, or download the Developer Preview of Windows 8 at dev.windows.com.

DealFuel is here. The best thing to happen since bearded dragons learnt how to play ant crusher :) And we’re kicking things off with 4 cool tech deals for:

• Web devs who want to profit from their talent
• jQuery wanna-bees and students
• Designers who are keen to work faster
• Website owners who demand peace-of-mind

There’s something for everyone!

We look forward to seeing you on DealFuel, and welcome your feedback and comments (below)

Everyone knows good design when they see it.

Unfortunately, everyone has a different opinion about what “good design” actually is. This is a problem if you’re creating products, software, graphics or other media for a client. Your design may need to be agreed by multiple people all with their own notions and prejudices about how the product should look, feel and work. If you’re banging your head against the wall in frustration, here are five tips which could help…

1. Outline Your Process

Walk your client through your design process. In the web sphere, this could be:

1. collate the requirements and objectives
2. devise concepts, walkthroughs, story boards and wireframes
3. produce a final mock-up or prototype for approval

A little tweaking at all stages should be expected, but avoid falling into iterative traps; i.e. the client demands 27 different concepts, scavenges their favorite parts of each and creates a Frankenstein design which has little hope of satisfying the original requirements.

2. Avoid Design-by-Committee

Ideally, your final design should be signed off by one person — two at most.

Unfortunately, many organizations have a culture where employees are afraid to make mistakes; it’s safer to sit on the fence than take responsibility for a decision. You may encounter situations where a decision is reached by compromise: half liked the blue design, half liked the red, so they settled on purple (which no one liked).

The problem is exacerbated by design meetings. Meetings can be dominated by one or two people who force their opinion on others or use the forum as a battleground for political posturing. The design suffers and the opinions of quieter members are never heard.

3. Approach Decision Makers Individually

If the final sign-off absolutely must be agreed by multiple people, approach them individually. You can explain why the design satisfies the original objectives on a one-to-one basis and collect feedback. It gives everyone a voice, prevents internal politics and documents the responses. It’s also makes it harder to raise objections at a later stage.

Obviously, this can take more time than a single meeting but it’s less likely lead to design compromises. Rather than performing your presentation multiple times, you could consider creating a video or slideshow. That should reduce the effort required and it’s impossible for viewers to interrupt!

4. Ask Direct Questions

“What do you think of the design?” is the worst question you can ask (especially by email). It turns an objective critique into a subjective discussion. People will resort to their gut instinct or first impression; you’ll rarely get anything more informative than “I liked it” or — worse — “I didn’t like it”.

Ask direct questions such as:

1. Does the design satisfy requirement X?
2. Does the design meet the defined business objectives?
3. Does the design implement all features outlined in the wireframes?

This makes it easier to identify and document specific issues. Avoid obliging decision makers with open-ended discussions: if they can’t pinpoint a problem accurately and concisely, that problem doesn’t exist.

5. Use the Wisdom of Crowds

If the client steadfastly refuses to appoint a single decision maker, you could consider taking the process to the other extreme. Ask everyone’s opinion: all company employees, their customers, website visitors, passers by, social media users, etc.

A decision can be made by poll statistics; it’s difficult for an individual to complain if 94% of respondents stated the design satisfied all objectives.

Please share your sign-off scare stories. Was approval expected from 93 people? Did a client dither for months? Did a lovely original concept turn into a monster? Was a design rejected because Amy in Accounts didn’t like a shade of green which reminded her of broccoli?

Comments welcome…

It all started with Responsive Web Design, an article by Ethan Marcotte on A List Apart. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Websites. Instead of responding to today’s needs for a desktop web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen.

Core Concepts

Three key technical features are at the heart of responsive web design:

• Media queries and media query listeners
• A flexible grid-based layout that uses relative sizing
• Flexible images and media, through dynamic resizing or CSS

Truly responsive web design requires all three features to be implemented.

The key point is adapting to the user’s needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order. Don’t assume the user won’t need access to all the site information because she’s on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence responsive web design.

While mobile devices are changing the display landscape, with the appearance of more and more small screens, don’t forget what’s happening at the other end of the spectrum. Displays are also getting larger and larger. Having to serve both segments shouldn’t stop designers from being innovative on either.

Media Queries

Starting with CSS 2.1, media types were used to apply CSS for both screen and print. You might remember these media types:

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="printfriendly.css" media="print" />

That was it! Luckily, the W3C improved media queries in CSS3, moving them a big step forward.

Today, you can use media queries to scope styles to specific capabilities, applying different styles based on the capabilities that match your query. You can even combine queries that test for several features by using semantic operators such as AND and NOT). Features include width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution and more.

There are three ways to implement media queries:

1. Use the @import rule to import style rules from other style sheets:
2. @import url(style600min.css) screen and (min-width: 600px);
3. Put media queries directly in the style sheet, as shown below.

#nav
    {
        float: right;
    }
        #nav ul
        {
            list-style: none;
        }
    @media screen and (min-width: 400px) and (orientation: portrait)
        {
            #nav li
            {
                float: right;
                margin: 0 0 0 .5em;
                border:1px solid #000000;
            }
        }
    @media screen and (min-width: 800px)
        {
            #nav
            {
                width: 200px;
            }
                #nav li
                {
                    float: left;
                    margin: 0 0 0 .5em;
                    border: none;
                }
        }

Include a query in a linked style sheet’s media attribute:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" href="style800.css" />
 
Because of the (cascading) nature of CSS, default styles are defined at the top with the media query matching rules and styles below. Styles defined at the top will be cascaded to the matching styles in the rule, or even completely overwritten.

The following images present an example of a responsive web design approach that uses media queries.

Figure 1 and Figure 2 both show a desktop using Internet Explorer 9 in two different resolutions. Figure 3 shows the same responsive site on a Windows Phone, also with Internet Explorer 9.

Figure 1 Navigation Appears on the Left
 

Figure 2 In an 800×600 Resized Window, Navigation Switches to the Top
 

Figure 3 The Same Site on a Windows Phone
 
If you’re looking for some great examples of responsive web design that take full advantage of media queries, the http://mediaqueri.es/ enthusiast site can be addictive, as Figure 4 shows.

Figure 4 A Collection of Sites That Use Media Queries

Media Query Listeners

Taking media queries a step further, the CSS Object Model (CSSOM) working group at the W3C also created media query listeners, which provide an API for responding to media query changes. Instead of having to poll for changes or load several versions of a resource, you can use the API, for example, to download images only of a particular size when a media query match is triggered.

Today, Firefox and the Internet Explorer 10 Platform Preview implement media query listeners; you can see the demo “CSS3 Media Queries & Media Query Listeners” on the IE Test Drive.

A Word about the Viewport

When testing media queries on mobile browsers, you might notice that the correct media queries are not actually being applied. When this happens, the mobile browser is doing some work on your behalf to render the page optimally on the smaller screen.

So do you think there isn’t a way of getting the real resolution? Actually there is, in the viewport meta tag. The viewport meta tag controls the logical dimensions and scaling of the mobile browser’s (chrome-less) window. Setting the width equal to the device-width works around the problem:

<meta name="viewport" content="width=device-width">
 
Other viewport settings include maximum-zoom and initial-scale.

Flexible Grids

A flexible grid-based layout is one of the cornerstones of responsive design. The term “grid” is used rather freely and doesn’t imply a requirement to implement any of the available grid frameworks. What it means here is using CSS for positioning and for laying out margins and spacing, and for implementing various web layout types in a new way. Layouts and text sizes are typically expressed in pixels. Designers love pixels. Photoshop loves pixels. But a pixel can be one dot on one device and eight dots on another. So how do you approach responsive web design if everything is pixel-based? You might not like the answer: You stop using pixel-based layouts and start using percentages or the em for sizing.

By basing text sizes, widths and margins on percentages or on the em, a unit of measurement based on a font’s point size, you can turn a fixed size into a relative size. This means you’ll need to do a little math to achieve a flexible grid and text size system. But the formula for calculating the em is very simple:

target ÷ context = result
 
Let’s say the normal context for the body font size is 16 pixels. If the designer specifies that the H1 should be 24 pixels, you can calculate the following:

24 ÷ 16 = 1.5
 
This results in the following CSS style:

h1{
    font-size: 1.5em;
}

Always take the context into account. Continuing with the previous example, if you have an element inside the H1 that needs to be 12 pixels, you use the current H1 as the context. The context is now 24 pixels, so the context calculation for “H1 a” is:

12 ÷ 24 = 0.5
 

And the CSS style is:

h1 a{
    font-size: 0.5em;
}

 
You can also use percentages. The calculation algorithm is the same; you just end up with percentages.

Flexible grids use this approach. You can find several frameworks to help you craft your grid, such as Fluid Grid System or Fluid 960 Grid System (a fluid version of 960 Grid System). Moreover, several groups within the W3C have submitted new specs for better flexible grids, with some useful results.

CSS3 Grid Layout

The CSS3 Grid Layout (also known as Grid Alignment or, simply, the Grid), brings a typical grid system to CSS, similar to what XAML or Silverlight developers may be familiar with. At the time of this writing, the spec is an “Editor’s Draft.” It allows for defining regions in a layout, with columns and rows, spanning, spacing, padding, grid templates and more, enforcing full separation of concerns between HTML elements and CSS. Unlike HTML tables that are content, the Grid allows for placing HTML primitives into grid regions separate from actual content.

Combining the CSS3 Grid with media queries creates a powerful solution for building fluid, responsive applications.

How does the Grid work? You start by setting the display block to ‘grid’. (You need to use CSS vendor prefixes because this is not yet a CSS3 recommendation. Right now, only Internet Explorer 10 Platform Preview supports the spec, so you’ll see the CSS vendor prefix -ms- used here.) Let’s look at three examples of how you can set up different views depending on screen size. Media queries are used to apply different grid styles depending on the screen width.

In the first example, the HTML for defining the content consists of one header and three different blocks of text.

<div id="mygrid">
    <header id="myheader">
        <h1>Hello world</h1>
    </header>
    <div id="block1">
        <h2>Lorem Ipsum section 1</h2>
        <p>
            Phasellus venenatis sem vel velit tincidunt tincidunt.
              Curabitur gravida, ante sit amet [... ...]
        </p>
    </div>
    <div id="block2">
        <h2>Lorem Ipsum section 2</h2>
        <p>
        Nam tempus justo eu massa ultrices eget imperdiet ligula placerat.
        Suspendisse [... ...].
        </p>
    </div>
    <div id="block3">
        <h2>Lorem Ipsum section 3</h2>
        <ul>
            <li>Curabitur ultrices tristique purus, sed pellentesque
               magna scelerisque ut.</li>
            <li>[... ...] </li>
        </ul>
    </div>
</div>

You start by laying out the blocks of content under each other so that the content fits smartphones.

@media only screen and (max-width : 480px) {
    #mygrid {
        display: -ms-grid;
        margin: 3px;
        -ms-grid-columns: 100%; /*one column taking full width */
        -ms-grid-rows: 70px auto auto auto; /*4 rows */
    }
    #myheader {
       -ms-grid-row: 1;
       -ms-grid-column: 1;
    }
    #block1 {
        -ms-grid-row: 2; /*place into row 2 / column 1*/
        -ms-grid-column: 1;
    }
    #block2 {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }
    #block3 {
        -ms-grid-row: 4;
        -ms-grid-column: 1;
    }
}

You can add background colors as shown in Figure 5 to make it clearer that you’re working with grid items.

Figure 5 Blocks of Content with Background Colors

In the second example, a media query applies styles defined for screen sizes greater than 481 pixels—anything wider than a typical smartphone. You can use the Grid to define two columns and move the blocks into desired positions, as below. The results are shown in Figure 6.

@media only screen and (min-width : 481px) {
/*make two columns and move block 3 next to 1 — just because we can*/
    #mygrid {
        display: -ms-grid;
        -ms-grid-columns: 10px 1fr 10px 1fr 10px; /*10px columns to spacing in between*/
        -ms-grid-rows: 100px 1fr 1fr; /*100px row and two rows each taking 1 fraction of available space*/
        margin: 5px;
    }
    #myheader {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
        background-color: #EEB215;
    }
    #block1 {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
        background-color: #B2B0B0;
    }
    #block2 {
        -ms-grid-row: 3;
        -ms-grid-column: 2;
        background-color: #726E6E;
    }
    #block3 {
        -ms-grid-row: 2; /*block 3 can go into row 2*/
        -ms-grid-column: 4;
         background-color: #515050;
    }
}

Figure 6 A New Layout with Two Adjacent Columns

The third grid sample displays on screen widths greater than 1220 pixels. You define a grid with a wide header that spans multiple columns and then define three columns, each occupying one fraction of the available space, with a few 10-pixel columns in between. The results are shown in Figure 7.

@media only screen and (min-width: 1220px) {
    #mygrid {
        display: -ms-grid;
        -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
        -ms-grid-rows: 100px 1fr;
        margin: 5px;
    }
    #myheader {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
        background-color: #EEB215;
    }
    #block1 {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
        background-color: #B2B0B0;
    }
    #block2 {
        -ms-grid-row: 2;
        -ms-grid-column: 3;
        background-color: #726E6E;
    }
    #block3 {
        -ms-grid-row: 2;
        -ms-grid-column: 5;
        background-color: #515050;
    }
}

 

Figure 7 Three Side-by-Side Columns with a Spanning Header

The Grid specification is a welcome addition for implementing responsive web designs.

Two other new CSS specifications are also worth mentioning: the Flexible Box Layout Module (Flexbox) and The Multi-column Layout Module. Both show a great deal of promise for designing responsive Websites.

Flexbox, currently a working draft at the W3C, adds support for four new layout modes: block, inline, table, and positioned. It enables you to lay out complex pages with relative position and constant size, even when screen sizes change.

The multi-column layout module is currently a candidate recommendation at the W3C. This solution is for content that you need to lay out in columns and that flow from one column into the next. You can view an interactive example of multi-column layout in this lab.

Flexible Images and Media

The final aspect of responsive web design is flexible images and media. Basically, this feature allows you to adapt your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow property.

Scaling in CSS is pretty simple to implement for both images and video. You can set the media element’s max-width to 100 percent, and the browser will make the image shrink and expand depending on its container. You should supply the image in the best quality and size possible and then let CSS adapt the image to the right size.

img, object {
    max-width: 100%;
}

An alternative to scaling images is cropping them with CSS. For example, applying overflow:hidden allows you to crop images dynamically so that they fit into their containers as the containers resize to fit a new screen environment.

Having several options to scale and crop images in CSS might not be enough. Do you really need to take up all of a visitor’s mobile bandwidth because you don’t have a smaller version of an image? To better serve users, flexible images might mean using an alternative image—or even no image at all. Folks in the web design community are coming up with solutions based on JavaScript and cookies, and you can expect more of this as responsive web design evolves and becomes the basis for many quality Websites.

Legacy Browsers

What about older browsers that don’t support media queries? What about Internet Explorer before version 8, which has issues with scaling images? Solutions in the form of polyfills can help. Here are some useful examples.

• css3-mediaqueries.js by Wouter van der Graaf: code.google.com/p/css3-mediaqueries-js/
• Response.js: github.com/scottjehl/Respond
• Fluid images: unstoppablerobotninja.com/entry/fluid-images/

In Closing

Jumping on the responsive web design wagon isn’t something to take lightly. Take into account what you need to achieve, and consider whether catering to a specific version of a desktop or mobile device makes the most sense.

Responsive web design is in its early stages. Web designers will continue to offer different opinions and recommend directions related to whether to build for mobile first, how to fit these decisions into the design process, whether to slice up the comps into all the different screen sizes, and so forth. And as more and more screen sizes and form factors arrive, the conversation will continue.

HTML and CSS standards are evolving to help web designers deal with these issues. It’s clear that some form of responsive web design will be used to meet the challenges, and it’s equally clear that standards will continue to evolve as better ways of handling the changing world of devices and browsers are discovered.

Here are some additional resources:

• Responsive Web Design
• Responsive Web Design Techniques, Tools and Design Strategies
• Hardboiled CSS3 Media Queries
• Golden Grid System
• A Brief Look at Grid-Based Layouts in Web Design

When creating a landing page for your website, it is important to make sure that it is visually appealing, easy to navigate, and free of errors. This article will tell you the five unbreakable rules of landing page design that can make or break your website.

The landing page of your website fulfils many functions. It’s like a front door to your website:

• it provides the user a snapshot of your topic or product
• its visual design and colors convey subtle information about your professionalism, trustworthiness, and attitude
• its links and organization reveal the structure and contents of the rest of your site
• and the words you choose and how you use them reflect on your attention to detail and dedication to your product or topic.

With your landing page conveying so much, it is important to get it right. Here are the things to consider when designing a landing page.

Include media

The first rule of landing page design is to always include a picture or video, especially if you are selling a product.  The user wants to see what you have to offer, and visual representation helps to do this.

Another reason to include a picture is to prevent the page from being a wall of text, which is too dense and may scare users off.  Using media is also important to prevent the page from being too sparse, which may give your site the appearance that it is unfinished.

Make sure the picture or video is relevant, of course: do not just put up a picture to have a picture. This is easy to do with the wealth of stock photos out there. Make it specific to the topic of your page.

If you are selling a product, it is a good idea to make a video showing it off and host it on YouTube. You can have even more impact and seem more professional if you host the video yourself, however this removes the social media aspects of YouTube, which can be very helpful from a marketing standpoint.

It’s also a good idea to make sure your media is high quality, and can be viewed on the majority of users’ systems. Make sure to use a common format and test it on different systems and different browsers. This will not only reveal media incompatibilities, but other design issues as well.

Avoid clutter

It is important to keep the topic of the landing page focused.

Introduce the topic or product and provide a short description, a picture, and relevant links. Do not overload the page with endless text and useless links, as this will overwhelm and confuse the user.

A good rule for text is that it should be no longer than 15 words wide. Wide columns of text are harder for the user to follow with their eyes. If your column width is too wide, your users may become lost and give up on your site. If your page has a word width of over 20 words, you need to reduce the column width.

Make sure to keep the links to a minimum in the body text of the main content area. This is because too many links in the body text is distracting and your users may be too busy clicking on links to get around to reading your content. It is best to put those links in a sidebar or along the top of the page.

A good way to assess the degree to which your site is cluttered is to do the squint test. The squint test consists of squinting your eyes until you can only see the outline and basic shape of your page. Notice areas of empty space and areas that have content. Make sure there is a good balance and that each area has a good mix of negative space and content.

Avoiding clutter refers not only to content but to design elements as well. This does not mean that you cannot have any design elements on your landing page; quite the contrary, without them your page would be boring and unappealing. The trick is to use them as a highlight or accent.

Use designs to frame your content and to fill in blank spaces. Keep the designs simple and unobtrusive. If the designs are too extravagant or eye-catching, they may distract from your content, which is what you want your user to focus on.

Use perfect grammar and spelling

One of the most important rules of landing page design is to have perfect grammar and spelling.

Nothing will turn users off faster than a spelling error or horribly constructed sentence. While it might not be fair, users do attribute spelling and grammar errors to the author’s lack of skill, expertise and authority.

Spelling and grammar errors are easy to miss, especially in your own writing. The solution is to have two or three people edit your work. Three pairs of eyes are better than one. Make sure at least one of the people editing your work is an experienced editor and is able to correct poor grammar.

The way you use words can have a powerful effect on your users. Choose your words carefully, as words have a great effect on tone and mood. For example, if you are selling flowers, keep the tone light and cheerful and avoid complex or uncommon words.

Create effective links

It’s very important to make sure that your users can recognize where the links on your page are located, what they link to, and how they relate to the links around them.

Effective linking is the cornerstone of good navigation and it is most important on your landing page, the front door to your website.

The most important aspect of effective linking is giving your links good names. The link text should be concise and descriptive. Keeping link names short will help to keep your sidebar width down, which is more appealing.

It’s also important to keep links grouped together on the side in a sidebar or along the top of the page. Links tend to get lost when they are placed in the body text in the middle of the page within paragraphs.

Organize your links in a meaningful way: alphabetical, chronological, largest to smallest, and so on. This will help users to find the link they need quickly if they can easily recognize the organization scheme you are using. A good example of this is when you see a drop down menu from which you are to select your home state, the states are usually listed in alphabetical order so you can quickly find your home state.

The final thing to consider when creating links is that the links on the page should be obvious as links. Do not make your users go hunting for links or have them clicking on words or pictures that are not links. While your users may be able to find links by hovering the mouse cursor over them, this may frustrate some. You want it to be as easy as possible for users to navigate your site.

Group links into categories, give them obvious names, and make sure they stand out as links. Your users will thank you.

Use colors wisely

The final rule when making a website landing page is to make wise use of colors.

Colors have a very strong effect on users.

• Blue conveys a sense of trust and reliability. Notice how many businesses use the color blue in their logos.
• Red is exciting, a warning, stop, or blood.
• Black can be evil, nothingness, modern, or stylish.
• Yellows and oranges are fiery, flashy, and bold.
• Green is natural, money, or calm.

Keep in mind that these are just generalizations. They vary across cultures, especially. Do some research before you choose colors for your website.

The next most important thing to keep in mind when choosing colors is to keep the number of colors to a minimum. It is nice that your browser can render hundreds of colors; it is not necessarily pleasing to the eye to have five, ten or more colors on a page. A reduced color palette will have two to four colors.

Anything else?

Pay attention to trends and feedback from your users. Design trends change more often than you would think and it is a good idea to keep abreast of them so you can change with them lest your site begin to look dated.

Conducting usability tests is a good way to determine what is working and what is not. Sit down with your users and ask them to find certain information on your site to test navigation, or just ask them how they like the design. It’s a good way to get a sense of what you need to change.

If you take your time and pay attention to all of the rules listed above, you will go a long way to making a landing page that is professional, inviting, and effective at driving traffic to your site and keeping your site visitors engaged.