The art of Web Design, found via BoingBoing.

Watching this will help you understand 80-90% of the jokes you didn’t previously get on this site.

See More Posts About:

Comments:

  • A link to this post:
  • StumbleUpon
  • submit to reddit
The System 600: WHAT HAVE WE LEARNED SINCE THE LAST TIME WE DID THIS

Like numbers 500400300200 and 100, another recap of what we’ve learned in the last 100 comics. I enjoy putting these together, but they do take quite a while. All the panels are from comics from the last 100 comics. Can you name where all of them are from?

Also, we have something else to celebrate! We also recently passed the four-year anniversary of the comic as well. 400 comics! That’s pretty good, right? That officially makes The System my longest-held job / relationship.

<I’ll insert more words about what it’s like to do 600 comics here soon.>

Anyway, if you want to help me celebrate, there’s a few things you can do:

  • Share your favorite comics from the archive with friends.
  • Comment on posts.
  • Buy prints of any comics you like from HilariAwesome.com, our online store.
  • Buy shirts from HilariAwesome.com, our online store.
  • GET READY to give me more money, because I’m going to be launching a Kickstarter for The System Book 1 in a few weeks. As soon as the book is mostly built and I have a quote for the number of books, it’ll all come together. Stay tuned!

Comments:

Buy A Print of This Comic
  • Image Link Code:
  • A link to this post:
  • StumbleUpon
  • submit to reddit

Wow, what a launch! Lots of feedback, and a lot positive. Some negative. Of that, a lot constructive. Here’s some things that are going to be happening on my end:

  • Adding in the “previous” button on the home page. I had it greyed out because I wasn’t sure it logistically made sense, but enough people asking for it convinced me. it’s coming back.
  • Browser testing. I’m working my way through Firefox, Camino, Chrome, IE7 and beyond, going through all the issues and THERE ARE A LOT. I’m working on it, please be patient and feel free to send me screen shots along with notes about what browser/OS you’re using.
  • Turbo Reader: I think I’m going to collapse the “below info” so it’s JUST comics. That’ll be really turbo, it’ll also take a couple weeks to implement but I think it’ll be awesome for quick reading.
  • More comics! With the site launched, I’m going to be making sure to have better updates again. I hope.

Meanwhile, thanks so much for all the feedback! I read it all, positive, negative and everything in between. Just keep it constructive, that’s all I ask.

Hey Statistics Nerds!

For those of you that asked, here’s what’s been up with the stats since launch which I realize isn’t a very large sample site. Here’s some so-far details comparing the last month on the old site to the days since launch on the new one, using Google Analytics:

Pages per visit are up from 2.74 to 3.08. Truthfully not a huge change but it’s up and that’s nice. I’m thinking that, and all these other stats, are largely more due to people poking around the new site than anything.

Average duration is up from 00:01:30 to 00:01:37. Not huge but yay.

Bounce rate is down from 74.43% to 67.70%. Yay!

I’m avoiding new visit-related things because the site is too new to use them. Interestingly though, here’s the browser breakdown for the new site:

Wow, first of all, that’s a lot of Chrome. I’ll get right on that top-margin issue you guys. Here’s the mobile breakdown:

But here’s where it gets interesting, here’s the mobile breakdown from the old site:

Look at that difference in bounce rate and usage on mobile! SO MUCH LOWER. That is very encouraging, but again too early to make any calls.

Also, the % exit from the home page is down from 77.15% to 69.56%. That implies to me that more people are digging around instead of leaving, and that is part of the goal as well. Good on ya, users.

Oh, and one last thing that’s exciting. Before, among the top content types, “tags” didn’t even make the list. Nobody was using them, which was understandable since the site didn’t highlight them and their usage at all. Now “tag” (meaning any page listed by subject) and “tag-list” (the archive page with all the tags) are both in the top 10 of my analytics “content drilldown”.

Anyway, it’s an exciting start. More info when I have it, and more updates as they happen. If there’s more data/info you want that I can pull from Google Analytics, just let me know what to look for and I’ll try to provide. Just leave a note in the comments and I’ll respond.

Thanks again, all!

See More Posts About:

Comments:

  • A link to this post:
  • StumbleUpon
  • submit to reddit

A little history. Four years and a week and a half ago, I started my comic thanks to two great pieces of advice from my friends Jami Noguchi and Marty Day:

  1. Shut up.
  2. F*cking do it.

At the time, I thought I needed to step back, make a logo, make a website, make it pretty, and all that stuff before launching. Instead, I installed WordPress inside the folder of another site I had, and just started making comics. This was brilliantly stupid. Brilliant because it made me shut up, stop thinking about it, and get started. And stupid because for years the site had odd naming issues (is it Not Quite Wrong? Rosscott Inc? The System? System Comic?), a really long URL, and looked pretty standard-ComicPress-y. Unlike Scott Kurtz, I think ComicPress is a perfectly fine way to get started, but it is a standard template and like any standard templates, can be outgrown.

