Are you ready for the changes in web page design that will come with the new version of Cascading Stylesheets known as CSS3?
In A Refreshed Design for 2008 by Don’t Trust This Guy, I found a glimpse of some of the new CSS3 features and possibilities including multiple background images and CSS drop shadows.
One of the interesting proposals that may be making its way into the final CSS3 version is the grid. You can see visual examples of the technique and code from the W3 on the CSS3 Grid technique, and what it does is turn your web design into a newspaper/magazine style format. You start reading on column one, scrolling down, then have to scroll up to continue reading in column two, scroll down, then scroll up to continue reading the article in column three, and so on.
That’s a lot of scrolling up and down. I’m still teaching people how to use the scroll wheel and thumb buttons on their mouse, so what do you think this is going to do to your eyes and fingers scrolling up and down and up and down and…you get the picture.
While I think the grid system is excellent for precision design elements, hearkening back to the one joy in table-based designs – putting it EXACTLY where you wanted it to stay – I’m not a fan of any up and down scrolling. It’s bad enough that the header art and area keeps getting bigger and bigger, requiring one to three scroll downs (see Matt Mullenweg) just to get to the content. I see this technique as valuable for some sites who want to narrow the width of the column and keep as much content as possible above the scrolling fold, but I see a lot of abuse on the user, too. This should prove interesting, and increase the wear and tear on your scrolling finger.
You can follow some of the improvements and changes in the CSS3 Roadmap while you are waiting for your browser to embrace CSS3, and here are some other glimpses at what’s coming in CSS3:
- 24 ways: Rounded Corner Boxes the CSS3 Way
- Dev Opera – Styling Forms with Attribute Selectors Part One
- Dev Opera – Styling Forms with Attribute Selectors Part Two
- CSS3 border-radius examples
- CSS 3 selectors explained by 456 Berea Street
- Switchy McLayout: An Adaptive Layout Technique
- Showing Hyperlink Cues with CSS
- A mock-up interface using CSS3 Colour – CSS3
- CSS Drop Shadows
- Generated content in CSS3
- Using CSS 3 selectors to apply link icons – CSS3
- Rounded corners and shadowed boxes
- CSS Color Level 3
- CSS Grid Positioning Module Level 3 with Visual Examples
- CSS Namespaces
- Selectors Level 3
Yeah, But What About the Browsers?
In 2008: The Year Of The Layout Engine from the CSS3.info blog, they report on whether or not the new technology that will come with CSS3 will be viewable in most web browsers:
I believe that 2008 will be notable for the second salvo in the browser wars, and although previous combatant Netscape is out of action, we now have a four-way battle on our hands. In fact, ‘browser wars’ may not be the best description any longer; perhaps ‘layout engine wars’ is a more accurate description. With all four major engines releasing new versions, it’s going to be exciting to watch.
…During the last browser war it was the developers and users who lost out, as websites were built to favour one browser over another or involved double the work to be compatible with both. This time, however, standards are a well-developed core around which the battle rotates; so whoever loses, we all win.
The latter is quite a promise.
There are two major issues here. First, the web browser developers have to embrace the new standards and design elements. And they have to do it fast in order to jump on the CSS3 bandwagon. Waiting two to four years after the fact isn’t good and bad business practice.
The second more important issue is whether or not you are willing to upgrade your browser for the new CSS3 benefits.
I didn’t “upgrade” to Internet Explorer 7 mostly because I don’t use it. I have access to it for testing web designs along with other browsers, but I don’t use IE any more. It doesn’t give me the power I want in my web browser. After watching it take over whole computer systems and failing, repeatedly, in the installation, and watching them remove it and return to an earlier version, IE lost even more luster for me.
Are you really willing to upgrade Internet Explorer or move to a new browser to embrace CSS3? Would it mean that much to you?
The web browser is your best friend and tool when blogging so make sure it works for you and you work for it.
Along with the improvements in the upcoming release of CSS3, Microformats are the next generation in communicating and interacting with your readers and clients via your blog’s design.
Otto of Nothing to See Here wrote a brilliant post as a guest blogger here on Microformats and WordPress Themes, helping us understand better how to incorporate microformats into your WordPress Theme and blog.
In the article by Don’t Trust This Guy, he announces that in addition to CSS3 techniques, he is also adding microformats and gives a couple examples of the power of their use.
I see this coming year as a huge one for improvements in web page design and development, but we have to get the web browsers to keep up with the changes. And we, ourselves, have to keep up with the upgrades of our browsers so we can enjoy the improvements.
Are you ready?
- Fixing Browsers: Bugs and Hacks
- Power Blogging: Web Browser Blogging Tips
- Web Page Design: Talking Only to Internet Explorer
- Getting Your Blog Ready for Internet Explorer 7
- Are WordPress Themes and Plugins Ready for Internet Explorer 7?
- Firefox 2 versus Internet Explorer versus WordPress
- The State of Affairs for Web Browsers
- Web Browser Guide for Bloggers
- Web Browser Guide: Exploring the Parts and Pieces of a Web Browser
- Web Browser Guide: Favorites, Bookmarks, and History
- Web Browser Guide: Button, Keyboard, and Mouse Shortcuts
- Web Browser Guide: Searching the Web Tips
- Web Browser Guide: Searching the Web Tips
- Web Browser Guide: Searching The Web
- Web Browser Guide: Working Offline With Your Browser
- Web Browser Guide: Exploring Your Internet Options
- Web Browser Guide: Exploring the Tab
- Web Browser Guide for Power Bloggers: Browser Add-ons and Extensions for Bloggers
- Web Browser Guide for Bloggers: Putting It All Together for the Blogger