Site Design & Technology
Viewing
For optimal viewing, use a wide-open browser window on a large PC monitor with the Contents pane closed. Each page is fully responsive: text and graphics adjust automatically to fit the screen when resized or zoomed. Google Chrome is recommended, though Microsoft Edge performs surprisingly well. The site includes icon-based touch controls for seamless navigation on both mobile and PC, delivering identical content across all devices including touchpads.
Contents pane shown (PC).
Contents pane hidden (PC).
The mobile version’s Contents page is opened via the familiar “hamburger” menu at upper right.
See below for instructions on how to use all the website controls.
Technology
The site is hosted on a locked-down GoDaddy.com Linux server with 50 GB of allocated space. As of January 2025, approximately 13.3 GB is in use. The software is developed using MadCap® Software’s Flare authoring tool, which provides robust project management capabilities for website development and automates labor-intensive tasks, such as menu creation and link integrity verification.
Custom JavaScript and CSS media sections have been implemented to optimize display and functionality across PCs, tablets, and mobile devices, enhancing both accessibility and overall usability.
To improve load speeds for users worldwide, the site is replicated on multiple servers across the globe (“load balanced”). This ensures consistent performance in locations such as Tokyo, Brisbane, and Paris, comparable to that in the United States. As always, a better experience can be achieved with a high-performance graphics card, ample RAM, and strong Internet connectivity.
Structure
The site focuses on exploring “Hans Phaall,” Pym, and “The Man That Was Used Up.” Topic pages for each hoax are therefore organized into website folders, with each folder containing:
- a description of the reading text
- subfolders for source texts such as manuscripts and first printings
- critical surveys of scholarship plus commentary
- additional sources referenced by Poe
Readers are encouraged to begin with the reading text before exploring the sources and criticism. Folders for Criticism and Literary Theory are currently under development.
Sources
Great care has been taken to locate and provide the exact source materials referenced by Poe in each hoax and other texts. For convenient browsing, these sources are divided into web pages and PDFs. While navigating between web pages is seamless, PDF navigation is limited by Adobe’s design.
Readers are encouraged to examine the source texts and draw their own conclusions—no intermediary interpreter is necessary. In fact, Poe deliberately crafted his hoaxes in a way that requires readers to investigate his sources to fully appreciate the deception.
Where applicable, links to PDFs are embedded within the text. For instance, in “Autography,” Poe references numerous lesser-known and difficult-to-find works, such as those by Richard Penn Smith.
Try searching for an author, or select
to see the Richard Penn Smith example.
Design
Designing is not a profession but an attitude.
— László Moholy-Nagy
What Would Poe Do?
This website is built along the lines that I imagine Poe would have followed, arranged according to his spare and exacting aesthetic. We know that his homes were furnished tastefully, but were also just right in appearance. He would have saved and hunted for bargains, but never settled for cheapness.
His proposed magazine would also be executed perfectly:
“The Stylus” will include about one hundred royal octavo pages, in single column, per month; forming two thick volumes per year. In its mechanical appearance — in its typography, paper and binding — it will far surpass all American journals of its kind. Engravings, when used, will be in the highest style of Art, but are promised only in obvious illustration of the text, and in strict keeping with the Magazine character.
A contemporary Edgar Allan Poe with access to website-building software would be a powerful force on today’s ‘net. He would explore every software trick he could, and push hard to develop his jeu d’esprits even further than a printed page could allow. I have decided not to try to replicate the dizzying display of what the hoaxes actually DO within the confines of this site. I would fall flat on my face trying to imitate this master’s inter-dimensional swaps by using CSS and JavaScript to perform a reification/recreation of the mechanism. Not even a CGI developer with an unlimited budget could replicate the moves Poe makes inside your imagination. Instead, I will try the explanatory approach, give you all the resources I can, and hope to help you believe just enough to catch the magic of The Bouleversement as I have.
Text
The fonts used here hint at quaintness, but do not scream it. Edgar Poe does not live in a “quaint” time, any more than you do. He lives out his life as it comes, just as you or I. Adobe Gaultier is used for body text because of its legibility and character; headings are in Adobe Pinot Grigio Medium. Textual tints and shadings are meant to help integrate page elements, as extrapolations of the home page portrait tone, determined using a pixel color grabber and interpolation from the specifications at colorhexa.com . Secondary navigation controls and indicators are “grayed out” to fade into the design background.
The body text color is a pure black, #000, to better simulate the starkness of black ink on a virgin white, #fff ,“page.” This would matter to Poe, and I believe he would have made this choice of digital ink.
All textual decorations and special effects are formed with CSS. In some cases, HTML special characters, which are always crisp and can be colored, styled, and resized easily, are used in place of images. For example, the ✑ (pen nib, an homage to The Stylus) at the bottom of this page is specified by entering ✑ in HTML. We can use the extended HTML character ⅓ (vulgar fraction one third) to write “one picul (133 ⅓ lbs.)” instead of “one picul (133 1/3 lbs.),” which jangles the line spacing. This too would matter (very much!) to Poe.
Images
Most but not all graphic images used are open source. Copyrighted images such as the home page portrait and manuscripts are under license (usually to a library, such as NYPL or The Morgan) and may not be downloaded. License information, wherever applicable and available, is given within the image caption.
All PDFs have been enhanced and sharpened, and their file sizes reduced as much as possible. However, they remain large and may load slowly, especially on mobile devices. The PDFs are all in the public domain, and may be re-distributed freely. PDF images provided courtesy of the American Antiquarian Society are not copyrighted, and in some cases have been digitally enhanced for clarity.
The “Voodoo in Harlem” video shown in “Racism in Pym”
is downloadable from Creative Commons.
Page Layout
Wide white margins create a “phat” look. Poe could not have afforded this extravagant use of paper, but we can do it with a simple .body-container command. A prominent 100% search bar subliminally encourages use but also unites the screen “halves” on PC. Online typography fulfills the typographer’s dream of the infinite column, unwavering inches and inches as far as the thumb could scroll.
Searching
Use the search bar at the top of the screen to “look inside” all pages except PDFs to find text. To search within PDF files, open the file first and then use the Adobe search facility (Ctrl + f).
Using the Toolbar
Toolbar Icon | Meaning |
---|---|
![]() |
Hide the Table of Contents. The icon changes shape. |
![]() |
Show the Table of Contents. The icon changes shape. |
![]() |
Highlight words and phrases Poe uses as hoax clues in blue font. The icon changes shape. |
![]() |
Change hoax font back to normal. The icon changes shape. |
![]() |
Found search items are highlighted in chrome yellow. Select to remove the yellow highlights (e.g., before printing). |
![]() |
Send feedback on this site. An email pops up, partially filled in. |
![]() |
Print the current section. |
![]() |
Back up to the previous page within this site only. |
![]() |
Advance to the next page or PDF within this site only. |
Navigation within Text
Navigation icons are used in place of underscored text for easy selection by finger or mouse.
Text Icon | Meaning |
---|---|
![]() |
Link to a page within this site. Open in the same window. |
![]() |
Link to a page outside this site. Open in a new window. |
![]() |
Link to a PDF within this site. Open in a new window. (Use Ctrl + f to find text within a PDF.) |
![]() |
Select for linked background information, such as a color key, on the current page. |