thephilgray logo

Software Studies Microsites

Create responsive sites from print handouts meant to educate policymakers about the value of encryption and software.

October 1st, 2016

  • Extract colors, images, and icons from PDFs and illustrator files
  • Edit and optimize images and icons for the web
  • Create responsive site templates
  • Write modular, well-organized SASS following the SMACSS methodology and using libraries like Susy and Modular Scale
  • Write minimal, progressive enhancements with jQuery
  • Use external libraries and customize to implement features like a full 50-state interactive SVG map with data
  • Test sites on a variety of browsers and devices and BrowserStack

Lessons Learned: I wanted the site designs to imitate the look and feel of the print designs as closely as possible while also being fully responsive. I learned responsive typography techniques to capture the essence of the print design on different screen sizes and when aspects of print design don't translate well onto the screen. Also, I learned the value of CSS class naming and module organization conventions.