Recently in web design Category

» Notice anything different about the Rad home page? (Hopefully not much.) For a cool surprise, scroll down to the bottom (of the home page) and click the link labeled » Validate.

HTML5 logoThat's right, dawg! » 100% valid HTML5! .. employing a handful of new, semantically-rich HTML5 elements ..

.. such as » <header>, <footer>, <article>, <section>, <nav>, <aside>, <hgroup> & <time> (.. including the datetime & pubdate attributes) ..

.. most of which are designed to replace the semantically-vague » div tag .. used so prevalently in HTML4 & especially in XHTML layouts.

[ The HTML5 spec contains 28 new semantic elements. ]

I'm not talking about a div-laden page which merely contains an HTML5 <!doctype>. No, sir. We're talking about honest-to-God HTML5 mark-up. I also implmented significant WAI-ARIA features (via the role attribute) which are invalid in HTML 4.

[ The term semantics simply means that the new elements used to mark-up the web page have more MEANING. In other words, they're more descriptive, and browsers will therefore be able do more things with them (.. when they become HTML5-aware in the coming months). ]

Call me Mr. Early-Adopter. More to come on how I accomplished this (.. much hair-pulling, my first jQuery script, headaches, burning eyeballs, etc.). But right now I need to re-screw my head on straight. (Might take me a while.)

There are still a few minor glitches I need to iron out, but nothing I'd consider a deal-breaker.

[ Special thanks to the Excavator (Alaska) for helping with the jQuery script. (Yeah, that's something I need to learn.) ]

Modifying the mark-up itself was actually the easy part (.. after reading the excellent book by Remy & Bruce). Fun stuff. On the other hand .. converting my previous CSS-styles to target the new HTML5 elements .. that turned out to be the tricky part.

With CSS, if you omit even a single comma, your whole page-style falls apart in grand fashion. And it can be difficult to find something like a missing comma.

Valid HTML5 Mark-up» Headaches of Being an HTML5 Early-Adopter

But my BIGGEST headache (by far, surprisingly enough) .. was getting the dang column lengths equal. What a pain that was!

I searched long-n-hard for answers .. googling queries such as » html5 equal height columns script.

Was surprised to find nothing helpful. If you really wanna torque your brain nicely, take a gander at THIS page (.. titled » Equal Height Columns with Cross Browser CSS). I mean, you start to get the feeling » Just shoot me now. (And note that I understand CSS pretty well.)

Regulars may recall that getting equal column heights/lengths was the first problem I ran into .. way back (in 2007) when I was trying to convert the home page from a table-based layout to pure CSS.

Seems it's STILL a royal pain .. cuz my old matching_columns script wouldnt work in HTML5 (.. despite tweaking the 'div' to 'section' .. and pleading desperately).

The Story Behind HTML 5

The Opera web browser is made in Norway (.. with headquarters in Oslo, the nation's capital). Before reading today's entry you should download & install a copy (currently at v11.x) .. as a way of thanking them. For what? Keep reading.

HTML5 logoHTML 5 is coming. Sooner than many had expected. That's good news. (The Standards-creation process » aqui.)

The W3C, which is headed by Tim Berners-Lee -- the guy who invented the Web and was subsequently knighted -- operates on a consensus basis.

This might be why changes to Web standards (called Recommendations) such as HTML & CSS are made at such a frustratingly glacial pace.

Getting people from Microsoft & Apple (and others who make browsers) to agree on anything is no mean feat.

In '98, the W3C decreed that HTML was done (toast) and that XML represented the way forward.

The current spec/standard (that I use) is called » XHTML 1.0, which is simply an XML version of HTML. It uses HTML elements wrapped in (stricter) XML syntax. This is the standard used by most web pages being written today.

» <!doctype html>

HTML5 was not always called HTML5. Rather it started out as something called » Web Applications 1.0, which began in 2004 when folks from Mozilla & Apple joined forces with a group from Opera, who was not convinced that XML represented the best way for the Web to proceed.

They called themselves the » WHATWG .. the Web Hypertext Application Technology Working Group. (You must admit, WHATWG is a funny name .. especially for a group of über-geeks.)

» The Philosophical Battle Line » Backwards-Compatibility

Battle lineBut let's back up a bit. What's known today as HTML5 actually began as a philosophical battle. (Everybody loves a good philosophical battle, and a good story.)

The battle was over » backwards-compatibility. Sorta. It was definitely a prime consideraton in the battle that ensued.

The problem was » XHTML 2.0. It was a revolutionary design-concept .. that broke backward compatibility with HTML. Something that had never happened before. Moreover XHTML 2.0 came with draconian error-handling, which would cause browsers to stop rendering a page if errors were detected.

This draconian path of XHTML 2.0 that broke backward-compatibility with HTML, and where errors would not be tolerated, was the course the W3C had chosen for the Web's future.

In 2004, the W3C's futuristic purity-of-design philosophy (embodied by XML-based » XHTML 2.0) was challenged by a small group from Opera, who claimed that a pragmatic approach (that didnt break backward compatibility) would be a better solution. A better idea.

Opera's Web Forms 2.0 vs W3C» Pragmatism vs Purity of Design

Pragmatism vs purity of design .. that's a good match up for any geek. Normally (without knowing the details) I would side with P-o-D.

But, we're talking about the Web .. which we want to be EASY for people to use.

I mean, ease-of-use is one of the main things that makes the Web so cool. Right? Anybody and their grandma can use it.

But I can feel it becoming more difficult. Of course, the more power you bring to any software or technology .. the greater the learning curve to wield that power.

Before I learned CSS, webmaster-life was tough sledding. Before I learned my way around the Linux shell, web admin-life was also tough. When you learn how to use it (.. becoming a student) .. technology can be pretty cool.

Anyway, the gang at Opera developed a proof-of-concept spec called » Web Forms 2.0 - that extended the functionality of HTML forms withOUT breaking backward-compatibilty. "See!" they exclaimed. "It can be done. In your face, Timmy-boy. I mean, Sir Tim."

Nevertheless, the W3C rejected their proposal, claiming it conflicted with the course they had already laid out and had already committed to.

When it comes time to build your dream home (.. up in Malibu, perhaps) you'll sit down with an architect, who will use your ideas to generate a set of blueprints. Builders will then use these blueprints as a guide to assemble your home. Cool.

Here in the Information age, the term » information architecture (IA) is the name given to this "blueprinting" (if you will) that we use as a 'schematic' ..

.. to build things where information is the thing being structured. And we build these informational structures in such a way as to make their access easy as possible (.. more logical & intuitive).

Instead of specifying the precise relationships between things such as brick, wood & wiring, IA specifies the hierarchical relationships of .. you guessed it! » chunks of information. (Think » library)

Patton'Hierarchical,' ooh. Big word. Let's take a quick look at what it means.

Simply » an ordered grouping of things. In other words » a group of things put in order.

For example, the labels » General, Colonel & Major are each part of a hierarchical grouping .. of military officers.

I'm no military buff, but these guys are definitely part of a well-ordered group (called the Army, which is itself part of an even bigger group-ing) that have a well-defined relationship with one another.

Likewise, a website contains INFORMATION that should be similarly well-structured and well-ordered .. in the relationships its various sections have with one another.

Information Architecture isnt nearly as complex as this mouthful-of-a-term might imply. In fact, it's actually rather commonsensical. Logical. Pleasing, in a left-brain sort of way. Its goal is to bring order to informaton that might otherwise appear chaotic.

The problem is .. that » most websites (ahem) relegate IA to an afterthought.

I know this was true for me. Sure, I can provide good excuses for this. But the bottom line » no IA leads to » poor site organization, which in turn leads to » poor navigation.

I mean, my navigation is (literally) all over the place. (Look around the home page.) If I could start over, I'd do a better job. And I may do another redesign in the future (.. perhaps based on a 960-grid using Sass & Compass, which would be cool).

Website Theme & Visual Metaphor

Radified is different from most other websites .. in that I didnt know where we were headed back when I launched it. Heck, it took a while just to figure out how to post a second page, and how to link to that page from the first. (No longer seem to have that problem.)

Cherenkov Radiation Spent Fuel PoolThis is because Radified began as a learning experience .. to learn-by-doing. (Which is the best way to learn.) So learning new, cool geeky things has been a main THEME here.

Choosing a domain name, signing up for a web hosting server, and finding a good FTP client .. that all seems so elementary now. But back then (in the summer of Y2K) it was exciting new territory that required lots of research.

So you could say Radified has taken a more organic path than that of most traditional web sites, which typically know where they want to go (conceptually) .. before the first bit of HTML is ever coded. This organic path-of-development applies also to » styling.

In reading about Web Design, one of the first concepts they hammer into your head is that of » identifying the THEME of your site. Once identified, you set out to develop a VISUAL METAPHOR to help support and promote that theme.

For example, a web site for a coffee shop (whose THEME is obviously » coffee) might use colors like mocha, the color of a cup of coffee, or cream, or even an image of some coffee beans .. as part of their VISUAL METAPHOR.

[ Where websites are concerned, THEME is closely related to » PURPOSE. Purpose determines content, and content determines THEME. ]

You can take the concept of VISUAL METAPHOR far as you like, going totally ape, or you can keep it subtle. I've always preferred subtle, understated styles. But that's just personal preference.

Even tho I've never studied the principles of VISUAL METAPHOR, or even heard of the term before reading this book, you can still see hints of it in my design on the home page (.. with its stated THEME of » Nuclear Grade Technolust).

For example, beginning each entry you'll find a yellow tri-blade radiation symbol .. making it easier to identify where each entry begins (notice how design is subordinate to » function) .. especially since it's the only thing yellow on the page, and yellow stands out so eye-catchingly on a black background.

[ Using a car-metaphor, I prefer the function-follows-style philosophy of Porsche to the style-leading flair of the Corvette. Again, this is merely personal preference. ]

Cherenkov Radiation from Nuclear Spent Fuel» Cherenkov Radiation & the Blue-Green Sidebars

The color of the sidebars on the home page was inspired by Cherenkov radiation. You can actually SEE this radiation .. coming off the (super highly radioactive) spent fuel cells that are stored in water-filled pits (made of stainless steel, some 50-feet deep) at most commercial nuclear power plants ..

[ .. at least, until the government comes up with a plan to dispose of them. But nobody wants highly radioactive material buried in their back yard .. that will remain highly radioactive for thousands of years. Who knows what life and the climate will be like a thousand years from now? ]

This visible light (known as the Cherenkov effect) comes from charged particles (beta particles, better known as electrons) accelerating faster than the speed-of-light in water (.. where these fuel cells are stored). Light travels slower in water than it does in outer space, which is mostly a vacuum.

Head First Book on Web Design

Picked up a copy of the Head First book on Web Design at our local library. Interesting, fun read. Ive previously looked into web useability, but never at Web Design, per se.

Head First Web Design If I knew how cool it would be, I woulda looked into it much earlier. Or maybe now the timing is right.

This particular book is perfect for somebody like me .. who already knows XHTML / CSS. That's how the book describes its target audience.

I love the Head First series of books, which incorporates recent research from cogntive science, neurobiology & educational psychology. Ive read other Head First books.

Deep-thinking lies at the root of their mantra. Sometimes their technques may seem a bit corny, but they really do work. The bottom-line is » you get it.

About this Archive

This page is an archive of recent entries in the web design category.

software program is the previous category.

website is the next category.

Find recent content on the main index or look in the archives to find all content.