A Trip Down Nostalgia Lane
A Brief Look At My Old Websites
Here is a look at how I have progressed through my years as an amateur website designer:
[note that each blurb was written around the time I made the corresponding version, so language/tone will vary accordingly!]
Version 1.0 (First created: 3-16-1997)
This is my first attempt at making a website. Oh my God! Look at that! It was my first shot at any kind of graphics design whatsoever! Go Microsoft Paint! I love how I exported the title graphic as a GIF file so the "glowing" effect looks like crap. Hey, I was going for the neon effect but I don't think it worked out too well. Oh well, it was my first try! I was in 8th grade! I had barely even gone through puberty, so what did you expect?
Version 2.0 (4-13-1997 to 5-4-1997)
I discovered how to make beveled buttons on Photoshop. Hey, c'mon, this is a bit cooler of a title graphic, don't you think? Well, it's certainly better than a big glowing G, right? Ok, don't answer that. Anything is better than a big glowing G. Anyways, check out my second attempt at webpage design. Maybe the flashy Photoshop visuals will deter you from the fact that it still has NO REAL CONTENT in it!
Version 3.0 (11-9-1997 to 12-13-1997)
Look, what do we have here ... evolution? Check out the flashy title pic! Oh yeah baby! I remember that I wanted to make this page a lot better than the previous one, so I went all out. And for the first time, I included something RADICAL ... ACTUAL CONTENT! I had some articles on this page as well as an early form of a Photoshop gallery! Too bad I had absolutely NO SENSE of color coordination! I simply tried to throw together every possible color in the graphics. Hey, this was my experimental phase.
Version 4.0 (12-13-1997 to 1-21-1998)
Not too shabby for a high school freshman, eh? I had just downloaded this program called Poser, which was a primitive 3-D person rendering program. I used it to render some nifty (naked) guys which spelled out my name (PHIL) and made a glowing effect that worked a LOT better than my first attempt. By now, the Photoshop gallery was the main attraction of my site. I had just started taking pictures for my photography class at this point so there was no photo gallery yet.
Version 5.0 (8-30-1998 to 11-26-1998)
Content-wise, this website marks the start of my modern website which you are looking at right now [blurb written in 2007]. I remember that August 30th, 1998 was almost the last day of summer before I started 10th grade. I decided to take the time to scan in lots of pictures which I took over the past year and radically re-design my webpage to become a showcase for my photographs. This is when I actually start putting lots of actual content on my website. I focused both on my photography and my attempt at digital image editing with Adobe Photoshop.
Version 6.0 (12-26-1999 to 8-24-2000)
After a year of not doing updates, I finally make a massive update to my website and bring it one step closer to what it is today [blurb written in 2007]. By this time, I had quite a few photo galleries posted which showcased my photography as well as some short articles on my cameras and accessories. I also started posting up digital camera pictures I took in the "Digital Reality" section, which became the precursor to the candid photos I have of my MIT friends now in my Friends section [which was removed around 2012].
Version 7.0 (7-28-2001 to 6-9-2002)
During the summer before starting my freshman year of college, I wanted to redo the layout of my website to make it more aesthetically appealing. I decided to go for a tabs-oriented layout where the visitor could shuffle between pages by clicking on tabs, loosely simulating paper files in a file cabinet. I liked how everything fit together tightly on this version of my page. The tabs were cool to do and the color scheme kept everything light-hearted and fun. However, as you'll see if you click on these screenshots to see the full-sized versions, you'll notice that I put WAY too much content on my home page, thereby making the user scroll a TON before reaching the bottom. In all subsequent versions of my website, I made sure to keep the home page simple and concise so that the user wouldn't have to scroll at all [blurb written in 2007].
When I began my freshman year at MIT in Fall 2001, I moved my website to being hosted on MIT's school servers. Before then, it was hosted on various Internet service providers that my parents ordered for our household (I don't even remember all of their names ... there was Earthlink, Pacific Bell, etc.).
Version 8.0 (7-4-2002 to 5-31-2006)
During my college years, the focus of my website was on displaying photos of my friends (this was pre-Facebook!) and amateur photography galleries. Towards the end of college (around 2004 and 2005), I began uploading articles to my website.
During the summer of 2002 (right after my freshman year of college), I decided that I wanted to update the look of my website to give it a more mature feel. I made this simpler home page with a green color scheme (as evident in the border and photo colors), prominently displaying several of my favorite photos and providing links to all the sections within my site. As you can tell from the links in the bar below the title image, the primary emphasis of my website at that time was to showcase my photography hobby.
I switched over to a tan color scheme and expanded the scope of my website beyond simply showcasing my photography (as evident by the links in the bar below the title image). I was doing less and less photography by this time, and I had other things to showcase, such as my academic projects, photos of my friends and me, and the start of a fledgling articles section. My first posted article was Integrity in Digital Photography.
Version 9.0 (5-31-2006 to 4-10-2012)
During my Ph.D. (graduate school) years, I shifted the focus of my website to articles and rarely updated the photo galleries. Social networking sites such as Facebook made it so that I no longer needed to share photos of my friends on my website, so I took down all of those personal photo galleries (but I still kept my more artistic photography galleries on the site).
At this time, my site moved from MIT's school servers to Stanford's school servers as I began my Ph.D.
During the summer of 2006, I put more text on the front page (mostly links) and replaced the 3 large photos with 6 small thumbnails: 3 horizontal and 3 vertical. The twist is that every time the front page reloads, 6 random thumbnails will appear in these slots, so the viewer always gets a fresh glimpse into my photo collection. I also wrote an XML-based template scripting system to manage the various hyperlinks around my website by placing navigation sidebars on every internal page. This helped to improve usability and also made it significantly easier for me to add new content, especially long-form articles.
This is what my front page looks like on its 10th anniversary (March 2007). I started my first personal website in 1997 when I was a nerdy 8th grader learning to write HTML in Notepad, and now I am a 1st-year Ph.D. student studying Computer Science at Stanford University. Wow, time sure flies :)
In the past year, I've managed to squish more content onto the home page because I realized that my site was getting large enough so that it could be difficult to find content within it. My goal for the home page is to provide readers with an overview of what my website was about (chock full of links to pages deeper inside of the site). I also wrote a Python script to automatically generate links to the newest and most recently updated pages, which are displayed at the bottom of my home page.
2009 - 2011:
I made it easy for readers to find my newest and most recently updated articles right upon landing on my home page, without needing to scroll. If readers want to scroll down "below the fold", they can read more detailed introductory text. I still continue to like the randomly-generated thumbnails showcasing my photos on the home page.
By this time, most of the content on my website are articles. Each article page begins with a title and a light yellow summary box, followed by the main body text. The sidebar of links on the right allows the reader to quickly choose other articles.
Version 10.0 (4-10-2012 to present)
In April 2012, I made a major stylistic overhaul to give my website a sparser, more professional look. Most notably, I increased the body text's font size and changed the color scheme to a cool blue with subtle gray lines. The majority of content on my website is still articles, so I tweaked the formatting to make text easier to read, especially on mobile devices and tablets. My goal is to give my site a classic and timeless feel, since I am not impressed by the trendy and often-gaudy blog templates that people use nowadays.
Also around this time I migrated my site from being hosted on Stanford's school servers to my own domain at www.pgbovine.net, since I was graduating soon with my Ph.D.
In mid-2013, I increased the width of my site from 720px to 800px since displays are now higher resolution (even on mobile devices). Lots of sites are moving toward “responsive” layouts that adjust for different resolutions, but a basic fixed-width layout still works well for my site. I also created a new Python, Markdown, and YAML based lightweight templating system. Now I can easily assign blog-style category tags to each page and have the system auto-generate Related pages links and category summaries. (Since 2006, I have been specifying categories in an ugly XML file, but now category names are conveniently inlined as YAML metadata at the top of each file, so I was able to get rid of XML entirely.)
Finally, to make my site a bit more “professional,” I added a faculty-style profile photo to the right sidebar along with my contact information since I was soon starting my new job as an assistant professor and wanted to recruit research students ASAP.
This was my first year as an assistant professor of computer science at the University of Rochester. I gradually added more professional info to my website (e.g., adding Publications to the top-level menu bar, and removing On The Move and Photography), which by this time was turning into a hybrid of both personal and professional sites.
But in general, my site's design remained unchanged from 2013. My home page still focused on a random sampling of thumbnail photos from my photography collection, along with links to my newest articles.
This was my first full year as a professor, and I made a big leap to change my home page to a traditional text-based academic home page rather than using a random sampling of thumbnail photos from my photography collection (which I've had for the past decade since 2006!). This simple cosmetic change cemented my transition to prioritizing the professional aspect of my site, since I wanted the home page that people landed on to look like a professor's academic page.
Unfortunately, I haven't yet found an elegant way to surface these photo thumbnails again, so for now they're all just buried inside of articles under the photography category. Perhaps I'll revitalize this section in the future, since it was a big part of what inspired me to start making this website in the first place.
I also added a brief blurb to the top of my Articles page, along with an inline Google search box. One of the main challenges I'm now facing is figuring out a better way for readers to navigate the hundreds of articles currently on the site. The category tags in the sidebar help somewhat, but I'd still like a more comprehensive solution in the future.
This website isn't much different style-wise, except that my academic profile has updated to reflect my new job as an assistant professor of cognitive science at UC San Diego, which I started in the middle of 2016. On the content-creation front, I spent much of the latter half of 2016 creating video content such as podcast interviews, vlogs, and video lectures. So the top-level heading of “Articles” (and the filename of writings.htm!) is no longer 100% accurate, since a non-trivial minority fraction of my content is no longer written articles. I may refine this heading later on, but for now I'll keep it for the sake of tradition.
As I mentioned back in 2015, one big challenge I now face is to give my readers a better way to navigate the vast amount of content on this website. How to do this well is still an open design question. Another big challenge is how to keep producing interesting content on a regular basis as my job gets more and more time- and energy-demanding.
btw, it's been 20 years since I started making my personal website; time flies!
This was a huge year in terms of refocusing a lot of my new content to vlogs and podcasts rather than written articles. On the website maintenance front, I wrote a ton of home-grown Python scripts to automatically create podcast RSS/iTunes feeds from videos uploaded to my YouTube channel, to better organize my research papers, and to manage my site in a more scalable way as I approach over 500 pages worth of audio/video/text content. Note that vlogs and podcasts are now top-level categories on my site, along with short summaries of selected research papers. I also created a Start Here overview page to help new users get started exploring. At the very end of 2017, I started experimenting with a donation-based model to help pay for web hosting and other ongoing costs. I have no idea how this experiment will turn out, so let's wait and see!
There's not much in terms of format updates in 2018, but I added a lot more videos such as vlogs, podcasts, and instructional videos throughout this year. I've made over 300 vlogs+podcasts in my first two years of trying out this format, and I'm loving it so far! As the year rolls to an end, I'm thinking about creating a mobile-friendly version of this website. Around 30% of visitors each year have been viewing it on mobile devices over the past ~6 years, according to Google Analytics. The site's super-simple fixed-width format already looks decent on mobile, but it could certainly be improved. Since the majority of my viewers are still using desktop browsers, I haven't committed to mobile yet. But let's see if I do it in 2019!