Layout Patterns for Scalia Law School Website

When I took over the law school website, responsive design started to gain traction. In my interview presentation, I made the promise that I would make the whole site responsive if I were hired. Even though I had very little knowledge on server administration, which was the main responsibility of the web services developer position, I was hired.

My supervisor at the time told me, “Although you don’t have much backend knowledge, you have a strong sense of design. I am sure you will be able to pick up all the server stuff.” I was thrilled that she had more confidence in me than I did in myself.

To keep my promise, I ripped out all the HTML and CSS and rewrote them from the ground up. I also approached mobile first in my responsive redesign. I did not use any frameworks; therefore, everything I coded tailored to the site—nothing more, nothing less. At that time, we still used floats for layouts, but as soon as the CSS grid landed on major browsers, I rewrote the CSS to take advantage of the grid functionality.

To give our site more flexibility, I developed layout patterns based on the grid system. I put together a demo page to show different combinations (buttons, images, text, video). The grid can accommodate at least 12 layouts. The best part is the fluidity of the grid system. It is made to adapt to any digital device.