When the iPhone took off, so did separate m.
sites, specifically formatted for small screens.
Then the iPad came out —
and tablet-specific sites followed.
And also, Androids.
With their own Android tablets.
Then new iPhones.
With different screens.
This shows us the simplest method of comic responsiveness: use only small, regular panels and export them as separate images.
<img src="panel-1.png">
<img src="panel-2.png">
<img src="panel-3.png">
<img src="panel-4.png">
This way, browsers can “reflow” panels like words in a paragraph, getting less horizontal and more vertical as screens narrow.
- Simple and regular panels
- are also easily republishable
- as photo swipes on, say,
- Instagram and TikTok, etc.
For comics where the whole is as important as each panel, you could imitating ComiXology’s “Guided View“:
…where you start with full pages, then buttons cycle through predetermined zooms.
See the Pen
janky Guided View by Taylor Hunt (@tigt)
on CodePen.
Or, in contrast, you could make a page for each minimum viable panel combo, using Next/Previous buttons to suffuse the whole comic with the power of page transitions.
Or, HTML knows how to swap out different images based on the user’s screen.
See the Pen
responsive comics <picture> example by Taylor Hunt (@tigt)
on CodePen.
Or, if you’re allergic to code, Adobe Illustrator and Inkscape can make SVG images with builtin flexibility:
See the Pen
dumb cloud SVG by Taylor Hunt (@tigt)
on CodePen.
But wait, there’s more! Bribe your local webdev for additional techniques, including…
Space-maximizing stretch-to-fit panel grids!
See the Pen
responsive iframe sizer by Taylor Hunt (@tigt)
on CodePen.
Stretchy margins!
See the Pen
Untitled by Taylor Hunt (@tigt)
on CodePen.
Custom repositioning!
See the Pen
A Responsive Graphic Novel In Flexbox by Dudley Storey (@dudleystorey)
on CodePen.
And more!
- Splittable panels! (as seen on The Nib!)
- Flexbox Holy Albatross [real]
- Responsive speech balloons
- Fluid grids
- Show/hide parts
- Scrollytelling
- Reconfigure panel internals
- Increase depth-of-field
- Accordion gutters
- Fractal generation
- Custom overflow
- Scroll snap points
- Media queries
- Container queries
- Content-out
The biggest payoff is readership.
Case studies of sites implementing responsive designs cite figures like ≥200% more mobile visits — which was 82% more visits total!
There’s morality, too.
Many users’ circumstances mean their Internet access is smartphone-only.
Do we want to make comics for everyone, or only for the Wealthy Western Web?