Web design might get interesting again

Destry · 2016-09-14 07:46:25

Since about 2008 my interest has waned in trying to keep up with web design trends. Part of that is my work veered more heavily into the content side of things, the kids were toddlers, and I didn’t have the time to keep sharp in two fronts at once. Nor did I actively seek work building websites for people. From a casual eye on the framework and grid craze that dominated the last few years, I’m not sad I missed all that. I always liked crafting layouts by hand, using raw standards and hacks, and writing my selector names based on what made sense to me, not c1, c2, c3, etc. My stuff always has some flaws, but it worked, and I was fine with that. I also didn’t jump on the Sass or LESS wagons. I’ve yet to learn either one, and I’m not sure I’m going to, frankly. I’ve not run into a situation where it was imperative to do so.

In fact, skipping all that — grids, frameworks, pre-processors, etc — might have left me at an advantage of moving forward more rapidly into what is coming up. I’ve not drank the framework/grid coolaide to the point of resisting something different. My comfort zone is at phase 3 of the evolution here, and I’ll be skipping right to Amazing future…

And what’s coming looks very exciting indeed.

If you haven’t already read this article from Jen Simmons (Mozilla), 6 web layout myths busted, you should. It got me excited again about front-end dev, and that’s saying something. Also check out labs.jensimmons.com, where she’s been demoing some things with Firefox nightlies. And keep an eye on the upcoming layout.land, which looks to be a modern day version of CSS Zen Garden, but with an emphasis on new layout possibilities. If you’re using FF nightlies too, you’ll find her labs site has some cool layouts that you won’t see otherwise.¹

https://twitter.com/jensimmons/status/773850377548693504

What I see happening is the kinds of things web designers wanted to do with web standards at the turn of the 21st century — like what Eric Meyer was writing about in his glossy books at the time — but had to use ugly (and unacceptable) hacks to achieve. One example that has always stuck in my head from those books (which I no longer have) was wrapping text around an image with a polygonal shape — that was the idea. I think Eric’s demo used a mushroom, or something. In his demo, he showed how empty divs (a bad case of “divitus”) of different widths, reflecting the width of the mushroom at different points on the y-axis, could be stacked on top of each other over the image like Lego blocks, so that text wrapped around the divs, giving the impression of wrapping around the shape of the mushroom. The effect was very cool, but the necessary code was dog crap. Now with CSS Shapes, and so on, we’ll be able to do stuff like that without hanging our heads in shame.

The next 5 years look very interesting indeed.

—-

¹ Do tweet embeds not work in the forum anymore, or am I just not doing it right?

Destry · 2016-09-14 08:00:23

I also have a lot to learn, because I see CSS rules like this and it makes no sense to me (not in a disagreeing way, but in a “I don’t know what this means” way):¹

https://twitter.com/paul_irish/status/524959136782364672

—-

¹ Weird. The tweet here is added the same as the tweet in the first post, using "url":url, but it displays differently. Something’s buggy.

hcgtv · 2016-09-14 08:59:31

Destry,

Would you like a theme to get you started over here?

I also took time off, missed the whole frameworks hype train, but I’m on board now until something new becomes prevalent.

My main browser is Firefox Developer Edition, it’s one step away from nightlies. Loving HTML5 videos, no more Flash plugin, and all the other new stuff in the development cycle of Mozilla.

It’s not about the technology though, it’s about adapting to it, while still remaining human.

Destry · 2016-09-14 09:32:26

Heh. My site. That’s a long story, and a personal fight. I’ll get there eventually. I hope to be writing for myself again by the new year.

Destry · 2016-09-14 10:22:38

Add to all that tasty new layout funk, a variable font rhythm, and we’ll be seeing interesting new design music for sure.

Bloke · 2016-09-14 11:33:48

The future’s bright, thanks for the heads-up.

It’s times like this I wish I had greater understanding of typographical principles like x-height, descenders, and hinting. Variable fonts seem to build on concepts to which I haven’t yet grasped. I’ve read stuff, but it just doesn’t sink in, mainly because I haven’t had the background discipline, like our own jakob for example, and the concepts just haven’t ‘clicked’ with me yet. Golden ratio: looks marvellous. Can I employ it in my designs? Nope, haven’t a clue how!

But then, when it comes to design, I admit I’m a rank amateur. No, below that. Heck, I only made my first grid-based website a few scant months ago, a decade after everyone else seems to have jumped on the bandwagon. After rejecting swathes of “standard” and heavyweight grid systems like 960, Foundation, Bootstrap, et al, I settled on gridlex because it used flexbox and was fairly lightweight, without all the bloat I’d never use. It has limitations, though, and the gutter thing winds me up when you start nesting blocks.

