We live in an age where mobile phones and portable devices are abundant and in use by everyone. We use them for almost all purposes. The Web has transitioned to a mobile-friendly Responsive Web framework. Even Google ranks websites with mobile compatibility higher in its search results. And yet, we in academia still make and send documents like they are meant to be printed. Okay, I have go on for long, you are probably rolling your eyes by now. So let’s get to the point. Here is a scheme to produce content for mobile devices:
What People Don’t Want To Do
- People don’t want to zoom into the document and scroll horizontally then vertically then horizontally…
- People don’t like holding their phones in landscape mode. It doesn’t work nicely with one hand and most people will avoid it unless they are playing a game.
- People don’t like to read text that is small. Sure they may be able to read it but squinting eyes only add to the burden.
What People Want
- I should be able to view the contents one paragraph/diagram/image at a time.
- I should be able to read it clearly and easily. The font size should be large enough.
- The space on my phone screen is small, don’t waste it. Margins are good, but not better than anything over a few millimetres of my screen.
- I should only have to scroll one way if at all.
In an ideal world, everything we used would be rendered as an EPUB or handled with HTML/CSS+JS. But we don’t live in such a world, so here are my suggestions:
- Set Page Size to 4 inches wide (288 pt) and 8 inches tall (576 pt).
- Set content area to 3.44 inches wide (248 pt) and 7.11 inches tall (512 pt).
- Use a decently large font size, around 12 pt is good.
- Sans serif faces are better, according to me at least, on phones. Go for Open Sans, Roboto, Helvetica etc.
Let’s take a look now. Here’s the original document optimised for print and desktop.
Here’s the new version optimised for phones:
For people using LaTeX, I have created a template here at this repo. You can download the template and use it to easily switch to a mobile friendly version with just two copy-pastes of your code. You can also view the file whose screenshots are shown above from here. Make sure you open this on your phone.