Skip to main content

Webcomic layouts? How do you minimize the negatives?

By this I mean that there are certain limitations to the Internet... much like any medium. Even though in theory there is infinite printable area on the Internet, there's obviously a practical maximum. So even with the great flexibilities you get with online publishing, you get certain negatives, like for example scrolling.

Basically, what kind of layout can minimize these negatives to Internet publishing:

1. Load time
2. Scrolling (Page size)
3. Complexity

At the same time, you want there to be an attractive layout, one that offers one-stop access to everything. For my site, I use a masthead graphic and an imagemap menu below it, some text blurbs that explain how to use my dropdown plotline index, and then the comic itself. But I don't know if I'm minimizing the negatives.

Also, I specifically designed my site and comic to the assumption that people would not open their window beyond 640 pixels or something like that. What size do people generally open windows, or do they do maximized (full screen) viewing?

Sorry for the incoherence of this post, I may be tired at the time of authoring... hehe.

-Seth

Webcomic layouts? How do you minimize the negatives?

By this I mean that there are certain limitations to the Internet... much like any medium. Even though in theory there is infinite printable area on the Internet, there's obviously a practical maximum. So even with the great flexibilities you get with online publishing, you get certain negatives, like for example scrolling.

Basically, what kind of layout can minimize these negatives to Internet publishing:

1. Load time
2. Scrolling (Page size)
3. Complexity

At the same time, you want there to be an attractive layout, one that offers one-stop access to everything. For my site, I use a masthead graphic and an imagemap menu below it, some text blurbs that explain how to use my dropdown plotline index, and then the comic itself. But I don't know if I'm minimizing the negatives.

Also, I specifically designed my site and comic to the assumption that people would not open their window beyond 640 pixels or something like that. What size do people generally open windows, or do they do maximized (full screen) viewing?

Sorry for the incoherence of this post, I may be tired at the time of authoring... hehe.

-Seth

Uh. . . I think I get the idea. You're talking about wasted space on the "page" as it were?
I just sort of build my site around the comic itself. The masthead with a menu running next to the comic has worked for me for a good while now. I design for a larger resolution actually. You can get my site okay with 800 x 600 but most of my friends are set higher. Folks like them are my target audience. I think it's been effective so far. Load time is a problem though. That's the problem with high detail (riiight) images like mine. It doesn't take too long on my dial-up connection, so the dsl-ers shouldn't be having a problem.

I've found that using the "Save For Web" feature in Photoshop is a lifesaver when it comes to comic size and various other images on one's site.

Hmmm, very good points! I'll consider those for my own work!

-Seth

Well of the things I've seen. . .
Load Time: Avoid Gradients unless you must have them. I've forgotten and done this myself more than once. They are common as backgrounds in anime so a lot of people reach for a gradient when they don't want to draw a whole background for their comic, but gradients are very hard to compress and will make the comic far larger than a solid color, or a geometric shape in the background. I also use text links instead of images for the forward, back, first, and last buttons to save an extra couple dozen K for the readers. Of course striking the right balance between image quality and compression is important, anybody who puts up Windows bitmaps as their comic's normal format deserves no readers (which is what they'll have when people require 5 minute downloads for a tiny section of image.)

2: Scrolling, I don't worry about this much. I try to make sure my page won't scroll horizontally at anything smaller than 800x600 but vertical scrolling happens for a comic as big as mine. I don't think readers are so lazy they can't roll their mousewheel or scroll the screen down, it's horizontal scrolling that gets irritating to people. Aside from physically making your comic smaller or giving up comments about it there's little to be done, though a huge massive header taking up half the screen should be avoided in my mind.

3: Complexity, well, I use text links instead of images for buttons, as I said. I also try to go with a min-tech approach to my comic, no CSS, no Java, and minimal bells and whistles. Normally I just use H1-H5 for my headlines and don't play around much with the fonts and such. Also I usually use a centered table to position the work properly, rather than just plopping in on the screen. The table lets me put a colored box around the work adding to the screen interest but the entire table will eat, at most, a hundred or so bytes of Data. You can actually get surprisingly complex layouts playing with tables while not noticably increasing download times as you would images.

Steve Ince's picture

I too am a firm believer in tables.

Quote:
1. Load time
2. Scrolling (Page size)
3. Complexity

1. about 200k per page. That's around a minute on 56k I imagine.

2. comic is right under the logo, 700x1000. pretty large, but I originally had them at 920x1300(fine for me, bad for anyone else x_X )

