Designed Responsively

After abandoning bloated learning management systems this semester, I recognized that my solution—a late–1990s style website with little more than static HTML—was not serving some of my students well. A good number of them use a mobile phone, usually an iPhone or some other Android device, instead of a computer or tablet, which is how I envisioned students accessing my syllabi.

Since I wasn’t using a content management system, such as WordPress or Drupal, I couldn’t just install a plugin to make the site mobile ready. However, I was able to use Bootstrap to create a responsive design.

Over the last few days, I redesigned my academic site and my personal blog using the pre-compiled Bootstrap collection of CSS and Javascript files. As my dot-com site is all static HTML files served by Apache server-side-includes, it took about four hours to redesign every page and make it look good on four devices: desktop, notebook, tablet and smartphone.

My blog was a different matter. Since it’s powered by WordPress, I had to rewrite each template file to comply with Bootstrap. However, unlike the static site, I didn’t have to rewrite every page, such as the nearly 500 blog posts, because they’re all generated by WordPress. However, I had to add some functions to make the images and videos size properly.

Since I was doing all that work, I decided to tweak the site’s design. I moved the widgetized sidebar to the right, which is more like every other WordPress site on the web. I moved the navigation functions to a navbar that spans the width of the page. I also changed the fonts to Myriad Pro as the headline font, and an homage to Apple, and Runda as the body font. Redesigning each template file allowed me to finally add infinite scroll to the index and search pages.

What started as an attempt to make the site more accessible turned into a giant time suck, if you’ll pardon the expression. But unlike my many other time-consuming endeavors, I really like the results.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.