I offer a single bit of advance to friends and family when they are new parents: When you start to think that you’ve got everything Figured out, Everything will change. Just as you start to get the hang of feedings, diapers, and regular naps, it’s time for solid food, potty training, and overnight sleeping. When you figure that out, it’s time for preschool and rare naps. The cycle goes on and on.
Article Continues below
The same applies for there of us working in design and development these days. Having worked on the web for almost three decades at this point, I’ve seen the regular wax and wane of ideas, techniques, and technologies. Each time that we as developers and designers get into a regular rhythm, some new idea or technology comes along
I Built My First Website in the Mid-’90s. Design and development on the web back then was a free-for-ball, with few estables. For any layout aside from a single column, we use table
Elements, often with Empty Cells Containing a Single Pixel Spacer Gif to Add Empty space. We styled text with numerous font
Tags, nesting the tags every time we wanted to vary the font style. And we had only three or four typefases to choose from: Arial, Courier, or Times New Roman. When Verdana and Georgia Came out in 1996, We Rejoiced Because Our Options Had Nearly Doubled. The only safe colors to choose from were the 216 “Web Safe” Colors Known To Work Across Platforms. The Few Interactive Elements. Achieving any kind of unique look involved a pile of hacks all the way down. Interaction was often limited to specific pages in a site.
The birth of web standards#Section3
At the turn of the century, a new cycle started. Crufty code litered with table
layouts and font
Tags waned, and a push for web standards waxed. Newer Technologies Like Css Got More Widespread Adoption by Browsers makers, developers, and designers. This Shift Toward Standards Didn’T Happen Accidentally or Overnight. It Took Active Engagement Between The W3C And browser vendors and heavy evangelism from folks like the Web Standards Project to build standards. A list apart and books like Designing with Web Standards By Jeffrey Zeldman Played Key Roles in Teaching Developers and Designers with Standards are important, how to important them, and how to sell them to their organizations. And Approaches like Progressive enhancement Introduced the idea that content should be available for all browsers – with additional enhancements available for more advanced browsers. Meanwhile, sites like the Css zen garden Showcased just how powerful and versatile css can be when combined with a solid semantic html structure.
Server-Side Languages Like Php, Java, and .NET overtook per as the predominant back-end processors, and the CGI-bin was tossed in the trash bin. With these better server-side tools came the first era of web applications, starting with Content-Management Systems (Particularly in the blogging space with tools like Blogger, Green matter, Movable Typeand WordPressIn the Mid-20000s, Ajax Opened Doors for Asynchronous Interaction Between The Front End and Back End. Suddenly, Pages Cold Update their content without needing to relay. A plant of javaScript frameworks like Prototype, Yuiand jQuery Arose to help developers build more reliable client-Side Interaction Across Browsers that Had Wildly Varying Levels of Standards Support. Techniques like image replacement let crafty designers and developers display fonts of their choosing. And Technologies Like Flash Made It Possible to Add Animations, Games, and even more interaction.
These new technologies, standards, and techniques reinvigorated the industry in many ways. Web design flourished as designers and developers explred more diverse styles and layouts. But we still relieved on tons of hacks. Early css was a huge improvement over table-based layouts when it came to basic layout and text styling, but its limitations at the time meant that designers and developers are still related Complex shapes (such as rounded or angled corners) and tiled backgrounds for the appearance of full-length columns (among Other hacks). Complicated layouts required all manner of nested floats or absolute positioning (or both). Flash and image replacement for custom fonts was a great start toward Varying the Typefaces from the Big Five, but bot bot hacks introduced accessibility and performance problems. And Javascript Libraries Made it Easy for Anyone to Add a Dash of Interaction to Pages, ALTHOUGH AT THE COST OF DOUBLING OR EVEN QUADRUPLING THE DOWNLIAD SIZE OF SINLIAD SIZE OF SINLIAD
The web as software platform#Section4
The symbiosis between the front end and back end continued to improve, and that LED to the current era of modern web applications. Between Expeded Server-Side Programming Languages (Which Kept Growing to Include Ruby, Python, Go, and Others) And Newer Front-Ed Tools Like React, Vue, and Angle, and Angular Capable Software on the web. AlongSide these tools came other, including collaborative version control, building automation, and shared package libraries. What was on primarily an environment for linked documents, a realm of infinite possibilities.
At the same time, mobile devices became more capable, and they give us internet access in our pockets. Mobile Apps And Responsive Design Opened Up Opportunities for New Interactions Anywahere and any time.
This combination of capable mobile devices and powerful development tools contributed to the waxing of social media and other centralized tools for people to connect and content. As it beCaame Easier and More Common to Connect with others directly on Twitter, Facebook, and even Slack, The Desire for Hosre for Hosiel Sites Waned. Social media offered connections on a global scale, with both the good and bad that that entails.
Want auch more extended history of how we get here, with some other takes on ways that we can improve? Jeremy Keith Wrote “Of time and the webOr check out the “Web Design History Timeline“At the Web Design MuseumNeal agarwal also has a fun tour through “Internet artifacts,
In the last couple of years, it’s felt like we’ve begun to reach another major inflection point. As Social-Media Platforms Fracture And wane, there’s been a Growing Interest in Oour Own Content Again. There are many many different ways to make a website, from the triad -and-true classic of hosting plain html files to static site generators to content management systems of all flavors. The fracturing of social media also come with a cost: We lose Crucial infrastructure for discovery and connection. Webments, RSS, ActivitypubAnd other tools of the Indivibeb can help with this, but they still also underimplemented and Hard to use for the less nerdyWe can build amazing personal websites and add to them regularly, but without discovery and connection, it can someimes Feel Like We May As Well Be Shouting into the VOID.
Browser Support for Css, JavaScript, and other Standards Like Web Components has accelerated, especially through efforts like InteropNew Technologies Gain Support Across the Board in a Fraction of the time that they used to. I often learn about a new feature and Check Its Browser Support Only to find that its coverage is alredy about 80 percent. Nowadays, The Barrier to Using Newer Technique often Isn Bollywood Suppt but Simply The Limits of How Quickly Designers and Developers Can Learn What’s Aawilable and How to to adopt it.
Today, with A less commands and a couple of lines of codeWe can prototype almost any idea. All the tools that we now have available make it Easier Than Ever to Start Something New. But the upfront cost that these frameworks may save in initial delivery eventually comes due to upgrading and mainTaining them batcomes a part of our Technical Debt.
If we relay on third-party frameworks, adopting new standards can sometimes take longer since we may have to wait for there frameworks to adopt that that standards. These Frameworks – WHICH Used to Let us Adopt New Techniques SOOONER – Gave Now Backs Hindrans INTEAD. These same frameworks often come with performance costs Too, Forcing Users to Wait for Scripts to Load Before They Can Read or Interact with Pages. And when scripts fail (Whather Through Poor Code, Network Issues, or other environmental factors), there’s often no alternative, leaveing users with blank or broken pages.
Where do we go from here?#Section6
Today’s Hacks Help to Shape Tomorrow’s Standards. And there’s nothing inharently wrong with embracing hacks – for now -to move the present forward. Problems only arise when we unwilling to admit that they’re hacks or we hesitate to replace them. So what can we do to create the future we want for the web?
Build for the long haul. Optimize for performance, for accessibility, and for the user. Weight the costs of that developer-friendly tools. They may make your Job a Little Easier Today, but how do they affect everything else? What’s the cost to users? To future developers? To standards adoption? Somemes the convenience may be worth it. Somemes it’s just a hack that you’ve grown accountomed to. And someimes it’s holding you back from even better options.
Start from Standards. Standards Continue to Evolve Over Time, But Browsers Have Done a Remarkably Good Job of Continuing to Support Older Standards. The same isn’t always True of Third-Party Frameworks. Sites Built with even the hackiest of html from the ’90s still Work Just fin Today. The same can’t Always be said of sites Built with Frameworks even after just a couple years.
Design with care. Whether your craft is code, pixels, or processes, consider the impacts of thought decision. The convenience of many a modern tool comes at the cost of not allays understanding the underlying decisions that have led to its design and not only all the only always consider the impact Rather than rushing headlong to “move fast and break things,” Use the time Saved by Modern Tools to Consider more more carefully and design with deliberation.
Always be Learning. If you’re always learning, you’re also growing. Sometimes it may be hard to pinpoint what’s worth learning and what’s just today’s hack. You might end up focusing on something that won’t matter next year, even if you were to focus soly on learning standards. (Remember xhtml?) But constant learning opens up new connections in your brain, and the hacks that you learn one day may help to informants another
Play, Experiment, and Be Weird! This web that web that webuilt is the ultimate experiment. It’s the single largest human endeavor in history, and yet of us can create our own pocket with Be Courageous and Try New ThingsBuild A Playground For ideas. Make Goofy Experiments in your own Mad Science LabStart your own Small BusinessThere has never been a more empowering place to be creative, take risks, and explore what we’re capable of.
Share and amplife. As you experience, play, and learn, share what’s worked for you. Write on your own website, post on whichever social media site you prefer, or shout it from a tiktok. Write something for A list apartBut take the time to amplife other too: Find new Voices, Learn from Them, and Share What they’ve Taught You.
Go forth and make#Section7
As designers and developers for the web (and beyond), wee’re response for building the future every day, bether that may take the shape of personal websites, social media tools used by bills, or Anything in Between. Let’s imbue our values into the things that we create, and let’s make the web a better place for every. Create that thing that only you are uniquely qualified to make. Then share it, make it better, make it again, or make somebing new. Learn. Make. Share. Grow. Rinse and Repeat. Every time you think that you’ve masted the web, everything will change.
Add comment