3. logo-comic page-navigation menu pretty much. yup. I don't have any real skills in html/php whatever, but thats sufficient. I had a friend working on a design for me, but he hasn't followed through unfortunately.

rezo~

Steve Ince's picture

I never touch html or anything like that as I can do everything I want using a wysiwyg editor. I use Namo Webeditor and even though I'm about three versions behind the latest, it does for me. I can ususally update the pages on my site in about ten minutes.

[quote:ca3ed57ba4="Steve_Ince"]I never touch html or anything like that as I can do everything I want using a wysiwyg editor.

Don't ask me why, but I can't stand those things. The only thing I use for my web page is notepad and a reference book with code.

I do agree with what you said earlier. Tables are the best thing since sliced bread.

Heh, I use Go Live by Adobe. Yes, I'm almost owned by that company.
My website is one gigantic table and then I have some smaller tables inside it. =P
They sure are the beez neez.

Steve Ince's picture

[quote:cf03b68d84="Kota"]Don't ask me why, but I can't stand those things.
I don't understand why so many people seem to love messing about with html. :) If you were writing a novel you'd use proper word processing software. If you work with images you probably use photoshop. Why not proper web editing software?

I used to program, so notepad is quite fine for me. Using a program doesn't feel right. Though, if I ever needed to do something beyond me, I would perhaps check into one.

And art programs aren't much of an analogy to web editing software. I Can't very well resize my image for the web manually. But If I had the option of typing in "resize 80%" in notepad to change image sizes, I'd surely do that instead of loading up a seperate art program for it.

rezo~

I used to code in HTML back in the dark ages of 1992 when the internet was young but I didn't bother keeping up with new advances, now I can only program basic code and don't know half the tags out there, so I use an editor. It screws things up all the time but it's a real pain trying to get a table to work without an editor to size the columns, join or split cells, etc. I usually do image tags seperately in an ASCII editor as well as most text effects.

Steve Ince's picture

One of the things I like most about Namo is that I can copy whole cells or columns, paragraphs, whatever and when I paste them into another page of my site it adjusts all the relative links. So when I set up my new Dane & Joe page recently it hardly took any time at all. Gives me much more time for the actual writing ad drawing.

[quote:b8f23ea101="Steve_Ince"]I don't understand why so many people seem to love messing about with html. :) If you were writing a novel you'd use proper word processing software. If you work with images you probably use photoshop. Why not proper web editing software?

Don't get me wrong here, I use photoshop and word perfect as much as the next guy. I just think that knowing html is a good thing. If I want to update my site I can do it from anywhere in the world that has notepad. That and I get a huge rush from making the whole thing and knowing I did it all myself. I'll admit, tables were a pain to learn, but all the software I've tried just screwed up with every aspect. Maybe I'm doing something wrong, but I'll just be old fashioned when it comes to my webpages. Of course, PHP is another matter entirely. . .

Steve Ince's picture

[quote:7d929c1f28="Kota"]I get a huge rush from making the whole thing and knowing I did it all myself.
I get my rush from creating the comics. :)

Generally if I want to dump a page out rapidly, I use Netscape Composer (it's actually a pretty simple editor and rather solid... well, the one in Communicator 4.7 is anyway...). But a lot of times the WYSIWYG editors will munge special codes like my imagemaps, and there are other editing artifacts. So generally if I'm doing a page that doesn't involve my special imagemap site menu, I'll use the text editor.

And when I was working on integrating my phpBB into my site, I had to use a text editor... it would never be able to be edited with my WYSIWYG editor. And I try to use M$ products as little as possible.

I'm not good enough with hand-coding tables yet though, so if I have a page that requires a complex table, or at least a repetitive one, I'll use Composer.

By the way, I'd like to endorse GoldenPen as one of the best free text editors I've ever seen... and it comes with syntax highlighting too. Folks who do their coding by hand like me sometimes might enjoy it!

And Kota, I wholeheartedly agree with you. Knowing HTML is a plus, especially when we're far removed from our normal workstations, as I am from time to time. (I work outside home sometimes) Besides, it's helpful to use it to gain an understanding of coding and such. That's why I teach my students HTML.

-Seth

my (idealistic) webcomic site design principles;

FASTNESS! The comic is the most important part of the site. And menu/header images should be kept to a minimum, both in size & number. Theres nothing more annoying that sitting on a phone modem sucking up the internet through a straw, waiting for the menu to load before the comic does. So yeah, simple is best, imo.

Scrolling; Browsers can't scroll widthways too easy. So unless it's important to the format of your comic, keeping to a width of 740px max is important, I think. 800x600 users take up 40% of the internet's population (I'm assuming public access), so they're worth catering for. Private home PCs tend to have a higher res (1024 +). 640x480 is barely in use anymore, so I ignore it. Comics tend to look shite & jaggy at that res anyway. Scrolling vertically is fine though, imo, so long as the page is divided so that entire frames fit in the window at the same time. :) browsers are quite happy to scoot up & down a comic.

