A lot of web projects look great on a massive monitor but fall apart the second you open them on a phone. Usually, the problem isn't the colors or the typography—it’s the underlying structure, specifically how the navigation and sidebars behave when the screen size shifts.
A common mistake is using component libraries as a substitute for actual CSS. Libraries are great for things like dialogs or menus, but they aren't an "app shell." If your basic structure is broken, no amount of expensive transition animations will save the user experience.
My rule is simple: start with structure, not decoration. Before you go hunting
for a fancy sidebar package, map out your screen regions. If you're just
importing a layout component to handle width: 240px or display: flex, plain
CSS is more than enough.
In my own workflow, breakpoints are documented as tokens, not "magic numbers" scattered randomly throughout the code. That’s the only way to keep a design consistent.
When transitioning from desktop to mobile, the rules are pretty strict. On small screens, a sidebar shouldn't just sit there; it needs to become a temporary drawer. This means the drawer stays closed by default, appears via a clear toggle button, and—most importantly—manages focus correctly. When the drawer opens, focus should move into it. When it closes (via the Escape key or clicking outside), focus must jump back to the trigger button. You don't want keyboard users getting "lost" behind an open menu layer.
So, when do you use bottom tabs? If your app has three to five main, high-frequency links, bottom tabs on mobile are much more effective than hiding them behind a hamburger menu. Hamburger menus often add friction because the navigation is out of sight. However, if you have a massive, nested menu like an admin panel, a sidebar is still your best bet on desktop.
Of course, not every app needs this much complexity. Sometimes a simple
combination of CSS Grid and sticky properties is plenty to keep your
navigation in place without the cost of a heavy library.
One technical detail that often gets missed is using 100vh on mobile browsers,
which usually gets cut off by the URL bar. I’d suggest using 100dvh instead to
be safe. Also, always include a skip link for keyboard users so they can jump
straight to the main content without tabbing through every single menu item.
Managing responsive layouts isn't just about moving elements so they don't overlap; it’s about making sure they stay easy to use, whether someone is using a thumb or a keyboard.