Among the Chosen Website Version 15
Website Version 15 was developed from Website Version 14.2 in May of 2019. This page constitutes a formal set of design notes and overview of the site structure, written 2019.05.17. The traditional build log is on the next page.
Preface
As ATC had specific design requirements not fulfilled by off-the-shelf solutions, a custom WordPress theme was created in 2013 and developed extensively over a number of revisions, reaching a stable design with all requirements satisfied in May of 2019. Among the Chosen Website Version 15 is a display framework for a multi-book multi-chapter webcomic and accompanying supplemental information. The website design is responsive and looks decent (albeit probably difficult to read) on modern smartphones. Primary design inspirations are The Wider Image circa 2013, and an older version of Politico.
Versions 1 through 10 of the ATC website used Movable Type version 3 (and later 4) as the content management system (CMS). All site content was transitioned from MT to WordPress in 2013. The final ATC website descends from that design. Site content is in some cases as old as 16 years, though all image content has been replaced. All comic content has been replaced twice – the original 600x pages were upgraded to 720x and eventually to 780x. Comic page width is the defining element of the site information design, and sets the minimum width on the responsive elements of the design – 600 pixels, the original width of comic pages.
Keyboard Shortcuts
A defining feature of the ATC website is how it utilizes keyboard shortcuts. A modal dialogue detailing the keys and their functions can be opened with ? or by pressing the keyboard icon in the footer menu, and closed by pressing the esc key or by clicking anywhere on the screen while the modal dialogue is open.
Situational Keys
- ← k p Previous – Previous comic page, comic chapter, blog post, archive page (blog, cast, glossary, relational tag, tag archive), cast member, glossary topic.
- → j n Next – Next comic page, comic chapter, blog post, archive page (blog, cast, glossary, relational tag, tag archive), cast member, glossary topic.
- a Archive – Links to the Book index in Chapter listings, the Chapter index on comic pages, the Cast index when viewing a Cast Member profile or Role or Affiliation taxonomy archive, and the Glossary when viewing a Glossary Topic or Topic taxonomy archive. Also links to the root index of the Blog in blog, yearly, and category archives. Links to the parent entry of attachment pages.
Global Keys
- f First Comic Page – Observer Effect -1-.
- l Last Comic Page – Fire -40-.
- h Home – The root index page.
- r Random Comic Page – A random page from the Featured list.
- ? Toggle Modal – Opens or closes the modal dialogue. The dialogue can also be opened by pressing the keyboard icon in the footer menu.
- esc Close Modal – Closes the modal dialogue. This can also be done by clicking anywhere on the screen while it’s open.
Site Structure
The Front Page is a custom page template that pulls content from Comic Pages, Cast Members, Glossary, and Blog. In version 15 the front page displays its own text for the first time, in the form of the “ATC was” text.
The Blog is the only part of the site that behaves like a standard WordPress install. It is the only part of the site to use the Categories taxonomy. Support for the default Tags taxonomy has been added to other post types.
Comic Covers use the Installment taxonomy, Page Attributes to control presentation order, a Previous Page and Next Page override to direct previous/next to specific pages, the default Tags taxonomy, and a Chapter Data box containing a Production Line and Elevator Pitch. Those two bits are used in the Installment taxonomy archives. Over time it was decided that while clicking through to a cover and then reading the next page in sequence made visual sense, slamming into a cover while reading through the story was visually jarring, so Comic Pages are designed to skip over Comic Covers, while Comic Covers are designed to flow from Book Cover to Chapter Cover to Comic Page seamlessly. You don’t see Comic Covers outside of Installment listings unless you want to.
Comic Pages use the Installment taxonomy, Page Attributes to favor presentation order over production order, a Previous Page and Next Page override to work around huge gaps in chronological production, the default Tags taxonomy, and the Relational Tags taxonomy. The Relational Tags taxonomy is also used by Cast Members and Glossary Topics; if there’s a matching Cast Member or Glossary Topic a synopsis and link to the relevant entry is displayed on each Comic Page. This allows for easy access to supplemental information – a reader can quickly get to any appearance of a character or thing that interests them. Support for Page Attributes was added late in development and is only used in a few areas, as using it for practical previous/next paging through the comic came with a visible performance hit.
Cast Members are sorted via two different taxonomies – they use a Roles taxonomy to determine their relative visibility in the story, and an Affiliation taxonomy to define their allegiance. The custom post type includes support for default Tags as well as the Relational Tags taxonomy and Page Attributes, which augment a custom Sort Term to list cast members alphabetically by their family names. Each Cast Member is assigned a single Relational Tag, which is used to associate their bio with all Comic Pages they appear in. This is also used to determine the First Appearance of the cast member, as well as a list of recent appearances. For ease of navigation, Cast Member pages include a listing of all other members of their Affiliation. The post type has unique image requirements. In addition to the usual Featured Image, Multiple Post Thumbnails was used to add support for a Second Image. Some posts use these to show two views of a character over time; there’s also a Cast Portrait image type for large images, and a Cast Portrait Thumbnail for a square-cropped closeup of that image. This allows for some variations in presentation – for example, Jason uses a Cast Portrait and Featured Image, while Raven makes use of all image types. Jesse Baris is an example of most of the cast, in that her entry uses a single Featured Image.
Glossary Topics contain a wealth of supplemental information and are sorted via the Topics taxonomy. They make use of system Tags, the Relational Tags taxonomy, Page Attributes, and a custom Sort Term. While the Cast is presented flat, the Glossary makes use of page parents to position some entries as children of others – for example Compartment A1 is a child of the entry for the Daedalus, and contains a link back to that entry, while the entry for the Daedalus contains a listing of child entries – the compartments that Transitional Voices takes place in. Topics use a single Featured Image and make use of Post Formats – there are Standard posts, Galleries, and Images, and there’s special listing and archive code for Topics that are Galleries or Images. There is support for a Second Image in the style of Cast Members, though no entry uses it. Topics of post format Gallery are rendered with the phone-friendly Lightslider. If Javascript is turned off, the Gallery is hidden and the Featured Image is shown instead. All Glossary Topics with a Relational Tag that matches a Comic Page have a First Appearance and a list of Recent Appearances shown as part of the entry page. As with Cast Members, it’s possible to quickly find a specific topic and proceed to find every appearance of it in the comic. All Galleries are tagged as such to make them easier to find. This allows for quick access to the Banshee and the QAR for presentation purposes.
Some Comic Pages and Blog Posts have comments; use of this feature fell off precipitously over the years and development was eventually suspended indefinitely.
Aside from the front page, Pages are pretty standard. Candy templates are an exception; they’ve been modified slightly to accommodate their content and to allow navigation back to their page parent.
Site navigation evolved over time to the current footer menu, which reached its final form in Website Version 15. The purpose of the footer menu is to make the comic and supplementary material as easy to access as possible – any comic page or cast member can be reached in two clicks, as can any Glossary Topic if you look for them via Topic instead of the root index (which is five pages deep).
The site is designed to work with Javascript, and the design accommodates its absence – it’s still readable, and navigable, if Javascript is turned off.
Trackers were removed and HTTPS was implemented with V15. There are no ads; the site loads no external resources. Everything is served locally.
WordPress
In addition to the custom post types and taxonomies discussed above, the site was constructed with the help of a number of theme functions, some of them quite excessive. There are a lot of snippets of PHP that disable undesired functions such as srcset and the medium_large image size, or that change the sort order of archive templates, and these are very much special-use to-taste things that some webcomic sites might benefit from but that most ultimately won’t have a need for. The big any-site-will-benefit-from-this function is also the easiest to document here – the addition of add_filter('jpeg_quality', function($arg){return 98;}); to functions.php followed by an image rebuild greatly increased the overall visual quality of the site. Comic pages are displayed using their native (un-recompressed) size, but everything else – glossary entries, cast members, supplemental images in blog posts – is subject to WordPress image quality, which was dialed down by default in version 4.4.
Development was made substantially easier with the use of Better Search Replace (to transition content to https and to fix a number of very consistent URL issues), WP Link Status (which can check custom post type content), and Admin Columns. Habitual double-spacing, which WordPress preserves by default, was removed with Remove Double Space.
Design for Static HTML
Experimentation with WordPress plugins that generate static websites was conducted in February of 2019, with an eye towards using one to finalize the site. The experiment was successful, and revealed a number of design issues that are addressed in Website Version 15.
To retain a dynamic feel, Javascript is used to include a random line of a file, or a random file from a subdirectory, in four areas of the site: the random page link in the footer, the random comic on the front page, and the random cast and glossary entries on the front page. The random content is curated from Comic Pages with the featured tag, Cast Member entries with 16×9 Cast Portraits, and a subset of Glossary content of post type Image or Gallery. Combined with a snip of Javascript to echo the current year in the footer, these design choices give the site a semi-randomness that would otherwise only be possible via direct access to the database or PHP includes. Galleries and the front page use a Javascript fade to paper over initial page rendering issues that are visible on the development platform, a 2011 MacBook Pro.
The Javascript used to generate the random comic page on the front page of the site overrides existing HTML – the format will be retained even if Javascript is disabled. Other dynamic elements gracefully disappear.