With the new responsive engine, app design should be greatly improved.
Previously I had designed an app for a client as such:
— | app (logged out view)
—— | logged out elements (landing page)
—— | bbs (logged in view)
——— | logged in elements (user profile, events page etc)
this has ended up being cumbersome and confusing. to add to it, i have a “top menu” element that goes in the index page that i have to then create a workflow that “pings” the index then wrapper then app then bbs so then the bbs can show/hide the proper elements.
the new app design i’m thinking of is
—— | wrapper
—— | logged out group (landing page etc)
—— | logged in group (bbs)
the wrapper no longer needs to be a parent element as its width is easily collapsible with the new responsive engine.
should i even bother with having a parent logged in and logged out group when i can simply place a conditional statement on each logged in element “when current user is logged out hide element”?
i thought grouping all logged in elements together would make for safer design to prevent a logged out user from accessing these elements, but now I’m thinking the lest groups the better , this would make it easier for others (for example the client/app owner) to edit & navigate the app.
so then the simplest design appears to be:
—— | wrapper
—— | element2
—— | …
—— | elementN
actually i would like to move the top menu inside the app element, but was unable to previously as it is a floating element…
i want to take maximum advantage of flexbox as it really feels logical and “clean”