I offer one piece of advice to my friends and family who are new parents: When you start thinking you have it all figured out, everything will change. Once your puppy starts getting used to feedings, diapers, and regular naps, it’s time to move on to solid foods, potty training, and a full night’s sleep. If you figure it out, it’s time for preschool and a rare nap. The cycle continues.
Article continues below
The same goes for people working in design and development these days. Having worked on the web for almost 30 years at this point, I have often seen the ebb and flow of ideas, techniques, and technologies. As developers and designers, every time we get into a regular rhythm, a new idea or technology emerges that shakes things up and reshapes the world.
I created my first website in the mid-90s. At the time, design and development on the web was a freewheeling environment with few established norms. I used the following for all layouts except single column: table There are often empty cells with single pixel spacer GIFs to add empty space. We’ve styled text in a variety of ways. font Nest tags whenever you want to change tags or font styles. And there were only three or four fonts to choose from: Arial, Courier, and Times New Roman. When the Verdana and Georgia were released in 1996, we were delighted because our options had nearly doubled. The only safe colors to choose from were the 216 “web-safe” colors that are known to work across multiple platforms. The few interactive elements (contact forms, guestbooks, counters, etc.) were mostly driven by CGI scripts (mostly written in Perl at the time). It took a lot of hacking to get any kind of unique look. Interaction was often limited to specific pages on the site.
Birth of web standards#Section 3
At the turn of the century, a new cycle began. messy code table Layout and font Tags have weakened and the push for web standards has strengthened. Newer technologies, such as CSS, have become more widely adopted by browser manufacturers, developers, and designers. This shift toward standards did not happen by chance or overnight. It required active engagement between the W3C and browser vendors, and active evangelism from the following: web standards project It’s about building standards. A list separate And the same books Design with web standards Jeffrey Zeldman has played a key role in teaching developers and designers why standards are important, how to implement them, and how to sell them to organizations. And approaches like progressive enhancement introduce the idea that content should be available in all browsers, with additional features available in advanced browsers. Meanwhile, the following sites CSS Zen Garden It showed how powerful and versatile CSS can be when combined with a solid semantic HTML structure.
Server-side languages like PHP, Java, and .NET overtook Perl as the primary back-end processor, and cgi-bin was thrown into the trash can. These improved server-side tools ushered in the first era of web applications, starting with content management systems (especially the blogging space with tools like Blogger, Gray Matter, Movable Type, and WordPress). In the mid-2000s, AJAX opened the door for asynchronous interaction between front-end and back-end. Suddenly you could update content without having to reload the page. JavaScript frameworks such as Prototype, YUI, and jQuery emerged to help developers build more reliable client-side interactions across browsers with widely varying levels of standards support. Techniques like image replacement allow crafty designers and developers to display the font of their choice. And technologies like Flash allowed us to add animations, games, and more interactivity.
These new technologies, standards, and techniques have revitalized the industry in many ways. Web design has thrived as designers and developers explore more styles and layouts. But we still relied on a lot of hacks. Early CSS was a significant improvement over table-based layouts in terms of basic layout and text styles, but the limitations of the time meant that designers and developers still relied heavily on images for complex shapes (such as rounded or angled corners) and tiling. Background on the emergence of full-length columns (among other hacks). Complex layouts required all manner of nested floating point or absolute positioning (or both). Flash and image replacement for custom fonts were a great start to diversifying the Big Five, but both hacks created accessibility and performance issues. And JavaScript libraries make it easy for anyone to add simple interactions to their pages, even at the cost of doubling or even quadrupling the download size of a simple website.
The Web as a Software Platform#Section 4
The symbiosis between front-end and back-end has continued to improve, bringing about the era of modern web applications. Between expanded server-side programming languages (which continue to grow to include Ruby, Python, Go, and more) and modern front-end tools like React, Vue, and Angular, we’ve been able to build fully-featured software on the web. Along with these tools, other tools such as collaborative version control, build automation, and shared package libraries were also provided. What was once an environment primarily for linked documents has become a realm of endless possibilities.
At the same time, mobile devices have become more capable and you can now access the Internet from your pocket. Mobile apps and responsive design have opened up new opportunities for interaction anytime, anywhere.
The combination of these capable mobile devices and powerful development tools has contributed to the evolution of social media and other centralized tools for people to connect and consume. As connecting directly with others through Twitter, Facebook, and even Slack has become easier and more common, the desire for hosted personal sites has waned. Social media has provided global connectivity, with all the good and bad that comes with it.
Would you like a much more extensive account of how we got here and another explanation of how we can improve? Jeremy Keith wrote “Time and the Web.” Or check out the ‘Web Design History Timeline’ at the Web Design Museum. Neal Agarwal is also leading a fun tour with “Internet Artifacts.”
Over the past few years, it seems we have begun to reach another important inflection point. As social media platforms collapse and decline, there is a growing interest in owning their own content again. There are many ways to create a website, from the tried-and-true classics that host plain HTML files to static site generators and all kinds of content management systems. Social media fragmentation also comes with costs. We lose critical infrastructure for discovery and connection. Webmentions, RSS, ActivityPub, and other tools on IndieWeb can help with this, but they’re still relatively poorly implemented and difficult to use for less geeky folks. We can build amazing personal websites and add to them regularly, but without discovery and connection, it can sometimes feel like we’re shouting into the void.
In particular, efforts such as Interop have accelerated browser support for other standards such as CSS, JavaScript, and Web Components. New technologies receive widespread support in a much shorter time than before. I often learn about new features and check browser support for those features, only to find that they are already over 80% covered. The barrier to using new technologies today is not browser support, but simply limitations on how quickly designers and developers can learn what features are available and how to adopt them.
Today, you can prototype almost any idea with just a few commands and a few lines of code. With all the tools available to us today, starting something new is easier than ever. However, the upfront costs you may save in early provisioning of these frameworks ultimately come at the cost of upgrades and maintenance as they become part of your technical debt.
If you rely on a third-party framework, it may take longer to adopt a new standard because you may have to wait for that framework to adopt that standard. These frameworks, which would have enabled faster adoption of new technologies, have now become obstacles. These same frameworks often also come with a performance cost: users must wait for scripts to load before reading or interacting with the page. And when a script fails (due to bad code, network issues, or other environmental factors), there is often no alternative, leaving users with a blank or broken page.
Where do we go from here?#Section 6
Today’s hacks help shape tomorrow’s standards. For now, there’s nothing inherently wrong with embracing hacking to advance the status quo. Problems only arise when we don’t admit it’s a hack or are hesitant to replace it. So what can we do to create the future of the web we want?
Build it for the long haul. Optimize for performance, accessibility, and users. Evaluate the cost of developer-friendly tools. It may make your job a little easier today, but what effect will it have on everything else? How much does it cost users? To future developers? Adopt a standard? Sometimes convenience can be worth it. Sometimes it can be a hack that you get used to. Sometimes it gets in the way of choosing better options.
Start with the standards. Standards continue to evolve over time, but browsers have done a surprisingly good job of continuing to support older standards. Even for third-party frameworks, the same is not always true. Sites built with the most hacked HTML from the 90s still work well today. The same cannot always be said about sites built with the framework, even after just a few years.
Design carefully. Whether your technology is code, pixels, or processes, consider the impact of each decision. The convenience of many modern tools comes from not always understanding the underlying design decisions and not always considering the impact those decisions can have. Instead of rushing to “move fast and solve the problem,” use the time saved by modern tools to think more carefully and design thoughtfully.
Always learn. If you are always learning, you are growing. Sometimes it can be difficult to pinpoint what’s worth learning and what the hack of the day is. Even if you only focus on learning standards, you may end up focusing on things that won’t matter next year. (Remember XHTML?) But continuous learning opens up new connections in the brain, and a hack you learn one day can help inform another experiment the next.
Play, experiment, and be weird! This web we’ve built is an experiment at its best. It’s the greatest human endeavor in history, but each of us can make our own pockets in it. Be brave and try something new. Create a playground for your ideas. Experiment with crazy experiments in your own crazy science lab. Start your own small business. There has never been a more empowering place to be creative, take risks, and explore what we can do.
Share and expand. Experiment, play, learn, and share what works. Write about it on your own website, post it on your favorite social media site, or give it a shout out on TikTok. write something A list separate! But take the time to amplify others as well. Find new voices, learn from them, and share what they teach you.
go out and make it#Section7
As designers and developers of the web (and beyond), we are responsible for building the future every day, whether it takes the form of personal websites, social media tools used by billions, or anything in between. Let’s put our values into what we create and make the web a better place for everyone. Create something that only you are uniquely qualified to create. Then share it, improve it, recreate it, and create something new. learn. make. share. grow. Rinse and repeat. Every time you think you’ve mastered the web, everything will change.