Update 000_Back to Basics

January 15, 2017

Today marks the launch of a new experiment — the complete overhaul of this site into a consolidated home for my online artifacts. This new site represents a complete refresh not only in presentation but also in process and, by extension, the principles guiding my web development. I can’t think of a better representation of this pursuit than a move back to basics, in this case, browser defaults. By stripping out all legacy CSS and scripts, I abandon the accumulated assumptions, opinions and dependancies — manifested in ad hoc components integrated into a legacy design — and start fresh. To borrow Chimero’s metaphor, I’ll work with the web’s base material. I’ll work with the grain.¹

Beginning with this minimum-viable product (MVP), I will improve on this site via an iterative and open process, incorporating frequent releases with reader feedback. Along with codifying and documenting my web development best practices, this project will prioritize code that adheres to:

• semantic and standards-compliant code
• a performance budget
• a device agnostic approach
• accessibility best practices

By sticking to these guidelines, I plan to deliver a modern web site, built from scratch, that embraces the constraints of the modern web while still delivering an experience that taps into the potential of new and evolving technology. Looking farther ahead, this new site will serve as the repository for all future articles, code and other online endeavors.

Working with the Raw Material of the Web

In some cases, this project means reinventing the wheel to reacquaint myself with core concepts taken for granted in contemporary web development. This also means increased autonomy, a direct refutation of the control-for-convenience bargain inherent to much of our current relationship with the internet. Our dependencies run much deeper than bootstrap and angular, and this project represents an exploration of that relationship.

The logical extreme of this thinking is the visual simplicity demonstrated in this initial prototype.² But basic does not necessarily mean easy, just as added effort does not equate to greater complexity. It does mean enduring, a product immune to those whims of time and fashion we call trends. It also means flexible, suitable to update and mold as requirements evolve. ³

By working with the grain, we craft projects that embrace the inherent limitations of the web, rather than working against it. This results in faster experiences for visitors with less demand for bandwidth and battery life. Interfaces are more robust, responsive not only across devices but also over time. Most importantly, such work demonstrates clarity of thought, expresses clear priorities and indicates accountable decision-making.

Working within the constraints of the web permits the medium’s strengths to shine. Rather than focusing on hacks and polyfills, our attention shifts to the principles built into the foundation of the web, an open web created to facilitate the transfer of knowledge over a decentralized network. Otherwise, walled gardens and proprietary standards will dominate the landscape, vacuuming up our thoughts and ideas, repackaging them as free content, and selling our attention to advertisers.

Designing in the Open

The collective emphasis on the limitations of the web often overshadows its capabilities, including its greatest benefit — openness by default. This project echoes this fundamental principle, opening all source code to scrutiny, and expands upon it, opening up the process as well. It invites input from stakeholders and end users to guide development.

Embracing an open redesign means releasing early and releasing often — rapid prototyping that iterates on early ideas and concepts with input from stakeholders and end users. ⁴ This should not be confused with democratization of the process or crowd-sourcing decision making. To the contrary, design-by-committee often yields unfocused results suffering from a lack of direction. An open design, by contrast, permits better informed decisions by the appointed authority (me, in this instance), based on real data and feedback rather than speculation.

While this may not be an ideal process for every project, such feedback and criticism will help refine the process as well as the product. In turn, I can replicate these improvements across future projects, even those that require a greater degree of secrecy. Additional benefits of an open design include an established record of the project’s evolutions over time, documenting the logic behind each decision while also preserving explored yet abandoned directions as a matter of record. In this way, I also intend to contribute to the growing awareness around some of the more esoteric aspects of web development, overlooked areas such as performance and accessibility that often take a backseat to more visible aspects, particularly when faced with looming deadlines and tight budgets.

Looking Ahead

None of these ideals add up to much unless I deliver a functional product. Ideally, it looks as great as it works, but success will be measured by these clearly defined and, in most cases, quantifiable guidelines. Writing about the process will also enable me to more clearly articulate my own web development first principles.

Objective

Deliver a redesigned augustdombrow.com that: 1) consolidates my online presence under a single domain; 2) facilitates contact with future clients; and 3) serves as a repository for my future articles, code and other online endeavors.⁵

Road Map

1. launch MVP (this update)
• remove all pre-existing styles and use browser defaults as starting point
• basic revision to markup where removed styles necessitate; site content will otherwise remain untouched
2. performance audit and optimization of MVP to establish baseline for remainder of project
3. comment/feedback system to facilitate input for open design
4. project hub to serve as a record of project development as well as an archive for related deliverables
5. content audit and information architecture
6. blog system/CMS for future updates and writing
7. analytics for capturing on-site visitor behavior
8. styling and layout
• typography
• media
• hyperlinks
• branding
• component library
• CSS architecture

Footnotes

1. In “The Web’s Grain”, Chimero suggests many modern web development dilemmas are the consequence of working against the internet’s intrinsic qualities (i.e., the grain). If we drop the “blank canvas” metaphor when thinking of the web and adopt a building metaphor, we can harness the web’s potential for our sites. ↩︎
2. It’s also a good reminder that the web works right out of the box — and occasionally even works better. Or, in the rhetoric of one eloquent web critic: “What I’m saying is that all the problems we have with websites are ones we create ourselves. Websites aren’t broken by default, they are functional, high-performing, and accessible. You break them. You son-of-a-bitch.” ↩︎
3. A case in iterative design. ↩︎
4. As I write this at the start of 2017, there are plenty of well-documented instances of open designs. Brad Frost’s article on the topic, however, was one of the first I read (c. 2013) and remains an excellent introduction and resource to the practice. ↩︎
5. Over the course of a public dialogue spanning twitter, Fast Company, and Marco Arment’s own blog, Marco and Glenn Fleishman explore the intersection of ownership, technology and business (albeit briefly). The argument could be distilled to this line from the Fleishman article: “People posting extensively on Facebook, Twitter, or Medium are relying on the future goodwill and unknown business models of those sites that their words and images will persist in some form and in a form that the creator wants.” In short, a personal domain remains the best guarantee your work persists and in a format of your choosing. ↩︎