I outgrew mine a while ago.

Flash forward to last year, when I wrote a rather monumentous post on the site called “Finite Canvas, Better Frame”. As a web designer, it was dumb of me to have such a bad website, especially for a comic about web design. So, after a lot of thinking, I began working on what you now see here which is a better way of reading comics. Boom. Yeah, I said it. What?

We need a better way of reading comics because the way comic sites work needs to change with the Internet. As Jakob Nielsen says, you’re not just competing with others in your field, but every other site on the web. And comics need to catch up to that. When the term “webcomics” gets used, half of that gets quickly forgotten. You can’t be a webcomic artist without a website, and it’s time we started having that half of things catch up. This site is an experiment in usability, featuring a lot of tools to help users better interact with the comics shown and it’s all built on ComicPress.

So why is this a better way of reading comics? Let’s go through some features, shall we?

Left-hand navigation. Never again will you go searching for the comic’s navigation buttons, or have them move around on you when a comic is long or short. They are always right left there, no matter what. Like a mother watching over you. So you can now effectively read every comic without moving your mouse.

More ways to dive in. There is related content all over the place. Like a comic about coffee? Want to see more about coffee? NO PROBLEM. Check out ALL THE POSTS ON THE SITE ABOUT COFFEE. Under each comic and post is now related comics/posts since over half of the traffic to the site is here for one comic they saw about design / coffee / bikes, now they can see more related comics about coffee / bikes / design. Oh, and not just ONE, but TWO archive pages! Check it. Browse by subject or browse by comic date.

Infinite scroll. Go to the home page, and scroll to the bottom. You’ll have the main comic at the top, and then some mixture of recent blog posts and comics. And at the bottom? MORE POSTS. They just keep loading and loading. It’s just like Tumblr’s ultra-addictive and dangerous dashboard. But better (because it has my comics in it).

Archive diving made easy. Are you new to the site? Haven’t read all the comics but don’t want to click through page after page of comics and wait for it to load? What if all the comics were on one page that I could just scroll down and read through? WELL NOW YOU CAN. Welcome, friends and Systemics, to the Turbo Reader™. Go to the archive pages and just use the sidebar to pick which comic you’d like to start with, and whether or not you’re reading forwards or backwards in the archive. You’ll get all the comics you want and none of those pesky “news posts” that you just don’t read anyway.

Responsive Design. Resize this browser window. I dare you. Did it break things? Honestly, probably a little. But it also resized to fit your browser, didn’t it? Isn’t that neat?

If you’re interested in moving your own comic site forward, let me know. I’m trying to blaze a trail, but there’s no reason to go it alone. If you want to talk shop, ping me at systemcomic at gmail dot com. Otherwise, stay tuned. I’m planning on launching some initiatives to make some of these tools available for others. We all need to catch up and move forward.

So there you go, a quick overview to the new site. Obviously, I think it’s a rather staggering improvement, but I couldn’t have done it alone, so some thank yous:

  • To Lori Goldberg (TwitterWebsite), who programmed the whole thing into WordPress, everyone go give her money. (Female programmers! Yay!)
  • To my friends who heard me complain about this process for the past year or so, thank you.
  • To my comic friends who told me to shut up and fucking do it, thanks. Now onto the book.
  • To Carter, who almost programmed the site and started work on the Turbo Reader with me, thanks man. Sorry it didn’t pan out, but it was some solid work that needed to be done to yield the final result.
  • Ryan McCahan of Blind Ferret, who did some late-night .htaccess breaking and fixing. And Justin Boyd as well, who lent a hand!

See More Posts About:

Comments:

  • A link to this post:
  • StumbleUpon
  • submit to reddit
The System 588: Responsive Web Design

Responsive web design is the new thing, and if you ask me DAMN interesting. It can solve a lot of problems for web sites, since it means not having to build a separate mobile site. Everything just works fine on every device! Of course, building one is a lot of extra work and planning, not to mention that it is a lot of tedious little maths. Still, you can see some great examples of responsive sites in action over at MediaQueri.es, and learn about them from the beginning with Ethan Marcotte’s first article on the matter over at A List Apart. There’s also now a book on it, too!

Oh, and the new SystemComic.com site? TOTALLY RESPONSIVE.

Last chances to get the deal of the century on CATS DON’T CARE shirts! Next up for HilariAwesome.com is something with this comic/chart. As soon as I figure out what. Suggestions in the comments?

See More Posts About:

Comments:

Buy A Print of This Comic
  • Image Link Code:
  • A link to this post:
  • StumbleUpon
  • submit to reddit
The System 579: Lucky 2.0

What else used to be really hard not that long ago?

