Web components, CSS and the quick change artist
One of the biggest challenges a web team can face is a project that requires a complete visual change of their large web property. It’s a tough challenge, because there are usually multiple platforms underneath, all using different templating and rendering systems. And, the expectation is always that the change happen across thousands or millions of pages in an instant, since nobody wants a site where pages in different sections look radically different.
One of tech’s big sites this week underwent such a change, which was executed very efficiently. In the online technology world (I’m talking web sites, mobile and such), the Java technology web site is one we consult regularly, since it hosts tons of technical information about the Java programing language and platform. Members of our technical team are on the site several times a day, and, even though I am a design director now at Cisco, I periodically check it as well since I used to run that Java site back in the early days of Java.
This past week, Oracle acquired the site as part of its purchase of Java’s inventor and benefactor, Sun. The visual update was put into effect instantly to reflect the change, and I think the speed of execution was stunning.
Beyond speed, there is cost: This CSS approach means that the update probably took a few hours to initially prototype, followed by some weeks of planning, implementation and testing — but not the expensive months of template and platform reinvention, and even HTML page or content database updating that are often required on a big multiplatform web site. Whatever you might think of either the old or new design there, the quick update seems a testimony to the value of having a solid HTML component system and well managed Cascading Style Sheet strategy.
See if you can notice the different things that were changed via CSS or global updates.
Hints: Some things I noticed:
- Logo changeout
- Visual change of masthead from blue to gray
- “Developer Network” changed from white to gray
- “The Source” title changed from orange to red
- Bars and gradients throughout change from blue to gray
- Body copy links change from blue (with no underline) to black (with underlines). Right rail links change from blue (no underlines) to black (no underlines)
- New ad in upper right, probably via standard placement mechanisms