I’ve been pointed towards either Aleutcss or Inuit as possible antidotes, but have sadly yet to get round to trying them out.

This latest chapter in design trends is exciting stuff. From my perspective, the only thing better than having to define polygons or create a separate .png mask for wrapping content around an image, would be if it was possible for it to automatically read the mask info from a defined layer (transparency layer?) in the main image. Or something like that. Saves a request, and I’m all about that.

phiw13 · 2016-09-14 12:09:10

Bloke wrote #301444:

This latest chapter in design trends is exciting stuff. From my perspective, the only thing better than having to define polygons or create a separate .png mask for wrapping content around an image, would be if it was possible for it to automatically read the mask info from a defined layer (transparency layer?) in the main image. Or something like that. Saves a request, and I’m all about that.

Sure you can do that (it worked in Safari & Chromium last I checked, dunno about broader support, I think coming to Firefox).

Generally, yeah, there are some nice things coming for layout and typography on the web. Couple of years to wait before it can widely be deployed without need of fall back paths.

Bloke · 2016-09-14 12:29:05

phiw13 wrote #301446:

Sure you can do that

Way cool!

phiw13 · 2016-09-14 12:48:13

One more type technology coming in the near feature: OpenType Variable Fonts. See also the Typekit blogpost.

Bloke · 2016-09-14 13:03:28

Nice in-depth info, thanks. The stuff about backwards-compatibility and storing variations as deltas adds flesh to the notion of variant files being smaller than their many-variant counterparts.

As for the second link, ummm :-)

phiw13 · 2016-09-14 13:20:27

Bloke wrote #301449:

[…] the second link, ummm :-)

argh, had missed that.

Hmm, I really need to put back my link styling override in my user stylesheet.
For these aging old eyes, links in the forum can somethings be very hard to distinguish from the surrounding text.

.postmsg a[href] { text-decoration: underline !important; -webkit-text-decoration-style: dotted !important; }

michaelkpate · 2016-09-14 13:57:04

If you’d like an Audio-Visual version of the things that Destry is talking about:

Jen Simmons: Getting Out of Our Ruts

Published on Sep 22, 2014

In the early years of the web, there was a lot of experimentation and variation in where to put content on a web page. Then, it seems we all settled into a handful of patterns and stayed there for over a decade. It wasn’t until the arrival of responsive design that new ideas for page layout started appearing. Now with new CSS properties for layout landing in browsers, we may be about to see a bigger renaissance in layout design patterns. How can we better use the space inside the glass rectangle? What layout innovations could help users better find and focus on what they want? Take a walk through where we’ve been, where we might be going, and how we could better design for the true medium at hand.

Modern Layouts: Getting Out of Our Ruts with Jen Simmons

Published on May 21, 2015

In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems, we all settled into a handful of patterns and stayed there for over a decade. It wasn’t until the arrival of responsive design that new ideas for page layout started appearing. Now with new CSS properties for layout landing in browsers, we may be about to see a bigger renaissance in layout design patterns. How can we better use the space inside the glass rectangle? What layout innovations could help users better find and focus on what they want? Take a walk through where we’ve been, where we might be going, and how we can better design for the true medium at hand. In this talk Jen Simmons presents practical examples of what’s newly possible, along with access to a code repo for you to play with later.

Jen Simmons – Responsive Field Day 2015

Published on Oct 13, 2015

Modern Layouts: Getting Out of Our Ruts

In the early years of the web, there was a lot of experimentation with where to put content on a page. Then we all settled into a handful of patterns that didn’t change for over a decade. It wasn’t until the arrival of responsive design that new ideas for page layout started appearing. Now, with new CSS properties for layout landing in browsers, we’re about to see a renaissance in layout design patterns. Where are we going, and how can we better design for the true medium at hand?

Future of Web Design 2015 – Jen Simmons

Published on Dec 11, 2015

FOWD 2015 keynote Jen Simmons shares her experiences at the conference.

EnhanceConf – Jen Simmons – Progressing our layouts

Published on Mar 7, 2016

enhanceconf.com

Note: I didn’t realize that YouTube embeds worked like this on the Forum. Pretty cool but jarring when I first looked.

Textpattern CMS

Textpattern CMS support forum

#1 2016-09-14 07:46:25