“Mobile devices require software development teams to focus on only the most important data and actions in an application. There simply isn’t room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritize.”
— Luke Wroblewski, “Mobile First,” A List Apart, 2009
As I was preparing to create my first ebook, Sparrow: A Poetry Comic, I new that I would be working with a mobile-first approach. I’m a web designer/developer. I taught mobile-first to my design students as an Assistant Professor of Visual Communications for 18 years.
What is Mobile-First?
Mobile-first is a term and design concept that originated in web development. Designers who work with print can be confident that their layout will always appear as intended, at least in terms of aspect ratio and canvas size. Web designers, however, don’t have that luxury. The same content might be viewed on a laptop, tablet, smartphone, monitor, television, or even projected on a wall.
Variables like pixel dimensions, screen resolution (pixels per inch), and orientation (landscape vs. portrait) can’t be assumed or controlled. As a result, web designers adopted new strategies to ensure content remains readable and functional across a wide range of devices and conditions.
Mobile-first is a design strategy that begins with the constraints and requirements of the smallest screens—typically smartphones—and then progressively enhances the layout for larger screens like tablets and desktops. The term mobile-first was popularized by web designer and strategist Luke Wroblewski, who first introduced the concept in a 2009 article on A List Apart. He later expanded on the idea in his 2011 book Mobile First, published by A Book Apart. At the time, the shift from desktop to mobile browsing was accelerating, and his work helped reshape how digital designers approached layout strategy.
I remember reading that article not long after it was published, and it resonated with the direction I was already seeing in digital publishing. The concept still holds weight today—especially as fixed-layout eBooks are increasingly viewed on smartphones and tablets, not just desktops or e-readers. A designer needs to think about the output device for the content. Who is the audience? What device(s)will the audience be consuming the content on? The medium that is used will determine dimensions, resolutions, color profiles, etc. If the output medium is constantly shifting, a design approach is required. Mobile-first is that design approach.
Targeting Smartphones
The trend for media consumption is increasing for smartphones. Why? Because they are always with us? Because if funds are tight, a phone will be prioritized over other electronic devices. Smartphones are used for business and personal pursuits. They are used for content creation, delivery, and consumption. More smartphones are purchased than desktops, tablets, laptops, or TVs. The design philosophy of mobile-first states to design for the media that has the highest consumption… first. That is why eDrawingboard is a mobile-first media and publishing company.
I wrote, illustrated, designed, and coded Sparrow: A Poetry Comic in the summer of 2024. Before creating the content, I needed to know what aspect ratio, dimensions, and resolution to create my comic panels in so they would display well on the majority of smartphone devices. I have an iPhone (a 14 Pro at the time of this writing). However, I cannot assume all of my readers will have the same device.
Consulting with AI (Artificial Intelligence)
Designing for a smaller canvas is more challenging that designing for a larger canvas. You have to prioritize and minimize the content while ensuring the material expresses the intent. Before I created my first page, my first comic panel, I needed to know the canvas size to begin with. Since I had a subscription to ChatGPT, with its access to petabytes of information, I decided to start up a chat with it to see if it could provide some ideas to guide my solution. The following “conversation” with was very interesting.
Me: I am creating an ePUB comic book. I want it to be easily read on smart phones. That is my first target screen size. It will be a fixed layout EPUB file. What would be the pixel dimensions to create the page graphic for best results on the majority of smart phones in 2024?
ChatGPT: Creating a fixed layout ePUB comic book optimized for smartphone screens is a great idea, especially given the widespread use of mobile devices for reading. Since you're targeting smartphones primarily, here are a few considerations for the pixel dimensions of your page graphics:
1. **Common Smartphone Screen Sizes**: As of 2024, most smartphones have screen widths ranging from 360 pixels to 414 pixels in their default browser viewport. However, when creating a graphic for an ePUB, you can aim for higher resolutions because ePUB readers typically scale content to fit the screen.
2. **Aspect Ratio**: Most smartphones have a portrait aspect ratio of 16:9 or taller (like 19.5:9), which is important to consider if you want your comic to fill the screen properly without unnecessary scrolling.
3. **High Resolution**: To ensure your graphics look sharp and clear on high-density display screens, which are common on modern smartphones, you should create your graphics at a higher resolution and allow the ePUB reader to scale them down. Devices often have pixel densities that range from 2x to 3x, which means that a pixel dimension that looks good at 1x scale might appear pixelated unless multiplied accordingly.
4. **Suggested Dimensions**: A safe approach would be to design your pages at twice the size of common screen widths to accommodate high-resolution displays. For instance, if you're aiming for a width of 414 pixels (common for larger phones), you could create your graphics at 828 pixels wide. For the height, considering a typical 16:9 aspect ratio, you would then aim for a height of around 1472 pixels (414 pixels width x 16/9 aspect ratio, doubled for high resolution).
5. **Fixed Layout Consideration**: Since it's a fixed layout ePUB, these dimensions would remain consistent across all devices, with the reader software handling any necessary scaling. This approach ensures that your comic looks good on both standard and high-resolution screens.
6. **Testing**: It’s important to test your ePUB on multiple devices to see how it scales across different screen sizes and resolutions. This can help you fine-tune your layout before finalizing it.
By aiming for these higher resolution graphics, your comic book should be well-optimized for a variety of smartphone screens, ensuring a crisp and enjoyable reading experience.
Me: I created my panels in Clip Studio Ex. I used the portrait dimensions of 690 x 1,539?. Do you think that will suffice?
ChatGPT: The dimensions of 690x1539 pixels for your comic panels created in Clip Studio Ex are a good starting point, especially for portrait orientation. These dimensions cater well to modern smartphone screens in terms of aspect ratio and should display nicely on most devices. Here’s a breakdown of how these dimensions will work across different considerations:
1. **Aspect Ratio**: The aspect ratio of your chosen dimensions is roughly 1:2.23, which is quite close to common smartphone ratios like 18:9 (2:1). This should make for a good fit on many smartphone screens, ensuring that your panels take up most of the screen without requiring excessive scrolling.
2. **Resolution and Scaling**: Your chosen width of 690 pixels is sufficient for clarity on many devices, especially if the ePUB reader scales the images appropriately. However, considering high-resolution displays found on many modern smartphones, which often have resolutions of 1080p (full HD) or higher, ensuring that your images are of higher resolution might enhance clarity and sharpness. If the reader scales down your images, it would preserve the quality better than scaling up.
3. **Readability on Various Devices**: While 690 pixels in width is quite reasonable, you might want to consider whether you want to create versions with higher resolutions for devices with higher pixel densities. Creating your graphics at a higher resolution and allowing the ePUB reader to scale them down on lower-resolution devices might offer the best visual quality across all devices.
4. **Testing**: It’s essential to test your ePUB on several devices to ensure that the comic looks good across different screen sizes and resolutions. This step can help identify if the text within the panels is easily readable and if the image quality holds up on both lower and higher-resolution screens.
In summary, your current dimensions will likely work well, especially on average smartphones, but you might want to consider creating higher resolution versions to accommodate higher-end devices for the best possible reader experience.
Me: What should the page resolution be for 828x1472
ChatGPT: For creating comic panels or pages at a resolution of 828x1472 pixels, it's important to consider the pixel density of the devices on which your comic will be viewed. Modern smartphones often have high-density displays (like Retina displays on iPhones or high DPI displays on Android devices), which means the pixel density can be quite high, typically ranging from 2x to 3x.
If you're targeting devices with these types of displays, you'll want your artwork to look sharp and detailed. To ensure this, you might consider creating your artwork at a higher resolution than the final output size and then scaling it down. Here's how to think about it:
1. **Determine the Scale Factor**: Depending on the target device, a scale factor of 2x or 3x is commonly used. For example:
- **2x (Double Resolution)**: This is used for standard high-resolution displays. If your target dimension is 828x1472, creating the artwork at 1656x2944 would ensure that it remains sharp on these displays.
- **3x (Triple Resolution)**: This is often used for very high-resolution displays. For the same target dimension, you would create your artwork at 2484x4416.
2. **Consider File Size and Performance**: Higher resolution images will also increase the file size of your ePUB. It's important to balance the visual quality with the file size and performance, especially since large files might load slowly on some devices or use more data.
3. **Image Quality**: When creating images at higher resolutions, use high-quality source materials and settings in your graphic software (like Clip Studio Ex) to ensure that details are preserved when the image is scaled down.
4. **Testing**: After creating your ePUB, test it on various devices to see how it performs. Check both the visual quality on high-resolution screens and the file performance (loading times, responsiveness) on a range of devices.
If you decide to go with higher resolutions like 2x or 3x, ensure that the ePUB reader or the software used to view the comic can handle image scaling effectively, so that the visuals adjust properly across different screen sizes and resolutions.
Me: Would it be better to crop the images so the entire panel borders are visible in the page? i.e. should there be a slight empty margin on each side of the page? The full bleed would look nice, however showing the borders in their entirety would give more of a comic book effect and allow the pages to be consistent. Do you have thoughts?
ChatGPT: Deciding between full bleed images and having visible panel borders in your ePUB comic book is a stylistic choice that can impact the reader's experience. Both approaches have their advantages, and the best choice depends on the aesthetic and functional goals of your comic. Here are some considerations for each approach:
### Full Bleed Images
- **Aesthetic Impact**: Full bleed images, where the artwork extends to the edges of the screen, can create a dramatic, immersive effect. This approach is great for impactful visuals and can make the most of small screen real estate.
- **Modern Look**: Many digital comics and graphic novels use full bleed layouts to modernize their appearance and make dynamic use of space.
### Visible Panel Borders
- **Classic Comic Feel**: Keeping visible borders around each panel can give your ePUB a traditional comic book feel, which many readers appreciate. It helps define each panel clearly, aiding in narrative structure and readability.
- **Consistency**: Visible borders can ensure a uniform appearance across different devices and orientations. This helps maintain consistency in how each page is presented, regardless of the device's size or resolution.
- **Ease of Layout**: Having margins around your panels can make the layout process more forgiving, especially when aligning text and images within each panel. It also reduces the risk of important parts of an image being cropped or obscured by the edge of the screen.
### Considerations for Making a Decision
- **Target Audience**: Consider the preferences of your target audience. Younger, more digitally-native audiences might prefer the sleek, immersive experience of full bleed layouts, while traditional comic book readers might appreciate the clarity and structure of visible borders.
- **Genre and Style**: The choice might also depend on the genre and style of your comic. For example, action-packed or highly visual stories might benefit from full bleed to maximize the impact of each image, whereas more dialogue-heavy or classical comics might look better with borders.
- **Device Compatibility**: Check how each layout looks on different devices. Borders might help ensure that no content is accidentally hidden by the bezels of a device or cropped out unintentionally in different screen sizes.
Ultimately, it might be beneficial to create a few sample pages in both styles and view them on different devices. This can give you a better sense of what works best for your comic's narrative and artistic style, and what feels right for your readers.
Me: My genre at the moment is spiritually-based poetry. Sort of like Shel Silverstein meets Rumi. Only Shel Silverstein did not use borders in his illustrations. Also, he put all the poetry copy on one page and had one illustration that encapsulated the entire poem. My approach is more comic like. I am breaking up the lines and stanzas of the poetry to different pages. That is allowing me to add visual elements for every expression of thought and feeling in the poem.
At the moment, no one else is doing this approach. It is unique. Therefore, the style is open. I am creating the genre. I want to appeal to a younger, spiritually interested audience, that appreciates good narrative that is not violent. At the moment, the concern of different devices cropping the page differently if it is a full-page bleed is worrysome. My thoughts are that seeing the borders with a small margin on each side, would ensure the reader is not missing anything. Also, It is help ensure the visual elements are balanced properly within the boundaries.
ChatGPT: Given your unique approach to blending spiritually-based poetry with visual storytelling, along with your intention to ensure consistent and complete visibility of each visual element across different devices, incorporating visible borders with a small margin on each side seems like a wise choice. Here’s why this might be the best approach for your project:
### Benefits of Using Borders and Margins
1. **Control Over Presentation**: Margins give you more control over how each panel is framed and presented, ensuring that no part of your artwork or text is inadvertently cropped or obscured by the device's edge. This is especially important since your layout includes key visual elements for each stanza, and you want each element to be fully visible to convey the intended emotion and narrative.
2. **Enhanced Readability**: By breaking up the poem across multiple pages with accompanying visuals, the use of borders can help to clearly define the space for each segment of text and its corresponding illustration. This clear segmentation can enhance readability and make the flow of poetry more intuitive for the reader.
3. **Aesthetic Consistency**: Borders can help maintain aesthetic consistency across different devices and orientations. They ensure that your layout looks intentional and well-crafted, regardless of the device used to view it.
4. **Artistic Framing**: Borders can act like frames for your artwork, enhancing the visual impact of each illustration and making each page feel like a complete, self-contained piece. This framing can be particularly effective in a spiritually themed comic, where each image can be contemplated as a part of the overall narrative.
### Implementation Strategy
- **Margin Size**: Choose a margin size that is not too wide but sufficient to prevent any part of the content from being cut off. This will depend on typical device screen sizes and resolutions but keeping it minimal yet functional will ensure that the artwork remains the focus.
- **Testing Across Devices**: Since your comic will be read on various devices, it's crucial to test how the pages look on different screens. You might consider using ePUB reader software that can simulate different devices, or even physically testing on multiple devices to see how your pages render.
- **Feedback Loop**: Given that you are pioneering a new format, gathering feedback from early readers can be invaluable. You could release a sample chapter or a few pages to a select audience and ask for their input on the layout, readability, and overall experience.
This approach, emphasizing clear, defined borders, supports your goal of making spiritual poetry accessible and visually engaging for a younger audience, ensuring that the artwork and poetry work together to convey each stanza's depth and emotion without risk of visual elements being lost or overlooked.
Takeaways
The usage of smartphones is increasing.