Designing the modern web
By: Matt Owens
Tags: Prototyping, Design, Web Design, UX, Programming

You can’t make a website do everything

The internet is quite vast these days. Billions of sites doing billions of different things for different reasons. Some clients and some designers love cataloging all of the specific design, content, UI, and UX moments they see on the web with the intention of having these serve as a kind of reference toolbox for future site experiences. This is a great impulse. To add to this, sites such as Dribbble are also great for inspiration and have become a space to showcase idealized UX animation approaches that can make sites and apps look way cooler than they can be in reality. Much of this inspiration finds its way into project mood boards and can be incredibly helpful when you are working to align on creative approaches and to get people excited.

For all of this great inspiration and reference, we know that you can’t make a website do everything you see on the web all at once. It would be like shopping for a car by going to every dealership and glueing all of your favorite features together to make your own car. If you do this, your car will certainly not run well and it will certainly look terrible. The same goes for websites.

Reverse engineering cool web ideas you see out in the world is not inherently bad. What is bad is assuming that combing many ideas you like is the right way to solve the digital problem at hand. Ideally we develop web products and experiences by coming from a clear and informed strategic foundation with a firm understanding of business needs and technological limitations so that we do not create experiences that do not solve the intended problem, that are difficult to build, and are impossible to maintain.

People that are not technical tend to focus on what they can understand and that is the surface. As an example, I have been in situations where I have had to convince a client that we were not creating a web experience optimized for their personal iPad. We had to educate them on how the behavior of your finger navigating a site is inherently different than navigating a site on a person’s desktop using a mouse. For them, apps and sites were one and the same thing and they were annoyed that their site could not do everything a native app could when they were chilling at the office on their iPad. This probably seems rather silly and naive to people that design and build for the web but for many these basic misunderstandings and false assumptions persist. Due to this lack of knowledge we must acknowledge that without proactive education and context, some level of dysfunction will remain within any project.

Providing ongoing context and client education and at the very least understanding how savvy your clients are is crucial. To reduce the danger of trying to make a UX hodge-podge “Dribbble soup” of a site you have to build a process that aligns strategic and business goals with design and experience solutions that are contemporary and cool but are also focused and realistic. This requires lots of talking, rationalizing and education but it is a necessity to ensure that our web collecting eyes don’t get larger than our performant and complaint digital stomach.

Form and content are not the same thing

A website is only as good as the information within it. Over the last 20 years, this basic concept still remains the most challenging for clients to understand. Some folks still have a hard time grasping the idea that no amount of good design can improve bad content.

If you put a TV show on a more expensive TV does the show become narratively better? If you put a baby behind the wheel of a Lamborghini do they become an expert driver? You get the idea. Developing well crafted information — language, photography, video, illustrations, audio and the like is the necessary baseline for a great site experience. Full stop.

The push and pull between form and content is as old as the need for clear communication. Designing for the web is one of those unique mediums where you can actually develop formal systems that can serve as a forcing function to improve content creation.

Creating modular content patterns that leverage the natural information consumption behaviors of the web can be extremely useful when a client is unsure how to optimize their storytelling. Building a formal scaffolding that also serves as an ideal narrative guide can provide more rigorous parameters around how and what to write in a way that has the most impact online and especially on mobile devices.

Brands like Notion and Apple understand how digital craft, editorial economy, visual impact and crisp communication can all come together to provide a great online narrative experience. To do this right takes discipline as well as a solid understanding of how developing replicable narrative systems that seamlessly blend the form and content of a site can help keep communication sharp and beautiful.

Listen to and respect your developers

The web would not function as a contemporary communication medium unless really smart developers cared deeply about their work. There has never been enough really, really good developers on this planet. We always need more. As a designer I admit I am biased. I think we have too many “good” formal designers in the world but not enough amazing designers that also know how to work with developers in an integrated and nuanced way to make great experiences.

Since the advent of mobile devices and the wholesale adoption of responsive design, we probably all agree that designing for the web has become really annoying. There seems to be too many moving parts! We can’t escape this but we also can’t ignore it either. We are at an inflection point where developers are really co-designers because a smart development team has a better understanding of the technological dependencies and constraints that fundamentally inform the sandbox an amazing designer has to operate within.

In the past, people in business, management and creative roles did not deeply consider all of the technology infrastructure work required before a project begins. Again, it is human nature to focus on the things you understand and ignore the things you don’t. This kind of blissful ignorance is rapidly fading as creative and technology tools and processes merge. In the not too distant future design teams and development teams will blend in a way that will produce better work faster. I’m not talking about a world of all night design and development hackathons. In contrast, I believe that the developer mindset is rubbing off on the design mindset (and vice versa) and that we will find more and more common ground and mutual admiration happening as these two worlds continue to overlap and inform each other.

Embrace best practices, documentation and accessibility

Personally, I’ve always had a kind of “Life Hack” philosophy when it comes to designing for the web. I have poorly rigged Lottie animations into sites, stolen heaps of Javascript, butchered WordPress Themes, you name it. As a designer, I felt I should do whatever I thought was required to sell in an idea. This approach is fine if you plan to throw it all away later. But in this day and age, you have to lead by doing things the right way even if it might be a little harder or a little slower.

In the fast paced world of the web, the worst thing you can do is half-ass it now because it will come back to haunt you later. Unraveling someone else’s undocumented code base is a horrible thing to have to do. When it comes to the web, a stitch in time saves nine. To this end, establishing a digital philosophy and clear tactics around handling best practices is an absolute necessity. A big part of this is about clear documentation. Building sites can get gnarly and the only way to not have this information be in the head of just one person is to write it all down.

Your technology stack should be created in a way so that someone not as smart as you can understand it and spin it up locally. This is because no two developers work in the same way and given the rapid nature of what we do, you may need to onboard someone new that is also less experienced. When it comes to developing for the web, the more you can think ahead and future-proof the better.

Compliance is also something you need to understand and have a stance on. Currently minimum requirements for ADA compliance are still open for interpretation but you never know when someone might have an issue so it is better to know what your baseline is so that you can clearly articulate how you are handling WCAG 2.0.

The web sucks. Long live the web!

Designing and building for the web will always be a fluid evolutionary vocation. Nothing really stays the same and new things are always on the horizon. This is what I love most about designing for the web. It keeps us learning and growing but it can also be extremely frustrating.

The one thing I always try to remind clients and teams is it is just a website. We are not building a suspension bridge or doing brain surgery. We can push code, make fixes and try new things. This ability to iterate is what makes the web a fun medium to work in if you have the right temperament. I hate the web and I love the web as well. It’s a proverbial oily watermelon floating in the deep end that we are always trying to grab ahold of. Just as soon as we have a handle on it, it slips through our fingers. As long as we know this and embrace uncertainty while reaching for perfection, then the web will be an amazing place to push creativity and technology for decades to come.

I would like to give special thanks to our Technical Director at Athletics Ross Luebe. He helped vet this article and gave me many helpful suggestions. As Technical Director, Ross is responsible for interfacing with clients, designers and developers and serves as a conduit and mediator to ensure that our teams are speaking the same language. Ross has the rare advantage of having a Master’s Degree in Graphic Design while having also gained very deep technology expertise over the last decade. This allows him to understand the common ground between design and technology and what needs to happen to get the best out of both.