Preorders for Volume 1 are still open until September 15th. If you’d like to order a copy of the book, please visit us at http://walkingthelethe.com.

©2012 Fallen Kitten. All Rights Reserved.

1. Placing Ads

The text widget can be a convenient way to place ads in your sidebars. Simply cut & paste the provided code into a text widgets that you’ve placed into a sidebar. You can add a header or title if desired, but it is not necessary. Just hit “save” and refresh to see the results.

I like to use widgetized spaces for an ad in the header. The space can be sized and positioned via CSS and then the website owner can change their ads code without entering the PHP files.

2. Using a Table

Tables are not a good way to layout an entire website, but they are still effective ways to organize a small section. Since the text widget take HTML you can wet up a simple table like the one below to display small buttons side-by-side.

You can include some inline CSS if desired, but if an element has already been declared in your main CSS file, it will be overwritten.

3. Customize the CSS for a Single Widget

In the previous suggestion, we built a table inside our text widget. Now you may want to customize the CSS further (to remove the borders for example). To do this, you’ll need to create some rules in your CSS file for just this text widget.

First you need to figure out the unique Id of your widget. “View Source” in your browser and find your widget. I like to write something unlikely in the widget like “elephant monkeys” to make it easier to find. Then find the beginning of the widget where the Div is. There will be a Id titled “text-xx” where xx is a number. That’s the unique Id of your widget.

Once you know the Id name, pop open your CSS file and create a new section. The # symbol stands for Id. You can now edit the appearance of just this widget.

When you’re finished making changes, save your file and refresh your website to view your handiwork. Now so long as you don’t delete this widget you can change the contents in the WordPress admin section and still use your specialized code.

If you need help with writing HTML and CSS, check out W3Schools for more information.

©2012 Fallen Kitten. All Rights Reserved.

Walking the Lethe Volume 1 is still available for preorder for 15 euros +S/H. Check out the full deal at Walking the Lethe.

This video needs a transcript. Want to help? Drop me a line.

©2012 Fallen Kitten. All Rights Reserved.

Naturally I also wish to encourage you to preorder our book so I get to have fun putting together volume 2 as well in a year.

This video needs a transcript. Want to help? Drop me a line.

©2012 Fallen Kitten. All Rights Reserved.

A client recently pointed out that Sweet & Sour Grapes looks pretty good on the iPad, and got me thinking about making future sites attractive on that platform as well as typical browsers. With it’s high resolution and rotating screen, many webcomic sites already look decent on the iPad without any changes. For those of us not ready to create iPad apps for our comics, check out these tips to make your site “iPad Friendly”.

• If you (like me) don’t have an iPad, you can try iPad Peek to get an impression of how your site looks in both portriat and landscape orientation. (If anyone out there wants to share how accurate this is, I’d love your input.)
• The iPad resolution is 1024 by 768, with the ability to rotate and adjust display of your site on the fly. Consider flexible designs and look into using orientation CSS.
• Touching and tapping requires cleaner designs with more white space. Avoid cramming too many small links into one spot. Plus your hover effects will not show up (much) on a touchscreen. Make those links clear.
• The iPad does not support Flash, so if you want your comic readable I recommend taking it out of any flash browser you’re using. There are many quality content management systems without flash displays you can try and you can also check out jQuery and HTML5 for some functions.

Comics Specific Thoughts

Webcomics are, of course, all about reading the comic. Readers will probably want to read long form comics in the portrait format. Try to keep the navigation close to the comic and large enough that readers can “flip” through the comic without scrolling.

Since the iPad browser is so good, you probably don’t need a dedicated app for your comic, but if you do create one you can certainly make the experience more like reading a book (or whatever semi-intuitive object you prefer).

More Tools & Tips

Since I haven’t had hands-on experience with the iPad yet, check out these larger list for more information: 40 iPad tools, tips for designers (Garmahis)

©2012 Fallen Kitten. All Rights Reserved.

It is avoidable? With the variety of  browser sizes and devises available today, the short answer is No. But it can be minimized.

Sizing the Comic & Minimizing Vertical Padding

The basic step to minimizing vertical scrolling is simply to minimize the height of your website’s elements all together. Try:

• Reducing your header size.
• Move site navigation to the side.
• Narrow your comic’s width to shorten the relative height. (But not too much)
• Skip top comic navigation for height,
• Or Include top comic navigation so your readers don’t have to scroll if they don’t want to read a full page.
• Keep in mind, a tiny amount of scroll (that hides just a sliver of your comic) may be more frustrating than a moderate amount.

Horizontal Format

Many webcomickers have made the switch to a horizontal page format to try and avoid scrolling altogether on their sites. A horizontal page typically looks like 2 “strips” placed together and conforms to the short height/wide width of most browsers. Sorcery 101 is a good example of this style.

You will still need to take into consideration width of your comic to avoid horizontal scrolling (which is an overall no-no), but this format can save you a lot of vertical space. Avoid comics over 800 or 1000 pixals depending on your readers’ most comic browser size and keep additional content (that you don’t mind readers scrolling for) below the comic and out of the way.

Alternative Device Browsers

There are several ways to read comics these days, including smartphones and iPad, and all of these alternative devices have smaller or differently shaped screens. Creating alternative site designs or websites based on the device can minimize both vertical and horizontal scrolling when using these devices. Building extra sites can be time consuming, however, so consider only creating alternative browsing experiences if a large percentage of your readership wants your comic on their iPad (or whatever).

Flash Readers

Using a Flash reader to avoid scrolling on your comic is a bit like cheating. While you might avoid browser scrolling, you probably will create a smaller space in which to read the comic; not really the effect most readers want. In addition, moving the scroll function away from the standard browser location may create more confusion than it solves for your readers.

