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.
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:
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.
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:
- Cyanide & Happiness by Rob, Kris & Dave
- Poorly Drawn Lines by Reza Farazmand
- Legacy Control by Javis Ray
- It’s the Tie by Kasper Hansen & Matteo Ferrazzi
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 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!