Are there any good samples of using the mobile first approach with the bootstrap container? I am trying to do some seeming simple things. The first screen is banner page with an edge-to-edge banner and a menu list. The second screen would be a grid layout with thumbnail image and some metadata items to the right of the image (some left and right align on the same line) kind-of-like an iOS grid. For example, could I have the thumbnail image to be one size for mobile and increase for the tablet breakpoint without it being linked to column spans.
Hi, Bruce.
Did you get a chance to look at our how-to article and video on responsive pages?
Let us know if you still need more information.
Hi George,
Yes, reviewed the help topic and watched the video. I can reproduce those results. I guess what I am attempting to prototype is more LOB with grid listing (said a thumbnails and several lines of description) with interaction. Much like http://getbootstrap.com/components/#media-default. Once I tried to implement my own design it felt like I was fighting the Bootstrap container constantly. Which I know isn't a good sign.
Considering, that I am attempting to switch over to Indigo from screen designing in tools like Visio and Sketch, I could totally be doing it wrong! But the reason I switched to Indigo is because I wanted my designs to have more interactivity
Please consider putting together a richer set of examples and help topics in this area and any guidance you can provide will be helpful.
Is there any particular reason you started with Web/Bootstrap? I only ask because designing with the bootstrap layout does have additional constraints and capabilities not available in other viewports (e.g., generic). As you have realized it is different from Visio and Sketch because neither attempt to use Bootstrap. Is the goal to create a prototype that is responsive?
If you wish to create an interactive prototype that demonstrates an interaction or a particular workflow, it can be easily achieved with the generic/desktop viewport. Creating a repeating list with images and description can very easily be done using the repeater control.
Feel free to share a concrete LoB scenario/interaction, we can try building! Think of it as what does the user see first, then what does the user do, and then what happens...
George,
Yes, I was attempting prototype a design that's responsive by taking a mobile-first approach. I also use bootstrap in development so it seems like a match for my use case. I had no issue with some of the workflow I was using to prototyping such as get some the interactivity to work. Where things seem to break down for me was actually getting screens to layout properly and/or have them scale properly across the breakpoints.
Perhaps you are correct in that I need to step outside the bootstrap container.
Bruce
Just a follow up...once I move away from the bootstrap container I was able to get the layout and design the way I wanted. I still like the promise of what the responsive mobile-first approach offers but the current constraints doesn't give me enough layout flexibility to be useful. I kept wishing there was a container that I put in a cell that gave me that flexibility.
Thanks!