Web design and infinite canvases.

Discuss the future, present and past of sequential art.

Moderator: Moderators

Locked
Surlyben
Frequent Poster
Posts: 99
Joined: Sun Mar 31, 2002 4:24 am
Location: Seattle, WA
Contact:

Web design and infinite canvases.

Post by Surlyben »

I am (gulp) redesigning my website in preparation for big things ahead. And I have been looking around for ideas to steal. My (fairly modest IMO) design goals are: reasonable ease of navigation, have a front page that always has whatever is new, and it shouldn't look like it was designed by a two year old.

Now, the navigation part is easy. Just about anything would be an improvement over what I have now. What I am beating my head against the wall with is how do I deal with infinite canvases on the front page. Sometimes I post stuff that scrolls off to the side, and sometimes I post stuff that scrolls down, and I imagine that someday I may want to make one that goes in both directions. And I always want to put notes that go with the comic (I have never been one to think that the work should stand on its own.)

Anyone have any useful links for me? Or comments? I don't want to use frames (ala the http://www.demian5.com/ site)

I could put the notes in a small column to the left of the comic (which leads to the problem of people reading the notes before the comic), I could put them to the right (which leads to the problem of people not noticing the notes at all on the side scroller comics) or I could put them beneath the comic (which, of course, causes a problem of competing hierarchies when I have a side scrolling comic. Do you scroll down and read the notes, or do you scroll left and read the comic?

Above the comic is right out. (IMO, the current comic should be at the top of the list of things that people should notice about my page.)

AAAh. Head explody. [/url]
--
www.surlyben.com Recipes for the apocalypse...
InkAddict
Consistant Poster
Posts: 173
Joined: Mon May 06, 2002 10:32 am
Location: Belgium
Contact:

Post by InkAddict »

I've been working on about the same problem too:

I wanted a site that looked "clean" (no "frames"), and archived everything.

Also I didn't want to spend hours feeding HTML into BBEdit pages...

I've started investigating Blog software... I've found them quite handy, and am using iBlog from Lifli Software now.

It's clean, fast, and (once you've configured it and have learnt what it does, 'n how it does it) *dead easy*!

I'm still working on some details and will probably reconfigure my complete "blogsite" once I've found out the bits & bolts... but you should check what I mean.

The webspace itself, I got from my ISP, so I'm quite at ease with that...

Only trouble I had, is that my ISP didn't accept CGI or advanced web scripting (only Java, and still not anything!)

If you've got a .Mac account or are on an ISP who offers you space but nothing more,... be sure to check it out!

Also: iBlog is relatively cheap, and they may come up with something free soon! ( $ 19.00 )

See muy site to know what I mean: InkAddict

Good luck!
Check out my new site (under construction) at: InkAddict
losttoy
Understands reinventing
Posts: 429
Joined: Tue Apr 02, 2002 2:00 pm
Location: Ann Arbor, MI
Contact:

Post by losttoy »

An old regular from Zwol, Bob Stevenson, has a nice site at Journey Into History. He also discusses how he did it and why on TalkAboutComics. Might be a way about doing varitable infinate comics on a templated screen.
Image
Surlyben
Frequent Poster
Posts: 99
Joined: Sun Mar 31, 2002 4:24 am
Location: Seattle, WA
Contact:

Post by Surlyben »

Thanks for the link. Looks like he's been working on some of the same problems.... (Actually working on them too. Most people talk about infinite canvasses, but only a few people actually do something :P )
--
www.surlyben.com Recipes for the apocalypse...
gazorenzoku
Reinvents understanding
Posts: 629
Joined: Thu Nov 08, 2001 7:00 pm
Location: Sapporo, Japan
Contact:

Post by gazorenzoku »

hey, surlyben, how's everything? I'm also redoing the old site right now. I made a really cool Flash page, and then decided to heck with that and am now going back to HTML and graphics. Let me know when your site is new-afaied, and I will check it out.

As for "infinite canvas", I have been working on something recently. It's nothing really genius or anything, but it solves two problems at one time. Basically, I want to be able to print out anything I do and make a comic or mini-comic out of it. I solved the dpi problem by using Flash. Now everything I do can either be printed out or slaped on a web page with no fuss. Of course I had to give up fancy coloring, but recently I have really been getting all hard core about black and white design anyhow, so to heck with color.

Anyhow, I just do my pages at 150% or so of whatever size I want to print them out on, and then scan them in and change them to vector graphics in Flash. Then I line the pages up using what I think is "styles" or something so that the background behind the pages is a different color from the page background. I have no outline around the comic images, so the border of the styles box becomes the border of the comic page. With a long stretch of pages and no indication of page numbers, it kind of looks like an "infinite canvas" (of course it is finite, but that's just getting picky).

Confusing? Here is an example:

http://www.gazorenzoku.com/revelations.html

I wrote the page numbers on this one, but imagine what it would look like without page numbers. One long flowing infinite page. Not exactly as creative as it could get if I wanted to only put this online and not worry about printing it out, but I kind of like the comic book page like effect anyhow.

Feel free to take a look at my HTML code if you want. Here is the styles tag. It is local styles, so you don't have to worry about making a special styles sheet or whatever that stuff is called. Just insert this code wherever you want a big, white box. And then put all images and text under the code, and it will be in the box. Or just look at my HTML code if you want...

<p style="width: 680; padding:30; background: white; border:3px solid black; text-align:center; font-size=16pt">
Vince Coleman
<A HREF = "http://www.vince-coleman.com" target=_blank> www.vince-coleman.com
comics and stuff...</A>
gazorenzoku
Reinvents understanding
Posts: 629
Joined: Thu Nov 08, 2001 7:00 pm
Location: Sapporo, Japan
Contact:

Post by gazorenzoku »

hey, surlyben, how's everything? I'm also redoing the old site right now. I made a really cool Flash page, and then decided to heck with that and am now going back to HTML and graphics. Let me know when your site is new-afaied, and I will check it out.

As for "infinite canvas", I have been working on something recently. It's nothing really genius or anything, but it solves two problems at one time. Basically, I want to be able to print out anything I do and make a comic or mini-comic out of it. I solved the dpi problem by using Flash. Now everything I do can either be printed out or slaped on a web page with no fuss. Of course I had to give up fancy coloring, but recently I have really been getting all hard core about black and white design anyhow, so to heck with color.

Anyhow, I just do my pages at 150% or so of whatever size I want to print them out on, and then scan them in and change them to vector graphics in Flash. Then I line the pages up using what I think is "styles" or something so that the background behind the pages is a different color from the page background. I have no outline around the comic images, so the border of the styles box becomes the border of the comic page. With a long stretch of pages and no indication of page numbers, it kind of looks like an "infinite canvas" (of course it is finite, but that's just getting picky).

Confusing? Here is an example:

http://www.gazorenzoku.com/revelations.html

I wrote the page numbers on this one, but imagine what it would look like without page numbers. One long flowing infinite page. Not exactly as creative as it could get if I wanted to only put this online and not worry about printing it out, but I kind of like the comic book page like effect anyhow.

Feel free to take a look at my HTML code if you want. Here is the styles tag. It is local styles, so you don't have to worry about making a special styles sheet or whatever that stuff is called. Just insert this code wherever you want a big, white box. And then put all images and text under the code, and it will be in the box. Or just look at my HTML code if you want...

p style="width: 680; padding:30; background: white; border:3px solid black; text-align:center; font-size=16pt"

(you have to put this code within those carrots or brackets)

Anyhow, I got this idea from a friend of mine, who has a site at:

www.kenten.com

An example of what I saw at his site is here:
http://www.kenten.com/stonehenge/issue1.html

He didn't intend for this to be an infinite canvas comic. In fact, he just slapped a mini comic that he used to sell when he was in highschool online. But the format is pretty cool, I thought. The ability to either publish in paper or online or both is great.

I remember McCloud at one point saying something about how irritating it was to see people sticking to the 9x11 inch format for online comics, when they should be creating comics to fit the browser window format. I agreed with him at the time, and still think that that sort of experimentation with size and such is important and fun to do/read, but for now I am really just in love with slapping a whole series of 9x11 inch images in a row and calling it "infinite canvas". Is that going to outlaw me in any way?.....
Vince Coleman
<A HREF = "http://www.vince-coleman.com" target=_blank> www.vince-coleman.com
comics and stuff...</A>
Surlyben
Frequent Poster
Posts: 99
Joined: Sun Mar 31, 2002 4:24 am
Location: Seattle, WA
Contact:

Post by Surlyben »

Gazorenoku, partly a reply to you, partly just random rambling :). The vertical format is really quite an effective way of displaying webcomics intended for print. Heck, it's a good way to display comics intended for the internet. People can use their mouse button to scroll, which makes the interface pretty close to invisible. I hate having to click to get to the next page of a comic, and one big vertical scroll solves that problem nicely. (it creates other problems, like pages not loading completely, which I suppose is why people break up their huge vertical scrolls into chapters or episodes. I'm fine with that kind of occasional clicking.)

Side scrolling is more of problem since most people don't know that they can use their mouse button, and it is more difficult to design a coherant website around. On the plus side a computer screen is generally wider than it is tall, so I think people get the impression that they are seeing more of the comic at once in a side scroller.

Anyway, for my own site, I wanted to be able to have it scroll sideways or vertically, but not both. I also wanted to keep the multiple scroll bars and whizbang futuristic web tech to a minimum (flash is out of the question for me; I don't own it, and I can do everything I need to do without it, so I have no real reason to own it...). Keeping everything simple and easy to navigate was a priority as well.

My solution is hardly a solution at all. I used the simplest of navbars and a background image to unify the notes section with the navbar and add a little color to the pages that don't have comics. (at one I had mousovers and crap, but eventually decided to chuck all the excess. Simplicity is easier on me.) The comic goes right under the navbar on the index page, and below that, the notes. Basically I don't worry about scrolling at all. (You can check out my page at www.contretemps.net . It's still in progress, and the "finished" design has only been applied to the index and archives page. Also it loads kind of slow. Right now I'm blaming the webhost, but if anyone wants to look over my source code and tell me differently, I'd be thrilled. (Once the design is squared away, I'm going to switch to a new webhost, so feel free to offer recommendations :) . I'm Looking at www.rydia.net . They seem all warm and friendly and stuff))

Probably I'll add a link at the end of side scrollers to get you back to the notes section without scrolling. I haven't decided how to handle the archives. I could go with each in its own page and loaded in a new window (like at small stories), and the notes in a separate news archives section (that way I could use some kind of blogger technology to automate the process), or I could just stick an old comic in a renamed index.html page and call it good. Or something in between.

By the way gaz, you've got some beautiful work on that there page... The color stuff especially... *looks at other work* ...yes, Very nice...
--
www.surlyben.com Recipes for the apocalypse...
gazorenzoku
Reinvents understanding
Posts: 629
Joined: Thu Nov 08, 2001 7:00 pm
Location: Sapporo, Japan
Contact:

Post by gazorenzoku »

sounds good. Simple is always better. I'll check into your website more once we get back from our little hot spring trip. This week is the one week vacation in Japan everyone calls "Golden Week", and though I want to get a lot of drawing done, I also decided to take at least one trip to a hot spring with the wife. We chose an overnight stay at a place that has a selection of DVD movies, so we can get all nerdy at night and watch a bunch of t.v.!!

Anyhow, I have always liked your usage of negative space in the side scrolling comics that you do. I personally think that side scrolling is a great device artistically, but as far as technology goes it can be a little bit ... irritating. I like to use the arrow keys to scroll, and for some reason the side to side arrow keys just don't scroll as fast as the up and down ones!! One day they will, maybe. Until then it is a give and take situation. But anyhow, I like the way your comics read, regardless of the technological difficulties.

I also like how your notes are placed.

But, I have to stick up for my favorite drawing program, Flash!!! It isn't only a fancy pants software for doing all sorts of crazy things like animation and website design and stuff, though of course it is that too. It is the ultimate in simplicity! I never worry about dpi ever! Everything done in Flash can either be printed out or slaped on a web page, with absolutely no hassle. It is a dream come true for me, because I like to turn all of my comics into mini comics if possible. Of course I am not telling anybody what to use, and if you have found something that you love to use then that is great, but I do want to dispell the myth that Flash is only a complex animation software. The only reason I even use Photoshop anymore is to scan stuff in now. Everything else is pretty much done in Flash.

Anyhow, thanks for the comment about my art. When I got back into drawing comics after almost 3-4 years of not doing anything, my art really sucked. That was about 2 years ago. I was studying Japanese Painting at the Hokkaido University of Education, and my art style was really uninformed. After drawing tons of flowers and nudes again, trying to get back to the way I used to draw and excell over that even if I could, I finally was able to find a drawing style that I love. Part inspired by the ancient Chinese-Japanese art of inkwash, part inspired by modern Japanese painting, part inspired by Mike Allred/Kirby, part inspired by R. Crumb, this is a drawing style that litteraly makes me feel high!! I have to be careful what I say, because this drawing style is like a drug, and I feel like my ego is soaring way too high recently, which is odd for me. But, though I don't have any personal cocaine experience, I have been told that it makes you feel like a god and that is exactly how I feel right now. An odd time in life......

Well, anyhow, we're off to the hotspring. I'll check your site out more when we get back. So far I enjoyed what I saw over the past few months a lot!!
Vince Coleman
<A HREF = "http://www.vince-coleman.com" target=_blank> www.vince-coleman.com
comics and stuff...</A>
Locked