Dublin Library

The Publishing Project

Explorations and Experiments

  • 2 min. read

 

Jen makes a great point on her presentation. Where are the awesome layouts that we see in print reflected on the web? We are not tied into the "rectangular boxes" wisdom of the web anymore. We have technologies like shapes, clip paths, masks and many other technologies that make square boxes almost obsolete.

Don't get me wrong... rectangles have their place and we shouldn't make all out content replicas of printed material but, Rather than taking the challenges and opportunities of print as a source of ideas and inspirations we became stuck in the Holy Grail layout (and we'll leave aside, for the moment, the fact that the Holy Grail Layout only became practical with the advent of CSS Flexbox as explained by Philip Walton.)

So what happens when you stop thinking about rectangular, Holy Grail style, layouts? You can start thinking of layouts like those on magazines and start really pushing the envelope with technologies like WebGL, D3, CSS Blends, transitions and animations and all the technologies that we have available on the web stack.

We can also avoid pitfalls likes the ones in the Noise versus Noise Flickr set where the creator has attempted to identify the actual content of websites in the midst of ads and other irrelevant content.

Lea Verou's CSS Secrets is another good source of inspiration for CSS and how far to push the technologies. The book is based on two of her presentations: CSS3 secrets: 10 things you might not know about CSS3 and More CSS Secrets: Another 10 things you may not know about CSS and it provides crazy ways to use what we're already familiar in CSS.

Why can't it look like print? Why should it look like print? #

One example of pushing the web: non-linear narratives

But it's not just whether we move the words around the box or the the boxes around the screen. It's also the way we incorporate web technologies (typography, new web APIs, new semantic HTML5 tags) into our written content to create more engaging user experiences and the way in which we interact with the content on screen across a variety of devices and form factors.

For the longest time we've been told that 'the web is not print' and we grew into holy grail layouts. A fair question would be to ask what's next. How can we push the boundaries of the web even further without loosing sight of accessibility and universal access?

Some examples that show how much and how far we can use web technologies are:

How tos and tutorials

Edit on Github