What Goes Into a Website?

June 9, 2021

Over the past couple of months, I’ve been making the current zacclarkwebdesign.com, documenting the process daily, down to each task. In doing this, my goal was to understand everything it really takes to make a website and share what I learn.

If there was an initial “lightbulb moment” that inspired me to start this redesign, it would definitely be reading this article by Laurel Schwulst. I highly suggest giving it a read, but in it, she compares websites to real-life objects, buildings, plants, and even ecosystems.

Comparing these things can be an easy way to determine the purpose of a website. When websites are created, a new world is generated where, during its creation, content is informed by design and design is informed by content.

I think Laurel put it best when she writes, “a website creator becomes both author and architect simultaneously.” Developers, like artists, build worlds that are meant to be explored and interacted with.

In this article, Laurel gave many interesting analogies for what a website can be; some simple, some more complex. One that stuck with me was called “website as garden”.

Garden bed with groups of flowers

A "website as garden" acts as a place to plant, nourish, and grow ideas. Websites, like gardens, might have different areas with different things growing in each one. It may have to weather changes over time, experiencing periods of growth and rest.

With this in mind, I wanted to create my own garden to plant ideas, tend crops, and hopefully grow something meaningful. To start, I wanted to document my process to learn more about how I make websites.

So, I started with what most big projects start with: a to-do list. It began with just a couple of tasks like website requirements and lo-fi wireframes. As due dates approached, tasks that were complete were quickly met with more to complete later.

Before I knew it, a majority of my documentation about my website became my to-do-list:

website reqs lofi wireframing
(x2)
develop menu homepage content develop footer homepage form
(x2)
hover effects
(x2)
cosmetic updates hand icon
(x2)
mobile menu dark mode switch debug homepage
homepage interactions ideas page format templates page format develop article format
(x2)
design services page
(x2)
finish template demos
download button svg download page format implement download pages develop services page
(x2)
message sent page services icons
(x2)
services content
(x2)
folio plus guide service prompt send buttons 404 page template thumbnails
(x2)
template terms of use template content
(x2)
template checkmarks implement checkmarks descriptions and tags
(x2)
edit titles
canonical tags take services pic article graphics
(x2)
dark mode styles store jquery locally ideas article
(x2)
img alts make links absolute fix script urls optimize seo
(x2)
test website
(x2)
announce website

A lot of planning, new ideas, and content creating went unlisted above, but these make up a majority of the tasks that led up to this website. I think it's important to emphasize that this amount of work also took a lot of time, energy, and patience.

So, why would sharing all of this be helpful? One way I thought about representing this information was by coloring each task by the skill needed to complete it. This way, it would be easier to get an idea of what skills are needed to build a website, how much is needed, and when they’re used throughout a project:

debug homepage
=
Web development
=
Web development
Planning
=
Planning
Writing
=
Writing
Web design
=
Web design
Graphic design
=
Graphic design
Web development
=
Web development
SEO
=
SEO
Planning Web design Web design Web development Writing Web development Web development Web development
Web development Web development Web development Graphic design Graphic design Web development Web development Web development
Web development Web development Web development Web development Web development Web design Web design Web development
Graphic design Web development Web development Web development Web development Web development Graphic design Graphic design
Writing Writing Writing Web development Web development Web development Graphic design Graphic design
Writing Writing Writing Graphic design Web development SEO SEO SEO
SEO Graphic design Graphic design Graphic design Web development Web development Writing Writing
Writing Web development Web development SEO SEO Planning Planning Graphic design

(The table above is read like an English book: left-to-right, then top-to-bottom.)

View image version

Here are percentages representing the data, ordered by skills used first:

Planning
=
5%
Web design
=
6%
Web development
=
45%
Writing
=
16%
Graphic design
=
19%
SEO
=
9%

It would be unfair to treat the data above as a guide for making any website, especially when these categories are made up of skills whose definitions overlap. (For example, knowledge of web design is needed in web development, SEO, graphic design, and so on.)

It’s also important to consider that if anyone else was given the same requirements, the skills needed and final product would both probably look drastically different.

This data contains information about my own working style, as well as the ways that different skills came into play. Web development made up nearly half of tasks, and often happened along with graphic design and writing. Web design and planning were unexpectedly the lowest ranked on the list, even though they were likely used every day.

The emphasis on web development indicates the process of handwritten HTML, CSS, and Javascript to create content, styles, and interactions. As a result, much of the web development process actually involved thinking about writing, web design, and accessibility; how things might come across over other screens.

This use of web development also illustrates the previously referenced pattern of content informing design, as well as vise versa. This pattern became a normal part of my development process, and it allowed me to expand upon my ideas and create in real time.

The Trycycle (Just keep trying!)

With this said, I think it’s important that everyone finds their own patterns of creating, in development or not. People thrive in environments where they can consistently be creative, make mistakes, and try again.

(By the way, if you’re wondering where I got the colors for the table: I used a satellite image of my hometown, Bremerton.)

Satellite image of Bremerton with color pickers scattered throughout