You might be wondering why I'm writing about Matryoshka Dolls. You might even wonder if something new is going to show up on the RetroMud Store.
The answer is no on both counts, but Matryoshka Dolls are an appropriate metaphor for what it's like trying to lay out the framework for good style sheets on a web page.
No TABLE for Old Designers
We used to heavily abuse the HTML TABLE tag in the name of design. We stacked one TABLE inside another to create navigation bars and content areas.
The TABLE tag was a terrible workaround to solve design needs. Each major browser presented the TABLE tag differently. It was sometimes even different between minor versions of the same browser! The Matryoshka Dolls we built out of nested TABLE tags were fragile, terrible things to maintain.
I was just leaving the design world when CSS came out. CSS promised to make it all better and help us achieve the dream of a semantic web.
Trading TABLE for DIV
Reading a website's source code is the best way to learn new tricks. I quickly realized as I started updating my skills that designers had found a new set of Matryoshka Dolls for their collection.
The more I looked around the more I saw dozens and dozens of DIV tags. The DIV tag is supposed to be a layout element for general content flow. I kept seeing it used in the same way we used to use the TABLE tag. This made me pretty sad and it seems that the folks over at Smashing Magazine have the same feeling.
What we really want from our Matryoshka Dolls are layers of data. The semantic web is really important because that's how web crawelers and search engines decide how to rank our site. Friends who specialize in search engine optimization always tell me that the best optimization is context, clarity, and content. It's my job to make sure the robots know what we're all about so they can amplify and broadcast our message to surfers on the web.
It's all about Semantics
Each week I take a bit of time to think through and refine the semantic design of the website prototype. The post a few weeks ago featuring prototype sketches should have been a big clue that I'm primarily a kinesthetic learner. Drawing helps me figure out whether something makes sense.
The big questions so far have all centered around simplification. RetroEQ and the website have a lot of duplicated information. How do we present that data in an easily consumable way? How can we marry these features into a single interface? It's pretty simple for any one item but it becomes difficult when you start combining elements.
Let's demonstrate with a concrete example. Most players have expressed disdain for the current skill/spell pop up boxes when looking at guilds. The prototype design will show this information as a card below the search bar when a user types in the search term. Should that drop down card look the exact same as it would when looking at the guild? Should the guild pages just show the ability cards instead of the ability names? Should those be condensed versions of the search cards?
There are pros and cons to each choice. The end goal is crafting our site into a set of Matryoshka Dolls that are both useful to the site's audience and consumable by the automated crawlers. Do you have strong opinions about anything I've talked about today? Send them in via mudmail!