The Great Gatsby
Media
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, which made it a great UI design exercise. With more time, I would have implemented auto-bookmarking. 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.
Media
Project Links
Features
- Pleasant reading on mobile, tablets, and monitors
- Quick chapter navigation
Design / Tech
Code:
- HTML,
- CSS,
- JavaScript
Libs:
- Tailwind,
- Alpine
Testing:
- Sizzy
Host:
- GitHub Pages
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.
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, which made it a great UI design exercise. With more time, I would have implemented auto-bookmarking. 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.
Project Links
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.
Media
Features
- Pleasant reading on mobile, tablets, and monitors
- Quick chapter navigation
Design / Tech
Code:
- HTML,
- CSS,
- JavaScript
Libs:
- Tailwind,
- Alpine
Testing:
- Sizzy
Host:
- GitHub Pages