W3 launches a new user interface development outsourcing service. Utilizing CSS, XHTML, AJAX, JavaScript and leveraging open source software for blog, e-commerce and CMS artwork integrations.
Yearly Archives: 2007
W3 launches a new user interface development outsourcing service. Utilizing CSS, XHTML, AJAX, JavaScript and leveraging open source software for blog, e-commerce and CMS artwork integrations.
Think all links are created equal? Not so. Some links deliver a lot more in the way of information and prestige when it comes to search engine rankings and visitor retention. Learn which links work best for you, your customers and your marketing budget.
A lot of site owners spend a lot of money on SEO. But once you have traffic, then what? How do you entice visitors to make a purchase? That’s where conversion optimization comes in – converting visitors to buyers. Here are 25 low- and no-cost tips used by the pros to boost conversion rates. Try them. You’ll like what they do for your bottom line.
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!
While the free tools that Google provides are seen as questionable at best in the “don’t be evil” debate (about Google’s ultimate intentions and uses for the data). One thing is definitely clear, webmasters appreciate the added insight into the goings on of their site, enjoy the interface provided into their data and ultimately, Google’s tools and their integration of them (namely Google Analytics and Google AdWords) is definitely *convenient*. Some oldies some newies, but all relevant; Google Analytics steps up with:
All of these are extremely handy especially when you have the ability to track the results on your own to make sure everything is kept honest. I’m looking forward to a hands-on test drive. Check out the tour now.
Dan Thies over at SEO Research Labs has pointed out a remarkable video by Andy Edmonds. He and his team have used statistical analysis to study how the eye and brain process information while interacting with web sites!
First a definition:
“Foveal View” — The area of visible space where the user is best able to focus with maximum detail. The point here is that outside of the focal area the eye (and therefore the mind) is not perceiving color nor as much detail. Understanding this concept cascades into the takeaways that follow.
Now some highlights from Andy’s portion of the video + my two cents:
Heat mapping sites like the following are useful in understanding the result of the eye/brain interaction. Use the insight above to review your design and your heat map results to identify problem areas in your user interface design. Here are some popular tools:
Let’s not forget Google Analytics (Urchin) is useful when using the "Site Overlay" view in also seeing which anchors are most clicked in your site.
However, what we’ve long called “EBO” or Eyeball Optimization is explained masterfully by Andy — Well done!
Since I’m not sure how long that video will be in place so here’s the “permalink.”
Eric Meyer has done it again (yes I’m a cult follower). It was awesome to sit through the live walk through of most of the principles that Eric presented in his final version.
What Eric has decided to do with the support of many interested participants is create a baseline for many of the HTML elements that behave inconsistently from browser to browser. The result being a fantastic snippet of code that removes the subtleties that often cause anomalies in the render of pages in Internet Explorer 6/7 (and in other browsers too).
For those that just want to see the code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; background: transparent; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } |
You can see that nearly every element is considered above and is “reset” to values to provide sure bedrock for styling a document.
I suppose I should go to mention another great tip from Eric, while on the topic of consistency and this one points to to consistency between the CSS “functionality” of internet explorer 6 and internet explorer 7. Dean Edwards put together great javascript code which enables coders to focus on CSS production for IE 7 and not have to worry support for behavior that doesn’t exist in IE 6 — definitely worth a look.
A bit late to the party, but I wanted to show support of Jeffrey Zeldman’s survey. He and the other great folks at ALA are trying to unravel a few mysteries about us designers and our careers. I encourage you to participate – tell a friend!
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.