Support Responsive Design with More Layout Options
Would like to be able to emulate responsive design. Something that supports relative flow-based layouts and perhaps width break-points to be able to control/make layout changes based on that.
While we have marked it as completed, we are still looking forward to feedback on this feature.
We released bootstrap based responsive views in v4 of Indigo Studio. To get started, select the BROWSER viewport, which should let you visually design the bootstrap grid (rows and cells). This approach exposes the four responsive views provided by bootstrap
- XS or < 768 px (Phone)
- SM or >= 768 px (Tablet)
- MD or >= 992 px (Desktop)
- L >= 1200px (very large desktop)
You can read more about it here:
And watch a how-to video here:
What happened concerning Responsive Design implementation ? Are you still working on ?
The approach you mention, Nicholas, makes sense conceptually. We are just trying wrestle with that concept. It's not as much of an issue for website design where we are dealing with single pages/screens.
The challenging part is when it's a full blown interactive prototypes with multiple screens and screen states. What we have found is that making stuff fluid is much easier than providing a custom view and interaction framework for each device context. For example, an email client that requires two views on the phone, may require only one on the tablet. Yes, it's possible but it requires some careful design planning to achieve adaptive views well.
We feel screenparts can play an important part today for this, where you create the source screenpart and customize it for each device context. That way you are maintaining only the instance at the screen level. And all the device prototypes can live under one single project.
The part we don't have ready support for some degree of automatic/fluid and the ability to share a single prototype URL to access all the different designs. The latter is a potentially easy fix. Basically you would select all the screens (across device contexts), and share. When viewing the prototype, Indigo server/player can attempt to serve up the device specific screen. Just a though of course :).
Not to worry, as you can see, we have STARTED working on this feature request, and will ping folks who voted on this feature for feedback. We are trying to make it automatic as much as we can.
Nicholas McClay commented
I found the article below by the Indigo Studio PM very interesting on this topic. My main take away is that what I'm looking for in Indigo Studio isn't so much RWD support but multiple display contexts for a given screen. Currently in my mobile projects I have to provide at a minimum guidance for phone and tablet variations across both iOS and Android. These contexts often highly reuse the same UI and interaction states with some slight layout variation or different platform affordances.
What would be optimal is to be able to define a given screen in one place, and simply have a toggle to choose what context I want to look at that given screen/state in, then just make the adjustments. The alternative to this is what Ambrose suggests in the article which is by using a top level state context selector to toggle between different contexts. My problem with that though is that once you get into a screen with a couple layers of interaction you are making my life a pain to manage all those 'parallel' states downstream that are just a layout variations of a state in another context. Or you end up doing what I'm currently doing which is having 4 different Indigo Projects for managing the design for what is essentially the same app across 2 platforms and 4 (or more) display sizes.
My wish would be that you could make creating and managing these different display contexts in Indigo for a given screen and its associated states with as little rework as possible. I know that's a daunting ask, but I think there are ways it could be done, for example maybe having a context selector in the screen interactions overview that lets me easily control what states are applicable to different contexts and adding new states for contexts that need them. The end goal should be to limit the amount of rework necessary to deliver consistent prototypes for different display contexts of the same application screen and state.
Hope that helps!
Yes creating 1 prototype with multiple viewports would be fantastic!
Yes please. This would be really handy as I'm working on more and more responsive projects
Raaj Sivaram commented
Yes, Responsive Design is the way forward. We are getting into eXperience Design and not screen design, so we need to have the capability to move seamlessly between screens yet keeping the experience intact.
Raaj Sivaram commented
Some of things I like about Indigo:
I like the simple nature of creating screens and interactions, It is done really well.
I like the timeline feature which was initially with the Expression Sketchflow suite, I think for anyone into Interaction Design would agree,
A timeline tool is critical on depicting the interplay of characters within a page.
I also appreciate the Connected Page feature, where you can show the navigation or Page transition across pages along with the Interaction,
This is a differentiator when you get into tools like Edge Animate without Adobe Fw.
Edge Animate is a good tool, but I dont get on how we can link pages or perform swipes across a layout or generate an Panaromic experience.
Paged Interaction is sorely missed in the Edge Animate tool.
When I compare Indigo to the Industry benchmark, Axure RP Pro 6.5.
Axure does quite a few things well. It ticks all boxes except for the TIMELINE feature,
Setting page context based on triggers is missing. You can accomplish this with going to another page.
There is also a need to write some logic in Axure for complex prototypes, which I am hoping Indigo would fill.
Responsive Web Design is becoming a big deal, The focus is not towards a device anymore but an eXperience Outcome we deliver.
When we look towards an eXperience Outcome, Devices play a part of the design. Earlier design decisions were made based on the device, Not anymore Maybe...
Having said the above, I would love Indigo to go fluid so that we don't have to make the decision that is made with Adobe Photoshop
Which is, Set the Height and Width of a screen, arrange screen elements for different device resolutions and their different screen densities
and then move towards Edge Animate to define Interactions for a single page.
One additional feature request is have the transform capability for all objects, Right now you can only size or place objects in X & Y.
Looking for the transform Z axis to be introduced.
Luke McDougald commented
Would like support for fast, drastic changes to layout to accommodate things like snapping in Vista/Windows 7 (and the supposed upcoming half-size in Windows 8 Modern) and the sidebar in Windows 8 Modern.
Ideally would also support things like the Samsung Galaxy series' multi-window, and any phone's autorotate (I assume the latter is planned if not implemented).
Folks, just wanted to let you know that we are still considering this. In the meantime, you may be interested in this blog post related (assuming you didn't just come from there! :) ):
Patrick Hawley commented
Allowing for multiple viewport widths/design breakpoints along with the multiple states per screen would be huge!