I thought I was redesigning a site responsively. I thought I was designing mobile-first, but that was all in my head. Now my site is broken in mobiles. Perhaps I shouldn't have let my bosses pressure me so much about deadlines that I didn't take to the time to test in mobile as I went. Perhaps I was just being sloppy or lazy. I dunno.

The big monster was a suckerfish menu. The site almost could have been rolled over to mobie with a few media queries if it hadn't been for that. The trouble was, the menu is jQuery-based. Script tell the nested unordered list what levels to show and hide. Hell, I thought, when I roll it out to mobile, I'll just make the top-level visible--no problem! But so much of the site is hidden in those other levels, and there is no other way to access them except from the submenus, that I am surely hamstringing my site by cutting them. What am I to do?

I thought about making an accordion script for the submenus (you know: click on the main list item, then the sub list slides out.) But that would conflict with the desktop script, right? Is it possible to assign a completely different script to a page if it is viewed in mobie?

I really don't want to go about making new, mobile versions of each page (see first paragraph.) Is this really my only alternative?

Nobody is complaining. My boss views everything on his iPhone and he has only praise for my new design, and our mobile user base is only about 15%. Should I just take this as a lesson learned and just be sure not to be suckered into suckerfish menus from now on?

What's your experience?