Navigation: Comic navigation should ideally be in the same place on every page, and not shunted around by the comic strip, 'cos having a reader think "oh, got to move my mouse" can damage any momentum or immersion the comic had built up. The best navigation imo is having the strip itself clickable to advance to the next one, 'cos then you barely have to think about it, especially if you have to scroll. Also, navigation controls should be at the top & bottom of the strip if it's a page-format strip. Small thing, but if someone gets to the bottom of a page and wants to go back, not having to scroll back up is a cool thing. :)

Archives: All comics should have an archive! Ideally, one organised by storyline, rather than by date. Sinfest has a cool archive. :)

For the record, I think my site conforms to about half of these. XD I'll get it right eventually...

But yeah, I use PHP (and ATP Autosite to power the comic. :D It rules. :D) and code in notepad, using wysiwyg for tables that would otherwise murder my head. XD And yeah, Photoshop for optimising imageses. ^^

I use Photoshop to create the navigation bars, then slice them, save for web (each slice individually, which means that some are smaller), then copy-paste the HTML it creates into GoLive. I can get some snazzy-looking but quick-loading pages that way. If you don't know how to use slices, learn because it's a wonderful way to do an image map without tearing your hair out.

My biggest problem with WYSIWYG proggies is that more often than not, they add a crapload of extra code that isn't needed, and that can play havoc with older/non-traditional browsers and etc.

I'd rather just use notepad as well -- I'm no pro by any means, but even setting up a site as simple as this for a friend's charity is easier to do with straight HTML. I know that I couldn't get it to work as smoothly as I did with cluttered WYSIWYG code.

But hey, to each their own, right? ^_^

I use Frontpage, but I usually pull it into notepad to edit out the unnecessary bits it adds. (Like ya said, damonk13.)

I'm glad to find a few people out there who don't use code in the page making. Creating web comics is hard enough thank you very much. LOL

I use an infinate canvas on The Service which makes editing mistakes and such a doddle, but can play havoc with peoples diplays on a flat screen for some bizarre reason.

I think I use about three dozen things you've said not to as well :-) gradients being one. Oh well experimentation is the only way to go some times

My basic approach to making a page is; three cups of coffee, lots of bad language, a change of pants, everything forward and a prayer to whichever diety is passing.

If it works I have anouther cuppa, if it doesn't I have anouther swear.

Something I like about the web though is the lack of confines space wise. There's a lot of things you can do on a web comic you can't in a paper and ink because of space restrictions.

Al Schroeder's picture

What they said about the extra coding. Which adds to the load time.
I do all my coding in notepad, and never regretted it.
Knowing html for your web page is like knowing anatomy for your drawings. You can draw a surface drawing half way decently without knowing anatomy, but the more anatomy you know, the better your drawing is. Ditto with knowing html and building web pages. Besides, it suggests things---like linking to previous parts of the story rather than doing flashbacks, for instance.---Al

 Al Schroeder III of MINDMISTRESS---think the superhero genre is mined out? Think there are no new superhero ideas? Think again.

Dave Wright Article worth checking out on this

Xaviar Xerexes's picture

We just put up part 1 of a series on webcomic website design---

<a href="http://www.comixpedia.com/html/modules.php?op=modload&name=News&file=article&thold=0&mode=0&order=0">Click here</a>

I run this place! Tip the piano player on the way out.

I know HTML, but man if wysiwyg doesn't make things simpler. There'a a lot less trial and error with my prog (Dreamweaver) and tables suck when you're straight coding.
To update, All I basically have to do is copy my template and change a few numbers, but news posts would suck if i didn't have a WYSIWYG editior.

I prefer using Notepad, myself. It makes the file size much smaller than with a program (they always add ina bunch of useless lines of code).

I only reccomond using those to help set up tables, then, copy and paste the code into another file and start programming.

Now, to the topic on hand.

