Featured photo for Website Overhaul 2020

Website Overhaul 2020

In late 2020, I created a new WordPress theme from scratch to minimize page loading times for every page and to better surface the more interesting content of the now 1764+ articles.

For the first time ever, my site serves distinct pages for mobile and desktop.

Both Mobile & Desktop

  • New sections for Greatest Epics and In the Media
  • Lazy-load images
  • Show featured photo with related articles
  • Some archive pages, when there are not too many posts, will show post featured photo and snippet instead of merely listing titles.
  • Make some potentially copyrighted photos private
  • On category archive pages, show parent category with thumbnail
  • Added avatar to articles and comments
  • Eliminated Gravatars in comments to reduce number of server requests
  • Changed all GIFs to repeating MP4s that user have to start
  • Use SVG sprites instead of font-awesome
  • Got rid of hamburger menu and use FW logo to trigger menu instead on hover
  • Use inline SVG sprites in Lightbox instead of individual PNG
  • Only 1 CSS file
  • Minified files
  • Use ld+json structured data for image licenses
  • Disable right click to make it harder to rip-off site

Mobile

  • Pages on mobile download mostly 414px-wide images, except for the featured photo which is roughly 780px.
  • YouTube videos are no longer embedded. Instead, clicking on a placeholder opens up the video in the YouTube app.
  • No longer use Lightbox on mobile. Instead, clicking on a photo will open the photo in a page that allows rotation and viewing photo meta info.
  • Tables use full width of screen with no overflow
  • Display captions underneath photos instead of requiring clicking on photo to view caption.
  • Horizontal navigation bar for Back, Epics, Media, Blog, Contact, and Next on home page and after articles
  • No Javascript

Desktop

  • Images maximize use of the screen; there’s very little empty space around them now.
  • Photos in posts’ photo gallery are from the 414px Mobile collection
  • Only 1 Javascript file
  • Rounded corners of images
  • Vertical navigation bar for Back, Epics, Media, Blog, Contact, and Next
home page of felixwong.com showing Felix Wong running and says I am Felix Wong, a world adventurer, ultra-endurance athlete and writer-engineer
My new website theme in late 2020.