Also, I had an AMAZING time at ROFLcon, thanks to all who came out for the show! I’ll post more about it soon.

See More Posts About:

Comments:

Buy A Print of This Comic
  • Image Link Code:
  • A link to this post:
  • StumbleUpon
  • submit to reddit

Things are happening! I’ve got the HTML / CSS / Javascript almost built out, and the joyous thing? It’s going to have MORE FEATURES than before!

  • Controls on the left that scroll with you
  • Lots of awesome CSS3 powering it for less images, smoother transitions, etc.
  • MEDIA QUERIES. This probably doesn’t mean much to most of you, but here’s the skinny: The site will be built to know how wide the browser is, and update the design accordingly to better fit the space. It’s in progress now, and if you load the examples below you’ll see what I’m talking about. For now, it just kinda breaks when shrunk, but you can see a little about what’s going to happen. And it’s gonna be great!
So all that being said, here’s what’s in the works so far!

By the way, I know it’s broken in a lot of places (mostly with the media queries, aka when the browser is set to smaller than 950px wide). It’s still in progress, but I’m too excited about it NOT to share it. Stay tuned!

To be honest, I’m not sure why more sites aren’t doing this kinda stuff. I can only assume it’s because most webcomic people are a) poor and b) not web designers themselves. Still, lately I’ve seen a few inklings of the ideas I mentioned back in this post coming to fruition. Largely in the shape of Dueling Analogs’ new site (persistent elements! Oooh!), and also somewhat in PVP’s new site. Also, I have to give credit to BoingBoing, who just put in infinite-scroll on all their index pages, which is how my site will work as well.

And, in case you’re wondering, yes. I’m for hire to redesign your site, as soon as I’m done with my own. Shoot an email to systemcomic at gmail dot-com if you want to start talking.

See More Posts About:

Comments:

  • A link to this post:
  • StumbleUpon
  • submit to reddit

The following is something I’ve been thinking about lately. It’s not a final thought, merely something I’ve been pondering that I thought I’d share.

Some of you may or may not know, I have recently been hosting The Webcomic Beacon Newscast. It’s a discussion news roundup of the week’s comics news, with as much webcomic stuff as we can find to cover. Mostly it winds up being about plenty of other things, but recently we got on the topic of innovation in comics (you can listen here if you like). Somewhere in the middle, I started ranting about one place webcomics really need innovation: the “web” part.

↓ Read the rest of this entry…

Comments:

  • A link to this post:
  • StumbleUpon
  • submit to reddit
The System 408: Bowser Testing

Let’s see here…

  • Bad pun? Check.
  • Web design reference? Check.
  • Old school video game reference? Check.

Yeah, I think my work is done here.

But your work isn’t done! Some outstanding Systemic Actions need your help!

The Venn F%*king Diagrams shirt is up for sale. Lots of you were interested and haven’t preordered yet, consider this your best chance to do so. Don’t have the cash? I’d consider it a solid favor if you spread the word just the same.

Still trying to get that SXSW panel! If you could go to the site and vote for it, then leave a comment that would help a ton. The site is at 10 comments right now. If it gets to 20, I’ll do more custom art (like I did for the survey, see below).

Jami “Angry Zen Master” Noguchi is working on Puppy Cow, and needs your help milking the last 25% of the funding together. He even did a cute comic thingy with Puppy Cow (just follow that link).

Oh, and remember that survey you guys filled out? I lived up to my end of the bargain! Go check out the post to see some custom awesome artwork I did, and if you haven’t filled out the survey please do. It helps, and thanks to those of you who already did!

See More Posts About:

Comments:

Buy A Print of This Comic
  • Image Link Code:
  • A link to this post:
  • StumbleUpon
  • submit to reddit
The System Guest Comic: Steve Napierski

Thanks to my good friend Steve “Dueling Analogs” Napierski for the guest comic:

Hope you like it. I’ve actually done this before and gotten away with it. Just not from the toilet, of course.

I’ve done this before too, though not with moving a logo. With changing colors, with resizing fonts, but mostly just saying I’ll turn down the music / TV. How about you?

A little more on Steve: He does a funny comic about video games, as well as (in my opinion) an even funnier comic that needs to be seen to be described called Omake Theater. I did a guest comic for him a while back that got him tons of press. Let’s hope this does the same so he can stop owing me so bad (just kidding Steve, we’re cool).

By the way! Be sure to check out the new Venn F%*king Diagrams shirt which is now for sale in the HilariAwesome.com store! It’s for sale-for sale, meaning it’s at a lower preorder price if you act now, because that way I get to know how many people want them and you get them for less. You probably should »

See More Posts About:

Comments:

Buy A Print of This Comic
  • Image Link Code:
  • A link to this post:
  • StumbleUpon
  • submit to reddit