Presenting Multiple Layouts

I’m sure everyone has seen web apps where the user is given a choice of layouts for their data. Sometimes you can view items as a list or as cards and there’s a mechanism of flipping between them. Gmail has options of Comfortable, Cosy or Compact.

From the developer’s point of view, it seems like a nice little extra. It’s fairly easy to do in CSS – just toggle a root class on the module and set your styles for each layout.

Having done this a few times now, my advice would be a pretty emphatic don’t! It starts off as a simple variation but it means that every time you make a small change to the content or layout in one layout you have to do this development for each, and then test in each. In short it multiplies out the work.

Imagine offering the user a choice of 3 layouts and 3 colour themes. That’s 9 scenarios for the poor tester to check every time you make even the slightest tweak.

There’s nothing wrong with putting work into a UI but in this case the benefit to the end user is negligible for a lot of additional effort. It would be far better to spend the time just doing one layout really well.

I think there can be occasions where it can work, like just toggling a module font size or line-height but getting into different sets of styling rules is a big no-no for me.

Opera Neon – First Impressions

Opera Neon is the new concept browser from Opera. What’s a “concept browser”? I’ve no idea but I like new shiny things to play with so have been playing. The Opera Neon webpage will explain it much better than I can but here are a few first impressions.

Opera Neon screenshot

It uses your desktop background as its background. Very clever. All it’s really doing is copying an image but it changes the whole feel. Rather than looking at a start screen with a white background you’re in a familiar environment of your own choosing.

The search bar is for keywords or a URL, which is pretty standard, and the way it’s presented is nice and minimal with just an underline yet obvious.

For your favourite or most recent sites it uses circles with icons rather than screen thumbnails. This makes it feel more like an app start screen, which is quite nice, but I’d probably prefer it to be clearer that they’re shortcuts for the websites. There’s no URL displayed in a tooltip or taskbar when you hover them, which I always like to see as confirmation of where I’m navigating. Maybe I’ve just got that switched off somewhere?

The layout is very interesting. Open tabs are shown down the right hand side as icons. Key actions and areas like open a new tab or show downloads are shown down the left hand side. It’s almost like a typical mobile or tablet view but rotated 90 degrees. This is refreshing and makes a lot of sense. Most websites viewed on a large desktop screen have content within a central column and there’s a load of margin on either side, wasted space. By using these areas for the browser it retains the full height meaning we get to see more content on screen. Big thumbs up from me.

Opera Neon has a built-in snap tool for taking and storing screenshots. It’s a camera icon and a gallery icon. Very easy.

There’s a media player built-in too, so you can listen to music as you browse, which is a neat feature.

The page title seems to be repeated. There’s one at the very top of the chrome but another internal one at the top of the open tab. As these always seem to be the same it feels a bit redundant.

It has dev tools. As it’s blink under the hood these are the same as in Chrome though possibly not quite as fully featured to begin with.

All in all, I’m very impressed. It’ll be interesting to see if it gains market share.

Just for future reference, I’ve been looking at version 1.0.2459.0.

Learning Flexbox

I’ve just, finally, learned how to use the flexible box layout, more commonly known as Flexbox. I’m not going to explain it as there are other sites that can do a far better job of that but just wanted to share some excellent resources for learning it as painlessly as possible.

I’ve delayed on learning it for what feels like years as I’ve had to support older browsers and trying to provide alternative layouts for old and new was just too much of a maintenance headache. Now I’ve learned it there’s no looking back.

Here are 3 excellent resources to help learn it. They’re all quite different but used together cover everything you could need.

  1. Flexbox.io

    This is a series of free video tutorials by Wes Bos. Each video is short and focuses on one step, which makes it easy to digest. It’s very well explained, gives real examples and even details setting up AutoPrefixer to make it more cross browser compatible. I’d say this is the best place to start.

  2. FlexboxDefense.com

    This site by Channing Allen is a game that gets you to use your flexbox knowledge to position towers to defend against attackers. It’s got 10 levels which increase in difficulty. It’s fun and gives some good practice of actually using the code and seeing the results.

  3. CSS Tricks Complete Guide to Flexbox

    This is a great resource for reference as it lists everything you might want to know about flexbox all in one page. It includes nice graphics which explain the flow of content, Codepen code examples, details on the background, browser compatibility. Definitely one to bookmark. Great job as ever, Chris Coyier!