Design

Lunch and Learn Recap: This Old Site

If your web presence is the same as it always was, it might be a good idea to look around and notice how much has changed.

In our July Lunch & Learn, members of our production staff went over what’s changed in web design and technology in the past few years and why upgrading your site might be a great idea. Our crack team covered advances in coding and design as well as newer concepts like content portability and peer-level customer interaction. For more information on our Lunch and Learn series of free how-tos and discussions, see the events & workshops section of our site.

Building a website is a lot like building a house: you pick your lot (register a domain name), come up with a general room layout (create a site flow, message, and content), draft the blueprints (create wireframes and a site map), and then you build it, paint it, landscape it and move in (design, build and launch the site). But while this housebuilding analogy works well for the design and build process of a website, it starts to break down once the site has launched. You see, in 5 years a house is still pretty much new. Even after 10 years, where there may be some minor repair work to be done and a broken appliance or two, a house remains more or less the same as it was when it was new.


For related fun, check out these
6 remarkably stubborn nail houses.

Other than the effects of age and the wear and tear on its parts, a house is an investment that stays the same year after year. And while a 70s split-level ranch may look outdated by now, it got that way over a span of decades, not years. But unlike the relatively steady environment of neighborhoods and cities, the environment of the web is still changing very rapidly. Imagine your house in the environment of the web, where it remained the same while your neighbors constantly improved their homes and you’ll see how even a site that’s not broken can quickly become obsolete.

Another way the house analogy breaks down is that a website isn’t a task that’s finished when your site launches; it’s a new arm of your organization that only begins once your site is built. And just like all the other aspects of your organization, it requires constant attention. Imagine it less as opening a new location and more like expanding into a new market that is always growing, changing, and evolving. Because that’s exactly what it is.

So by now, you ought to get the premise: If you have a website that’s still the same website you had 3, 4, or 5 years ago, you might have a problem. Imagine that while you were tending to your day-to-day, the world around you changed dramatically, but it was so incremental and so separate from your day-to-day that you didn’t even notice.

Well it did.

To illustrate this, we went back in time to see how the web looked 5 years ago. What if you opened your browser today and this is what you found when flipping through Amazon, American Eagle, Delta, and Sears? These were high-powered, high-dollar sites–the cream of the crop–and even they look obviously outdated. And notice that 5 years ago Sears wasn’t even selling their catalog online, only parts.

So obviously, a lot has changed. Let’s look at some key areas:

The Rise of CSS

Believe it or not, all those pretty websites you see are all just pages of HTML code that are telling your browser what to display and where and how to display it. In the early days, we used an HTML coding set called tables which was originally intended to provide structural elements to grids of data. As with most cases of internet ingenuity, people figured out how to hijack the code to make it do wildly different things that in was intended to do. Namely, to create websites.

The problem with tables is that it was a complicated and rigid structure that was a pain to design for and an even bigger pain to maintain. And once the web really took off, the limitation of tables became enemy no. 1. The web demanded a coding language that was designed to display websites. That language is called CSS.

CSS allows web developers to keep all the page layout information in a file that’s separate from the page content. This allows the content to be easily reworked for different environments (mobile, tablets, desktop). It allows us to develop websites that are much more dynamic, gives us complete control over where elements display on the page, and, when combined with scripting packages like jquery, allow us to do some really cool stuff that was impossible (without a deal with the devil called Flash) only a few years ago.

If you have a website that was built around 5 or more years ago, there’s a strong possibility that it was built without the advances in speed and flexibility that modern CSS provides. And if your website is old enough to have been built using tables, then the site you’re counting on to bring you traffic or sales is built on a framework that no longer conforms to web standards and isn’t officially supported by major web browsers. This means it is effectively penalized by search engines, renders slower than modern websites do, and is completely irrelevant for the exploding mobile user segment.

Content Indexing and Portability

Remember the old days when you depended on people to enter in your URL and read everything you had to say right there on your website? Well those days are long gone. Today’s web content is flexible, and if you’re doing it right, the content on your website is being repurposed in ways that weren’t even dreamed of 5 years ago. Users are finding your site not because they’ve typed your URL into their browser, but because someone posted your content on Facebook, or tweeted it, or because a friend shared it in their RSS feed. Today, web traffic is driven by searching and sharing. And modern, search-engine-friendly code is what makes it all possible.

For search-driven traffic, there’s nothing more important than a backbone of solid, valid HTML. With the cementing of Google as the most dominant driver of web traffic, search engine optimization (SEO) has become a paramount concern. Valid code, with proper meta data, clean URLs, and a search-engine-friendly content structure are essential components of any website that hopes to please the Google gods.

And it’s not just Google we’re pleasing by taking those steps. That same search-engine-friendly structure, comprised of valid HTML with CSS styling, is an essential part of creating the type of flexible content that can be shared and repurposed on the web. Today’s web relies on an orbital content model that presents content to the user and allows them to repurpose that content for a variety of environments.

Importance of Content Flow and Message

In the early days of the web, just getting a website up was enough to claim success. Companies put the type and volume of content suitable for an annual report into tidy little websites and called it a day. But as more users spend more of their time and energy online, it’s increasingly important to use your web presence to invite them to establish a peer relationship with your organization. And connecting with your users takes a conscious and focused effort.

The spread of the web into every aspect of our daily lives has had an inverse correlation with our attention spans. Users aren’t going to dig and hunt for the content or product they are looking for on your site when Google just returned pages of other options. You have one chance to turn their fleeting moment of interest into a relationship, and it’s critical that a new user is presented with well-organized content and a clear message that directs them toward a desired action. This means simple, action-based navigation, clear and prominent calls to action, good and inviting photography, and limited amounts of text. Today’s web user expects to be shown what to do in a fraction of a second. And it takes real effort and forethought to make that happen.

A successful modern website also reaches out to users and invites them to participate–be that in blog commenting, social media interaction, or through unique user profiles. Websites aren’t just brochures anymore, they are interactive environments designed to be a real part of the user’s life.

Broadening Web Environment

The visual language of the web has also changed a lot in the past several years. Screens have gotten larger for the desktop and yet smaller for mobile devices, widespread broadband has brought video and rich media into the commonplace, and the rise of touch-screens and tablets has added even more elements to the visual language of the web. In short, your website is going to be expected to display content with a lot more depth than it was several years ago, and in a much wider variety of formats. And it can with a little planning and an idea called responsive web design.

Remember the CSS we talked about earlier and how it keeps the styling of the content separate from the structure and content itself? Well, that comes in incredibly handy when adapting a website for mobile, iPad, and all manner of desktop screen resolutions. This means that with a little bit of tailoring, we can reorganize the same content in different ways that are suitable for whatever environment it is being displayed it. This may seem like a small feat to the layman, but it was absolutely impossible before the rise of modern coding standards and CSS.

While it would be impossible (and quite boring) for me to cover every way the web has changed in the past several years, it’s undeniable that it has changed dramatically. What started as a piecemeal assembly of possibilities and cool ideas has matured into an powerful, content-rich environment that is quickly becoming the fabric of our daily lives.

And while it’s come a long way, it’s certainly not done evolving. Being a part of the web isn’t something you set out to do and finish. It’s something that requires frequent care and attention. And if you’ve let your web presence go, it might be a good idea to look around and notice how much has changed.

You Might Also Like

Join Our Newsletter

Don’t miss out on what’s going on at Infomedia! Subscribe to our monthly newsletter for updates and helpful tips and information.

* indicates required