4 ms·

Designing for non-rectangular browser windows

75 points by edent 4y ago

anderskaseorg 4y ago
If you were to try this with real text that you wanted to read instead of lorem ipsum, you’d figure out pretty quickly why nobody wants text to rewrap like that as you scroll. Your eyes would have to rescan the text every time it moved to figure out where you’re supposed to continue reading, instead of just following it in a continuous line.
- a_t48 4y ago
  What if we squished the size of the text instead?
  - Retr0id 4y ago
    Raserise the text, map each pixel to a particle suspended in a fluid simulation, and let nature take its course. There's a reason they call it text reflow!
- tkgally 4y ago
  Yes. It reminds me of the bad old days of magazine layout in the 1990s and early 2000s, when graphic designers, armed with the latest desktop publishing software, roundly defeated the conservative forces of authors and readers. Here’s a 1997 example at the Internet Archive: https://archive.org/details/Mondo.2000.Issue.17.1997/page/n23/mode/2up https://archive.org/details/Mondo.2000.Issue.17.1997/page/n2...
  - polypodiopsi 4y ago
    Oh god this is terrible.
  - anderskaseorg 4y ago
    Whatever you might think of that 1997 example, it’s not the same issue, since it’s just a static page. As the page scrolls vertically by 1 cm, the word you’re focused on predictably moves vertically by 1 cm. I assume your quibble is that you might have to follow an odd shape to find the next word at a line break—but at least you know where the current word is. Whereas in this post’s animations, as the page scrolls vertically, the word you’re focused on also jumps to an essentially random horizontal position (as a discontinuous function of the scroll-dependent widths of all the previous lines). You can’t scroll without losing the place of your current word.
    - tkgally 4y ago
      > it’s not the same issue Thank you for the clarification. I had hoped that would be understood from my “It reminds me of…,” but I guess it wasn’t.
- toqy 4y ago
  From the author > What would it be like to read text on such a device? > Hell. it would be hell. Among other similar statements. What’s the value in restating half the point of the article but presenting it as some big brained contrarian take
  - anderskaseorg 4y ago
    The author seems to be suggesting that the reason it’s “hell” and “horrible” is that we’re not “used to” it and it’s “rare”, concluding “it doesn’t have to be that way” and “we can go so far beyond that”. If that wasn’t your takeaway, then great—I wish there were more designers like you.
- jhanschoo 4y ago
  Probably the best usability wise would be text that flowed around the window constraints as in here, but paginated instead of reflowing.
corytheboyd 4y ago
You're just _trying_ to start a fight by posting this to HN lol
Retr0id 4y ago
Pre-emptive comment: Yes, of course, the logical solution is to scroll text traditionally within a rectangular sub-region. But it's fun to think about alternatives, even if they're impractical.
deleted 4y ago
[deleted]
- deleted 4y ago
  [deleted]
nyanpasu64 4y ago
This is peak /r/badUIbattles material.
shotta 4y ago
Is Dunder Mifflin Sabre finally releasing the Pyramid? https://medium.com/dunder-mifflin-paper/unleashing-the-power-of-the-pyramid-c3c32d6bca9b https://medium.com/dunder-mifflin-paper/unleashing-the-power...
- shepherdjerred 4y ago
  It’s ergonomic because of the triangular shape!
