In January 2012, we relaunched a responsive makeover for Mason Law web site. One of the challenges was that the new design has to work with and response to the existing contents, which being added and updated through MODX, an open source content management system. Fortunately, MODX’s flexibility doesn’t get in the way and also allowed us to bring the markups up to HTML5.
In making responsive layout, we took the mobile first approach. The entire navigation system is moved to the bottom to allow the content to be more prominent and improve accessibility and SEO. On small screens (smartphones and tablets), users can get to the main content quickly without having to scroll through the menus. On larger screens such as desktops, the navigation is repositioned back to the top using CSS technique.
As an institution, accessibility is one of top priorities; therefore, we make sure the site works well with screen readers and legacy browsers including IE7 & 8. We hope that the new site could help you find information quickly and effectively on any device that you are holding in your hands.