The Great Gatsby

Media

altText

Summary

This is a 'web novel' of the classic story from F. Scott Fitzgerald. After its copyright had expired, I used it to explore designing long-form, segmented content. The layout and typography were inspired by “The New Yorker” magazine.

Features

  • Pleasant reading on mobile, tablets, and monitors
  • Quick chapter navigation

Tech / Design

Code:

  • HTML, 
  • CSS, 
  • JavaScript

Libs:

  • Tailwind, 
  • Alpine

Testing:

  • Sizzy

Host:

  • GitHub Pages

Project Links

Media

Process

After making the cover and navigation, I proceeded to prepare the chapter content. A public epub file was opened in Calibri book editing software, and the HTML was copied and formatted into individual chapter pages. The font 'Caslon' was used for the body text; layout and sizing adjustments were made for various screen sizes; and 'next page' links were added at the end of each chapter.

Conclusion

This was a great project to practice excellent typography and layout. With more time, I would have implemented auto-bookmarking. Overall, this media format works well with short chapters, nonfiction stories, or guides. For those scenarios and if redoing this project today, I would use a 'static site generator' with reusable components for easier updates and a faster development turnaround time.