Webcomics and the Rise of the Mobile Web

mobile-webcomics

I read a ton of webcomics. A virtual library of them. I love them and want for many of them to survive long into the future.

I also work my day job maintaining websites and optimizing my company’s website for the future. And that future is mobile-readiness. I read a report recently that said mobile is nearly 20% of global internet usage. This accounts for both tablets and smartphones, but there is one thing that’s for sure, the percentage is on the rise.

The Mobile Users are Coming!

For a growing number of people, their smartphone is their only internet source, and to a person who’s been on the internet for most of his life, that’s a crazy thought. It’s wild to think that people don’t care about huge monitors anymore. I spent most of my life trying to get a huge television, and now many people watch everything on their laptops, tablets, phones—all of the small screen devices.

This sort of mentality affects all of us in the creative realm, and this includes webcomics.

Like I said in the beginning of this post, I read a bunch of webcomics. And one thing that I see over and over is a neglect of mobile users. It comes in many forms—from web design to the comics themselves—and all of them are becoming increasingly important for us to no longer ignore.

As webcomics, I liken this to the fight that printed books are having against ebooks. Not everyone will buy into the new version, but for the creators that can adapt, there is a world of possibilities out there.

How You Can Adapt for Mobile Users

There have been a handful of webcomics lately that have been experimenting with different formats. Thrillbent is doing some interesting things to adapt to the webcomics model, and although I disagree with the way they’re doing it (I like my new comics pages to be new comics pages, but I digress), at least they’re doing something differently.

I recently did a reboot of my webcomic, The Underfold into a whole new format and new website. And here are some things that I decided upon to help myself keep mobile users in mind.

  1. Think vertically. I don’t know about you guys, but I generally only turn my phone on its side when I am taking pictures or watching videos… or if I can’t see something at the small size. And it seems like a chore. For me, it made more sense for me to move to a page format so that my comics were vertically oriented.  I know the original intent of webcomics was to mimic the newspaper strips we all love so much, but the internet is changing. Would it hurt your readership if you went from horizontal strip to vertical?
  2. Font size. iPhones are small. It’s good to think about how your comics will look on it’s tiny screen. Unless I’m looking at a particularly cute picture of my kid, I don’t like having to zoom in and scroll all over the place to see something. That goes for comics too. Perhaps it’s time to start narrowing down the amount of text you have per panel/page and bump up that font size. What I did was plan out all of my pages on 3×5 index cards because they’re roughly the size of a smart phone. When I scanned in my thumbnails, I played with the font size until it was similar and readable. The fact of the matter is that it’s not going to hurt your final product. You may have to draw some more pages to fit all of the dialogue… or you start to let your art do the talking more. Either way, we all win.
  3. 3. Bigger is better. You don’t necessarily have to do as drastic a website redesign I did to make everything responsive (where your site automatically adjusts for the size of the screen)—although in the future you likely will—but you should at least consider making some of your key site elements bigger. For instance, your navigation scheme. Think about instead of having just text, maybe you create some nice, big graphic buttons that will show up clearly on a phone screen.

If your post text is important… maybe it wouldn’t hurt to bump up the size of the text too. Just take a look at your website on a smartphone (and not a Samsung Note 2, I mean, that thing is huge), and just look at it long and hard. Think about what it looks like from an outsider’s perspective… because that’s the goal, right?

In Conclusion

In the business world, this idea of mobile-responsiveness is THE conversation piece. Studies have shown that many people will not recommend friends to a business’s website if their mobile site is terrible (or lack thereof). And this goes for social sharing too. The webcomics community seems a little less critical of this… for now. Now is the time to start paddling before the wave hits though, because it is definitely a coming reality. Even with my website, although I may be small potatoes, 16% of my traffic last month came from mobile/tablet.

The time is nigh, you guys.

**************************************************

Today’s guest article was submitted by Brian Russell of the webcomic “The Underfold.” You may find his comic by clicking here.  You may also find Brian and the comic on Twitter at https://twitter.com/theunderfold

Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmail
Posted in Featured News, Guest Posts, Helpful Hints, Webcomic News and tagged , , .

