Size does matter

The Movie Ben Hur without safe areas

History seems to repeat itself. During the commercial breakthrough of television in the 1950’s, filmmakers started filming in the widescreen format to compete with the gray, dull 4:3 format of everyday television. Some years later the Hollywood filmmakers reconsidered when they saw the great market potential in the millions and millions of small TV-sets out there. The concept of safe area was born when television networks were allowed to air the good old movies.

These days we have a great set of techologies for making web pages able to show all kinds of stuff; movies, pictures, sound, text – excellent storytelling in various techniques and manners. What about web comics? The concepts of “safe area” have strangely enough never been applied to web comics (where art thou, Scott mcCloud?). Too often web comics are presented as small squares in the top corner of your large and shiny 24 inch monitor. We want that to change (yes, we can!). What follows are some of the considerations that we have done while trying to create a full-screen web comic.

When creating web comics for full screen there are two versions of safe area that you have to take into account. The first one defines which areas in widescreen that you have to keep safe from important action when resizing and cutting away parts of the picture for television. This may be visualised as different aspect ratios. This is often misunderstood on the web as different screen resolutions, but should instead be considered as (virtual) DPI.

Academy (1.85:1) and Scope (2.35:1) compared to 4:3 (1.33:1)

When you create and develop the algorithms for resizing your web comic graphics (to achieve virtual DPI), you should always be testing alot afterwards, since there may be some resizing artefacts.

The second type of “safe area” is about the transition of TV-technology (CRT to LCD). You may think – haha – I don’t have to consider this one, because everbody have LCDs these days. Wrong! The top of the screen are often used for navigation menus (tabs and address field in the browser, signal strengh and net provider on a mobile). The bottom is also sometimes missing (windows Start menu etc.)

Television safe area (CRT)

To summarise: here are some points of wisdom we have learned these last few week.
1) Try to figure out what types of screens and resoultions your users most probably are using, and calculate the aspect ratios (width:height).
2) Calculate how many pixels you need for the largest and smallest screen resolutions, to always fill the full height of your screen
3) Keep important action outside the hard right, hard left, some of the top and some of the bottom. That does not mean that it’s not supposted to have content (ie. black)
4) Create a small resize-script / testpage for your web comic, and test in all the different browsers and screen resolutions that you have defined in 1) above.
5) Last, but not least, design your artwork for web comics. Most adaptaions from print to web almost always fail, other aspect ratios and different technique of turning pages.

PS: Look out for the teaser for “Norse Codes” that tries to implement the points above.

–
Aksel