PBS Learning Media

Responsive Design, Front-end development (PBS, )

A 
        screenshot from PBS Learning Media

I built the first iteration of the home page for this video learning portal.

PBS LearningMedia gives teachers direct access to thousands of classroom-ready, curriculum-targeted digital resources, such as videos, audio, documents, and in-depth lesson plans.

Succinctly described as 'a YouTube for education' by the product manager, this design had been created over 12 months of revisions by the UX designer, then the UI designer, until it finally reached my desk.

The site is a Django application, so I started by building full HTML pages for the two variations using HTML5, Bootstrap, LESS, BEM notation and OOCSS concepts. I added minimal JavaScript (enough to make the few necessary JS functions work) and selected the Owl Slider for the carousel. At this point, I made sure that progressive enhancement was used throughout.

Particular attention was given to the different navigation types, since they varied significantly at different breakpoints, and did not neatly fit with any standard Bootstrap components.

Once the pages were built, they were handed to an offshore developer, who broke them down into Django templates, at which point they returned to me for finessing, since they now used real data rather than dummy text and images. Several further rounds of revisions ensued, instigated by both the UI and UX designers, and myself, based on our findings as the pages were built.

While this was going on, other parts of the site were being built by local and offshore front-end developers. I left PBS in April 2014, and the new site launched in August of the same year. I couldn't say how much of my code is used elsewhere in the site, but at the time of writing it makes up significant portions of the home pages and site-wide navigation.

Contact Me

Ask me a question via one of the following social networks: