Welcome to the Grid [#42]

There are a lot of new web technologies emerging at the moment which really feel like we’re entering a new era. Over the last decade, the likes of HTML5, ES6+, flex box etc. have brought the web, and the technologies on which it is built, very much into the modern day. Accessibility, responsiveness and flexibility have become standards, instead of the nice-to-have pipe dreams they were when I first built a website. Still, a lot of the new features and developments have been addressing limitations of what the web was back in the early noughties.

Right now, then, is a little different. There are still plenty of problems with how the web operates, limitations to its functionality and misuses of its resources, but with a little time and effort a website can become everything it was ever designed to be, and much more. The next round of technological implementation, then, is redesigning the way the web works. Do you need an active internet connection to be ‘online? Not any more. Want a website to do more than simply house and interlink static text? That’s getting pretty common.

Despite these huge leaps forward in terms of functionality, one element of those old, dark days has remained missing. Right when I started to learn HTML the standard approach was to mimic page setting from magazines by using <table> elements. That practice died a deserved death, but ever since the web has been slightly restricted in how it can display information in a dynamic, yet rigidly structured, manner. There have been improvements, such as display:table, flex box and semantically clearer HTML (section, article, aside etc.), but ultimately none have met the ease of application of a table layout.

Hopefully that’s about to change, thanks to CSS Grid. It’s a technology I’ve heard bits and bobs about for some time, but I’ll admit it hasn’t excited me like service workers or PWAs have. Thanks to (yet another) great article from A List Apart, I’m now firmly on board the Grid train and willing it to go faster, and faster, and faster. Honestly, I love the whole concept, but for me one of the most exciting aspects is the quick prototyping available through template-areas. For a full breakdown, read the article, but the “aha!” moment for me was seeing how this:

.cards {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px;
        grid-template-areas:
               “a a b”
               “. d d”
               “c e e”;
}

Is automatically translated into this:

Layout of 5 grid blocks and 1 empty cell, showing how CSS Grid can span columns and rows, auto-fill containers and be easily spaced.
The beauty of CSS Grid.

That’s not just replicating all the functionality of the table-based layouts of yesteryear, it’s taking the best part of it, the flexible rigidity, and removing all the irritating parts, leaving just the essence. It’s wonderfully simple yet extremely powerful and has clearly been thought through to an obscene degree. The fact that even blank cells are inherently catered for, rather than having to just set a blank <div> or similar, is just fantastic. Vendor/browser support will be the next big hurdle, but by the sounds of things that’s coming along extremely well. Give it a year and CSS Grid looks like it could well be the new standard approach.

Capital Numbers

A List Apart has long been a fantastic source of knowledge and inspiration in terms of both website design and writing, but on top of these accolades every now an then it manage to completely floor me. Sometimes it’s because an explanation finally hits home after years of misunderstanding, but other times it’s simply by providing a piece of information which is simultaneously brand new and yet perfectly obvious. The type of fact which leaves you a little wide-eyed, questioning your very purpose of existence. A mind-blower, if you will.

That’s what happened today whilst reading the (brilliant) article/excerpt on Web Typography: Numerals. The article is well worth a read just for the thoughts on how the web finally makes footnotes genuinely useful (and, in doing so, guilt trips me about how these same ideas have been sat unacted upon in my head for years). However, it was a simple comment near the start that struck me like lightning:

We have at our disposal ‘uppercase’ numbers 0123456789 called lining or titling numerals, and ‘lowercase’ numerals 0123456789 called old-style or text numerals.

Wait… what?! Numbers can have cases? I read the sentence once, thought “that’s strange”, then read it again and noticed the different cases. These different glyphs are subtle but still instantly recognisable, yet I have never realised they existed before. Such a simple little thing which makes complete sense. Much like the recent viral expose of Papyrus or the infamous Fight Club burn marks, I get the feeling that text numerals are now going to be one of those things I just can’t not notice. Which is equal parts infuriating and awesome.

Stickers, Eclipses and Lighthouses [#35]

Today is a day for another round-up of interesting pieces from across the web. Nothing too special, but hopefully a little intriguing.

First up is Google Lighthouse, one of the many branches of the Alphabet behemoth and a pretty interesting little project. I haven’t actually managed to get it up and running, but I’ll definitely be trying it out on theAdhocracy some time soon (and probably weeping at the result). I don’t need to test it, though, to see it will be a very useful tool in battling the increasingly problematic issue of internet lag.

Second is the article which led me to Lighthouse in the first place: AMPersan, by Ethan Marcotte. Not much to add to this one, just another voice adding weight to my uneasiness with the idea of AMP and similar projects. Well worth a read if you’re interested in the open web.

In third place is a collection of ‘achievement’ stickers doing the rounds of the blogosphere right now. Originally designed by Jeremy Nguyen, published on The New Yorker and personally discovered via TheLogoSmith, the stickers are a humorous look at the pitfalls of being self employed. They’re specifically designed for freelance designers, but I feel a lot of them are applicable across disciplines. If you work from home, you’ll probably find yourself smiling and nodding.

Fourth on the list is a simple article from Martian Craft outlining “The Importance of Routine“. The post is aimed at remote works and is far from news to me, but it is a well written example of how to apply this kind of thinking. I’m saving it here more to try and force myself into setting something like this up for my own free time.

Finally, I was blown away by the “Lifetime Eclipse Predictor” visualisation created for The Washington Post (discovered via Source). In the wake of the recent total eclipse in the US, along with reading various posts on the rarity of such events, I’ve been left with a real urge to try and make sure at my path eventually coincides with a path of totality. It is a ridiculously awesome coincidence that our moon’s diameter and planet’s solar distance align so accurately. I mean, even if there are other life-hosting planets out there, we’re certainly one of an incredibly small number that can witness this phenomenon. That makes it practically a responsibility to see a total eclipse, at least once.

Interneting is (Apparently) Hard [#6]

Visual representation of the HTML DOM model

Visual respresentation of the DOM

Reddit has once again directed me towards a very interesting online resource: Interneting is Hard!

The website is beautifully illustrated and boasts a very elegant design structure. There are a couple of cross-platform inconsistencies but the quality of the content and layout is excellent. A quick overview of some of the sections has highlighted the knowledge on display is equally well thought through. Overall, a very impressive find that I look forward to diving deeper into in the future and a great introduction to web design.

Cards Against Clarity

The concept of “card based” web design has been around for at least three years now. So why is it that the following quote from Khoi Vinh, written back in 2014, still appears to be a fundamental truth:

it hasn’t gotten much easier to explain to the uninitiated what, exactly, a card is.

Because here’s the thing: as much as I love reading about web design, I am still very much a member of the “uninitiated”. I can tell because I still have absolutely no idea what a “card” is.

I realised this (yet again) thanks to a recent article that cropped up in my RSS feed. I’ve been singing their praises recently, so hopefully Zurb won’t mind too much if I point to 5 Common Mistakes Designers Make When Using Cards in Design as a prime example of 1 Common Mistake Web Designers Make When Talking about Cards, chiefly, that what a card is fails to be defined anywhere.

Perhaps this whole situation is just down to me. Maybe I’ve fallen so far behind web trends that my outdated ways of attempting to understand “cards” are just not up-to-scratch. But, frankly, there doesn’t seem to be much help out there.

Early articles on using “cards” in design tend to paint a picture of API driven, cross-platform data sharing. A sort of standardised method of pushing/pulling content from/to various web apps; an ecosystem of information, if you will. That all sounds interesting and pretty great, yet presents a concept that is simultaneously vague and highly technical, creating a perfect mixture for people to be excited about yet confused over.

Yet “cards” are also used to describe certain design styles. In that linked Awwwards article a number of examples of “good card-based web design” are cited. Some, such as Dribbble and Pinterest, appear to be examples of the information ecosystem mentioned above. But then you have websites like White Frontier, which whilst being a great example of web design do not appear to have any form of content interaction or applicable data extraction methods. Yet these designs are, apparently, just as “card based” in their makeup.

As far as I can tell from Googling around the subject, “cards” are just rectangular content areas situated on a website. They might pull in information from a third party, they might just be a stock photo and a strapline. The article I initially quoted comes to a similar conclusion, that cards either fit into the “design” or “third-party” camps, which doesn’t seem particularly useful to me. If they’re just a design style then, really, they’re just a particular way of presenting content; a way which, ultimately, seems pretty much identical to how most people have always done it. If they’re only to be used when pulling third-party data then we need a tighter definition, because I don’t feel anyone would be happy suggesting iframes are all cards.

Currently, their only unifying factors appear to include being responsive, rectangular and online. So perhaps that’s all there actually is to them, which would be rather neat. If that is the case, then I can happily claim to have been making card-based websites since 2007, putting my well ahead of the trend!

Doth the Bell Toll for Zurb?

Today’s lunch started no differently to any other. Grab some food, open Internet Explorer (I know, it’s not by choice…) and fire up theOldReader to chip away at the ever mounting pile in my inbox. I dipped into the Oatmeal and realised I have, once again, missed a Kickstarter for a product that I genuinely want. Read some interesting thoughts from Adactio, Dan Mall and UNSTOPPABLE ROBOT NINJA (now, sadly it seems, going by the far less awe inspiring Ethan Marcotte). And then I looked at my inbox and wondered if it was about time that I started removing some of the feeds which I’m no longer excited to read. Feeds like the one Zurb publishes.

Although I’ve been subscribed to Zurb’s RSS for years now (possibly a decade) I struggle to think of a single article over the past six months that made me sit up and think: aha! Updates have been flowing as routinely as ever, but mostly they have focused on their internal business. Posts about new product updates or team members have been, seemingly, the core output for quite some time and whilst these do occasionally feature interesting anecdotes or clever imagery, ultimately they don’t feel particularly relevant. So then, I thought, today I will catch up on what I haven’t read and if nothing jumps out it’s bye-bye Zurb.

I am, admittedly, a little behind on Zurb’s feed so it was back to mid-October for a post titled The End of the Black Turtleneck, featuring a prominent image of Steve Jobs. As someone who laments the grasp Apple has on most of the industries I admire, a review of their glorious leader’s preferential attire didn’t exactly fill me with excitement. However, the old adages are true: you really shouldn’t judge a book by its cover.

Far from being a humorous or anecdote laden parade of fanboyism or irrelevant commentary on how Zurb have learnt to design the ‘Jobsian Way’ (which is hopefully something I just made up, though I can believe somewhere out there a design agency has it engraved into the ceiling…), The End of the Black Turtleneck is filled with genuinely interesting incite and actually takes several shots across Apple’s bow. In other words: things just got interesting!

I’m not going to say too much more on that article or the subsequent follow ups that were just as enjoyable and arguably more useful, except to highly recommend you go and read them yourself. If you’re in any way interested in the struggles that the design industry faces or even just the issues inherent with casting false messiahs or getting engrained in past zeitgeists, they’re definitely worth a read. I can’t say everything I’ve caught up on so far has been riveting, vital content but The End of the Black Turtleneck and The Perversion of Beautiful Design, both written by Zurb’s head honcho Bryan Zmijewski, are some of the most intriguing and thought provoking blogs I’ve read in a while. They’re clear, well written and have valid criticisms at their core. Most importantly, they gel well with my own belief that design should be as much about aesthetics as it is functionality; that function = form and vice versa, with neither greater than the other.

Plus, I learnt that the term ‘pixel’ was coined to describe the picture elements of videos shot by probes around the Moon and Mars. That titbit came from The Mighty Pixel, which is also well worth a read. I guess there was a reason to stay subscribed to Zurb’s feed* after all. In fact, it looks likely that there might be several.


* I wanted to link directly to Zurb’s RSS feed here but I can’t seem to find it anywhere. It clearly still works, but they obviously don’t feel it’s a feature any visitors want. So, I guess, there’s at least one aspect of Zurb that I disagree with. Either that or I’m a moron…

Time Sinks and Indie Thoughts

I’ve just noticed that it’s been over a week since my last post. In and of itself, that isn’t an issue. There are no schedules here; I have no binding commitments to theAdhocracy. Entire months or years could pass between posts and I wouldn’t bat an eyelid (though, I hope, I would feel a little sad). Instead, the lack of a post is noteworthy because I’ve actually been writing content consistently for the last four days, as well as a couple of days last week. That content isn’t still stuck in draft form, it’s all fully edited and ready to ship (so to speak). In my mind it’s actually finished, archived and filed away as a completed job well done. So the reality that no one else can see these posts genuinely struck me as a little odd. This scenario is not one I had really considered when I started my monthly media roundups, but I guess, in hindsight, it can’t really be avoided. One large post a month may have to substitute for more regular content – right now I don’t have a solution, except to make sure my posted content is more varied.

One clear way to increase the throughput to the visible side of theAdhocracy would be to utilise micropublishing, effectively pulling in any facebook posts, RSS likes, instagram/Flickr photos etc. and cataloguing them all here. But, oh no! Once again I’ve stumbled into the indie web without any preparation. I wrote about my headaches with the learning curve associated with the indie web before. What I didn’t realise then was that the very person I’d “called out” in that post had already created what I was asking for: a more simplified, step-by-step guide to getting started on the indie web. So that’s awesome (and, once again, thank you Jeremy Keith!). Now to just find some time to play around with the suggestions. Oh and get my back end in shape first. Plus, maybe tidy up how my current categories work. I mean I’m not stalling at all…

Micropubawhoozits! Am I right?!

I’d really love to get micropublishing up and running on theAdhocracy. I’ve recently started dabbling in Flickr and it would be great to upload here and automatically have my photo’s fired over there; I’d also definitely get way more out of Twitter if I felt like small “thoughts” thrown up here could just get flung out as a tweet. I love the core concept as well, keeping control of your content and protecting against potential future service outages or (god forbid) full on closures.

So every time I read about the an Indiewebcamp or someone like Jeremy Keith throws up another interesting insight into their own methodologies and progress, I get excited. I want to start trying stuff out, so I start Googling. I pretty much always end up back here, at the main site for Indiewebcamp itself. And then I hit a wall.

Reading through the wiki page regarding Micropub is equivalent to reading through the pilots manual for the Millenium Falcon. I understand that the ultimate end result of my grasping this knowledge can only lead to awesome future adventures, but honestly it may as well be written in Xhosa. I get a headache, I close the tab and I go do something else, defeated once again.

One day I will actually spend a weekend getting my head around this. Much like learning to fly the Falcon (I wish), this is something I will continue to get excited for and, ultimately, that excitement will result in learning actually happening. But I do feel my frustration is warranted, and I feel that’s a great shame. The idea of the indie web is, to use Jeremy Keith’s own words:

about having your own place on the web so that you have control over what you put out in the world.

It’s just a shame that understanding the how is quite so buried under a whole raft of new terminology, much of which is needlessly obfuscated in its naming (I mean, what exactly is an h-card? What does that actually mean?). Maybe, in the future, once I’ve bent my own understanding around all the h-names, microgizmos and selfdogtreats out there I’ll find the time to right down some plainer, simpler instructions for others in the same situation. Then again, maybe there is some internal logic and once it “clicks” I’ll never think twice about it again. Only time will tell.