Design of xkcd.com

The four main sections of the xkcd.com website.

The design of xkcd.com includes four white sections, which are separated by a thin black border and a light blue-gray background color. All text on the page uses a small caps font, except for the word "xkcd" in the logo image. Here is a list of the changes that have been made:

The design has changed many times over the years, but mainly in the beginning. Prior to October 24th, 2004, the website didn't mention the name "xkcd" and didn't include any comics. During that time, the site's message simply stated: "I don't use this page for much. It goes un-updated for a long time, and I don't really change the content, though I'm thinking of putting together a good links page. For now I just mostly use this to host pictures.". Before October 18th, 2005, the website was redesigned to be used to host xkcd comics. Between July 6th, 2006 and July 10th, 2006, the design of the website changed dramatically to one very similar to the current one.

Links section

Main article: Links

The first section is for the links and is positioned at the top left of the page. It contains direct links to navigate around xkcd.com, his social accounts, and his books. There have been many changes to the links over the course of the site's history, with the last one being made in 2023. It states:

Archive

What If?

About

Feed•Email

TW•FB•IG

-Books-

What If? 2

WI?•TE•HT

Header section

The second section is the header, which contains the logo, the tagline, and the header text. The header is wider than the first section but has the same height. The xkcd logo is positioned on the upper left corner and serves as a clickable link to the front page. The image used in the logo of xkcd is from the first panel of 77: Bored with the Internet, showing only the characters and the chair and the desk with a now old fashioned computer screen. The color of the text in the logo is a shade of grey/gray(spelling varies with location), with a hex value of #6e7b91, and an rgba value of (110,123,145,255).

Tagline

Main article: Tagline

Next to the logo is the tagline, a short text that appears regardless of which comic is being viewed. There have been eight taglines displayed over the course of the site's history, with the current one being added in 2006. It states:

A webcomic of romance, sarcasm, math, and language.

Header text

Main article: Header text

The header text is usually updated when Randall has news to share or wants to add information about a specific comic. The header text has been changed more than a hundred times since the launch of xkcd.com. The standard header text states:

xkcd updates every Monday, Wednesday, and Friday.

Comic section

This section of the website is dedicated to displaying comics.

Comic

Positioned above the comic is the title, presented in large and bold lettering. Just below the title, but above the primary comic image, there are five buttons. They follow a fairly standard layout: on the outer edges are the

|<

and

>|

arrows, which transport the user to the first or most recent comic accordingly. Adjacent to these are the

< Prev

and

Next >

buttons, allowing navigation between the comics immediately before and after the currently displayed one. In instances where the displayed comic is the first or the last, attempting to access the previous or next comic will simply result in the page being reloaded. At the center there is a

Random

button, which, when clicked, loads a comic at random. The same set of buttons is duplicated below the comic as well. While this redundancy isn't needed in most comics, it ensures that the buttons are conveniently accessible both before and after scrolling, especially for large comics.

Finally, beneath this second row of buttons, two links are provided. The first functions as a permalink, directly linking to the comic currently displayed on the page. In some cases, custom permalinks are used for various versions of the same comic, such as in some of the interactive comics like 1350: Lorenz and 1663: Garden. The structure of this link consists solely of the xkcd.com domain followed by the respective comic number. For instance, the link for comic 3000: Experimental Astrophysics would appear as: "https://www.xkcd.com/3000/". The second link leads to the image URL suitable for hotlinking or embedding, in this case "https://imgs.xkcd.com/comics/experimental_astrophysics.png". This link is stored within a comics-specific logical subdirectory of the server. The filenames of these images typically align with the comic titles, although exceptions arise, particularly in cases of title conflicts or when the visible comic is dynamically generated or a composite rendering.

The two links were originally plaintext and couldn't be clicked, but they were changed to hyperlinks between July 31, 2021 and Aug 10, 2021.

Permanent link to this comic:

https://xkcd.com/3000/

Image URL (for hotlinking/embedding):

https://imgs.xkcd.com/comics/experimental_astrophysics.png

Title text

Main article: Title text

The title text is an HTML attribute that Randall puts on almost every xkcd comic to add something tangentially relevant to the topic of the comic. Over the years, its purpose has changed.

Bottom section

Footer comics

Main article: Footer comics

The footer comics are likely selected for representing the topics covered on xkcd. There have been five changes to the footer comics over the course of the site's history, with the last one being added in 2019. They are:

150: Grownups	730: Circuit Diagram	162: Angular Momentum	688: Self-Description	556: Alternative Energy Revolution
1732: Earth Temperature Timeline

Feeds

Below the footer comics, there are three feeds links. These links consist of a RSS feed, an Atom feed, and, starting from February 6th, 2019, a subscription link for receiving news via email. On June 11th, 2019, the last two links were also added to the links at the top for easier access. They are:

RSS Feed - Atom Feed - Email

Comics I enjoy

Beneath the two feeds there is a list of Randall's favorite webcomics with links:

Comics I enjoy:

Three Word Phrase,

SMBC,

Dinosaur Comics,

Oglaf (nsfw),

A Softer World,

Buttersafe,

Perry Bible Fellowship,

Questionable Content,

Buttercup Festival,

Homestuck,

Junior Scientist Power Hour

Other things

Main article: Other things

The Other things section on xkcd contains links to external websites Randall finds interesting. It is displayed beneath the Comics I enjoy section. There has been a total of five links displayed over the course of the site's history, which have been changed thrice.

Other things:

Tips on technology and government,

Climate FAQ, Katharine Hayhoe

Warning

Main article: Warning

The warning on xkcd served as a humorous advisory message to users about the contents of the comics. It was originally added to the site in 2006, but it was removed in 2016. It stated:

Warning: this comic occasionally contains strong language (which may be unsuitable for children), unusual humor (which may be unsuitable for adults), and advanced mathematics (which may be unsuitable for liberal-arts majors).

Bitcoin address

Main article: Bitcoin address

The Bitcoin address on xkcd used to be included in the footnote and in xkcd.com/bitcoin. A larger version of the Bitcoin address is available in the main article. He updated the addresses frequently, using them as a modern tip jar for high-tech users. There have been six Bitcoin addresses displayed over the course of the site's history, with the last one being removed, alongside the footnote, in 2016. It stated:

BTC 1FhCLQK2ZXtCUQDtG98p6fVH7S6mxAsEey

Footnote

Main article: Footnote

The footnote on xkcd is set to a very tiny font size, which makes it hard to read without zooming in. A larger version of the footnote is available in the main article. There have been two major footnotes displayed over the course of the site's history, with the current one being added in 2016. It states:

xkcd.com is best viewed with Netscape Navigator 4.0 or below on a Pentium 3±1 emulated in Javascript on an Apple IIGS

at a screen resolution of 1024x1. Please enable your ad blockers, disable high-heat drying, and remove your device

from Airplane Mode and set it to Boat Mode. For security reasons, please leave caps lock on while browsing.

License and copyright

Randall allows people to use his comics for free as long as they do not make money on them and as long as they credit him with the work. There are two notes:

"More details" is a link to xkcd.com/license.html, which expands on what people are and are not allowed to do.