Coding & Pedagogy:
 A Website Textbook

Designing and developing a website meant to function like a textbook.

Overview

During my return to school, I was granted the opportunity to work alongside Jeremy Sarachan - a professor at St. John Fisher College and one of the most intelligent people I've ever known. Professor Sarachan came to me with the idea of creating a book that would be available exclusively as a website. Recognizing the evolving landscape of digital media education, Professor Sarachan sought to collect chapters from educators around the country on how they have approached teaching coding within their programs. Having success developing an Interactive Media program at St. John Fisher that teaches coding in the context of outside disciplines such as marketing and game development, the goal here was to express the various ways in which coding pedagogy was approached throughout the country.

What I Did:

  • Web Design
  • Web Development
  • Graphic Design

Job Date: Winter 2018-19

Challenge

With the content being provided by a collection of sources, the goal was to create something that was ready for anything.

This would not be a book embedded into a site. This was meant to be a website that performs as closely to an actual textbook as possible which placed an importance on:

  • Readibility of text
  • Ease of Navigation
  • Accessibility for all readers

Since the book was to be focused on coding, the medium was appropriate as it allowed for code and media embeds that transform it into an interactive document. Also, it made the book a living document that would grow over time as more academics contributed to it.

My role in this project was to design and develop the website for Coding & Pedagogy. I was in charge of conceptualizing the entire site and, under the supervision of Professor Sarachan, developing the site to meet his functionality needs. Along the way, I was to develop graphics for the site (including icons), and once the content was provided by contributors, format all chapters.

With the content being provided by a collection of sources, the goal was to create something that was ready for anything. In this project, there was a lot of lead time for developing the site prior to the submission of articles, but given the school schedule, the time allotted to formatting the chapters was tight.

Process

Rationale

Since this project was primarily the focus of an Independent Study program with Professor Sarachan, I was obligated to check in often on my progress. This helped to guide the project and created an open avenue for immediate feedback on the work I submitted. Fortunately, my concepts matched with Professor Sarachan's, and in the end, only one round of revisions was needed on the design. With the design approved, the development centered on user-experience. Knowing that a majority of the readers of the text would be academics more used to reading paper texts, it was important to make the site unquestionably easy to manage. During the development process, usability testing was performed on a collection of older students at St. John Fisher to expose and repair ease of use issues.

Workflow

This project was broken down into three primary parts that were intended to be broken up over the three months contained in one academic semester:

  • Design the Website

    First, the website design was to be created. At this point, the book's contributors were still in the early stages of preparing their chapters, so we did not know much about what would be submitted. Ultimately, we prepared a design that accounted for various types of embedded content. The site was also designed with a paper white color scheme that was intended to be easy on the eyes without being too glaring.
  • Develop the Website

    Second, the website was to be developed. In this instance, I initially proposed a WordPress website to help manage the various chapters. However, we ultimately decided that a lightweight static website was the best way to exhibit my skills for the Independent Study course. For compatibility with all screen sizes, the site was developed as fully responsive and optimized for all platforms. Development of the website took about 3 weeks.
  • Format the Content

    Once the chapters were submitted by the various contributors, it was time to format the website. Most chapters were sent via Word or PDF document with citations, code snippets, and media files attached separately. My job was to take what was sent, convert it to HTML, and format it on the website.

Results

Our exhaustive efforts resulted in exactly what we set out to do: Build a website that could be easily read like a textbook. With authors from around the country, different views were represented, and a diverse series of topics discussed. After reading through the content, I was able to take a step back to take in the extent of what we’d accomplish and feel proud. I was very honored that Professor Sarachan chose to work on this project with me, and very thankful to all of the contributing authors for their insight.

In the summer of 2019, Professor Sarachan and I received word that our publication had been entered into the St. John Fisher digital publication archives where students will be able to access it and use it for research in the future.

"Sean is truly an ideal collaborator: always willing to help, offer ideas, and improve his already impressive efforts. His contributions have been invaluable." -Jeremy Sarachan

Web Design & Digital Marketing Services in Rochester, New York | Sean Patrick O'Leary