anatomy of a website: part i

Lisa, circa 1973 or 1974.
Lisa phone hacking, circa 1973 or 1974.

Dear Internet,
Whenever I make a change to the site, whether design or adding or removing of something, the first person who usually asks me “Why?” is TheHusband. We were recently discussing the addition of my “Estimated reading time:” plugin I’ve now appended to the individual posts pages (he hates it, others seem to love it) and as I often seem to do some explaining for him, and at time for others, I figured this would make an excellent post on my design process. So here we are!
If you are interested in the back end, I run WordPress, using Nginx as my web server and MariaDB as the SQL server. The theme is a child theme of Mon Cahier. We currently host at Digital Ocean (managed by TheHusband) and in addition to WordPress and server best practices, the entire site is encrypted by SSL. We use StartSSL for all of our domains. If you want more details on how we got here, this is a post I wrote in April when we left Dreamhost for Digital Ocean.  I have had several people ask if TheHusband is open to setting them up in a similar fashion and he is for a reasonable fee. If you are interested, please get in touch.
Overall Experience
The overall experience of the site is based on the following factors

  • Content/writing is main focus
  • Minimalist in design, not overwhelmed by images/video/doodads
  • Easy to navigate
  • Basic info architecture and SEO best practices in place
  • Mobile friendly
  • People should be able to read me via coming to the page, via RSS, or subscribe to an email list
  • Features I would expect an online journal to have (archives, about page, easy way to contact) should be in also be in place

I’ve flipped between the child themes of two themes: Mon Cahier and Mog for the last several months and right now I am using Mon Cahier. I haven’t found a single column theme I love, so I’m sticking with two column, right sidebar for the moment. I’m a big believer in making it easy for my readers (and for me!) to find information on the site and I want people to meander about, so getting rid of some sort of sidebar navigation kills me.
Landing Page
The landing page experience is important to me and I’ve gone back and forth on having a header or not. I adore the hell out of picture of me age 1-2 attempting to use a phone, so it’s been the mainstay on business cards and domain headers for a few years. Mon Cahier includes built in social media links at the upper right hand corner of the header space, but the newest update doesn’t seem to play well with my child theme so I’m missing a few of the sites. This is also why I have a social media plugin in the right hand sidebar.
Below the header is my main navigation bar, which is also important to me as I wanted an easy way for people to navigate other content on the site. The big thing here is that I wanted it to be compact – I don’t want rows and rows of navigation, so having child navigation was a must. Here is how the menu is broken down

  • hello – My about page. Gives you a summary of who I am, a fairly recognizable picture of me, and other little tidbits.
  • projects – These are the project landing pages of a few things I keep on the site and acts as the default location for something that doesn’t fit quite anywhere else.
  • writing – break down of all, primarily fiction, writing including poetry, prose, works in progress, historical work, and at the bottom is listing of all blog posts I’ve written on the topic of writing and is updated on the fly.
  • archives The heart of the site –  nearly every entry ever written by me, spanning across several previous incarnations over nearly two decades, all here at the site. Dating back to the late ’90s, it’s a Lisa wonderland of delight and amusement. When I talk about The Lisa Chronicles project, I’m talking about getting the archives back up which has been a slow process.
  • contact – Simply put, how to get in touch with me. While you’re more than welcome to reach out via social media, I found readers were more apt to fill out a form then send an email or tweet which I think is because of the anonymity of the form.

Below the main navigation bar is the two column set up – one for the content, and the other is the sidebar. Because I’m now writing daily, and not to overwhelm readers, I keep the most current entry on the front page. Two widgets in the sidebar help with previous content navigation: one showing the last five entries and the other showing the top pages on the site, updated from the last 24-48 hours.
The content column is built around these principles:

  • The title is taken from something out of context, for a long time they were from definitions of various things in the Icelandic sagas, sometimes obscure word definitions from the OED, song lyrics, and every once in a while, the title actually reflects what I’m talking about!1
  • Below the title is the date of publication and Mon Cahier main theme is overriding my removal of the byline addition, which isn’t needed here since I’m the only person writing.
  • Every entry in the current stylistic format:
    [image sourced from Creative Commons]
    Dear Internet,
    This day in Lisa-Universe: Year, Year, Year

    The images and the “This day in Lisa-Universe” are rather new editions within the last few months. I liked the idea of adding in an image from my collection or creative commons collection of something unusual or unexpected to go with the content. I also wanted people to be able to find content from the same day in previous years because I thought that would be a neat feature since I have so much.
    The “Dear Internet” was not used in previous incarnations of my online journal, but I began to use it at the beginning of this one because I found a lot of conversational letters that I never published written to famous & fictional people, written as if we were the best of friends. I liked the idea of the juxtaposition of something old (a letter to a person) mixed with the new (the person is the Internet).

  • Footer metadata is found in the landing page entry such as categories and tags. Comment link and totals are located at the byline metadata at the top of the entry.
  • Below the footer metadata is a link to the previous entry. Since I have it set to show one entry at a time, if you wanted to read the previous entries in order, you would go entry by entry. I would recommend going to the archives and clicking on a month or year to get all of them on a single page instead.
  • Beginning in August 2013 I started using SEO, I use All in One SEO, like a reasonable adult and every entry and page from that point forward now has SEO best practices appended to it. Because the sheer amount of published entries (nearly 600!), as I come across older entries I need to edit for some reason, I’m applying SEO to them as well. I have no plans to go through and do all entries at this time.
  • Every entry has a proper category and at least one tag. Because I’ve moved around so much in my youth, I now append a city tag to all entries of the city I’m currently living in to easily find. So if you ever wondered why entries say “Grand Rapids” or “San Francisco” or “NoVa,” that is why.

For the sidebar, I wanted to make it clean and uncluttered. I currently do not plan on nor intend on having ads, but I may do a tip jar or a donation page later down the road when more of my fiction is up. I also stopped linking back to other people not because I don’t love them, but many were abandoning their sites or stopped writing or something else entirely. I wanted the sidebar to also be accessible on all pages and not just the landing page or just the individual entries.

  • Search – Non-negotiable. If you don’t have a search function on your site, I’m not going to stay and visit.
  • Social media links – A plugin called Simple Social Plugins, which uses pure CSS to do the design. I wanted something easily to configure and fairly robust. Simple Social does that pretty well and while it’s missing a few sites I’d like people to find me at, such as GoodReads, it does a good job of hitting the basics. It also includes email, which I’ve linked to my contact form, and a RSS option.
  • Blog subscription – Provided by the Jetpack plugin, allows people to subscribe to email version of the site and they get emailed the post every time I update.
  • Recent posts – Last five posts, in chronological order, that were published. This is configurable to as little or as many as you’d like.
  • Popular Posts – Current top five posts, based on stats from the last 24 – 48 hours. I like this as it shows how interests in various things change on the site.
  • Creative Commons license – I am Attribution-NonCommercial-NoDerivs 3.0 Unported, which means the content here is free for you to use, along with attribution back to me, but is not available to be remixed and cannot be used for commercial purposes without my permission.

That’s it for today! Tomorrow I am going to cover individual entries, pages, plugins, process and promotion.

This day in Lisa-Universe: 2010, 1998

1. General SEO practice recommends you use keywords of your topic within the title and within the first few sentences of your piece for search bots. As you can see, I don’t do that but I do put in practice SEO description and keywords using a plugin, so all is not lost.

One thought on “anatomy of a website: part i”

Comments are closed.