best way to create a mobile experience for a webapp
I've been building a webapp for the last few months using create-t3-app with tailwind. The app is getting pretty big (codewise) at this point and its becoming more and more obvious that i need a real mobile experience. As far as I can tell there are 2 ways to do this.
1) Make all my components responsive so the same webapp works for all screen sizes.
2) Make a separate set of mobile components and create separate pages that use these versions.
Does anyone have any recommendations? Are there other options I'm missing?
14 Replies
Back in the days people even redirected to a whole other URL when it was on mobile, now solution 1 is the way. Make. Your. Site. Responsive.
Tailwind is mobile first so you should design your components like that
@barry can you say why responsive is better than having a separate "site"?
and making all of my components work on all screen sizes also seems really daunting
it seems like it would be really easy to just miss a screen size on one of the pages
@rocawear i get that tailwind is mobile first, but my app wasnt built like that when i was learning all this stuff
and back when i started i didnt use tailwind or anything at all
I think this way of building apps has been standard for almost 10 years,correct me if I am wrong
Why create components 2 times when you can do it once
if making all ur components work on all screen size is daunting, imagine havin to manage 2 diff sites and have them look similar as well. u are doin more work than necessary tbh.
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
well unfortunately thats not where I am 😛 so i kinda have no choice but to go backwards
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
what about stuff like my top bar that needs to condense / squeeze into a hamburger menu
like if i have a list of buttons and now those need to become responsive
is it better to create a <ButtonList> component that squishes into a menu when its too small?
or should i do that manually for all the components
for the hamburger menu u can either conditionally render with a usemedia hook with react or use css with display none to remove the unused els (recommend the first approach assuming the said hamburger menu also opens a drawer)
ok. ill giver that a try then
thanks for the advice
np. also if u arent already, highly recommend using somethin like radix ui or headless ui so u can just focus on the styling and the behavior is taken care by the lib
but if u want to own ur ui completely, go ahead and write from scratch :D
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Mobile first in tailwind just means the media queries overwrite each other in an increasing order. So given:
just means that in general the text is blue, on medium sized screens it is red, on large or grater it is yellow.
Tailwind has great docs, recommend reading this:
https://tailwindcss.com/docs/responsive-design#working-mobile-first
Responsive Design - Tailwind CSS
Using responsive utility variants to build adaptive user interfaces.