To create an effective layout, you first have to understand two things. One being how most people's minds will operate and two, someone will not like the layout. Period.

I'm now goign to adress the first three points brought up in the first post (I'm tired, so sue me)

Loading time - Everyone confuses this with size and speed. Not true. All you have to do is make the page LOOK like it loads quickly. Take Kid Radd. Go through his archives and see how fast each frame loads. The creator has managed to load the next frame on the prior frame, so that the pictures will load up as qucikly as you can click the buttons.

Scrolling - People hate the horizontal scroll. Why? Because it's not normal (and, in most cases, it's impossible to avoid) And, also, once people are done with the row, they have to scroll all the way back to where the enxt row starts (have you ever read a .txt file, with no word wrap? Remember how annoying it is to read the file?)

Complexity - this is usually genereated if there is a failure (or, just a really bad) navagtion system. Anything anyone is lookign for should be no more than three clicks away (and, even then, that's pushing it)

I've noticed a lot of people fail to put Back/First Navigation on thier first page. I know for a fact most people don't like that, especially when that means dealing with a straight list archive page that gives no clue as to which comic is which

Yah, it's a real pain. Espically when you miss the past comic and have to use their archives to find the comic.

Whenever I do a page for a comic, I always include a First, Previous, Next, and Latest link. It's alot more convient for your readers, which make them happy, which means they are more willing to continue reading, which means the possibility of donations :D

what about those with a lack of comic on the first page? I'd under stand if they were preloading images, but they aren't and sometimes you have to go to the current comic to get to the archives.

I know I'm probably doing some no-no's too (someone told me my black background made me look like an ameteur) but these are the ones that concern me.

Page Layouts:
Well, I make my comic for the 800x600 users, peopel do use it and people that know only how to turn on the computer and brows the net use that res, since it is teh defualt. And I know their is alot of people like that. I was in Art Ins in Phillie and in a Computer Science class, and only 3 people their new how to turn on a computer and out of those 3, 2 knew how to get in net to cheak e-mail, and I was one of those people... So not many people really know alot about computers to change their res. So I make mines for that res.

Load Time:
I try and keep it down as much as possible but yet make it readable for all res people. So I make the comic itself not go beyond 150k. Latly it has not go over 110k. If you on dail up, depending which one, it should take around 30 secs to 40 secs. I read somewhere that peopel will not wait longer then 45 secs to veiw a web page. I also use a drop down list for my back and foward. Just click the comic you want they in order and numbered and their you have it, it loads and goes in the place it needs. I know a bit of HTML, I would not say I am the best but I am not a beginner.. I am also learning some PHP becuase they have a way you can auto update which is best, only need to load a weeks of comics and it autoloads when the day comes. EASY!! LOL

Programs:
Well, I heard all nice things about hotepad and what nots, but me, I use Dreamweaver MX, it takes me about 2 to 5 mins to update a webpage. EASY AS PIE!! I just go in change the comic, and then make the rant and their you go all done. Easy!!! I use tables as well, everything is just much faster that way and I don't really have to look thur a list of codes, i can just have the top be code and the bottom design and i click what i want and edit teh code. Since I don't use back or front buttons for my page justa drop down, it is pretty easy.

But this is the way I do it, everyone else has their own ways... I know people that use pagebuilders and microsoft word to make their web sites.. they not the best, but it looks ok.. Looks liek an amutar did it, with no tables and harder to do advance stuff... and also everything aligned left... But they like it... Atleast I know one of em knows HTML and wants a better program, but money.... LOL oh well..

I originally used word. Small problem: Only people with word can see your images. I think I owe a small part of my small fan base to those first three weeks where we were on a school server, in frames, coded in MS's speghetti code.

I think I'm the odd one out. :D

The strips on our site are generated from a database that has information on each panel, like width and height and position on the page. At the time of output (like, when someone clicks the link for a certain episode), the panels are all put in <img> tags inside of <div> tags that are sized and positioned with css, and all the widths and positions are converted from pixels to em's (a css unit, around the width of a capital M), so when you change the text size in your browser the sizes of all the panels change, too (they're supposed to, anyway). Then all the panels are put into one big containing <div>, and a javascript makes sure that big <div> stays centered either vertically or horizontally (depending on what's specified in the database), even when the text-size changes or the user changes the size of their browser window.

Having individual images for the panels helps for load time, in the sense that there's something to see pretty quickly. And we try to be careful about exporting. Most of the panels only have something like four colors in them not counting blurs photoshop likes to do (anti-aliasing and such), so we set the number of colors to 32 or 64 or something when exporting (we use pngs), whatever looks decent.

Of course, all this has the downside that it probably won't work as intended for people with old browsers (like NS 4, probably), which is unfortunate, but the vast majority of people ought to be able to see it just fine. Hopefully.

Al Schroeder's picture

Also, there is a practical reason. HTML editors tend to add too MUCH HTML, often unnecessarily. So it takes the page a little longer to load as it "reads" the HTML. Hand-coding is best. It's not for everyone, but if you can do it in notepad (or editplus---highly recommended) it's definitely a plus. And HTML really isn't hard.---Al

 Al Schroeder III of MINDMISTRESS---think the superhero genre is mined out? Think there are no new superhero ideas? Think again.

[quote:ccff927a76="ledgermain"]I originally used word. Small problem: Only people with word can see your images. I think I owe a small part of my small fan base to those first three weeks where we were on a school server, in frames, coded in MS's speghetti code.

I'm embarassed to say I, too, used Word quite a bit in my first year or so. The Word on my old Windows 98 worked as a clunky, but servicable HTML editor. But when I moved to a new computer with XP, the new version of Word it came with was absolutely vile - vomiting dozens of lines of bloated, useless code onto every page it touched, and replacing the most basic html tags with unnecessarily complex alternatives I'd never heard of. But I thank that beast for pissing me off so badly that I set off to learn how to code it for myself.
Now, I basically do everything in notepad...and the end result is much nicer. If things get a little more complex, I'll pull it into a freeware HTML editor (I've used FirstPage and AceHTML...both very clean, won't add junk), mainly for a quicker screen preview than uploading it.
I basically find that by doing it by hand, you can prevent a lot of crap sneaking in. But if you've got an easy to use editor that gives good results without detritus, then godspeed!

I've said this in my Rants, and I'll say it here. DO NOT use MS Word for you site. The junk code keeps your images from showing up on any page that is either not IE 6 or does not have MS Office software.
The developers at MS should be shot for what they did to a passable WYSIWYG by adding proprietary speghetti code to every bloody generated page

end rant.

[quote:a94c4c5a7a="scarfman"]I handcode my pages because if something were to go wrong I'd want to know I'd done it and I could fix it. Since almost all the HTML I know I learned in 1996, that makes my pages pretty easy-loading, which is equally why I do it. But I am a recent convert to tables, at least for my archive and cast pages (so far).
I dont get these kids who think hand coding is a nightmare.

And I always use tables because I still find Internet Explorer to screw up CSS when I use it. And since 99% of the world uses IE, well....HTML it is.

Townie's picture

I've been trying to optimize my page for faster load time. (Though I'm still working out issues for scrolling, since resizing some strips shrinks the font too much) Even if you use the Save for Web feature, try running your image through an optimizer. Xat.com's image optimizer will usually cut the filesize in half, even if you save for web. I normally keep my strips under 80k if I can help it

