Designing for non-rectangular browser windows


How I miss the days when phone manufacturers were innovative. Nowadays everything is just a boring black rectangle.

I imagine that this (concept) device would probably just put the browser only on one row / column. Probably sensible, but utterly BORING!

Let's imagine a few bonkers devices. Here's a daft concept phone with a punch-hole camera cutting out its screen.

Mock up of a phone with a huge camera jutting out of its corner.

What would text scrolling look like on that? Well, it's pretty easy to mock up!

The code to do this is pretty damn simple!

First, set a function to trigger whenever the body is scrolled. Then shove a <div> in at the top.

<body onscroll="moveCircle()">
  <div id="tl"></div>
  <p>Lorem ipsum dolor sit amet...

Next, draw a shape-outside of a circle. This will wrap the text around a quarter circle.

#tl {
  shape-outside: circle(20% at 0px 0px);
  width: 10em;
  height: 100%;
  float: left;
}

Finally, the Javascript which runs whenever the page is scrolled. It moves the circle so its centre stays in the top-left of the physical screen.

function moveCircle() { 
   document.getElementById("tl").style.shapeOutside = "circle(20% at 0px " + window.pageYOffset + "px)"; 
}

That's it!

What if your phone's notch was MASSIVE and you wanted to scroll text around it?

Again, this uses shape-outside but this time feeding it a polygon:

document.getElementById("tl").style.shapeOutside =
    "polygon(0 " + (150 + window.pageYOffset) + "px, 100px " + 
            (150 + window.pageYOffset) + "px, 100px " + (300 + window.pageYOffset) + "px)"; 

CNN once posited that the smartphone of the future could be triangluar
A smartphone in the shape of a triangle.

What would it be like to read text on such a device?

Hell. it would be hell.

OK, let's go utterly ridiculous. What if that L-shaped phone could open and close while you were reading and scrolling? It'd look something like this:

Weird, right?

Imagine you're on DEEP SPACE NINE where all the Cardassian screens are oval shaped.
A circular screen with an alien on it.

With a bit of bashing about with polygons, you can sort-of make that happen.
Lorem ipsum text wrappen in a sort of circle.

I'm not even going to give the iCarly Pear Phone a go!
A blobby pear shaped phone.

OMG! THESE ARE ALL HORRIBLE!

Yes. We're mostly used to text filling a rectangular space. And it is rare that the material we read on changes shape.

But it doesn't have to be that way. The technology is here to make non-rectangular screens a reality. There are plenty of smart-watches with circular faces - but we can go so far beyond that.

There's an excellent paper called "Investigating Text Legibility on Non-Rectangular Displays" which looks at the usability of weirdly-shaped displays. I hope it becomes required reading if / when screens start getting interesting again.

Bonus Video

Here's a video talking about how GUIs will adapt to non-rectangular displays.


7 thoughts on “Designing for non-rectangular browser windows

  1. says:

    @Edent This sort of reminds me of when the University of Manchester got a new logo that the brand people demanded must only go "in the top left corner". They could only imagine A4 paper or webpages and not what you'd do on, say, CDs/DVDs.

Leave a Reply

Your email address will not be published.

%d bloggers like this: