Is 3D the next step for agency Web pages?
Connecting state and local government leaders
Some easy-to-use CSS techniques can help create a new dimension on PC and mobile browsers.
Many agency Web pages currently are dark or static due to the government shutdown, but underneath those place-holding pages are, in a few cases, some revolutionary and engaging designs. And when they’re active again, they might be ready to add another dimension.
In the not so distant past, government pages were rather dull, because it was more important to accurately display the information than to try and craft an engaging design that some browsers could not support. Anything visually appealing, much less in 3D, was practically forbidden.
Agencies have since taken a creative, interactive path in Web design, and today, thanks to some clever Cascading Style Sheets programming and the fact that almost all browsers support HTML 5, 3D effects are fairly easy to create.
A few of my “non-essential” fed friends who grew bored playing Grand Theft Auto V all week have been experimenting with ways to implant 3D and other visual elements into federal Web pages They showed me some of the ways that government Web pages could be improved without restricting user groups and without needing a lot of advanced coding skills.
The trick is using CSS to change the shape of content elements, thereby mimicking 3D without fully rendering it. In the past, making a 3D model required a lot of code and serious math skills. But now 3D can be created a lot more simply. While my friends are still trying to build a working model, other people already have, as is demonstrated on a Web page that lets users manipulate a template to create 3D clouds.
The code beneath those beautiful clouds is actually fairly slim and is mostly CSS-based with a little bit of JavaScript. Below is a partial view of what the code could look like.
For other programmers who want to try it, there is a tutorial that shows how it can be done. Companies are even offering specific tools to help make the creation of robust 3D models even easier. It's based on the CSS transformation working document, which is constantly being updated as well.
There are other lightweight ways to create some pretty amazing visual effects, too. Check out this non-interactive demo of rain falling against a window that is written completely in JavaScript. It looks like rain on a real window. And it displayed great on several tablets and a smartphone that I pointed to the page.
Adding pretty elements to government pages won't make them any more functional. Even my friends who are experimenting with the code this week know that. But you have to learn how to walk before you can fly. Now that it's possible to bring 3D effects to websites, the next stage can begin, where people figure out how to put this to good use, maybe on weather, space or environmental pages, for example. The simplicity of the creation means agencies can add a new dimension to websites.
NEXT STORY: Computers getting closer to replacing people?