At Bryn Mawr, we had been considering our website’s experience on mobile devices for a few months before we took the plunge into adapting the code and design for the most popular devices. We researched a separate-mobile-website approach, and found the extra maintenance required to be beyond our capabilities. An approach using responsive design techniques to adapt our fixed-width grid to shrink for smaller screens was the best option.
I scaled down our grid to fit smaller screens (less than 420 pixels wide) and used media queries and jQuery to re-configure our primary and secondary navigation menus into dropdowns. We wanted to avoid hiding our most important content with massive navigation buttons like some mobile websites do, hence the toggle functionality to show and hide menus as needed:
Aside from the navigation, I adapted all of our design elements including jQuery slideshows, YouTube video embeds, RSS feeds, student profiles and more to fit the new small screen layout. Browse on your smartphone, resize your browser or just go to brynmawr.edu on any device to see how the new site works!
Further information about the project can be found in Bryn Mawr’s news publication, Bryn Mawr Now.