|
To start, we’ll set a simple baseline: break the text into separate pages for each chapter, provide a simple navigation structure to tie them together, and add some minimal text formatting. I did add one or two refinements to style the first letter and first line of each chapter, and enough layout formatting to keep the basics of paragraph structure and the content a bit more balanced on screen. The source code and the entire text are now freely available online. But to create an experience that even comes close to that Rockwell Kent beauty, we need to do a lot more.
Over the next few newsletters, we’ll apply more and more of what we’ve covered here in previous issues, and take it even further.
-
Make the typography responsive to screen size
-
Add web fonts (both static and variable)
-
Update the responsive typography to a more dynamic solution
-
Add a web font loader and style fallback fonts for a better loading experience
-
Add typographic controls for the user to set preferences for light/dark mode (coupled with OS setting detection), font size, and spacing
-
Add bookmarking to save or share your place in the text
-
Add support for offline reading
-
Experiment with a more book-like experience, especially on touch-based devices
By the time we’re done, we’ll have a pretty complete typographic and layout design that could be adapted or tweaked to work with almost any text. Beyond just making a website out of a book, the intent is to really examine what makes a great reading experience, and make it even better on the web than we can in print or any other current digital format.
And maybe I’ll finally land my whale.
―§―
To get started, I’ve created a site using the Eleventy static site generator. I’ve endeavored to keep that setup as simple as possible, but some amount of build-process complexity was necessary to balance ease of development and quality of output. The entire source is available on Github and the compiled site is automatically deployed to Netlify. At any point you can always download the source from Github and look in the ‘_site’ folder to find the complete, compiled site. This way you don’t have to set up the build process if you are not so inclined. If you are, I’m including some basic documentation on getting the project up and running in the README.md file.
I’ll create a ‘release tag’ with each issue, so you’ll always be able to look at the code corresponding to that issue, but the latest version will always be what’s deployed on Netlify, and viewable at https://mobydick.rwt.io
|
