Welcome to maxwell.fyi
For Your Information
My name is Max Starkenburg. I'm a web professional from the US, currently based in Bremerton, Washington Houston, Texas Rancagua, Chile Mexico City Washington, DC.
My work has focused on harnessing HTML, CSS, JavaScript, and graphics editors to create intuitive, accessible, and aesthetic interfaces for large- and small-scale websites. See some samples of my previous work.
While my academic background is in architecture, all of my professional career, including summer jobs beginning in 1999, has focused on web work. More details in my résumé.
Learn more about how I made this website in the colophon.
Where to find me
Some other places you can find me online:
Feel free to contact me using this form, or just writing to max@maxwell.fyi.
Work samples
![](/works/gw-study-spaces-desktop-03.png)
George Washington University: original website building and design
In my latest work, I've been involved the creation, redesign, and development of several Drupal-based web presences for George Washington University Libraries & Academic Innovation. These show some of what I've worked on at GW.
Academic Commons
Responding to a need to provide a central hub that connects students to the variety of available but disconnected academic services and resources, the Academic Commons was created.
In helping to build its web presence, I:
- mocked up multiple design possibilities
- wrote custom Drupal 8 theme code (including Sass stylesheets, JavaScript interface features, Twig templates and Drupal hooks in PHP for custom appearances and behaviors)
- created a custom Drupal module to support requirements in the admin interface
- researched, installed, and configured other Drupal 8 contributed modules for interface and content-editing needs
- configured Taxonomies, Content Types, and Views to ease future site maintenance
- conducted multiple rounds of QA testing and assisted with debugging
![The homepage was intended to provide an at-a-glance overview of the variety of services and resources available to students, with easy and direct points of entry to learn more.](/works/gw-ac-homepage-01.png)
![Fellowship discovery is guided by many filter and search possibilities designed to fit compactly above the result list while clearly communicating which filters have been applied.](/works/gw-ac-fellowships-01.png)
Study space finder
Allowing students to find study spaces all over GW campuses, our department built this website, using it as an opportunity to start getting our hands dirty with Drupal 8.
Given the complexity of features, data, interactivity, and other variables involved, I was proactive early on in marshaling requirements and wishlists from a variety of disparate stakeholders, including students, developers, content editors, and managers. My efforts provided groundwork for requirements specification, scope and sprint planning, database design and maintainability, and interface design, dramatically decreasing the number of unknowns that otherwise would have plagued implementation and delayed deadlines....
![A screenshot of the homepage, balancing the needs of university branding, filtering options that show variety without overwhelming, enough space information to want to click to see more, and the map of locations.](/works/gw-study-spaces-desktop-03.png)
![An example of the fuller set of information and relevant images and links one sees after clicking on the teaser of an individual space.](/works/gw-study-spaces-dialog-01.png)
... Besides leading the visual design, I:
- created functional mock-ups (some seen in image at right) to run usability testing on individual micro and macro aspects of the interface with students and other stakeholders
- designed and coded the interface to make sense at a variety of responsive sizes
- created original icons for quicker filtering
- integrated and customized JavaScript libraries for features like information dialogs, image carousels, and lightboxes
- used the Google Maps API to override default functionality as needed
- dipped my toes into AngularJS and PHP to fix issues
- ensured accessibility was written into the code
![The mobile view was strategically designed to emphasize the most important aspect of the site (the list of study spaces) while also providing easy ways to access all the other necessary features and ensure that pre-selected default options like campus weren't tucked away.](/works/gw-study-spaces-mobile-01.png)
![The design of the filtering interface was the subject of many usability tests to assure optimal decisions were made around the necessity of specific options and categories, their semantic clarity, their order, and their behavior.](/works/gw-study-spaces-filters-03.png)
![Conflicting needs and desires of students and other stakeholders were represented in mock-ups (some seen here) that could be used to verify their plausibility when presented with realistic interfaces showing different options.](/works/gw-study-spaces-mockups-03.png)
Library website modernization
In addition to writing CSS and JavaScript to bring the Drupal 7 site into line with the university's more modern and less crowded look-and-feel, I designed and coded new components to break up the text-heavy design of the old site (seen at left) and restore focus and ease of navigation to our most important and sought-after services via design elements that tested most successfully in the usability studies we ran.
The new design led to an increase in new catalog searches.
![The older design was very text-heavy and busy.](/works/gw-libsite-homepage-old-01.png)
![The new design returned focus to the essential search feature of the site.](/works/gw-libsite-homepage-new-02.png)
![](/works/floor-maps-04.png)
Interactive floor maps
At GW, I also created interactive floor maps (with SVG and JavaScript) to ease finding books by their call number.
Visit the maps
In addition to being able to mouse over the maps and have information about buildling features appear, the maps were built to allow for users to click a link next to the call number in the catalog and be directed to exactly where in the building their book is located.
![The interactivity of the maps extends beyond simple mouseovers to the ability for any catalog call number to be represented correctly in the maps' stacks.](/works/floor-maps-02.gif)
![](/works/oerpub1-thumb-01.gif)
Online textbook editor: examples of features
I made functional mock-ups of a web-based WYSIWYG editor (a WYSI-what?) from scratch, which guided the software development and were used for all usability studies (I'm proud to say that some subjects were surprised they weren't the real thing). Each component had multiple technical and UI "moving parts" to juggle (drag-and-drop, handling Range/Selection of contentEditable text, contextual help, menus for advanced options, "nudging" features, redundant workflow expectations, etc.). Below is a sample of some of the interfaces, each of which went through various iterations.
Math mini-editor
Displaying math on the web is tricky, let alone editing it. This widget incorporated the JavaScript built by the good folks at ASCIIMath, which converts a simple mathematical mark-up language to MathML. As the user writes ASCIIMath in an in-place miniature editor, the output display is produced in real time. A "cheat sheet" was built to show common encodings.
![The math mini-editor allows authors to see the results of their ASCIIMath mark-up as they type. A "cheat sheet" helps with understanding or remembering the ASCIIMath mark-up.](/works/math-animation.gif)
Accessible and attributed images
An important aspect of the editor was nudging authors to include text for the benefit of users who rely on screen readers, as well as to provide attribution for the image's creator. Both of these aspects were tightly woven into the workflow.
![Animation of the image editor](/works/image-animation.gif)
Textbook elements that talk to each other
A key question of the editor was how to add semantic elements like Examples, Exercises, Notes, Equations, etc., that would not just share a respective format, but provide features like automated numbering, automated index generation, answer sets, and collated glossaries. These animations show three different ways an author could add a Definition to their text. Subtleties of their functionality were the subject of multiple usability studies. Read a report of one here (PDF).
![After adding Definitions to the text, they could automatically link to an entry in the Glossary.](/works/definition-animation-merged.gif)
![](/works/oerpub2-thumb-09.png)
![](/works/cnx-thumb-04.png)
Connexions: educational repository and authoring environment
I was the lead visual designer at Connexions (now OpenStax CNX) for over 10 years. Aside from setting general graphic guidelines, I worked on mocking up ideas for every new feature that involved the user interface.
I: Connexions homepage (the early years)
For the longest time, the homepage of Connexions, a repository and authoring environment of open educational resources, didn't alter in style from the default CMS underlying its architecture. Some changes in colors spruced things up a bit, but didn't resolve the problem of being too reliant on text and subject to peculiarities of the CMS....
![The original design was little more than the default styling of the underlying CMS.](/works/cnx-plone-02.png)
![Some colors and other basic styling gave it some new life, but not enough.](/works/cnx-pre2007-01.png)
II: Redesign iterations
... When resources could be put to use for a substantial redesign, usability expert Manpreet Kaur and I worked on several drafts, using the homepage as a base while being careful to take into consideration how any design decisions would affect the rest of the site's navigation....
![This design featured several of the new elements desired (ways to jump directly into the content, a shorter introductory text), but had balance issues.](/works/cnx-idea-11.png)
![This design attempted a more clean and neutral look, but in the end had the same flatness issues that the default CMS style had.](/works/cnx-idea-09.png)
![While this design had better balance in terms of focusing where to look, the "Find Content" section was overwhelming, and the introductory text felt oddly placed.](/works/cnx-idea-12.png)
![While this design solved some of the issues of the previous iteration, it created others.](/works/cnx-idea-08.png)
III: The final design
... The redesigned homepage gave stronger visual clues with regard to where to focus the eyes and what the various elements represented. Since Connexions's software was also open source, the new design intentionally stayed closed to the underlying architecture, leaving it flexible for further adaption and maintenance. (Note: OpenStax CNX has since undergone an entirely different design to reflect its new name, direction, and architecture.)
![The final design best balanced the desired features, given the constraints of the task.](/works/cnx-home-2007-01.png)
Iterative ideas
How to add options on a webpage to download its PDF, download its ZIP, add it to various bookmarks, send it to the printer, order a printed copy, rate it, e-mail its authors, edit it, all for two levels of content (the current page and its container)? All while making such options compact, easy to access and understand, and flexible for future features? These are just a small fraction of the ideas mocked up to tackle such a challenge.
![Icons plus a "more" link for each level of content.](/works/ca-03.png)
![All actions for both levels behind a single link.](/works/ca-04.png)
![Printed copy action pulled outside as a button, and e-mail icons moved next to author names.](/works/ca-09.png)
![A different styling, with the printed copy action as a shopping cart icon.](/works/ca-11.png)
![Actions in a flyout from the breadcrumbs level.](/works/ca-19.png)
![Actions at the top, with individual flyouts.](/works/ca-22.png)
![Actions located ambiguously between the two levels of content.](/works/ca-25.png)
![Actions between the two levels of content, with "plus" icons to indicate more options under each icon.](/works/ca-29.png)
![Experimenting with how to refer to the different levels of content within the dropdown, as well as a new printed copy button style.](/works/ca-31.png)
![Another way of referring to the different levels of content within the dropdown.](/works/ca-34.png)
![Moving more actions into a single "Add to ..." dropdown in order to narrow the row, as well as a different styling for the dropdown.](/works/ca-40.png)
![Another experiment with how to refer to different levels of content within the dropdown.](/works/ca-44.png)
![Contextual help to assist with defining what is meant by the two levels of content.](/works/ca-53.png)
!["Favorites" as a top-level menu item.](/works/ca-57.png)
![The final agreed-upon design, as shown before one adds content to one's Favorites.](/works/ca-70.png)
![The final agreed-upon design, as shown after one adds content to one's Favorites.](/works/ca-72.png)
Print-on-demand covers
The brief: to design a cover that could be generic enough for any type of content, be flexible enough to allow long titles and long lists of authors, be branded to Connexions, and be visually interesting. Like most of my other work at Connexions, I played with a variety of layouts before a final choice was decided by a larger team with my input.
![Many drafts were made for a design intended to be flexible for varied text while aesthetically pleasing.](/works/book-covers-03.png)
![](/works/twb-02.png)
Re-skinnings
Much of my work has focused on completely changing the look and feel of a website while leaving the underlying architecture relatively intact.
Rice archive re-do
Rice's Digital Scholarship Archive was using the default DSpace installation with some basic styling. My upgrades not only included a rebranding, but also several structural changes via XSLT to improve the user experience by making the site more intuitive to navigate....
![How Rice's Digital Scholarship archive looked with some minimal styling and the basic DSpace installation.](/works/dspace-dspace-home-02.png)
![Aside from changes to color and branding, I used XSLT stylesheet changes to reposition elements and remove references to the internal technology, to create a more intuitive user experience.](/works/dspace-rice-home-02.png)
... In addition to primary navigation being in a problematic location, there were many references to the underlying architecture (DSpace), as well as navigational elements relying solely on nomenclature. I sought to improve these issues with increased contextual clues and to make better use of "above the fold" vertical space.
![Each layer into the site required more adjustments and features to take into account.](/works/dspace-dspace-ece-03.png)
![Previously, the local Search box was lost below the fold, and it wasn't clear what aspect of the site the various Browse options referred to.](/works/dspace-rice-ece-02.png)
Custom styles for co-branding
These examples show how I altered, entirely with CSS, pages in the Connexions repository so that their styling matched the websites of external groups....
![A screenshot of the project's homepage, showing their style.](/works/gatech-site-01.png)
![This is how the external project's text displayed using the basic/default style of Connexions.](/works/gatech-cnx-02.png)
![This is how the external project's text displayed using the basic/default style of Connexions.](/works/gatech-gatech-01.png)
.... This separation of styling from the semantics of the content was one aspect of Connexions's ability to output in multiple formats, including PDFs, EPUBs (whose reformatting I worked on), mobile (for which I created a pared-down stylesheet) and print-on-demand books (whose covers I designed)....
![A screenshot of the project's homepage, showing their style.](/works/galileo-site-01.png)
![This is how the external project's text displayed using the basic/default style of Connexions.](/works/galileo-cnx-03.png)
![The project in Connexions, but using a custom stylesheet, with no changes to the HTML mark-up necessary.](/works/galileo-galileo-03.png)
... While in many cases maintaining these stylesheets proved prohibitive, they were frequently a contributing factor in adopting usage of the Connexions repository.
![This is how the organization's own website looked at the time.](/works/brit-site-01.png)
![This is how the organization's content was displayed in Connexions using the then default Connexions style.](/works/brit-cnx-03.png)
![Using only CSS, their content in Connexions could be displayed to match the styling of their website, allowing for linking between their website and our publishing platform, with a seamless continuation of look-and-feel.](/works/brit-brit-01.png)
Connexions custom styles
In addition to matching external groups' styles, I also created stylesheets just for user preference or internal use. The biggest challenge they presented was making them flexible enough to work with a great variety of user-entered content. No dimensions of content could be taken for granted.
![This is how the content displayed using the basic/default style of Connexions.](/works/music-cnx-03.png)
![An entirely different styling from the default, intended to highlight the music content on the site.](/works/music-music-01.png)
![A stylesheet that could be applied to content for young children.](/works/kid-01.png)
![](/works/oerpub-wp-01.png)
Static websites
A few of the examples of small-scale basic websites, some completely from scratch, I have designed over the years.
OERPUB homepage
The WYSIWYG editor project I worked on needed a front page to show off what it was about. There was an existing WordPress site, but it was the default style and lacked the right structure for new visitors and potential collaborators. With installation help from developer Marvin Reimer, in a few days I did a complete rehaul of the style, designed a new logo, installed new plug-ins, and populated the content, giving the site new life.
![The makeover incorporated various point of entry, and a new design based on the original logo I created, while incorporating outside photography and WordPress plug-ins for a truly collaborative effort.](/works/oerpub-wp-01.png)
Center for Technology in Teaching & Learning
CTTL, a Rice University center that designs interactive games for young students, sought to give their website new life and to meet Rice's guidelines for branding of its sub-pages, while also maintaining a distinct look and feel. The redesign, done in collaboration with Francisco Perez, started with a card sorting session, and ended with training the staff to update the content we had populated into the new CMS.
![The site before the redesign](/works/cttl-old-home-01.png)
![The site before the redesign](/works/cttl-home-01.png)
"Rejected" designs
The site design went through several iterations before arriving at its final design.
![A rejected design](/works/cttl-iteration-06.png)
![A rejected design](/works/cttl-iteration-01.png)
![A rejected design](/works/cttl-iteration-02.png)
![A rejected design](/works/cttl-iteration-03.png)
![A rejected design](/works/cttl-iteration-04.png)
![A rejected design (though nearly there)](/works/cttl-iteration-05.png)
Connexions Consortium
Connexions, my primary employer, needed a simple yet attractive website for its associated consortium members and prospective members, one that could grow as needed without redesign. I designed and built the site in roughly a week, with a simple backend for logging in provided by Ross Reedstrom.
![The goal was to make a simple and clean website, that would be flexible enough for changes as needed. I created the original design and put the site together in about a week.](/works/consortium-01.png)
Rice University Press
During the years when Rice University Press made a revival, I was tasked with designing their website. I sought to make an elegant design that was in keeping with Rice's branding while remaining distinctive.
![The design took cues from Rice University's branding while also setting itself apart.](/works/rup-01.png)
![The general design was also meant to reflect the covers of some of its publications.](/works/rup-about-01.png)
![](/works/rainbow-shelves-06.jpg)
Book-related projects (coding for fun and non-profit)
I like books. A lot. I like to browse them, rearrange them (that rainbow of shelves used to be my living room), hunt them down, buy them, catalog them. Sometimes I even read them. I've also done some book-related coding, mostly in the form of user scripts (what are those?) for LibraryThing, a cataloging site for book lovers. These scripts help the site's users get things done much more efficiently. (See all my scripts here.)
Tagging autocomplete
This script allowed users to select their previously used tags from a dropdown, a long-requested feature to make tagging more internally consistent. It's one of my proudest scripts, because not only did it serve as proof-of-concept for later incorporation into the site for all users, it also required learning about things I hadn't had much experience with up to that point, such as XMLHttpRequest/Ajax, localStorage, jQueryUI's autocomplete, regular expressions, and performance testing.
![You could choose whether the tags would sort in alphabetical order or by frequency of use, and the browser would remember your choice.](/works/lt-autocomplete-01.png)
Custom author roles
LibraryThing has a default set of roles you can choose from when cataloging your books (author, illustrator, editor, etc.). But if you happen to frequently use a role that's not on the default list, it's a pain to select "Other..." and type it in each time. This script allows one to change which roles appear by default. Since at the time LibraryThing wasn't using jQuery, I took many of the scripts as an opportunity to beef up my native JavaScript chops.
![This is how the dropdown appears to all users, no matter how many times you've added one of those "Other..." types.](/works/lt-roles-default-02.png)
![Somebody who is, say, cataloging their comic book collection can now change the list to look like this.](/works/lt-roles-custom-01.png)
Reply preview
LibraryThing's social forums have a built-in mechanism for quickly linking to previous posts, but when you click on them, you tend to lose your place. This script makes a small copy of that referred message and reproduces it in a tooltip right where you are.
![If users hover over the link that goes back to a previous message, that previous message gets duplicated in place.](/works/lt-reply-preview-01.png)
Amazon Wishlist Exporter
Not all of my scripts are for LibraryThing. This one I made after some frustration with Amazon removing the names of some items from my Wishlists. Now I can just click on the new "Export" button and quickly save a local copy of the list.
![This script adds a new button to Amazon Wishlists to export the list as a TSV file.](/works/amazon-wishlist-export-01.png)
Shell/gawk scripting
Nor are all of my scripts user scripts. My first shell script was used to add up how much money I had wasted spent on books over the years, and display a histogram of the distribution. You can see the full script on GitHub.
![Thank goodness so many were found in the clearance section (I love Half Price Books).](/works/lt-costs-02.png)
Résumé
What I can do for you:
Translate your conceptual goals into digital deliverables by building intuitive interfaces with clean, robust, accessible code and aesthetic visuals.
I can be counted on to bring my:
- Strong advocacy of user needs.
- Collaborative, detail-oriented, and holistic approach to problem-solving.
- Two decades harnessing the capabilities of HTML, CSS, JS and related web technologies (four years in Drupal). Whether the job calls for a Bash script, an Illustrator design, or anything in between, I will proactively seek out the best solution to help make your product successful.
Personal portfolio: https://maxwell.fyi
LinkedIn: /in/max-s | StackOverflow: /users/5285945 | GitHub: /maxstarkenburg
Work Experience
George Washington University
Web Designer | Libraries and Academic Innovation (GWLAI) · 11/2016–present
- Led or guided all steps of the lifecycle of GWLAI's four Drupal 7/8/9 websites, focusing on enabling content editors to promote academic resources while reducing development bottlenecks, unknowns, and costly retrofitting, by:
- Building interactive and responsive mock-ups, based on participation in requirements gathering and project scoping, for usability testing and stakeholder feedback
- Configuring sites and evaluating Drupal contrib modules to support user stories
- Writing custom D8/9 themes and modules using CSS/Sass, Twig, JS/jQuery, 3rd-party libraries and APIs, and PHP development, reviewing all work for conformance to WCAG
- Reviewing code written by the senior web developer, managing regression testing, and helping to streamline workflows for Git, Composer, and config management
- Maintaining sites with Drush and custom Bash scripts, and consulting on server migrations
- Built SVG floor maps made interactive with JS to help users find a book on the physical shelves by linking from catalog results to highlight the book's location on the maps
- Collaborated with colleagues across the organization to meet their content-creation needs, consulting on a11y best practices, graphic design, and CSS/JS incorporation in their projects
- Taught workshops for students, staff, and faculty on Adobe Illustrator and HTML/CSS
OERPUB (publishing initiative for open educational resources)
Interaction Designer · 12/2011–04/2014
- Scripted high-fidelity and functional mock-ups from scratch for an online WYSIWYG textbook editor, quantifying the relative success of the editors interactive features via multiple usability studies using the mock-ups themselves
- Created original open-source vector-based icon set, designed logo, and made plug-in and theme customizations for the initiative's WordPress site
Rice University
Designer and XSLT Developer | Digital Scholarship Services · 11/2010–04/2011
- Customized the university’s digital scholarship repository in DSpace using XSLT to provide seamless branding and intuitive navigational access to thousands of research items
- Fixed XSLT errors and added requested features to the output of 500 XML documents
Web/Graphic Designer | Connexions (now OpenStax CNX) · 01/2001–04/2011
- Led visual design on an open educational repository and authoring environment of over 18,000 pages, 2,000 users, and 1.6 million monthly visitors
- Iterated over design ideas (2,200 mock-ups in total) as needed by the team for new features such as search/browse interface, social media plug-ins, co-branding designs, user profile pages, authoring interface, homepage redesign, and tag editing/display
- Assured high quality of software by conducting thorough tests each release cycle
Education
Rice University · Houston, Texas
Bachelor of Arts · Architectural Studies · 2003
Additional Experience and Info
- Conferences attended: DrupalCon North America 2018-2021; Drupal GovCon 2018-2020; BADCamp 2020; AccessU 2019; regularly attend DC-area Drupal Meetups
- Courses taken: Half-day and full-day trainings on ES6, React, PHP programming, and Drupal module development (Debug Academy); Composer (DrupalEasy); Drupal migrations (Agaric); Section 508 and WCAG 2.1 (Knowbility)
- Language: Upper intermediate proficiency in Spanish, both written and oral (ILR 3, CERF B2)
- Cross-cultural experience: 2 years residency with remote work in Chile and Mexico (2015-16)
Colophon
The making of
I used Jekyll and few other Ruby gems to be able to make the site bilingual without code duplication (I used to maintain the site en español también), write the CSS in Sass, and keep around old designs of this site with ease (see version 1, you're on version 2, see version 3). The code is version controlled in Git, usually written from an Ubuntu VirtualBox, pushed to the origin repo in BitBucket for safe-keeping, and pushed to another remote repo on my web host where a post-receive hook in Bash builds the generated HTML and other assets. Professional education and efforts in the realm of web accessibility, mostly after originally building out the site, and my attempts to remediate its numerous issues since (still a work in progress), have given me a newfound appreciation of what a costly and misguided notion it is to try to retrofit a11y ex post facto. I've tried to ensure responsive styling with each design, and had fun in some past iterations with animated SVGs and CSS.
Except where noted here in the colophon and in a few code comments, everything was coded by yours truly from scratch.
Under the hood
In addition to some JavaScript from jQuery, Velocity.js, and Bootstrap (for its scrollspy functionality), this site configures Magnific Popups and Colorbox for the lightboxes, uses the Raleway typeface (hosted on Google Fonts), Formspree to create a non-PHP contact form, Let's Encrypt for the SSL certificate, and some icons by Open Iconic and Icon 54. I used ScreenToGif to create and gifsicle to optimize the animations of work samples. Background image of leaf originally by Eric Gaba, licensed under CC-BY-SA 3.0 Unported. The following tools were also of great help: Eric Meyer's Color Blender (finds midpoints between hex colors), regex101 (regular expression tester and beautiful headache preventer), and Can I Use? for browser compatibility info.
Let's get in touch
Have a question, concern, job for me? Just wanna say hi? Go for it ...
![loading](/images/loading.gif)