After struggling till deep at night I would like to share my problem with you.
I decided to develop a webapplication with as base platform mobile and to then make it responsive for use on tablets and desktops as well. As such I decided not to design both a mobile version and a desktop version (not sure whether this is actually the right approach but I figured I could make it work probably.
Now when I increase the screenwidth to 1200 px (400% in my case using a base of 300px) a large white space appears since I don´t want to have the dropdown menu´s too wide. My idea was to use the hide function in combination with a conditional to only show the extra content on the right in case the screenwide increases up to a certain point (around 1000px).
However I´m not able to make it work. If I first increase the screen to 1200px to place the group in which I want to place images for example, the content I created gets distorted since it was built on the 300px basis.
Two questinos:
Is it easiest just to start designing mobile first and then make it responsive for usage on desktops? Or should I design two different pages? Or should I maybe start with a desktop page and make it responsivess for screens with less width?
How can I make it work in case I choose to use the current method (mobile first, without seperate pages for the desktop version.
I hope you guys can help me out so I can continue in the right manner. Thanks a lot in advance!
The big question: what is the primary method your users will be using to access your app? Figure that out, then optimize for that access. In my software, 50% of the users access via ipad, 40% via desktop, so I built all my pages optimized for 768 (the min width of an iPad Mini).
My preference would be developing phone first, just that I haven´t figured out yet how I can hide and later let appear some features I would like to have on my desktop page:
For me I expect the 60% will use the phone, the rest on tablet and desktop, so using your logic I would develop starting from a mobile-first base. Just to visualize everything a bit, here fotos of one of the pages:
I thought about sharing the specific page but I couldn´t figure out how, don´t want to share all of my pages of the app, just this one, so now we´re at it and you would have the solution for that, you´d be very welcom haha.
i have a similar situation, but i have a related question. Is it better to generate only one page with hide and show groups? or is it better to do it in different pages?
Also do you now how can i preview the webapp on my mobile device?
The upside about designing everything on one page and work with hide and seek is that no new pages need to be loaded. I for example wanted to create a form spread out over different pages, and as such building everything on one page only was recommended, made sense to me.
As soon as pages start to be significantly different lay-out wise, I imagine that creating seperate pages makes more sense.
