Layout experiments

I've been really excited about recent developments in web layout. I've finally decided to get my act together and start building layouts using these new tools. I don't know how many of these layouts will make it to a production site but it's always fun to play with them.

A grid is truly successful only if, after all of the literal probblems have been solved, their designer rises abovethe uniformity implied by its structure and uses it to create a dynamic visual narrative of parts that will sustain interest page after page.

Timothy Samara -- Making and Breaking the Grid

Examples, Demos and Projects

Top

Index
This page. First experiment placing content in a grid.
Demo 1: Ichi-Go Ichi-E
The basic document I'll be working with.
Demo 2: Text in masthead
This is my version of the text covering part of the masthead image.
I chose not to brek the content into multiple sections but chose to change the background color of the content div to match that of the document background.
Demo 3: Vertical Title
Take the title content and use writing modes to place it verically in browsers that support the CSS rules. I've used feature queries to check that the browser supports writing-modes.
We use feature queries (@supports) to test if the browser supports writing modes. If it doesn't then we leave the title on top of the image and switch the color to white.
This demo currently only works in Firefox (tested with Firefox Nightly).
Houdini Gradients
Gradient demos using Houdini APIs. The example gradients uses CSS.registerProperty() to define a --stop-colorproperty that is used in the stylesheet to create a gradient. We then create a hover state for each gradient and animate that.
Currently only works in Chrome 67+
CSS Filters
Creating effects with CSS is not as complex as it used to be (they don't require SVG) and they are fairly easy to set up. Set an initial filter (grayscale in this case) and then set an effect that will work on hover (remove the grayscale effect to reveal the original color).
One further area of exploration is combining different filters to test the results.
CSS only solution hover only works on desktop machines. Mobile devices don't have a hover state and require Javascript or Pointer Events to work consistently accross devices.
Do weight, width and line height affect readability?
Using Roboto VF implementation I've configured a quick experiment to prove the hipothesis. There are 4 blocks of text at different widths and one with multiple columns and 3 variables you can adjust (font weight, font width and line height).
The idea is that we can take the values and plug them in to our production stylesheets as a starting point for further experiments.
Also, please forgive the code... I know it's messy but it's the first time I do sliders to control CSS from Javascript.
This currently doesn't work in mobile. Researching the reasons and suspecting Mobile Safari and iOS stack for it. It did not work on iPhone X.
Blending Colors Example
The web allows you to create many of the graphical effects that we see in magazines and other printed media. Based on the pen Vertical split layout text effect by Mandy Michael. I started playing with the idea of using the effect for headings or other highlighted elements.
Blending Text and Images
Code adapted from the article on The New Code by Dudley Storey about creating text masks using blend modes.
This may not work in older browsers that don't support blend modes. This example prioritizes text over the image.
CSS Houdini Image Place Holders
Using a demo from Will BoydI built a mock of a Wikipedia page using his placeholder boxes to mock the placement of the images.
Yes, I know I could use SVG to do so and it may be a good idea when working with Service Workers to provide a good offline fallback but this way I can play with the dimensions of the place holder and see how it looks at different dimensions before deciding on the final image.
Bibliotype 2
A prototype of a long-form web reader. Based on Craig Mod's original Bibliotype project, this new version attempt to use modern technologies such as variable fonts, CSS variables and ES2015 to create a customizable reading experience.
Does vertical text affect Grid Layout?
When using writing modes to layout text, does it affect the way Grid layout works? I've prepared some Japanese Lorem Ipsum text and laid it out using the same grid layout I created for Ichi-go Ichi-e.
I need to do more research to see what looks normal for Japanese readers using vertical layouts as opposed to the rtl horizontal layout that I've seen the most.
Another area to explore will be to search and copy mixed layouts of vertical and horizontal Japanese layouts.
CSS Custom Properties
What I call CSS Variables on Steroids. It allows for much better, error tolerant, CSS variables.
Deep Dive on Variable Fonts
Now that Roboto is an almost official variable font. It's worth taking a look at what it does and how it can make our designs better and provide a better user experience.
Verge-style list
Borrowing the story stream styles from an Avengers 4 article in The Verge I want to test different ways to create list items with more than a single line per item.

Full Layouts

Top

The projects and demos in this section are more realized and use different CSS and Javascript techniques.

Demo 4: Two column Floater
My attempt at creating a document with a single image on one side and scrolling text on the other. The first attempt is a single column of text using an actual article from eldesconcierto.cl
Book Chapter with Roboto VF — V1
Using a manual transcript of chapter 73 of Rayuela, I built an example of what a page of that book may look online. A next step will be to test is different starting width for the content impact the reading experience.
Book Chapter with Roboto VF — V2
Using a manual transcript of chapter 73 of Rayuela, I built an example of what a page of that book may look online. This version makes the content narrower.
Magazine Interview
Using a web magazine article from a Revista Paula I started formatting it to see if we could make it look good using a single variable font and grid.
I'm discovering some of the problems with stretching images into a grid container. I cannot make it stretch on both ends, so I've had to come up with an alternative while I research the reasoning why this happens.
Lo Secreto — María Luisa Bombal
Experimenting with longer form content and Variable Fonts to see how we can make the text speak in its own voice.
Since we're using Roboto only for headings and accents I've subset it to use only the characters that we use in the page. That dropped the size of the file from almost 1MB (1008KB to be exact) to under 30K! For this site it might not make that much of a difference since the service worker caches the fonts but for larger projects or those that don't use service workers it's an important consideration.
Thanks to Jason Pamental for help in getting the body font working.
Soneto XVII — Pablo Neruda
Typesetting poetry is hard. Grid makes it easier to position the body of the poem (left side in Spanish and the right side in the English translation) but there are a few issues that remain like how to do indented text on lines after the second one and other typographical tricks used in poetry without polluting the page with marup that we shouldn't use.
I'm still exploring possibilities… one of them may be to use preformated text and style it with our default font for copy. I know it breaks the semantic meaning of the pre element but it might be a good time to break the rules… I think.
Multi Column Layout
Inspired by a tweet from Dudley Storey I decided I wanted to see what would a multicolumn layout would look like now.
This layout would greatly benefit from regions or some other kind of fragmentation layout but until the Houdini Page API comes out in browsers we'll have to continue waiting.
Another detail to note is that I broke the text into two different regions using the same class for the multicolumn content. I should be able to do it with a single multicolumn class and an image that spans all columns.
The Crystal Goblet or Printing Should Be Invisible
Typesetting incorporating drop caps for the first paragraph. I'm starting to look for other fonts to play with in addition to Roboto, Avenir and Source Serif.
Profession — Isaac Asimov
Working with a novella-size document presents its own set of challenges. How will people read the content? How will people navigate if the have to take more than one time reading?
Poema 6 and Poema 19 by Pablo Neruda from Veinte Poemas de Amor y una Canción Desesperada
Two experiments using flexbox to center content both vertically and hortizontally using only CSS and without modifying the content.
Flexbox Gallery
The simplest way to create an image gallery using Flexbox.
En ti la tierra — Pablo Neruda
Playing with color and additional fonts. Does color (beyond contrast) affect the way in which we read on the web?
The last question — Isaac Asimov
Using Spectral as the Serif body font and Raleway for headings. I'm still working on getting the right mix for short to medium length, single page readiing experiences.
Franchise — Isaac Asimov
An experiment using Neue Montreal from Pangram Pangram Foundry and Skolar from Roseta as I continue searching for good font pairings.
The experiment uses the font loading API to load the fonts and CSS to manage the display
The Machine That Won the War — Isaac Asimov
An experiment using Neue Montreal from Pangram Pangram Foundry and Skolar from Rosetta Typeas I continue searching for good font pairings.
The experiment uses the Font Face Observer to manage font loading and CSS to control layout and display. Skolar is downloaded via Adobe Typekit/Fonts.
What survives disaster
An article from the Bay Area Now 8 exhibit at the Yerba Buena Center For The Arts it attempts to duplicate the printed version of the catalog. I'm working on details and how to make some printed items work in web layouts.

Tools

Top

Most of these tools are Javascript based so I may have to start thinking about concatenating scripts and, possibly, bundling them together.

Font Face Observer
Font Face Observer gives you control over web font loading regardless of where your fonts come from: host them yourself, or use a web font service such as Google Fonts, Typekit, Fonts.com, and Webtype.
Rellax
I'm exploring using Parallax in a few experiments so I've been looking at what may be the best tool for the use cases I want and, so far, Rellax seems to be the best.
The New Defaults
Dudley Storey's SASS replacement for the standard CSS keyword color system. Available in Github.
GSAP JS
While we can do a fair amount of animations with CSS alone there are times when we need the heavy hitter tools. That's where GSAP comes in.
Zenscroll
Since I decided to use navigation links I wanted it to scroll smoothly up and down. I like the way that Zenscroll doesn't require configuration for a basic setup like the one I use here.
T-Writer.js
Typewriter effects are fun and intriguing and worth some this particular library makes for very intriguing effects.
Lettering.js
A jQuery plugin to control individual letters, words and lines for better typographical effects. Only problem (from my perspective) is that it requires jQuery and that's something I'm trying to avoid.
FitText.js
This jQuery plugin makes the associated text fluid. As with Lettering.js, my only problem with the plugin is that it requires jQuery and that's something I'm trying to avoid.
No jQuery Lettering by Jeremy Keith
A small non-jQuery alternative for Lettering.js
No jQuery FitText.js
Non-jQuery alternative for FitText.js

Inspiration and Ideas

Top

Bibliotype
One of the earliest ideas on digital publishing outside closed ebook ecosystems. I've been wondering how much more we can do with web technologies as they exist today as opposed to what was available in 2011.
Demo at http://caraya.github.io/bibliotype/
Variable Font Demos by Jason Pamental
One of the first collections of applications of Variable Fonts.
Variable Font Demos by Mandy Mitchell
Another collection of experiments using Variable Fonts.
The work of Rachel Nabors
I think I fell in love with her web animation work when I heard her speak at SFHTML5.
The work of Sarah Drasner
Starting with her work with SVG animations and her SVG Animations book she has always impressed me with her skills and how she can translate complex animation work to easy to understand concepts.
The experimental layout lab of Jen Simmons
I first saw Jen's work at An Event Apart and have always been intrigued by how they work. This project is, in a way, my take on what she has done.
8 Faces: Collected by Elliot Jay Stocks
Fell in love with the book when I saw the earlier galley proofs. It's a constant source of ideas and layouts.
The New Code by Dudley Storey
Dudley does an awesome work of explaining really coole techniques and processes in a way that people who may not be highly technical can understand and use.

Fonts and Font-related tools

Top

Roboto VF
A variable font implementation of Roboto, the default font for Material Design and other products. This is a completeimplementation and it seeks full parity with the regular Roboto font from Google.
WOFF2 compressor
A tool that will compress TTF or OTF fonts to provide smaller file sizes and faster downloads. When compressing Roboto (see above) it provided better than 50% file size reduction.
Glyphhanger
The best way to reduce a font's size is to remove all characters that we'll not use. This is extra important when working with large fonts that support non-latin languages.
Axis Praxis
Axis Praxis was the first site that showed me what Variable Fonts can do.
Wakamainfondue
This tool works with Variable fonts and it shows you what the font can do, creates special CSS for you to use in your documents when working with the font and gives you the CSS to download for your own projects :).
Variable Fonts
Variable fonts is another playground for Variable fonts. What distinguishes it is the number of fonts available and the ability to play with the custom axes for each font and see the results on the same page.
MDN Variable fonts guide by Jason Pamental
I met Jason a few years ago at Fluent and have followed his typography work since. He does a very good and detailed work of explaining and show what variable fonts are and how they work.
An Exploration of Variable Fonts
More variable fonts
CSS Fonts Module Level 3
The current candidate recommendation for fonts on the web.
CSS Fonts Module Level 4
More recent work on web fonts, including support for variable fonts and font synthesis.