©2012 Fallen Kitten. All Rights Reserved.

One in 12 people in the world have some sort of color deficiency. The most common type is a problem with green color receptors, which reduces the ability to distinguish green from red and mutes other shades. Other types reduce the ability to perceive red and blue, up to a rare form that reduces colors to shades of gray. Website designs can help address accessibility for colorblind people by paying close attention to color contrast and well-labeled content.

Color Contrast

Color deficiency accessibility can be improved by paying attention to color contrast. Combining red and green in particular is problematic, but other colors become indiscernible when desaturated. Black and white naturally offer the most contrast, but you probably will want to play with other color combination as well. Consider making the most important parts of your site have the greatest amount of contrast possible. Then, even if minor aspects of the design are not visible to a colorblind person they can still use the site.

Well-Labeled Content

Clearly labeling content, especially buttons and links, makes your website more accessible for all your users, but for colorblind visitors it takes on extra importance. Clear labels and alt text can help you overcome potentially problematic color combinations and improve navigation. Of course it cannot overcome a really severe contrast problem, such as text that does not stand out sufficiently against the background.

Naturally if you are not colorblind yourself, you’ll want a way to test your website. The best option would be to get a friend or family member with a color deficiency to take a look at your site and walk through each part with them; noting what they can or cannot see. (This is a good chance to make sure your site is accessible in general too.) Lacking that option, there are a handful of tools online you can use to get an impression of what a colorblind person might see.

• iamcal.com Color Vision Palette: Allows you to simulate different types of colorblindness and compare the contrast of text on a colored background.
• Vischeck: Can test your image files and (sort of) your website for accessiblity.
• Colorblind Web Page Filter: Can test your website by putting in your URL. It ignores most images.

Check your Comic Too

If your webcomic is in color, you should check the saturation to insure that your characters are still distinguishable. Even if you’re not concerned about making your comic more accessible, desaturating your comic will help you know what the comic would look like if you ever choose to publish it in greyscale.

Photo is (cc) kaleid. Used under Creative Commons-Attribution via Flickr.

©2012 Fallen Kitten. All Rights Reserved.

Challenges & Pitfalls

Changing your Twitter background is very easy, but since you have very little control over it, there are a few pitfalls to keep in mind.

1) URLs cannot be made into clickable links. There just isn’t that much control.

2) Because the Twitter panels float, your background will not scroll and can be cut off or overshot by browser windows. Minimize getting a messy look by keeping the left-hand art to approximate 200-250 px. wide and try to blend the edges into a single background color you can match with Twitter’s settings.

3) Because browsers come in different sizes, it’s easy for the Twitter background to get cut off. If you do chose to put something on the right hand side of your Twitter panel, try to keep it only art just in case. Including art behind the panel as well will ensure that visitors don’t get an empty area if their browser is a different size from your own.

3) Tiling can be messy. If you use a tile, try to find one that has blended edges and avoid tiling your logo. That’s just overkill.

Examples

The Business Card: Common among bloggers, this is the type of background I use because I have a couple websites and my readers are coming for a variety of reasons. The business card typically includes a picture, URLs (not links) to the owner’s websites, and only places information on the left hand side.

Double-Sided: Dan’s twitter, which is dedicated to Walking the Lethe, uses a double-sided twitter background with content on both sides of the central pane for a more enveloped feel.

Falling Characters: Spike’s twitter uses the left-hand area’s vertical space to showcase the characters of Templar, Arizona. This is another attractive way to use the safer left-hand area, but can be cut off by shorter screens (like laptops).

Vertical URL Plus Header: The Daily Cartoonist design is simple, but attractive with a horizontal header and the URL prominently displayed vertically.

In addition to the background, you call also change the color of the text, links, panel backgrounds, and ‘divider’. I prefer to create the background and then play with the color options until I find something complementary.

Want to make your own? If you have image editing software it’s pretty easy. Here’s a good Photoshop template from Fuel your Creativity that will help you lay out how the twitter panels will overlap your file. Just remember to save that puppy as a web-safe JPG when you are finished.

And if you don’t care to make your own but want a background designed, drop me an email.

©2012 Fallen Kitten. All Rights Reserved.

Less Than Symbol: < Code: &lt;

Greater Than Symbol: > Code: &gt;

Pipe: | Code: &#124;

If you have any trouble seeing the code, please right click your screen and select “View Page Source” to see the relate codes.

©2012 Fallen Kitten. All Rights Reserved.

The core interest in the Floating Clouds theme idea is a non-scrolled photograph background of a partially cloudy sky (or similar appropriate to the content of the comic) over which the elements of the website float.  Think the way a Twitter page background stays static while the rest of the elements move above it.  The floating elements would be white translucent shapes meant to coordinate with the background image but also stand out enough to be recognizable by visitors to the site. The “cloudy” look might be played up or down depending on preferences. Elements could be offset slightly to create a more organic feel.

Quickie Photoshop Mockup

Pros: A static photographic background would create a calm background over which the comic could star. The motion of site elements over a background isn’t particularly unique, but it is uncommon enough that the effect is a bit fresh without being too distracting. Elements of the background could be hidden and revealed by the motion of the site elements; offering a chance to include minor ‘easter eggs’ for readers.

Cons: A major challenge will be to select an image size and appearance that will degrade gracefully on either smaller or larger screens that the one the site is designed for. If a screen is larger than the photo, than the edges would crop off. If the screen is smaller, the elements above the photo could block areas intended to be seen. A dynamically changing photo could help address this problem, as could simply picking the right image and fading out the edges.

Bonus Effects: While it could become a drain on the site, a photo that changes with the time or the weather would create a very interesting effect.

©2012 Fallen Kitten. All Rights Reserved.