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 35 Comments

mrmeval2 2 months 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 2 months 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 2 months 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 2 months 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

--- 3 months 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 2 months 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 3 months 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 3 months 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

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

Mini0n 3 months 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 3 months 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 3 months 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

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

Peter 3 months 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 3 months 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 3 months 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

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

Khao 3 months 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 3 months 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

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

Khao 2 months 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 3 months 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 3 months 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 3 months 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 3 months 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 3 months 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 2 months 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 3 months 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

Looking for Ideas

October 6, 2008 at 8:48 pm - Off

Add New Comment

Viewing 35 Comments