October 6, 2008 at 8:48 pm - Off

I’d like to start putting higher res versions of these comics up. It kills me to have to size the art down sometimes, but I’ve never been able to think of a good design solution that won’t look like crap on computers with the standard 1024×768 desktop.

Here are some examples of recent comics at a higher (but still not full) res: Can’t Let Go, Not So Easy Rider

If anyone out there has any ideas about how to design a page that incorporates images with that kind of detail, I would love to hear them.

- Jeremy

Viewing 44 Comments

military grade night vision 3 months ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

This was very good to know... Thanks for all the information:)

reply edit reblog flag

1 /people/kasdklha/ /people/kasdklha/following/

size 14 shoes 4 months ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

That's definitely an option, and likely the easiest way to go, but I'm interested in more dynamic solutions if they're out there.

reply edit reblog flag

Cheap Web Hosting 5 months ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Issues with this design are, of course, panel-less comics (your 3 panel style is great though, especially when you do subtle breakouts, like Not So Easy Rider's pogostick), and the possibility of losing the "overall" detail.

reply edit reblog flag

1 /people/sajhdkal/ /people/sajhdkal/following/

7jd5fk 8 months ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

jjjjj67566 fgfgf sdssess er rtd

reply edit reblog flag

http://91e477ffe7.com/

8d2nub 8 months ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

dsfsdfs67877 test test

reply edit reblog flag

http://106dcc9ab3.com/

nyluqz 8 months ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

ghhhh5432 gfhg ghfgffff

reply edit reblog flag

http://fda86bb3bc.com/

t7ana7 8 months ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

hjhggg6642 test test

reply edit reblog flag

http://d348e0a919.com/

2oymm4 8 months ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Hello, Very nice site. Universe help us, dont worry man.

reply edit reblog flag

http://029906efc2.com/

uybj8y 9 months ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

harb45 test test544343

reply edit reblog flag

http://6abc166b05.com

mrmeval2 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

I'd suggest making the images clickable links but only for subscribers. I'm not sure if you want to do paid subscriptions or stick an ad in there but it would help pay for the bandwidth.

reply edit reblog flag

1 /people/tbkjames/ /people/tbkjames/following/

Garrett 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

I vote for same width, but putting one panel per row. Of course, then you're not taking advantage of larger screen sizes.

reply edit reblog flag

http://www.kennychronicles.com

CaseyTech 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

I think that the easiest thing to do would be to but a link under each comic saying to click the here for a higher resolution version of the image, then have the high res version of the picture on Flickr. This will save you bandwidth and be very easy to implement. I do the same thing on my blog, http://caseytech.blogspot.com . When you click on an image in a post, you will be sent to the full sized one on Flickr. but, of course, you may not want to have your images as low quality as mine.

reply edit reblog flag

http://caseytech.blogspot.com

Jeff 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

You could get super crazy and do this. Create the page so that it stretches nice and wide. Then, when the page loads you can measure the width of the screen, round it down a bit*, and then send the width off to a backend script. That script would then take a super high res version of the image, scale it down (nicely with GD or image magic) save it out and server it to the viewer. You could even refresh it if the browser resizes. Add a little caching and you're off. You could even preprocess the images to be of 10 different sizes and get a "best fit".

* Rounding here so you don't end up with 1000 variant sizes of an image that's 1000 pixels wide.

Someone will come along to this and say "Just add an image tag and set it's css to "max-width: 100%" and be done. True, except for the browsers that don't support that and also for the fact that GD/ImageMagic will do a much better job scaling the image than the browser will.

reply edit reblog flag

http://jrm.cc

--- 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

The best idea would be to auto-detect resolution. If that can't be done, I'd say go with allowing users to set cookies with their preferences. While links are a good start, for people like me who just recently discovered the comic and are reading through the archives, it would be nice to have the page always in the size we want.

For the images themselves, you can just keep a few different resolutions available (and choose which to load based on the above suggestion), or default to the largest and just scale them with html (albeit that wastes a fair deal of bandwidth).

reply edit reblog flag

Jeff 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

I should read before writing... doh.

reply edit reblog flag

http://jrm.cc

Superdotman 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

http://nickcowie.com/2006/css-reboot-havok/
tl;dr:
Resize the browser window and watch the header.

The math in in here:
http://nickcowie.com/2006/the-fluid-elastic-reb...
And a bunch more information is available under the right tag:
http://nickcowie.com/category/elastic-design/

reply edit reblog flag

Off 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Very interesting stuff there. I'm worried that getting this site to auto scale would strain my rather limited understanding of CSS, but I may start playing around...

reply edit reblog flag

2 /people/Off/ /people/Off/following/ http://truckbearingkibble.com/

Mini0n 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Lightbox2

Here: http://www.huddletogether.com/projects/lightbox2/

reply edit reblog flag

Superdotman 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

I meet your Lightbox and raise it one FancyZoom.
http://www.cabel.name/2008/02/fancyzoom-10.html

reply edit reblog flag

Off 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

That's kind of nice...

reply edit reblog flag

2 /people/Off/ /people/Off/following/ http://truckbearingkibble.com/

Peter 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

I suggest simply adding a link under the respective comic that says "This comic is available in higher resolution: (link)", or something of the sort. It keeps things easy for you and us.

reply edit reblog flag

Kevin H 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

You could maybe use the Deep zoom thing that comes with silverlight. I'm not sure how to use it though.

reply edit reblog flag

http://www.burntpopcorn.net

Off 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

I just looked into that a little. I kind of like the concept, but I don't want to force people to have to install Silverlight to use this site.

reply edit reblog flag

2 /people/Off/ /people/Off/following/ http://truckbearingkibble.com/

Khao 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

You could keep the images this size on the frontpage and when you click make the full version appear full-size with AJAX. With javascript it could be pre-loaded so it goes incredibly fast and there can be some nice animations too!

reply edit reblog flag

1 /people/Khao/ /people/Khao/following/

Off 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

This would create one of those "fake" popup windows I take it? I'm not familiar with AJAX.

reply edit reblog flag

2 /people/Off/ /people/Off/following/ http://truckbearingkibble.com/

Khao 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Yes, pretty much like everything in Facebook if you're familiar with it, all the pop-ups are with AJAX (which is pretty much just fancy javascript).

reply edit reblog flag

1 /people/Khao/ /people/Khao/following/

Peter 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

If you opt to do this, please also add a non-javascript version for us people who simply dislike use of javascript when unnecessary (say, open the full image in a new tab rather than doing fancy JS and preloading and such)

Also, this would cause the page to take longer to load, which is generally bad.

reply edit reblog flag

KyleZ 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Second'd

reply edit reblog flag

2 /people/KyleZ/ /people/KyleZ/following/

Asmor 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Turn your problem into a solution...

Just make the image bigger, but keep it in a div that's limited in width. Thus the left end will be cut off until you scroll over to it, preserving the punchline for maximum effect!

reply edit reblog flag

http://www.encounteraday.com

Peter 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

No, this would be annoying. Please don't do anything that requires manual scrolling to see the comic.

reply edit reblog flag

DxC 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

1024x768 is still the standard resolution? We must be stuck in the '90's somehow. Seriously, most people use 1280x1024 or at *least 1280x960 if not higher nowadays, that said, just have some javascript or something that detects the resolution and displays an appropriate image. That would work no?

reply edit reblog flag

jfalco 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Disagree. I can only get up to 1024x768, the same as many people who browse sites like this from work.

reply edit reblog flag

1 /people/jfalco/ /people/jfalco/following/

Michael 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

sadly enough, anchor tagging a GIF or JPEG image to display various coordinates (think sprites, but without the teenie bopper Sonic the Hedgehog cartoon re-creations) could work - a simple click (or left/right scroll with the proper javascript) and you could horizontally scroll the various comic panels.

Issues with this design are, of course, panel-less comics (your 3 panel style is great though, especially when you do subtle breakouts, like Not So Easy Rider's pogostick), and the possibility of losing the "overall" detail.

Personally, I think a simple click to "high-resolution version" is sufficient for those of us with 1600 or great horizontal resolution, but I'm not exactly an artist (I just spin news).

reply edit reblog flag

Off 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

I'm not quite understanding the anchor tagging idea. Could you link me to any examples?

reply edit reblog flag

2 /people/Off/ /people/Off/following/ http://truckbearingkibble.com/

Derek Quenneville 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

You could split the RSS feed into "reduced" and "full" so that people gravitate towards the best version.

Or just go hog-wild like the Subnormality guy and output the comic at whatever resolution and layout is appropriate for the comic. I sure don't mind some horizontal or vertical scrolling for a great-looking strip. Have a look at his two most recent comics:

http://www.viruscomix.com/page458.html (wide)
http://www.viruscomix.com/page459.html (tall)

reply edit reblog flag

http://www.techknight.com

Fry-kun 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

You can always get the browser window size using JS, and even change the image on the fly when user resizes the window.

reply edit reblog flag

Anon 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

This is definitely the one to go with. It would adjust itself to suit totally automatically and invisibly and it would probably require no extra work beyond a one-off change to add the javascript to the page.

reply edit reblog flag

jimmckeeth 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

You could do them like a slide show, one frame at a time. Or you could do vertical scrolling instead of horizontal scrolling. The great thing about making it so the last frame isn't immediately visible is it keeps the "punch line" a secret - especially since your punch lines are usually visual. Occasionally with horizontal layout comic my eyes scan the last frame first, and I get the punch line.

Scott McCloud http://www.scottmccloud.com/ has done some interesting work with vertical scrolling comics. You did a virtual scroll on this comic: http://truckbearingkibble.com/comic/2008/05/27/... so just make it as wide as your other comics are and then you could get away with it.

If you want to go with a slide show you could use either flash where the user could click to go to the next slide, or javascript. If you converted it to a powerpoint then Slideshare.net would work for you, or you could just split it into 3 images and use Flickr.

reply edit reblog flag

1 /people/jimmckeeth/ /people/jimmckeeth/following/

Off 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

The slideshow idea is interesting but it doesn't seem right for TBK. Perhaps for another project... hmmm.

Also, thanks for the Scott McCloud link. Interesting stuff.

reply edit reblog flag

2 /people/Off/ /people/Off/following/ http://truckbearingkibble.com/

CogNoman 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

You could maybe get rid of your current header and then just have the massive comic strip run across the top of the screen...and then stuff all this comment/blog stuff underneath it?
I've never seen a site that looked like that, so...it would be different, at least.

Either way, since I'm here, I might as well say that I love your strips, heh heh. After the Perry Bible Fellowship died, I went looking across the 'net for strips that might be as creative and yeah, your stuff more than fits the bill. Keep up the great work !

reply edit reblog flag

1 /people/CogNoman/ /people/CogNoman/following/ http://www.cognoman.com

Michael Barrett 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Vertical comics?

reply edit reblog flag

http://abouthalf.com

greatslack 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

Why not just have links to the higher res versions on each comic? Simple enough.

reply edit reblog flag

1 /people/greatslack/ /people/greatslack/following/

Off 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

That's definitely an option, and likely the easiest way to go, but I'm interested in more dynamic solutions if they're out there. I would like it contained on the page so that the high resolution image is he first and only impression people get of the comic, rather than seeing the low res and then having to hunt for a link.

reply edit reblog flag

2 /people/Off/ /people/Off/following/ http://truckbearingkibble.com/

greatslack 1 year ago 1 point
Please login to rate.

Do you already have an account? Log in and claim this comment.

In that case, I would suggest having the hi-res as the default, and then have a link for "revert to low-res", which would create a cookie to remember the people who like the low-res version of the site. If you don't want to use cookies, you can always have the low-res link supply a GET parameter that specifies the image size wanted (i.e. truckbearingkibble.com?res=1078), so that people can link to different res versions of each pic, while keeping it dynamic.

Since your high-res pics are at 1680 width, I imagine your full res pics are humongous, sufficiently big that a very small percentage of your readers would have a big enough monitor to view the whole thing at once, so those would most likely necessitate links.

Great comic, by the way. Keep em coming!

reply edit reblog flag

1 /people/greatslack/ /people/greatslack/following/

Looking for Ideas

October 6, 2008 at 8:48 pm - Off

Add New Comment

Viewing 44 Comments

Add New Comment