21 Comments

  1. I’ve been doing my single panel comic for the past couple of years conforming to mobile formats, especially cell phones. The main thing I experimented with was the type size as that needs to be seen on smaller screens like iphones. I made the longer panel a perfect square now so it fits perfectly on the screen.

    Also, “think vertically” is really the answer to longer formatted comics.

    • It’s true. “Think vertically” is also a good thing for three-panel comics as well, though. Even if it’s not all that long. If you’re in portrait mode on even an iPad, a three- or four-panel comic strip can seem incredibly small. Reorienting the entire thing can dramatically improve readability.

  2. My comic, Com’c, is hosted on Google Sites, which automatically takes care of the mobile version of the site for me. I can’t say there’s nothing I’d like to change, but it works decently.

    When it comes to the “think vertically” advice, I chose from day one (about 5 months ago) to have the panels arranged vertically. I’m not sure why I did, especially as I chose it before I even decided to actually take it online, but it certainly helps the mobile view.

    I recently completed a project that doubled the height and width of my str’ps. When I started, I got some feedback about the old size being hard to read, which isn’t surprising given the size of my comic (the old dialogue font size was 7 pt; it is now 10 pt).

    I personally read a lot of webcomics, and I read them mostly on phone. I don’t have a problem with going into landscape mode or zooming, but I do think a mobile view for the comic’s website is a plus.

  3. Yeahhh, no! I’m going to respectfully disagree with this and here’s why. Trying to read a vertical comic thats say, two panels wide, requires you to read panel one, [half of panel 2 is cut off] scroll a bit to the right to fully see panel 2, then scroll down to the next set of panels. Where as, if you just flip your device sideways, all the panels are lined up horizontally and you are only scrolling to the right per panel in view and the vertical comic is now fully in view. To read just about anything on a mobile device, you know very well you’ve got it flipped sideways, most people do, I see it all the time on my train rides to and from. You can’t read much of any content with ease otherwise.

    Go read 1977 [its vertical] on your mobile device vertically, then go read Zorphbert and Fred horizontally [its horizontal]… [now switch behaviors for each]see how much finagling you have to do with one over the other. Both comics are easier to read when you flip the mobile device to a portrait like stance.

    If I were to reccommend the idea of vertical, I’d say disband with side bars and have them between content area’s. Header- then comic, side bar stuff under comic, blog stuff, side bar under it, footer maybe after that. Now, if that what this article is suggesting and I missed it, then call me blonde. Vertical Isn’t easier, it’s a preference for presentation design. However, getting rid of the side bar wings on mobile devices, thats something that might get your off to the side content seen more on mobile devices, maybe? I dunno. I’m just spitballing, because if people like what your making, they’ll read it on a wadded up napkin delivered by a carrier pigeon!

    • Well the thing is with mobile devices, the comic usually will come up as the comic alone without the sidebars unless you choose to see the “whole web view,” which is a choice you can make. But in most cases, just the content will come up and that’s how the comic works best vertically, you only see the comic without all the other stuff around it.

      • Tom,

        I guess I don’t know how people set their viewing preferences to load a website, but I have an Android samsung, an LG and an i-phone here and my website comes up full monty, sidebars and all on each of them. These aren’t my phones FYI, but they are showing me everything I normally would see content wise. These devices I’m looking at as examples, are relatively recent versions of the products named. Maybe older devices have more limitations?

        I dont think the horizontal or vertical aspect of a comics presentation has any relevance to, well, anything, but thats just me maybe. One just needs to ensure their website is mobile compatible and if you use wordpress and/or CP, it seems that it is 100% functional either way. What I see for my comic on a conventional lap top is what I see in a mobile device as well. Thats all I can tell ya! I only know what I know and I sit around being pretty the rest of the time!

    • The idea of responsive web design is that the website will show up differently on different devices.

      In the case of thinking vertically, this will only assist in that effort. Basically, your image will show up at 100% of the width of your phone screen size. When viewing a horizontal strip comic in portrait mode (up and down), all 4 panels of the comic are crammed together to fit onto your screen. However, if you orient your comics vertically, then the panels will fit your screen.

      In my article, I’m not saying that the current way that people are doing webcomics works better one way or the other. I’m actually saying that we need to do it differently and completely. The push to “think vertically” is only a first step towards making your comics more readable on other devices.

      • We’ll just have to agree to disagree and I’m not doing it to simply be disagreeable, or uncivilized. I’m looking at the mobile technology coming out and has recently come out and larger screens, like this samsung here, I can read a 4 panel horizontal comic just fine without zooming in beyond its auto fit. I agree, fewer panels would make it even larger, but either way, the content is viewable. Its personal preference in ones design. The tride and true comic strip design is not lost in mobile device viewing moving forward, but older mobile devices bring any viewing experience to a grand level of awful!

        What I’d like to askis this, mobile devices w/ hi-res and retina are a fantastic viewing experience, but as the screens get bigger, like tablets, laptops and desk tops, auto fitting the website makes the visual content blur due to it expanding by as much as 20%. I want a comic on a standard screen and a high res screen to view similarly, but no one I know I can read a high res or retina screen at 100% without blowing out their cornea, straining at its small size. In a high-res world, where is the technology, or the ability to keep our visual content crisp on all screen sizes and resolutions?

        • Everyone is allowed to have opinions on the matter. I’m not saying that mine is the only way. I also didn’t simply stack all of my panels on top of each other. For some of my older traditional comics, I’ve gone back and done a 2×2 format.But for the most part, I went to full page layouts.

          As for your question about all the sizes, this is a serious problem as a retina display is twice the resolution of most screens. There are a few different approaches to it anywhere from JavaScript that figures out what people need, then serves them up the right version (this requires you to make several versions of the image though which is annoying) to uploading a larger image and scaling it down using your CSS (which makes the image larger in file size so that’s something to keep in mind).

          The unfortunate part is that it’s still a bit like the Wild West out here in responsive land. But I’d rather be ahead of the curve for having tried.

  4. This is truly an important topic, especially for comics.

    Rebuilding my CSS to allow seamless transition between every viewing area has been one of the most effective uses of my time since my birth. Instead of worrying about mobile sites, my site looks perfect at any resolution. Responsiveness is indeed as important as most web designers say it is, and I’ve found this especially true when checking out comics online.

    Mobile devices are my preferred way to read comics. If I find a new comic while browsing on my desktop, I’ll bookmark it and read it on my mobile later (my bookmarks automatically sync). I prefer to hold my device horizontally, and I love horizontal comic pages which fit perfectly on the screen and do not require me to zoom or scroll in any direction because the site is responsive and automatically fits the content to my device’s resolution. I know not everyone holds their device horizontally (you called that a chore) so I made sure my site looks good vertically as well.

    I absolutely agree with making buttons larger on mobile devices! Instead of rebuilding my menu, I created a second menu with larger clickable areas, and my CSS switches from one menu to the other based on the available space. I think it works very well because when I look at my site on a desktop the menu is accessible but doesn’t get in the way of content, and when I view on a mobile device the menu is still perfectly accessible without needing to zoom in or struggle with clicking the wrong links all the time because they are too close together!

    Great article. While we disagree on some minor personal preference points, this is an issue all comic makers need to be aware of, and you have a lot of great advice in this article!

  5. Am I the only one who loves “Guided View” in Comixology? I think that is a great way to read comics on a mobile device, obviously it works best for long form comics, but if there was a way to make that sort of system work for a mobile version of a webcomic that would be great.

  6. Nice! Dig the discussion here. I’ve been thinking about web comics for a long time. Developed a system that publishes full page on desktop, then responsively “collapses” down to phone and tablet formats, all in your web browser.

    Tapping/Clicking the panels themselves trigger audio samples, too – still experimenting here, lots to do, so little time (you know how it goes).

    Would love for you to check it and share the link if you like what you see: http://arhantacomics.com

    Cheers,
    Camilo Nascimento
    @camilographics

  7. Definitely an important topic!

    Our studio has been working on optimizing webcomics for desktop to tablets down to mobile (both portrait and landscape) for the last couple of years.

    It’s been quite the challenge but I think we’re off to a good start… labor of love project as it is, there’s not enough time in the day to add more pages, but pretty much that’s the next step. Our Intro’s that are up there include full page panels that collapse down to mobile pretty well, we think.

    After hours of labor and trying different things, I think we’ve come up with a responsive webcomic solution, one that doesn’t require logging in, downloading an app, etc. Pure browser-based: http://arhantacomics.com ; would love your feedback and if you dig what you see there please share and spread the love for indie comics, poetry and music!

    Thanks,
    Camilo

    • Camilo,

      First, we tend to let authors manage their own articles. Tom is not a regular member of the Alliance, but is a contributor and may be too busy to follow up. I will let him know of your reply.

      Second, we here at the Alliance are inundated with requests to “check out my comic” and frankly, we don’t have the time. We also are an education site primarily and though we do have the “Pick of the Month”, that is managed by our contributor Todd and we do pass along requests like yours to him.

      So, if you’re expecting us to endorse or promote your site or comic, that will not happen as a matter of editorial choice unless Todd picks it for his “Pick of the Month”. I did click to your site and it seemed well designed, but I’m a cartoonist and not a website programmer so I am in the dark of what it took to create such a site. I’m sure a fair amount of work. I dig that artists come together on a site like yours to promote and share their work. Kudos for that.

      Byron

  8. Byron,

    Thanks for the reply and for checking out our responsive webcomics.

    I can only imagine how many “check out my comics” requests you get. There are more and more webcomics every day it seems, lots of awesome stuff out there. So thanks again for taking the time!

    I’ve been re-inspired to communicate with folks about our project, since the tweet from McCloud 🙂 Validation for countless hours of hard work. I’m more interested in the art and the process than I am in traffic for Ad revenue (we have yet to use external Ads up on our site).

    In general I’m looking to talk about responsive webcomics with other folks interested in the field and the challenges.

    Note: Our webcomic site was handcoded via PHP, HTML5 and CSS3. Th art was made by hand and using photoshop and artrage. The music is from a variety of archives and sources.

    Right on, collaboration really brings the best out in folks. I’ve always enjoyed bands more than solo artists, I feel like a good comic team is akin to a good band (that’s another topic).

    Cheers

    • Camilo,

      You are correct, webcomics pop up everyday and it’d be more than a full-time job just check them all out. As with anything, the cream rises to the top. Mostly it is persistence and sticking to your plan.

      I have always done better in a group environment, one of the reasons why I wanted to form the Alliance. Groups are greater than the sum of their parts most times.

      Good luck in your venture, and if you stick with it, you’ll succeed. 🙂

      Byron

Leave a Reply

Your email address will not be published. Required fields are marked *