Oh Dear, a website monitoring service, has redesigned its dashboard to be fully mobile-friendly. The update includes a floating action button for navigation, dedicated mobile card layouts for monitor lists, scrollable tables with a fade hint, and larger touch targets for form controls. Rather than using CSS hacks, the team rendered separate desktop and mobile layouts using Blade templates, Alpine.js for state management, and Tailwind CSS utility classes. The redesign is optimized for the stressful moment when users receive an alert and need to quickly diagnose issues from their phone.
Table of contents
What changed #Optimize mobile views when you need them the most #The floating menu #Two layouts instead of one #Scrollable tables with a fade hint #Bigger touch targets #Try it out #8 Impressions