THE MAKING OF MATTGARVIN.COM

PART 1: FIRST STEPS

This website is to showcase my writing. However, I am also a Front End Developer, and I have spent much more time doing design and code, of websites and web applications, than I have writing. So, the words I share here are presented on a website that I have designed as well. I coded it from scratch. There is no Wordpress or any other Content Management System (CMS) involved. The website looks simple, but there is quite a bit going on under the hood. (I deliberately make it look simple, because it is a writing website, so I view my stories and articles as the "bells and whistles".)
(Update: I revamped the look slightly. Now I am going for a kind of Twilight Zone / Ouija board aesthetic. But still sparse, and still meant to focus on the words.)

I thought other Front End Devs might see some value in me breaking down how I made this site. And since I am a Big Time Writer now, I figured I could put it all into words, and create another article for the site itself. (Very meta of me, eh?) Here is how it all came together...

THE PLAN

First I came up with a plan. I envisioned a simple site that had 3 sections: "Stories", "FAQ", and "About". But the FAQ and About were very secondary: 99% of the focus of the site was to be on my writing, which I was sticking under "Stories." I would be doing the site in HTML/PHP, which is perfect for small scale sites. I laid out the bones of the site, making extensive use of INCLUDE files.

Structurally, I decided to make sure to use folder names that sprinkled keywords into the URLs, and to avoid using any visible php filenames. This would make my writing more likely to get picked up by Google and other search engines, in a logical way. It also makes the URLs more friendly to humans. So I was paying attention to Search Engine Optimization (SEO) from the start. For example, the article you are currently reading can be found here:

www.mattgarvin.com/stories/making-of-matt-garvin-website/part-1/first-steps/

You can see search engines *and* humans can gather many hints just from the URL itself. And there is no "index.php" or "default.php" dangling at the end, which I hate.

MUST HAVES AND PRIORITY

These are the things I wanted my site to have from the beginning:

1. The site itself with my "pearls" (that is, my words)
2. Google Analytics

The next tier was:

3. Facebook comment ability (on each article page)
4. Social share buttons

The last "Must Have" priority was:

5. Donate button

After I got these "Must Haves" in place, I would do some more advanced stuff, which I will describe in Part 2. For now, here is some elaboration on how I prioritized things.

Aside from the site itself, having Google Analytics from the beginning was essential to me, so I could see what traffic, if any, I was getting. And what parts of my site were the favorites.

Next, I wanted to have each story page have the ability to accept comments, right there on the page, beneath the story. I chose the Facebook Comments Plugin because the vast majority of people that use it would, because it uses Facebook accounts, be using their real names. So right off the bat it will cut down on spammy comments, or offensive comments. As a writer, I am hoping by having separate comments for each article I will get feedback relevant to the story itself on each story page. This helps me interacts with poeple kind enough to leave comments, as well as fuel my immense ego.

I considered using my own "super simple" hand-coded share buttons instead of a social package, like www.addthis.com or www.sharethis.com. The packaged ones you can (theoretically) just plop in, and they have some features I like. Right now I use Share This. But to be honest, I am *still* thinking about using my own homegrown buttons. The reason is to avoid bloat. I hate bloat. Bloat slows everything down, and makes it harder to code and maintain. It also relinquishes (some) control. (And most Devs, including myself, are Control Freaks.)

At this moment, I am using Share This, and it seems "ok". At first I was using Add This, and it made page loads take waaaaay longer. And sometimes, although the content showed up, behind the scenes Add This was still churning away, loading crap that didn't seem to be needed, causing the little favicon in the tab of the page to keep spinning. Grrrrr.... So I replaced Add This with Share This, which is faster, but I still don't know if it adds enough value to warrant using it over my own simple buttons. (For instance, i don't like the "share" numbers it presents. They seem off by a significant margin, so why use them? Plus the analytics Share This provides do not seem any better than Google itself, and because the "share" numbrs are off, I don't trust their analytics, either.)

The toughest part of having Social Share buttons is not the buttons themselves, but making the pages that feature the buttons optimized for sharing...