- Ben

scarfman's picture

I handcode my pages because if something were to go wrong I'd want to know I'd done it and I could fix it. Since almost all the HTML I know I learned in 1996, that makes my pages pretty easy-loading, which is equally why I do it. But I am a recent convert to tables, at least for my archive and cast pages (so far).

J-Sun's picture

[quote:e55b4a11de="chi"]Scrolling; Browsers can't scroll widthways too easy. So unless it's important to the format of your comic, keeping to a width of 740px max is important, I think. 800x600 users take up 40% of the internet's population (I'm assuming public access), so they're worth catering for. Private home PCs tend to have a higher res (1024 +). 640x480 is barely in use anymore, so I ignore it. Comics tend to look shite & jaggy at that res anyway. Scrolling vertically is fine though, imo, so long as the page is divided so that entire frames fit in the window at the same time. :) browsers are quite happy to scoot up & down a comic.

I tend to agree that many browsers don't really like the horizontal scrolling.
I have been playing around with some ideas - using Flash and embracing Scott McCloud's infinite canvas theory/ideas - wherein the scrolling in ALL directions is done for you by simple clicking... What works for one strip doesn't always work for another... I'm still struggling with how to get something that works "just right" with my idea... the experiments continue...
:wink:

[url=http://www.cybertropolis.com/comics/index.html][img]http://www.cybertropolis.com/downloads/banners/cyber366x50.gif[/img][/url]