[Update — since writing the Edge team have moved CSS Grid off their backlog ]
It’s taken a very long time but we’ve finally (almost) arrived at the position where we can easily provide resizable grids in the web. By ‘grid’ I mean a true 2 dimension grid (think table) that resizes to fill a specific rectangular area. I do not mean a set of resizable columns more closely tied to traditional print media layouts, as many designers and layout frameworks currently use the term.
As caniuse now shows, several CSS features required for grid layout now have widespread implementation; CSS Grid, Viewport units and object-fit/object-position. Microsoft Edge is disappointing behind with these. Also the ability to display SVG as first class content brings the ability to present clear scalable symbols.
Why are these features important to me? We’ll, in my mission to create web based access technology for people with disabilities, a grid of interactive buttons is a very commonly used feature. For example, it’s used for people with physical disabilities so they can easily select items using just a simple switch for input (think of Stephen Hawkings’ use of a computer). Such grids are used to access and control computers and other technology. Non vocal people also use grids to communicate through symbols and computer generated speech, where again, easy selection is important. Finally in my latest work on interfaces for people with cognitive disabilities such as dementia and low digital literacy a simple touch accessed grid based layout has proved highly successful.
The widespread adoption of small screen Mobile Apps has brought this style of UI to a wider audience through touch accessed home screens made up of a grid of buttons/icons. In general, the smaller screen UI interaction experience with touch has caused designers and developers to focus on many of the same accessibility issues. Well, at least small devices force a focus on a user’s core desired outcomes, rather than the developer’s desire to make sales.
More recently, Microsoft adopted this type of UI when they released the Windows 8 Metro/Modern UI and start menus. These use a grid style layout and live on in Windows 10. In fact, Microsoft’s WinJS JavaScript framework made these UI features available in web apps, but unfortunately is now pretty much parked.
However, the style of grid-based interface I’m considering is still a little more specialist. One Maavis user described it as a ‘baby computer’. I’m very happy with that description if it signals that clever or complex UI patterns are kept well out of the user’s way.
Part of the reason I feel it has taken an incredibly long time to get flexible layout is that with the very first personal web site I created, I wanted scaling to fit the device. This was way back in the early 90s and I wanted my website to provide links for use at home on my low res monitor and at work on my high res workstation. I soon discovered the state of the web was fixed layout only. This seem a backward step given my day job was developing native Windows apps and we ensured the our dialogs (C++ MFC) scaled with adaptable layout as required.
When I worked on the Maavis grid layout for people with dementia I decided to use Mozilla’s XUL environment. This is the layout engine used for Firefox’s UI or Chrome. Though very similar to HTML, CSS & Javascript, this has many extensions. Most useful of these were XBL, an early W3C attempt at web components, and Flex box layout (yeah, there’s nothing new under the sun). Even so in, order to get a resizable grid layout I had to resort to javascript layout tricks involving timeouts of 0 to re layout at the right time. All very fragile; but it worked.
More recently we have had CSS Flexbox to help with flexible layouts but that works in one dimension. You can nest them but that doesn;t give true grid layout, for example, columns will not line up. The Wrap feature does give a sort of grid but there is not enough control over it. And for example the CSS child element index selectors do not co-ordinate with the wrapping.
CSS Grid solves these issues nicely, thank you! And that’s why I’m feeling happy. Finally resizable grid layouts are finally “easy peasy” with CSS Grid. This makes my latest product development much easier.
It’s just a real shame Microsoft Edge does not yet support it. The majority of users of access technology are on Windows devices. For them there is no out of the box solution — they will be required to install a secondary browser until I get a implement a good Progressive Enhancement fallback. I encourage you to vote that the Edge team start to update to the latest Grid.
Anyway, I’ve decided to use CSS Grid for the SteppingStone components and product I’m creating for people with cognitive disabilities and low digital literacy. I feel March has been a watershed in browser support and I’ll have fallbacks for Edge until their new CSS Grid work lands.
To find out more about CSS Grid layout, check out any of Rachel Andrew’s many detailed writings and videos. A particularly thorough reference can be found at gridbyexample.com.
