Subscribe

Mobile-Friendly Webcomics

Over the last couple of years, the web industry has undergone some significant changes. We have seen strides in new technologies such as HTML5 & CSS3, and the decline of the once mighty Flash browser plugin. Mobile and tablet use has increased exponentially; 2014 marked the year where the number of mobile & tablet users surpassed the number of desktop users. Making your website readable in screen sizes other than desktop is more important than ever, and we as creators need to start seriously considering creating more mobile-friendly webcomics.

We will discuss today different considerations you have to make towards making your comics mobile-friendly.

Vertical Panel Layout

A demonstration of what vertical comic panels will look on a mobile phone.

The easiest and most commonly used method to make a comic mobile-friendly is to stack your panels vertically so they are read top to bottom. For comics that have panels that don’t vary in size very often – such as the popular 4-panel gag-a-day format, for example — this is perfect. You’ll see this method used extensively and effectively on Tumblr, Tapastic, and LINE Webtoon, and it will work just as well if you host your own site.

For long-form comics, however, this may present an issue, if you’re the type that likes diversifying your layout and types of panels. If you’ve already been running your long-form comic for a while, it’s probably not ideal to switch up your panel structure anymore. But if you haven’t started yet, this is the perfect time to think about structuring your layout to accommodate mobile considerations.

Historically, longform comics have always structured their panels so that they will fit on a printed page. That’s all well and good if you know you want to print a book one day. But do remember that the very nature of being on the web means that you don’t have any kind of restriction like that. Take a look at The Wormworld Saga by Daniel Lieske, and Fisheye Placebo by Yuumei— two longform comics that take advantage of the infinite canvas. You can still structure your comic so that it fits on a printed page, but it doesn’t have to be glaringly obvious. At the very least, make the font size of your text larger so your readers don’t have to zoom in quite as often on a small screen. Remember: ideally, you want your reader to be panning and zooming as little as possible. The perfect mobile-friendly comic is readable by simply just scrolling.

Webcomics with vertical panels:

High-Resolution Comic Images

The differences in image quality on a standard display vs a retina (high pixel density) display.

With the introduction of higher pixel density & retina screens to the market, it’s becoming more important to consider outputting larger, high-resolution comic images. The pixel density of a screen can be determined by the screen’s PPI (Pixels per Inch). For example, HDTVs can range from 40 to low 100s PPI, while standard desktop monitors can range from 70 to 200. The PPI of smartphones from the last 5 years, on the other hand, has jumped from low 200s to high 500s!

In the past, it’s always been okay to output your comic at 100%, but this is no longer the case. From now on, consider outputting your comic image at 200% of its original output width, but keeping the same image dimensions in your HTML & CSS. This will ensure that your comic will still look crisp and clean on higher-density screens.

Responsive Web Design

A demonstration of what happens when a typical responsive website is resized in a browser.

In order to understand what responsive comics are, you’ll need a quick rundown on Responsive Web Design. Responsive web design is the practice of building a website that is viewable and accessible on multiple screen sizes and devices. This means that the site should be readable and easy to navigate without having to continuously pan and zoom in & out, as we mentioned earlier. It should feel like you’re using a phone or tablet app. It’s different from a mobile site because mobile sites are built entirely separate from its corresponding desktop version, while a responsive site is a combination of the desktop and mobile site, that detects what device you’re on and responds accordingly. If you want an example of a webcomic with a completely separate mobile site, check out Dinosaur Comics by Ryan North (look at it on your computer, then again on your phone).

The quickest way you can identify if a website is responsive is if you look at it on your desktop computer and resize your browser horizontally smaller. If a horizontal scrollbar doesn’t appear, the website shrinks, the images scale down, and the text gets bigger, it’s responsive. Try it now with MakeWebcomics.com!

Webcomics with responsive websites:

Responsive Webcomics

A demonstration of what a typical responsive webcomic looks like when it is resized in a browser.

Responsive webcomics, on the other hand, is a unique concept that has yet to see widespread use, but is something that undoubtably will be extremely important in the coming years. A responsive comic behaves in the same way that a responsive website does, in that it changes its layout provide the most optimal viewing experience according to the size of the screen of the device it is read on. Instead of manipulating the entire website, however, you’re changing the layout of the comic itself. The most common behaviour you’ll find is a row of horizontal comic panels changing to a vertical orientation when the browser window is minimized to a certain width, or when viewed on a smaller screen.

Websites with responsive comics:

