Streaming live at 10am (PST)

Is my UX Wireframe even doable (see JPEG)? Help w/ Content Structure


#1

HELLO ALL!

Maybe somebody can help me or point me in the right direction on how I should be structuring my site because I'm stuck right now at the starting point. I do know HTML and do professional design for a living but I am still kinda new to this responsive thing.

It's basically an auto-loading (or infinite scroll) 3-column blog site that turns from 3 columns on desktop to 2-columns on tablet to 1-column on mobile. But the trick is that I want the 'type of' content to just mix and match when it goes to a lower column #. See my color coded example.

HOW WOULD YOU PROPERLY STRUCTURE THIS?
IS THIS EVEN DOABLE IN WEBFLOW?


#2

Would even be willing to pay someone who is a webflow expert a small fee for a proper consultation to get me on the right track. It'd be worth it for me.


#3

I don't see that being possible with Webflow easily (or at all).

In Webflow you make the size of elements vary considering the target device. So Either things float side by side and then one on top of another when the screen real estate is reduced, or you use the ROW widget to set scenarios for each devie. But it's also limitated to side-by-side or one on top of the other. In your case, you have long columns that can transfer to a row widget, and you can even put row widget inside columns is needed to get a more complex responsive scenario. But there is nothing useful to mix your blocks once they're on mobile.

Don't get me wrong, everything is possible, but at a tweaking and complexity cost. For instance, you could duplicate some of your blocks, (making them symbols to keep their content in sync) and place them multiple times on the page: some will be set to appear on desktop, some on tablet, some on phone. But that's a large amount of duplicated blocks, I don't know if you really want to do that. (a lot more content is loaded by the page than the visible content... visitors are loading twice as much content as they should).

What is possible with Webflow:

row widget
- column 1
-- block A
-- block B
-- block C
-- block D
- column 2
-- row widget
--- column 1
---- block E
---- block F
---- block G
---- block H
---- block I
--- column 2
---- search block
---- block J
---- block K
---- block L

Then for tablet, make the first row widget to keep its column and the second row to merge them, you'll get two columns with the order:

ABCD
and
EFGHI+search+JKL

And for phone, you set the first row to merge as well, you get one column with the order:

ABCDEFGHI+search+JKL

If you need someone to build/design the structure with symbols and hidden blocks in freelance, I can do it, PM me.


#4

I don't think this can be done in Webflow.


#5

Thanks for the explanation @vincent. I'll definitely play around with the row widget and see if that produces anything. If all else fails I think I'll have to look elsewhere to produce this. Had to make sure though.

Will definitely consider you for freelance smile


#6

I don't think this should be any headache. You can achieve this with Webflow. Design is iterative and I know as you go ahead building it you will review your concept and trash the unnecessary. Just keep things simple and structured in the beginning.

You can use columns as advised, but if you desire more design freedom, make use of divs and inline-block.

If you need assisted, you can sent me private mail and we can do this together for a token.


#7

Totally doable! Simple structure really when you break it down... Three sections with containers

1st container for main element and second section for nav

3rd section for column work. All very doable IMO smile


#8

You didn't really take into account hte orders of the blocks he wants when on mobile... It's not that easy to put in place. three columns only don't do the trick.


#9

I would do this differently for mobile but still doable and not an issue really when its drag n drop wink Especially easy if in the end php can be used to make it dynamic wink So no I am sticking to my guns here..... Totally doable!


#10

I looked at this mockup forever, trying to think of a way to do this - It doesn't seem like a simple solution (and by simple, I mean semantically sound).

However, just for fun, I made a demo on how you could possibly achieve your homepage. hehe. kind of fun, but definitely not encouraged.

Demo: https://webflow.com/design/layout-test?preview=623f2546f1b958579be98b4b58d0c25a

Might want to adjust your layout a bit though - it would make things a lot easier. smile


#11

Holy &%$#! @thewonglv! Thats pretty much it! I think you nailed it. Can I use this as my base template? I am completely brand new to Webflow and was a bit intimidated but I think I'm gonna give it try now!

What would you change exactly on the layout that is making it not as easy? Bare in mind I am a designer/ UX person first, and dev person 2nd (if not last).

SO THANK YOU.

@topelovely Okay sounds great! Worst case, would you be willing to do some freelance for some of the more technical parts?


#12

Bring it on will be more than willing.


#13