⚠️
This post has been migrated to this (newer) site. Some of the references and content may not be fully relevant or accurate.

The past eight days building my website have been an experiment in my ability to be objective, constructive, and generally creative.

Though this is the first iteration of my own site, I’ve worked in web development before often times using more progressive libraries than the internet-staple, WordPress.

Luckily, the challenges I anticipated ended up being near non-issues throughout the process. However, some of the less thought of elements were what took a 5 day project and stretched it into almost double the time. Here’s a short summary of my experience.

Making The Job “Easy”

Developing my own website had been on my mind for the better part of the year.

While I’ve attempted to assemble an online portfolio in the past, I knew intuitively that this attempt was going to yield a publishable result. At the outset of 2019 I locked down the jameylyon.com domain name and researched themes and templates.

My goal was to find tools that I could leverage to build quickly. Once I had the basics in mind I shelved the idea. I waited patiently for an uninterrupted break to construct the first version of the site.

Why Not Hand Code?

Some might rightfully ask, “If you’ve worked as a web developer then why not hand code your own site?”

The simple answer is this: Feature rich websites take time, money, and strong teams to build. Most of what the average user calls a “website” has become more of an “web-based application” to developers. For me, coding up the necessary HTML/CSS and corresponding Javascript (or implementing React) is relatively quick; Even comparable to the drag-and-drop editors on WordPress.

However, having the appropriate designs and functionality in mind is someone else’s concern, making me a lean, mean coding machine. Collaborating with other devs makes it harder to get stuck due to the distribution of skills. When tackling an entire site on your own, something that may be trivial to a designer or backend developer may stump you for hours or days.

This means that using a pre-built template (for me WordPress and a third-party theme) reduces the friction on tasks that I’m not as experienced in. The result? I don’t ram my head through a wall trying to figure out SQL for a week.

Unknown Unknowns

When starting development on the site I quickly found shortcomings in my design plans. Wireframes done on paper didn’t translate exactly to the my selected theme.

I spent what felt like hours on simple design considerations such as whitespace and font families. What’s more, many of the early page designs didn’t gel as well as I thought they would. I had to refine a page then retroactively apply those changes to other sections on the site.

I dealt with unknown unknowns — Things I didn’t even know to consider as potential problems when I was planning the site. For me, any code related issues were relatively easy to solve because I knew how to search for the correct answer or test possible solutions. The design elements, however, provided a unique challenge insofar as I didn’t know the correct terms for what I was trying to do. It becomes hard to Google something when you don’t know the word for it… And typing ‘issues with font family pairings’ into your favorite search tool never spits a custom tailored solution.

Determined not to get hung up, I took regular breaks away from design challenges to build out content and other site sections. I came back to design challenges and distilled down the essence of what I was trying to do, then iterated through options until something worked.

The Handheld World

In about 4 days I completed the build of the core pages and scaffolding of my desktop site. At a glance, all that remained was to input content and finalize some outstanding design decisions. At a glance…

Developers probably saw the word ‘desktop’ and knew where this paragraph was going.

Nearly half of the development time for the website was devoted to translating the desktop design to tablet and mobile sizes. Luckily, the technical research I’d done meant that I knew my theme would take care of most of this for me. CSS, breakpoints, and flex grids have really come a long way in the past few years. But, there was still a considerable amount of work in making content flow intuitively on each device.

One of the ideologies that I recall seeing when I was first starting out as a developer was ‘mobile first’ design. Bootstrap was in its heyday and consumer level websites were making the mass-migration to mobile. To me the idea is essentially that there are more mobile users than desktop users, thus websites should be designed for mobile… first.

Now, I have mixed feelings on this. I believe the most intricate or complicated design should be built first such that developers can distill down as they go. Users still have the most granular control on desktop devices, which means (in most cases) the desktop version of sites will be the most complex. Regardless, I agree with the idea that sites and apps should always be intuitive to the platform they’re presented on. So, off to implement the tablet and mobile versions I went.

Incorporating Feedback

I was feeling good as I approached the bottom of the V1 to-do list. Eager to share the site with close friends I sent out links while tagging for SEO and adding in metadata for use on social sharing sites and search engines.

While this is a small step in reflection I can’t overstate the importance of getting good, constructive feedback on your site before you publish in full. My peers helped me ensure my copy was polished while reminding me to stay on-message. Only when I started incorporating feedback did the site feel cohesive and gelled.

As it turns out, good critiques give you a kick in the pants. They remind you why you’re building something like a website in the first place, and nudge you to refine your presentation to a ‘T’.

Wrapping Up

With all three sites built and revisions integrated, things were looking up. Even at the time of writing, I am bathing in the glow of a freshly minted site.

Whether you have years of experience in web development or don’t know CSS from the USSR, building a site from “scratch” feels good.

Looking back, it may have been helpful for me to outsource early designs to a UX/UI designer using an online service. Further, I recognize that performance optimization and SEO are more ongoing operations than set-and-forget tasks. Still, the experience has been positive. Best of all, I am the proud owner of a new, handmade™ website, which made it well worth the while.