Start a new topic

Multi-dimensional Responsive Design

Hi guys.


I'm back! Sorry I've been away so long. I missed ya.


I've been digging into all the awesome new features that y'all have released since last I played in the Antetype sandbox. Get ready for the barrage of feature requests…


The feature I'm really pushing on right now is responsive breakpoints. Responsive app design is the order of the day and Antetype makes exploring the space so, so much easier.


But as usual, all these great features just leave me craving more. So, here's the first in a series of thoughts about how Antetype can be even more awesome:


First, two dimensional breakpoints! A single axis is great for web pages, but it doesn't fully cover mobile design. These days with even iOS devices varying in size from the iPhone 4 through the iPad Air, we have to consider not just the width of the screen, but also its height. Rotate the phone and what was a "regular height, compact width" device becomes a "compact height, regular width" device. How does the app respond? Regular width, regular height devices like the iPad seem simpler, but even there portrait vs. landscape can have different behaviors. I can get *most* of what I need using a linear series of breakpoints, it's tricky to say the least.


One reason it's tricky is that breakpoints don't inherit from one another in any way. If you don't set a breakpoint at every size, what happens in the middle – between specified sizes – can be unpredictable. It seems like breakpoints should inheriting from the next breakpoint, rather than default. You might need two dimensional breakpoints for the cascade to work correctly, but being able to design for "everything below this point" rather than having to specify each breakpoint individually would be huge.


Given how finicky breakpoints can be to set up, I'd love to be able to define default breakpoints for all files. Or to set up defaults that I can then just turn on, rather than having to enter manually, one by one.


I'd also like to be able to set objects on screen to be responsive to the size of the parent, not just the size of the screen. Often times you need to look at screens side by side to see how a component adapts. Currently that can only be done as an export (usually over to Sketch where I can lay out a bunch of PNGs side by side). But then making changes is a hassle. I'd like to make a giant canvas, drop some device wireframes on it, and then populate those device wireframes with responsive widgets that can adapt to the size of whatever cell they're dropped inside. (I'm happy to provide illustrations of the kinds of things I'm trying to do here.)


For extra credit, I'd like to be able to bind to more than just the dimension of another object. Responsiveness isn't just about screen size. It's also about the elements on screen. Dynamic type means some screen dimensions need to be dependent on the type size. I'd love to set the width of an item to be a multiple of the type size or line height, for example. I know that's going way beyond what's possible today, but I thought I'd plant the seed for y'all to ruminate on.


OK, that's enough for one post. Lots more to come, I'm sure.


Brendan


Oh wait, there's more!


I love that I can specify objects as a percentage of their parent. I want to specify their minimums and maximums that way too. Like so: "dialog width is 28 em, height is 28 em x screen aspect ratio, max width and height are 90% of container width and height". So the width is dependent on the font size, the height is relative to that, but both dimensions are limited to a portion of the parent (whose size can change, so fixed padding doesn't work).


I know, I know. I'm asking for the moon. I'd settle for specifying min / max percentages. Dynamic type can come later. :)


Brendan

Just had another thought on how to handle multi-dimensional breakpoints. It could be as simple as nested breakpoints. Thus, I could set top-level breakpoints for the width of the device and for devices that have a compact height, set breakpoints within the widths for height.


Right now I'm using states for that, but that's overloading states so they're not available for handling interaction states.

Good to see you back and thanks for posting your great ideas. Responsive design features are not in the focus of the next release, but we will discuss your requests and think about how and when to integrate them.

Login or Signup to post a comment