svat 4y ago
TeX can do something like this, namely typeset paragraphs according to an arbitrary \parshape (a fixed one: it's designed for print after all). There was a question on the TeX StackExchange a while ago about making a "poster" with paragraph shapes chosen according to a certain cut-out image; some people were saying it's not possible, so I ended up doing it: https://tex.stackexchange.com/questions/401604/ https://tex.stackexchange.com/questions/401604/ (The inspiration for that question was apparently Spineless Classics, who have many good ones: https://spinelessclassics.com/collections/all?sort_by=best-selling https://spinelessclassics.com/collections/all?sort_by=best-s... )
csense 4y ago
Let's take it to the next level. Any UI designers out there want to tackle the mind-bending task of presenting information on a display that's a Mobius strip, Sierpinski gasket, or Cantor set?
- edent 4y ago
  With CSS's new 3D transforms, I'm pretty sure I could wrap text onto a Klein bottle…
- xigoi 4y ago
  Displaying text on a cylinder would be interesting. You could just have one long line bending slightly downward, endlessly circling around.
zimspy 4y ago
The usability on the user's has been addressed by other people quite well. There is then the issue of developers. Who gets the job of detecting which gimmicky shape a screen is? Web browser developers or website developers? Maybe my viewpoint is from being used to rectangular screens. I'm also not a web developer but mobile. I already hate having to implement portrait and landscape layouts. Please don't add a star shaped phone.
- aspyct 4y ago
  I vote for the star shaped phone. And against. Really, both at the same time. This would be terrifyingly awesome.
biryani_chicken 4y ago
I thought this was going to be about the notch in smartphones.
productceo 4y ago
Haha. Nice exercise!

75 points by edent 4y ago

If you were to try this with real text that you wanted to read instead of lorem ipsum, you’d figure out pretty quickly why nobody wants text to rewrap like that as you scroll. Your eyes would have to rescan the text every time it moved to figure out where you’re supposed to continue reading, instead of just following it in a continuous line.

a_t48 4y ago
What if we squished the size of the text instead?
- Retr0id 4y ago
  Raserise the text, map each pixel to a particle suspended in a fluid simulation, and let nature take its course. There's a reason they call it text reflow!
tkgally 4y ago
Yes. It reminds me of the bad old days of magazine layout in the 1990s and early 2000s, when graphic designers, armed with the latest desktop publishing software, roundly defeated the conservative forces of authors and readers. Here’s a 1997 example at the Internet Archive: https://archive.org/details/Mondo.2000.Issue.17.1997/page/n23/mode/2up https://archive.org/details/Mondo.2000.Issue.17.1997/page/n2...
- polypodiopsi 4y ago
  Oh god this is terrible.
- anderskaseorg 4y ago
  Whatever you might think of that 1997 example, it’s not the same issue, since it’s just a static page. As the page scrolls vertically by 1 cm, the word you’re focused on predictably moves vertically by 1 cm. I assume your quibble is that you might have to follow an odd shape to find the next word at a line break—but at least you know where the current word is. Whereas in this post’s animations, as the page scrolls vertically, the word you’re focused on also jumps to an essentially random horizontal position (as a discontinuous function of the scroll-dependent widths of all the previous lines). You can’t scroll without losing the place of your current word.
  - tkgally 4y ago
    > it’s not the same issue Thank you for the clarification. I had hoped that would be understood from my “It reminds me of…,” but I guess it wasn’t.
toqy 4y ago
From the author > What would it be like to read text on such a device? > Hell. it would be hell. Among other similar statements. What’s the value in restating half the point of the article but presenting it as some big brained contrarian take
- anderskaseorg 4y ago
  The author seems to be suggesting that the reason it’s “hell” and “horrible” is that we’re not “used to” it and it’s “rare”, concluding “it doesn’t have to be that way” and “we can go so far beyond that”. If that wasn’t your takeaway, then great—I wish there were more designers like you.
jhanschoo 4y ago
Probably the best usability wise would be text that flowed around the window constraints as in here, but paginated instead of reflowing.

corytheboyd 4y ago

You're just _trying_ to start a fight by posting this to HN lol

Retr0id 4y ago

Pre-emptive comment: Yes, of course, the logical solution is to scroll text traditionally within a rectangular sub-region. But it's fun to think about alternatives, even if they're impractical.

deleted 4y ago

[deleted]

deleted 4y ago
[deleted]

nyanpasu64 4y ago

This is peak /r/badUIbattles material.

shotta 4y ago

Is Dunder Mifflin Sabre finally releasing the Pyramid? https://medium.com/dunder-mifflin-paper/unleashing-the-power-of-the-pyramid-c3c32d6bca9b https://medium.com/dunder-mifflin-paper/unleashing-the-power...

shepherdjerred 4y ago
It’s ergonomic because of the triangular shape!

svat 4y ago

TeX can do something like this, namely typeset paragraphs according to an arbitrary \parshape (a fixed one: it's designed for print after all). There was a question on the TeX StackExchange a while ago about making a "poster" with paragraph shapes chosen according to a certain cut-out image; some people were saying it's not possible, so I ended up doing it: https://tex.stackexchange.com/questions/401604/ https://tex.stackexchange.com/questions/401604/ (The inspiration for that question was apparently Spineless Classics, who have many good ones: https://spinelessclassics.com/collections/all?sort_by=best-selling https://spinelessclassics.com/collections/all?sort_by=best-s... )

csense 4y ago

Let's take it to the next level. Any UI designers out there want to tackle the mind-bending task of presenting information on a display that's a Mobius strip, Sierpinski gasket, or Cantor set?

edent 4y ago
With CSS's new 3D transforms, I'm pretty sure I could wrap text onto a Klein bottle…
xigoi 4y ago
Displaying text on a cylinder would be interesting. You could just have one long line bending slightly downward, endlessly circling around.

zimspy 4y ago

The usability on the user's has been addressed by other people quite well. There is then the issue of developers. Who gets the job of detecting which gimmicky shape a screen is? Web browser developers or website developers? Maybe my viewpoint is from being used to rectangular screens. I'm also not a web developer but mobile. I already hate having to implement portrait and landscape layouts. Please don't add a star shaped phone.

aspyct 4y ago
I vote for the star shaped phone. And against. Really, both at the same time. This would be terrifyingly awesome.

biryani_chicken 4y ago

I thought this was going to be about the notch in smartphones.

productceo 4y ago

Haha. Nice exercise!