Too much 3rd Party content can slow down the growth of your site, reduce engagement, conversions and more. Learn how you can still incorporate widgets, plugins etc and still have a site that does not force your visitors to leave and never return.
Category Archives: Web Development
Too much 3rd Party content can slow down the growth of your site, reduce engagement, conversions and more. Learn how you can still incorporate widgets, plugins etc and still have a site that does not force your visitors to leave and never return.
More than a trend, web application performance, user experience and performance optimization are finally being recognized as the building blocks of successful sites. Google is taking a leading role today in increasing awareness about the role of speed in improving user experience and driving revenue.
A “valid” site is not always the best site for users that visit it. Even amongst the savviest of coders and developers there has always been a common misconception about the value of web standards themselves. The idea of “keeping it super simple” (or other popular variations), when it came to the world of markup once revolved around spacer images and table-based presentation oriented markup. It seems that either as a beginner or a seasoned web professional the role of standards themselves became overrated, since even the less markup of yesteryear still validated. The balance of the confusion over the value of standards begins with the fact that web standards are not consistently supported amongst popular user agents, why should we bother working with them — why all the fuss? Regardless, the true value of web standards is as a stepping stone and the leverage it contributes to a well-conceived web site inside and out.
Think Outside the Design
The value of web standards really amounts to recommended use of markup to semantically describe content. Once mastered, the web developer is able to make intelligent and conscious decisions on the “right” compromises to be made for a given project. We are constantly working towards standardization and have had dialogs about the best practices for markup in various situations, it’s the World Wide Web Consortium’s role to define the purpose of markup; the platform for web site optimization. Web site optimization has little to do with search engine optimization or any of the W3C’s validation tools. Instead web site optimization deals with steps taken to improve user experience by:
In short, the goal is to use the minimum code to achieve the desired result. Unfortunately, clients may not always afford us the proper time or resources required to give the most polished result possible.
Think it Through
Web standards in and of itself does not necessarily contribute to reduced file sizes, however what it does do is endorse healthy use of semantic markup that does give way to reduced page weight through table-less markup and a focus on cascading styles sheets for presentational material. By using document object model scripting, procedural code no longer needs to live inline in the html document itself. Take advantage of your page’s semantic structure to use the DOM to the fullest.
Code becomes art when we take our code to the next level by re-factoring it to maximize it accessibility, by reducing our dependency on the markup for presentation and procedural user interface components. What remains to be done when all of the content in a document is rendered as the design calls for, content properly described with your tags, images optimized for reuse and weight? Now, we consider scale, what happens when this site we’ve worked so hard to optimize becomes highly trafficked (think: Digg Effect) — or if the site already is, let’s make sure to optimize the server’s role in the user experience.
Caching is one of the chief techniques to be leveraged to improve user experience both on the client-side and the server-side. Making objects like cascading style sheets and JavaScript files external can also benefit from the technique of combining files to reduce latency. It’s much less “work” to download a larger file once than it is to download (or check for freshness of) several files. Unfortunately, many of the most visited sites could benefit greatly from even a dash of web site optimization. Issues like multiple CSS file or JavaScript files demonstrate little regard for the benefit they could provide their visitors as well as their own bottom line.
Move on to compression; consider pre-compressing your CSS and combined JavaScript files to reduce server load for high traffic sites. Go a step further and create a proxy that makes sure to return the “not modified” codes to user-agents checking for freshness of objects in your site after first download.
Without getting into code for each portion, let’s consider the typical components of a “well-designed” HTML document:
Within each there are a myriad of possible methods to semantically describe the content of the components. Let’s have a look at a few basic cases:
Diving into a single common challenge can show how understanding of web standards cascades into an optimized user experience, let’s look at a technique that combines several techniques by several authors, each of which contributing to many fundamental factors of web site optimization; specifically: image reuse, semantics, presentational separation, caching, latency reduction, image optimization, and accessibility/platform independence. Anyway, on to the challenge — image based main navigation with hover effects. Without being distracted with pseudo-code let’s have a look at how using what we know about web standards leads naturally to web site optimization and a very desirable result for the user:
Normally this is where things would end. At this point we have the desired result, but it’s not an optimal experience for the user. Again to the credit of numerous designers and developers turned authors out there additional techniques can be applied to optimize the menu quite a bit:
In the previous three steps, we’ve:
Now apply a few more techniques to the site as a whole:
With the various techniques we all apply to our projects just adding a few more steps of optimization greatly improves the user experience.
Make it Your Own
Standards simply help us agree on what markup is intended to do and how it’s elements work together for describing content, web site optimization picks up where web standards leaves off. The W3C encourages us to use markup to describe the content and separate the presentation and functionality from markup as much as possible. Once we get used to the idea our time is best spent optimizing our code to work in the real world. I’ve intentionally left out the “how” because that’s an ongoing debate whose conclusions are at best situational. There are quite a few frameworks out there that help developers apply many of these principles to their projects right out-of-the-box, but it’s not too difficult to build your own framework for your own style of work.
So what’s the final word? Well, similar to the stance that Ethan Marcotte put forward I suggest that web standards be the baseline that we use to optimize sites to perform for the targeted user agents. One day it may be easier to leverage standards to achieve a predictable user-experience across all user-agents, but for now it’s best to have more skills and mastery than are required to render a job well done.
I was fortunate enough to be a guest for the first time on The Alternative hosted by Jim Hedger and Dave Davies and we explored the who, what, why, where and when of building tools and the purposes of link bait. We also let the cat out of the bag about a few tools we’ll be releasing shortly. Feel free to check it out and enjoy. Also in on the session was Jeff Quipp from Search Engine People who’s also running a very exciting contest (with a $1,000 prize) that I’m encourage everyone to participate in!
Many of you out there have seen this already, but I had to point to something at good old you tube that’s simply well done and insightful. With all of the confusing content out there and controversial definitions, it’s great to be able to sit back and watch the story of the interweb evolution unfold in such a meaningful presentation (it reminds me quite fondly of the evolutions web designers themselves made as we embraced web standards and CSS based web design). Check it out below or at YouTube.
Web design sensibilities have changed.
The motifs found in sites like the following go far beyond their community driven content:
Many of these sites have been around for more than a decade and ultimately changed the paradigm of how we use the web, (Tim O’Reilly discussed after the fact in 2005). However it wasn’t until recently that the trends in design that began with these sites finally gave birth to new design sensibilities as well.
Not too long ago, building a community online just meant that people bookmark your site and visited it frequently. Perhaps a site owner pumped out some newsletters to drive subscribers back to the site or partner sites had links to your properties to remind various visitors that you exist. When RSS appeared, it helped people stay abreast of the latest content pushed out from content owners. More recently we work and play in a world where the community owns the content, and if they are so bold, the site owners are only moderators (and the guys that pay the web hosting bills). Great examples are the Wikis (well done Jimmy Wales) we all know and love — good old “folksonomy“. Having said that, we’re also in a world where anyone’s voice can be heavily syndicated and tagged as worthy of note, which is a beautiful thing…
Let me get back to the point before I get lost in the history of forums as the original online communities. Now that a community can control the content and determine what is relevant and important, the visual language that we as web designers are now using has changed significantly as well. Today we communicate instead of decorate (as Phil Brisk put it so succinctly) with design aesthetics — with the focus on content, that’s exactly how things should be. A nice post at webdesignfromscratch.com discusses this trend pretty well imho. These design trends have finally even cascaded into corporate design sensibilities which once accounted for the majority of the design work we designers are asked to perform.
Characteristics like:
It seems to me that also the DDA legislation in the UK contributed to the “Web 1.5″ as markup that used standards, semantics and exhaustive CSS designs began to take hold and foster a renaissance in the approach to usable and accessible site design. We still don’t see the abundance of layouts that are designed for a resolution higher than 800×600, but this trend is mostly a function of the audience for many of the clients out there looking for our services. In custom business web design, there are of course a number of restrictions that deter us from employing a wider fixed-layout, perhaps that will change as well soon enough.
Thanks to all of those folks highlighted in this post for enabling me to support my thoughts on custom business web design with supporting opinions. I hope this blog will be a destination in the community soon enough.
As SEs become more sophisticated in their abilities to index site content, site semantics become increasingly important. The next generations of SE algorithms will index content, not keywords. And that content better be right on target.
If your site is search engine optimized to the max, it’s not optimized for human eyeballs. Is it worth the expense to add some Flash? Only if you want to save some money and be here tomorrow.
Is it a movement? A revolution? Perhaps a new paradigm? Or, is it a bunch of hype designed to sell a bunch of new software? Just what is Web 2.0?
RSS has already changed the way web designers are constructing new sites. Is this state-of-the-art feature a part of your cyber-turf? If it isn’t, it should be.