crankin is the nom de plume of Christopher Rankin, a web developer / designer / creative coder from Austin, Texas, with over 18 years of public sector and nonprofit experience working for organizations like KLRU, the UT Austin School of Architecture, the Texas Commission on the Arts, and the Austin Museum of Art.
I infrequently write about current interests — the intersection of art and technology, networks, public art, urban interventions, museums, animated GIFs — at getcrank.in/blog.
If you have a project or idea you'd like to discuss, please get in touch.
interface design, graphic design, HTML, CSS, jQuery, PHP, Wordpress
The Austin Museum Partnership is a consortium of Austin-area museums organized to promote collaboration and highlight the events and exhibits available across the city. The original organization website was based in Flash and hard to maintain and update by volunteers and the member organizations.
I redesigned the AMP website with the goals of both highlighting the member organizations and providing an easily readable monthly event calendar. I choose WordPress as the CMS because many of the members had previous experience with it and I could customize it enough to streamline the event creation and organization information editing process.
In 2014 I redesigned the site again, removing unnecessary pages and creating a responsive template so that users can locate museums and events from their phone on the go just as easily as they can from their desktop browser.
interface design, HTML, CSS, jQuery
Share the Buzz was a Whole Foods Market project that focused on educating store visitors and the community about the declining population of bees throughout North America and their importance to food production. I created a single-page site that incorporated a wide range of action steps to support bee education and colony maintenance from watching a video, to pinning an image to Pinterest, to researching the causes of the bees decreased population through Whole Foods’ scientific partners’ websites.
In order to extend user engagement with the site, I designed and coded some special interactive elements. When the page first loaded, the bees in the top section of the page would “fly” across the browser window and off screen. Also, when a user would hover over any of the bee illustrations, a buzzing bee sound loop would play until the user hovered off the image. While both interactions were minor, I think they resulted in site visitors staying on the page longer and potentially engaging with the material in more depth.
WordPress, HTML, CSS, jQuery, PHP
The Casa Montessori website was a pro bono design and development project for a small Austin school that did not previously have an online presence. The staff at Casa wanted to provide the parents of potential students information about the school, its particular educational approach, and the Montessori philosophy.
My partner and I decided to base the design of the site and the navigation on the trinomial cube, a basic material found in the primary Montessori classroom. Since this was the school’s first website, we assisted the staff in writing and editing content for the site. I customized and streamlined the site management by using WordPress and a few select plug-ins to simplify the administrative interface in order to make the content updating process less intimidating to the school’s self-admittedly non-technical staff.
Central Texas Gardener is one of KLRU-TV’s long-running local productions. The show’s website contains an archive of past episodes, gardening and plant resources, and a popular gardening blog maintained by show producer, Linda Lehmusvirta. Prior to the redesign, the website was showing its age. The site and blog ran on separate, outdated WordPress installs and the templates were designed to old standards making video clips and photos appear much too small when viewed on modern-day browsers.
The redesign process began with a content review to ensure that the information on the site was still appropriate and helpful. Working with the Interactive Director, the taxonomy was streamlined across the site into standardized categories and tags. During that process the blog and the site were merged into a single WordPress install and the various content types were integrated into the updated taxonomy. The new responsive site templates reinforce the relationships among topics and highlight the site’s photography and videos while providing the best experience possible for any browser or device — especially important since 50% of the site’s visitors use mobile devices or tablets.
An Eastside Education is a documentary project that tells the story of Austin’s Eastside Memorial High School’s struggles to maintain accountability standards. The seven-part video documentary series tells the story of one semester as teachers, students, parents, and administrators fight to prevent their school’s closure.
The video documentary is presented through a custom-built website which provides additional content — in-depth narrative copy, photos, infographics, and links to external resources — that provides additional context and background to the story.
The design and structure of the Eastside site was inspired by the NPR Planet Money Makes a T-Shirt site. Since the site wouldn’t be updated once it launched, I decided to use Jekyll, a static site generator, which would permit me to easily reuse code over each of the seven chapters of the story. The site was focused on tablet and desktop experience although all episodes are viewable and readable on phones. As the site is content rich with a large video and illustrated article on each page, providing users navigation clues to help read through each chapter and the site as a whole was a priority. After the page loads, the navigation is minimized at the bottom of the browser. As the user scrolls down, text instructions appear to show the available options. And the navigation slides into view when the user reachers the end of the chapter. The site gives the user an interactive storytelling experience providing the options of a traditional narrative path or a browsable, nonlinear experience.
interactive design, HTML, CSS, jQuery, Stacey CMS, Big Cartel
Mark Skateboards was a small skateboard company in Austin started by local skater and former high school principal, Mark Gobble. They focused on designing “limited-edition skateboard decks for the discriminating skater and collector.” The decks were hand silk-screened and manufactured from sustainable wood.
In order to maintain a consistent look for Mark Skateboards, the graphics and page layout for the website were designed by the the boards’ designer, Marc English. I worked with Marc English Design to develop the static page concepts into an interactive site experience based on standards-compliant HTML, CSS, and jQuery. Since the decks and shirts were only available online, the primary focus of the site was the store. In order to keep the site administration as straight-forward as possible, I decided to use the lightweight Stacey CMS instead of a more traditional but likely unnecessarily bloated system.
The store and shopping cart were managed through Big Cartel using their API. Using Big Cartel allowed me to completely customize and integrate the look of the store and allowed Mark Skateboards to manage their inventory and fulfillment needs using a straight-forward, web-based interface instead of needing to learn any code.
interface design, graphic design, HTML, CSS, jQuery
In 2011, I undertook a redesign of the UTSOA site since the current site was over 5 years old, the home-brewed CMS we used was limiting our options to expand the site, and the Flash-based navigation was restricting the ability of visitors to use the site on the device of their choice. The redesign was built using accessible code and based on the ideas of responsive web design so that the site could be used and viewed on the many browsers and devices utilized by the School’s audiences.
The visual design of the site was inspired by the UTSOA logo and the many interconnected layers of the School itself. Instead of organizing the page on a rigid grid, the redesign offered a greater visual interest, encouraged exploration, and allowed for a high degree of user interaction and customization. A more complete sense of the animation and interaction can be seen in these home page and interior page demos.
The redesign was not realized before I left employment at the School.
HTML, CSS, jQuery, 1140 CSS Grid
Built and launched in a weekend, the Fire Relief site was created to promote the benefit concert for the families and people who were affected by the wildfires in Central Texas during September 2011. Taking the graphics from the benefit poster designed by Marc English Design, I designed and coded a website with navigation and layout elements that mirrored the poster design and provided more detailed information about the damage caused by the fires and how to help. Using an early version of the 1140 CSS Grid framework allowed me to get the information online quickly with the confidence that it would be viewable across most browsers and devices.
WordPress, HTML, CSS, jQuery, PHP, Flicker API
True Fabrication Bicycles is an Austin-based hand-built custom bicycle shop. After five years in business, the three partners decided to update their website to better reflect their building experience and showcase their bicycles. They wanted to both target new business and be able highlight their bicycles during and after participating in national and regional conferences and competitions.
The single page site uses full-screen background images of True Fab bicycles for each section. The written content is designed to share the page with the large bicycle images. Other pages feature galleries of bicycles and bicycle parts that are incorporated into the site using the Flickr API. I chose to use WordPress as the CMS for the site because blogging is the main communication resource for True Fab partners. The templates are all custom built and coded and utilize custom post fields in order to provide easy editing access for both blogging and updating any of the static information on the site.
The web site of the University of Texas at Austin School of Architecture (UTSOA) serves the current students, faculty, and staff by providing information on the School’s eight program areas in addition to current news, calendar items, course listings, and related University information. The site provides program information and contacts for prospective students. Sections of the site are also used by alumni for school news, events, and career guidance.
I was hired in January 2005 to overhaul and redesign the School’s entire site. After interviewing representative members from each segment of the site’s audience, I developed the site structure and navigation scheme that would highlight the many parts of the School to the user in a quick glance.
In December 2007 I launched a small redesign that refreshed the colors of the original design and incorporated three satellite sites back into the main website. I also developed and deployed a simple content management system that gave staff and faculty the ability to edit pages, update their bios, and upload images. The system was developed in CakePHP and used TinyMCE for the user interface.
During my employment at UTSOA, I also designed and developed on online events calendar, managed the development of an online room and resource reservation system, and worked with a developer to create a portfolio system that could be used to highlight individual student work and provide a colleciton of images for a course-based online gallery.
After many successful years operating two trailers, Via 313 Pizza opened a new restaurant with an expanded menu. They worked with Marc English Design to redesign their logo and branding prior to opening their new Oak Hill restaurant. I worked with Marc and the Via 313 owners to redesign and update their website.
Marc English Design provided PDF mockups of the site and all Photoshop assets. Since each page has its own singular layout and imagery, I had to hand code each page individually — the only shared CSS across the site is the navigation box. I designed the phone and tablet versions based on the original mockups with a few performance-related changes. The mobile version has fewer assets per page, does not use background images, and only requires standard system fonts. While it may look different depending on the device or browser, the content — menus, location information, hours — is consistent across all versions of the site.
I decided to use Perch for content management as it allowed me to add editable content areas to the individual HTML pages instead of requiring a standardized page template. The Via 313 staff like the straightforward Perch CMS interface and can easily find the information they need to update.
interface design, graphic design, Photoshop, HTML, CSS, jQuery, Drupal
At Whole Foods Market, I was responsible for maintaining and updating the website. My main weekly responsibility was designing and updating the homepage with new marquee images that highlighted current contests, company news, and new content on the site. I worked with the marketing and content teams to design and develop special sections of the site to highlight new initiatives including the 2012 Thanksgiving and Holiday pages, the Share the Buzz site, and the announcement of new seafood regulations. I also worked with the social media team to create pages for Facebook, Instagram, and Pinterest contests.
During the Whole Foods website redesign in the summer of 2012, I participated in the development and design of the new homepage and site-wide navigation. I also worked with the team to update and move the site content and images from the original PHP-based pages into the custom Drupal installation.