Bless the Gods for CSS Flex Boxes!
I love that Flex Boxes exist. It makes it pretty fun to create new layouts and styles, and is definitely going to be part of my toolkit from now on. Of course, my first test with it is not the standard column layouts with resizable widths, but instead is a fixed-width tile style reminiscent of the Metro Design Language. Is it accessible? Well, the structure looks okay without styles. Is it pretty? I think so.
Actual Content as the UI
I’ve admired Metro since it became commonplace throughout the Windows product. My first experience with it was with Windows 8, but the place where I finally fell in love with the design was my 3+ years of using a Windows Phone.
Before I started using my Samsung Galaxy Note 8, my smartphone usage was:
Part of my affection for Metro is due to my love of Swiss Style. While it never translated the best while using Windows on a PC, the fact that the content was the star and the driving force of the UI made it pleasurable on a phone. On the few times I ran into another Windows Phone user, our Start Screens always looked different. While mine may be personalized with tiles of calendars, important contacts, glanceable tiles showing social media and messages, and a scrolling-picture tile of a photo album I titled “Positive Memories,” another person’s phone may prioritize the games they played and the stream of Instagram pictures they’ve recently shared. No matter the person, the phone inevitably became the person’s device because their content defined the phone’s look and feel.
Roadblocks
There were some hard, to me, questions that I needed to answer while I made my new website. The driving force of Metro is to put content at the forefront. However, it’s graphical nature needed thought in the HTML and the CSS.
My main problem was in semantics. Will it make sense to read it without a stylesheet? Can someone using an assistive device still browse through my site and the various timeline entries represented as tiles? The content needs to be presented beautifully, of course, but all its beauty would be ruined if the information wasn’t accessible to people or machines.
My Process
I started, first, simply structuring the content by using HTML5’s new semantic elements and Microformats. This is done to make sure that accessible devices could read the page, but can also parse the microformats to consume the data available in different ways. I followed this by a bunch of CSS trial and error.
Before starting this I had no idea of display: flex’s existence in CSS. I was dreading having a gigantic mass of <div>s to float. Or a huge mess of table cells. Flex boxes made the entire thing easy to style the way I want–after a ton of trial and error. After I wrote all the CSS in one file, I separated the CSS into files defining structure for ‘big screen’ and ‘small screen’ devices, then separated out information that involved colors and backgrounds. Those styles were then copied and modified to create alternate stylesheets for high contrast (black on white) and inverse high contrast (white on black).
The Result?
After all that, I created sample tiles in the timeline and tried it out. There’s a maximum width of 8 small tiles. As viewport width shrinks the tiles simply wrap to the next line, but maintain the grid. There’s a minimum width of 4 small tiles for the site’s look and feel.
I’ve gotten my boyfriend’s help in trying it out on his iOS devices, but it worked for me on Linux and Android on various browsers. It looks nice and is pretty true to Metro. To my knowledge, it’s also accessible by virtue that without styles it’s readable and semantic. It’s accessibility is an assumption though; I’m hoping that it is. Sure, Beaker Browser is a desktop browser at this time, but I want to be ready for the future now.
All in all, I’m pretty proud of all of this–especially since I haven’t designed anything or played with CSS since I closed down my eBook Publishing house almost two years ago. Doing this reminded me of the fun I used to have learning, experimenting, and creating. I hope I can continue this momentum and make more things in the future.
UID URL sameAs Me
I made a few decisions, too, in structuring the personal site, on the virtue of “UID URL sameAs Me.” I’m envisioning a future where a person, like a user name, can give a URL as their unique identifier. With that in mind, the posts in my timeline link to individual entries (as separate Dat archives like solo). My entries know to use my photo–as defined in my UID URL–as the image to show as an author, and also utilizes my current background as its background as a touch of presentational unity between discrete and decentralized Dat archives.
I don’t know if it can happen, or if people choose it, or if I can contribute to such a future. But at least I can start preparing for it! If I get better at my coding skills (that I find lackluster) maybe I can start it or help it.