Why is this important, or even necessary? While it’s not the easiest idea to implement, it is definitely the most elegant. One of your top priorities (besides the comic itself, of course) should always be the user’s reading experience. You should take every opportunity you can to improve that experience as much as possible. We live in a world where the average user can lose interest in 8 seconds. You don’t want your user spending that time panning and zooming in to your comic just to get to a point where they can read it comfortably.

What are the downsides? Similar to the vertical panels issue, one unfortunate circumstance of using this method to make your comics mobile-friendly is that it limits the way you can lay out your panels. It will work fine for comics that have predominantly square or rectangular panels, but for those that have irregular and uncommon panel shapes and unusual layout structure, this solution will take a little bit more work to implement. The only fix I can recommend for those who fall into this category is to make your text and artwork larger so that it’s still readable on a smaller screen.

Another downside to this method is that, by splitting up your comic into individual panels each saved as their own image, the comic itself ultimately becomes harder to share. Linking to the page is one thing, but generally speaking people prefer sharing individual images. Providing an alternative link to the entire image would probably be the most reasonable solution to this.

The Future

The shift towards the mobile web has been happening for the last few years, and is too significant a change to ignore. It may feel tiresome for some creators to have to add yet another step to their comic-making process, which is why the earlier you start on this path, the easier it will eventually be. Remember that it is your responsibility as a creator to ensure an optimal reader experience.

We discussed a lot of the why in this article. In the upcoming Responsive Webcomics article (coming soon), we will discuss the how. Stay tuned!



14 Comments

  1. Comment Hidden
    X-Raym 1 year ago

    Nice Article !
    Another domain of research is by making text accesible (selectable, semantic etc…) and responsive friendly. Here is an exemple of implementation : http://percipient24.github.io/comicblind/
    As you can see, you can resize the browser window, and the text will adapt. It can also be read by screen readers as it is not encoded in JPG but is displayed as regular text.

  2. Comment Hidden
    Miri Soji 2 years ago

    Can’t wait for the next article!

  3. Comment Hidden
    arhantacomics 2 years ago

    Interesting read! Thanks for including the Link to our webcomics. All of the comics we’re publishing this year are using the Foundation Framework by ZURB!

    0 0
  4. Comment Hidden
    nox.fox 2 years ago

    That’s an interesting read… I’m still not set with a strict opinion about responsive comics. I think it can work for some comics, but would greatly harm others, and brings in parameters that can make panel composition into hell. If you’ve got a dialog scene with a focus on the characters speaking, each alone in their own panel with their speech bubble, you got to be careful about the direction in which they’re looking (along with 180° rule). The position of the panels can be important if you want to have characters mirroring each other, nearly, so they really look at each other for greater emotional value when the panels are side to side. But if the second panel suddenly skips to the next line, this effect gets ruined. So I think that artists really need to care about preserving the integrity of their work, while not shunning techno-evolution. But techno-evolution also shouldn’t lead to artistic deadends and lazy readers. I think we musn’t consend to everything, just like we don’t access every whim of a kid least they’ll get spoiled and lazy. Users need to keep doing a bit of effort, it’s good for the brain, and as media creators we must be careful about what trends and behaviors we might induce, in everybody’s interest.

  5. Comment Hidden
    Pipanni 2 years ago

    Nice article. I started doing web comics recently, so I was able to create a mobile-friendly website from day one. Unfortunately, because I started recently, few people read them 😛

    0 0
  6. Comment Hidden
    sunnyandblue 2 years ago

    Can’t wait for part 2! Just started applying responsive design to my webcomic

    1 0
    • Comment Hidden
      Enzo Cheer Up, Emo Kid 2 years ago

      That’s great! How did you implement it? Did you find it difficult or relatively easy?

      0 0
    • Comment Hidden
      sunnyandblue 2 years ago

      I decided to go for a hybrid of the horizontal and vertical layouts for desktops and mobile devices respectively. The tricky part was determining how to setup my strip to fit both layouts.I had two options. One was to create two versions of the strip(a horizontal and vertical one). Given that it would be twice as much work, I quickly ruled out this option. Second option was to split the strip up into panels that could fit both layouts. I agree with you that the downside is the strip would be less shareable. But it was a trade-off I was willing to live with. So I split up the strip into panels, and using CSS displayed the panels in either a vertical or horizontal layout depending on whether you were viewing it from a mobile device or a desktop computer.

      1 0
    • Comment Hidden
      Enzo Cheer Up, Emo Kid 2 years ago

      Thank for that! That is insightful.

  7. Comment Hidden
    Northbad Down For Whatever 2 years ago

    This was a great read! I’m excited for part two as the web design stuff is definitely my weak point.

    1 0