Reworked George Mason Law on Small Screens

I rolled out a major update on George Mason Law last night to improve the user experience on small screen devices. The massive amount of links on the header and the navigation take up the entire screen on the iPhone. When users clicked on a nav item, they couldn’t tell that the page is being loaded below the screen. I have pondered upon the issue for a while and finally figured out a solution.

I made the logo smaller and moved the entire header and navigation to the bottom of the page for small screens. I added two links at the top of the page: “skip to content” and “skip to navigation.” Users can get direct to content or navigation with just one click or tap. With the smaller logo and navigation out of the way, the content is now moved up higher on the small devices. For large screens, I moved the entire header back to the top of the page using CSS absolute positioning.

What I really like about this approach is the improve in accessibility and SEO. Users with screen readers don’t have to go through all of the nav links to get to the main content. Search engines could also get to the information much faster because the content is higher on the page.

The beauty of the web is that we can still make changes after the site has launched.