CSS Paged Media

Top

CSS Paged Media provides extensions to CSS 2 and CSS 3 modules that will allow them to work in generating high quality printed PDF or good masters for printers to work with. The best example I've seen is Lea Verou's CSS Secrets that was created as HTML and then printed using CSS Paged Media.

Browser support for Paged Media and Generated content for paged media is slim so we have to use third party tools like PrinceXML, and Vivliostyle neither of which are free :(

CSS Paged Media Module Level 3
The specification that dictates how most of the content will work when we create printable versions of our web pages
CSS Generated Content for Paged Media Module
Handles generated content like page numbers, sequential numbering and others.
PrinceXML
The first and, in my opinion, the best tool to work with CSS Paged Media.
Vivliostyle / Trim-marks Inc.
Another CSS Paged Media conversion tool.

Reference Books and Sites

Top

CSS: The Definitive Guide
The latest version of my favorite CSS book. Eric Meyer and Estelle Weyl do a very thorough and exhaustive analaysis and explanation of CSS and its different components.
The Experimental Layout Lab of Jen Simmons
I love the work Jen has done in teaching, writing and demoing web layout technologies.
The New CSS Layout
Grid By Example
Awesome resource to learn about CSS grid.
The Elements of Typographic Style Applied to the Web and Web Typography, the book it originated
These two projects take Robert Bringhurst’s The Elements of Typographic Style and applies its principles to working in the web and with web content.
Responsive Typography by Jason Pamental
Responsive web design helps your site maintain its design integrity on a variety of screen sizes, but how does it affect your typography?
Flexible Typesetting by Tim Brown
I've always thought of typography as part of the design proces not as first step in working the content in to your site or app. Reading this book is making me think morre about the text I'm working with and how to provide a good reading experience.
On Web Typography by Jason santa María.
This, to me, is the original typography book. It's a great reference for typography on the web, both the technical and the human side.
Webfont Handbook by Bram Stein
This is a more specific book on using web fonts.
Introducing Variable Fonts
Good technical introduction to Variable Fonts. Not for beginners.
Introduction to variable fonts on the web
This article by Mustafa Kurtuldu (Design Advocate at Google) does a good job of introducting variable fonts without the technical language from the previous article. It also introduces the CSS needed to make variable fonts work on browsers.
One File, Many Options: Using Variable Fonts on the Web
CSS Tricks article on Variable Fonts. It's the gentlest introduction article I've found, so far.
A New Canon
A good design philosophy article.