A Lonely Penguin…
In 2012 I saw an animated storybook by Penguin publishing. It was very short (just 5 pages long) and featured an animated penguin. Truthfully, It was nothing more than a clever job posting, but it triggered something in my mind. I felt the idea needed to be explored further. This was a concept that should lend itself nicely to online children’s books.
So I started experimenting.
I wanted to take the original idea and improve on it. My goal was to create an online children’s book that…
- Was mobile friendly (easily viewed on tablets and smartphones)
- Employ full screen illustrations with rich backgrounds (not just solid colors)
- Handle animation and interactivity
- Deliver an optimized experience for all screen sizes
My first goal was to make a mobile friendly version. I coded a simple story on CodePen, which you can check out below…
See the Pen Story Time by Steven Monson (@stevenmonson) on CodePen.
The illustrations were crude but I accomplished my basic goal of making a mobile friendly storybook.
However, this first iteration was far from perfect. The text and images scaled proportional to the width of the screen but didn’t adapt to screen height which meant very short-wide screen viewports would still result it content getting cut off.
A Full Scale Proof-of-Concept
In late 2015 I decided to create more robust full-screen storybook. I started writing and illustrating a story about a hungry dragon with fully realized illustrations and backgrounds.
Dealing with Aspect Ratios
When designing a book for print, you have a clearly defined page sizes and edges. This luxury doesn’t exist on screens. There are all sorts of screen sizes and aspect ratios.
To Fill the Full Screen or not?
Early on, I experimented with making the illustrations always fill the full screen, letting the tops or side of the illustrations get cut off as needed.
I soon realized this wasn’t practical. Aspect ratios on phones and tablets varied too wildly and resulted in important element getting chopped out of the layout. Despite trying to design the pictures with generous margins, character’s heads or other important element would get cut off on certain devices.
I soon realized that a letter-box approach allowed for better control over compositions and a more uniform experience.
Competing Storybook Websites
I decided to do some research to see what was out there and wasn’t too impressed with what I saw. Almost none of the sites I found were were mobile-friendly. Several were loaded with advertisements that could easily sweep kids away from the story without even knowing it.
Layout’s were generally either a basic html page or some kind of flash animation.
I felt we could do better. Parents generally don’t read to their kids from a desk. We needed something mobile friendly.
Creating a Responsive Storybook
Being a web designer, I made some sketches, and started coding a template that allowed illustrated storybooks to display on any device. I also started writing a proof-of-concept children’s book.
As I wrote the book, it gave me insights on how to improve my interface. At first I made the images fill the entire screen, but I soon found that browser aspect ratios are too extreme for that too work. Some phone that I tested cut off more than 50% of the image.
So I decided to make the image as big as possible while still being contained with the dimensions of the screen.
Comments (Write a Comment)
Did you enjoy this story ? Do you have any ideas to improve Story Res? Share your thoughts below...