xkcdFavicon.png

Difference between revisions of "Design of xkcd.com"

Explain xkcd: It's 'cause you're dumb.
Jump to: navigation, search
(Header text: two changed to header text entered)
m (added a sentence describing the color of the text in the xkcd logo)
 
(145 intermediate revisions by 26 users not shown)
Line 1: Line 1:
*Here the current design of the [[xkcd|xkcd.com]] front page (and other features of the page) will be described.  
+
[[File:xkcd_website.png|thumb|right|250px|The four segments on [[xkcd|xkcd.com]]]]{{TOC}}The '''design of [https://xkcd.com xkcd.com]''' includes four white segments, 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:
**Changes will be mentioned below the in [[#Changes over time|Changes over time]] section
 
  
== Design ==
+
The design has changed many times over the years, but mainly in the beginning. Prior to [https://web.archive.org/web/20041024201125/http://68.57.186.221:8080/ October 24, 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 [https://web.archive.org/web/20051018051614/http://www.xkcd.com:80/ October 18, 2005], the website was redesigned to be used to host xkcd comics. Between [http://web.archive.org/web/20060706040359/http://xkcd.com:80/ July 6, 2006] and [http://web.archive.org/web/20060710090528/http://www.xkcd.com:80/ July 10, 2006], the design of the website changed dramatically to one very similar to the current one.
*The front page consist of four segments.
 
**They are all white areas split apart from each other and with the light blue gray background color showing up in between them.
 
**The four segments have rounded corners but are else in the shape of three rectangles and one square
 
*The first segment:
 
**[[#xkcd links|xkcd links]]:
 
***It is the square one. It is at the top left of the page, with just a thin line of the background showing above it and below it and to its right.
 
***It contains links to other pages on xkcd [[#xkcd links|see below]].
 
*The second segment:
 
**[[#Header|Header]]
 
***This has the same height as the first segment but takes up a thin rectangle making those two first segments have the same total width from left to right as the two segments below. And the lines around it where the background can be seen is as in the previous segment.
 
***On a broad computer screen at full resolution and 100% zoom there will be broad bands of the background on each side of these centered segments.
 
***In this segment are the following items (see [[#Header|below]] for more on these)
 
****The logo of xkcd to the left. (The logo image is a link to xkcd.com, and will take you to the front page from other comics).
 
****Next to the logo to the right is an explanation of what the comic is about.
 
****And below these two there will be a changing message, the [[#Header text|header text]].
 
*The third segment:
 
**[[#Main comic|Main comic]]
 
***This is the main segment where the comics are. And on the front page the newest comic will always be displayed.
 
***So that this is changing three times a week is not considered a change to the front page design.!
 
***This segment is as broad as the two above together and as broad as the one below it has a rectangular shape most of the time, but is shapes it self after the [[482: Height|height]] of the comic.  
 
****So it can be very short [https://www.xkcd.com/1123/ like here]] [[1123: The Universal Label]] and very long for instances [https://www.xkcd.com/1732/ like here] with [[1732: Earth Temperature Timeline]]
 
***See more [[#Main comic|below]].
 
***Around the entire segment there is a thin line where the background can be seen.
 
*The fourth segment:
 
**[[#Bottom segment|Bottom segment]]
 
***This is the final segment below the main comic segment. It is just as wide as that above but has a fixed dimension.
 
***The first is a line of five [[#Footer comics|Footer comics]]. These can chance over time see below.
 
***Beneath is a link to two [[#Feeds|feeds]].
 
***Beneath these is a list [[#Comics I enjoy|Comics I enjoy]]
 
***Beneath these there is a footnote.
 
****Previously there also been a Warning, but this has been removed and the footnote changed shortly thereafter.
 
****See [[#Warning and footnote|Warning and footnote]]
 
***Finally there is the [[#License and copyright|License and copyright]] statements at the very bottom.
 
***Beneath that there is an empty white part and then the bottom of the page is reached.
 
****Only the shadow of this last segments edge can be seen at the bottom, the background color is not visible below.
 
  
=== xkcd links===
+
==Links==
*Below are the links at the top left of the page to navigate around on xkcd.com
+
[[File:xkcd_links.png|right|150px]]
**If they change then make a note of what they where in the past (with webarchive link if possible)
+
:''For more information, visit the [[Links|main article]].''
*[https://xkcd.com/archive/ Archive]
 
*[https://what-if.xkcd.com/ What If?]] (see [[what if?]])
 
*[https://blog.xkcd.com/ Blag]] (see [[Blag]]: The Blag of the webcomic).
 
*[https://store.xkcd.com/ Store]
 
*[https://xkcd.com/about/ About]
 
  
=== Header ===
+
The first segment is at the top left of the page, and it contains links to navigate around on [https://xkcd.com xkcd.com] and his social accounts. There have been multiple changes to the links over the course of the site's history, with the last one being made in 2023. It states:
*The header consist of:
+
<b><!-- EDITOR NOTE: If the links change, update it bot below AND on [[Links]] and make a note on [[Links]] with the earliest web archive link of it.-->
**The logo:
+
:[https://xkcd.com/archive/ Archive]<br>
***The four letters x k c and d are there in a gray blue color in front/on top of a faded out drawing in similar color:
+
:[https://what-if.xkcd.com/ What If?]<br>
***A table with a shining old and big computer screen is behind the x, the rest of the table and an office chair at the end of the table behind the k, a guy with thin dark hair (resembling an early version of [[Hairy]]) behind the c and finally [[Black Hat]] behind the d. The two are facing each other, so Hairy has his back to the table. The line in the d goes straight up through the stick figure body of Black Hat ending in his round head just below the Black Hat.
+
:[https://xkcd.com/about/ About]<br>
**A description of the comic next tot he logo in two lines that says:
+
:[https://xkcd.com/atom.xml Feed]•[https://xkcd.com/newsletter/ Email]<br>
***''A webcomic of romance,''
+
:[https://twitter.com/xkcd/ TW]•[https://www.facebook.com/TheXKCD/ FB]•[https://www.instagram.com/xkcd/ IG]<br>
***''sarcasm, math, and language.''
+
:[https://xkcd.com/books/ -Books-]<br>
****See the [[xkcd warning]] (which now is gone from xkcd pages).
+
:[https://xkcd.com/what-if-2/ What If? 2]<br>
**Beneath all this there is some kind of message the [[#Header text|Header text]] which may change over time.
+
:[https://xkcd.com/what-if/ WI?]•[https://xkcd.com/thing-explainer/ TE]•[https://xkcd.com/how-to/ HT]<br>
***The go to header text is: '''xkcd updates every Monday, Wednesday, and Friday.'''
+
</b>
***But the current header text may be different. Below the latest header at the time of last edit can be seen. and below that [[#Changes to the header text|changes over time]] are listed.
 
  
====Header text====
+
==Header==
*The header text is often changing when Randall has news to tell.
+
[[File:xkcd_header.png|right|150px]]
**But when these news wears off the page usually returns to the '''go to header text''' which is:
+
The second segment is the header, which contains the logo, the [[Tagline|tagline]], and the [[Header text|header text]]. The header is wider than the first segment 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).
***'''xkcd updates every Monday, Wednesday, and Friday.'''
 
***It was last active on [http://web.archive.org/web/20190205050302/https://xkcd.com/ 2019-02-05] at the time that this section was last updated!
 
*'''[http://web.archive.org/web/20190611061331/https://xkcd.com/ The current header text]''' when this section was last updated on [2019-06-11] was:
 
**Announcing the '''''How To''''' book tour:
 
**[Below this header is a map of the mainland USA with 14 labeled black dots indicates the 14 cities that the book tour will take Randall to. One red dot with five red question marks above is located beneath the map to the left, indicating a 15th city to be chosen in a contest. Above the map to the right is a small picture of the book with the blue title on the black cover. Above the book is the release date and with an arrow pointing down to the book.]  
 
***September 3rd
 
***Seattle
 
***Portland
 
***San Francisco
 
***Santa Cruz
 
***Los Angeles
 
***Salt Lake City
 
***Kansas City
 
***Ann Arbor
 
***Cincinnati
 
***Louisville
 
***Cambridge
 
***New York
 
***D.C.
 
***Raleigh
 
***????? (Chosen by readers)
 
**The entire picture is a [https://blog.xkcd.com/2019/06/10/book-tour-announcement/ link] to the official book tour announcement posted on the [[Blag]],m with all cities and dates listed with details.
 
***Here it is also explained how to enter a competition on how to bring Randall to your city.  
 
***Make a story using only book titles and get the books used to be held up by different individuals.
 
***Only US cities can apply.
 
*Usually the header text is the same for all comics.
 
**But for certain comics there may be a reason to change the text permanent and as long as that is active they will not change along with the other.
 
**See [[#Unique header text|Unique header text]]
 
  
=====Changes to the header text=====
+
===Tagline===
*The header text changes often.
+
:''For more information, visit the [[Tagline|main article]].''
**Here these changes can be listed
 
**Begin with the date of the web archive link and make the date a link.
 
**Link to the comic that was on the front page when the text changed
 
**Then describe the changes and put in text if possible
 
**Also the comic that was the last to feature a message would be interesting to have below the other data.
 
**Put the newest (current) version at the top.
 
  
======2019-06-11======
+
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:
*[http://web.archive.org/web/20190611061331/https://xkcd.com/ 2019-06-11]
 
**[[2161: An Apple a Day]] was up when the header changed.
 
**Randall changed the header text to announce the official book tour for his newest book ''How to'' to be released 3 months later.
 
**The text:
 
***Announcing the '''''How To''''' book tour:
 
***[Below this header is a map of the mainland USA with 14 labeled black dots indicates the 14 cities that the book tour will take Randall to. One red dot with five red question marks above is located beneath the map to the left, indicating a 15th city to be chosen in a contest. Above the map to the right is a small picture of the book with the blue title on the black cover. Above the book is the release date and with an arrow pointing down to the book.]
 
***September 3rd
 
***Seattle
 
***Portland
 
***San Francisco
 
***Santa Cruz
 
***Los Angeles
 
***Salt Lake City
 
***Kansas City
 
***Ann Arbor
 
***Cincinnati
 
***Louisville
 
***Cambridge
 
***New York
 
***D.C.
 
***Raleigh
 
***????? (Chosen by readers)
 
***[The entire picture is a [https://blog.xkcd.com/2019/06/10/book-tour-announcement/ link] to the official book tour announcement posted on the [[Blag]],m with all cities and dates listed with details.]
 
****In the link it is explained how to enter a competition on how to bring Randall to your city.
 
****Make a story using only book titles and get the books used to be held up by different individuals.
 
****Only US cities can apply.
 
**The header had just changed on the day of this edit.
 
  
======2019-05-17======
+
:A webcomic of romance, sarcasm, math, and language.
*[http://web.archive.org/web/20190517103928/https://xkcd.com/ 2019-05-17]:
 
**[[2150: XKeyboarCD]] was still up when the header changed. It changed back to the exact same heading as before the one with Google reader here below.
 
**See [[#2019-02-06|2019-02-06]] below for all details.
 
**It stayed up for more than three weeks and was still up on [http://web.archive.org/web/20190610055519/https://www.xkcd.com/ 2019-06-10], while [[2160: Ken Burns Theory]] was still up on the day the next comic [[2161: An Apple a Day]] was to be released (where the new header could be found at least the next day, but maybe from the release of that comic?). Then it changed to announce the book tour for his new book.
 
  
======2019-04-23======
+
===Header text===
*[http://web.archive.org/web/20190423155458/https://xkcd.com/ 2019-04-23]:
+
:''For more information, visit the [[Header text|main article]].''
**[[2140: Reinvent the Wheel]] came out when it changed, ending a more than two and half month long [[#2019-02-06|promotion]] of Randall's new book how to.
 
**Randall changed the header text to ask if the reader still mourned the loss of {{w|Google Reader}} which closed on 2013-07-01, almost 6 years before this comic..
 
***He offers the possibility to sign up to receive the newest comic by e-mail.
 
**The comic may have relation to this, as some where using Google reader for different purposes when they closed it, without any chance of [https://www.google.com/reader/about/ getting your data out].
 
***The comic "Reinvent the Wheel" mentions that using external dependencies carry risks, such as Google closing down a feature. given the fact that the comic came out as the header changed it is probably not a coincidence.
 
**The text:
 
***Still mourning the demise of Google Reader? You can sign up to get new comics delivered by email [https://xkcd.com/newsletter/ here].
 
**The link is to https://xkcd.com/newsletter, where it is possible to submit your e-mail address and press a subscribe button.
 
***the following text is written above it:
 
***To receive the comic and news postings in your inbox, subscribe here.
 
**It stayed up for more than three weeks and was still up on [http://web.archive.org/web/20190516100403/https://xkcd.com/ 2019-05-16], when [[2150: XKeyboarCD]] was up. Then it changed back to the promotion of his new book.
 
  
======2019-02-06======
+
The header text is updated whenever Randall has news to share. After the novelty of the news ends, the page usually goes back to its default header text, which states:
*[http://web.archive.org/web/20190206060904/https://xkcd.com/ 2019-02-06]:
 
**[[2107: Launch Risk]] was up at the time when it changed, having been up since Monday the 4. of February
 
***Here it can be seen being on the front of xkcd on [http://web.archive.org/web/20190205050302/https://xkcd.com/ 2019-02-05], without the new text. This was also the last time the standard header text was used in several months.
 
***[[2108: Carbonated Beverage Language Map]] came up later on the day the header changed.
 
**Randall changed the header text to promote his newest book ''How to'' to be released 7 months later.
 
***He added an image of the book with large text next to it regarding the release and links on how to preorder it.
 
***There was no direct relation to the comics released at the time, except of course that he kind of launched his new book with all the risk it involves, while having a comic called launch risk up. It was though a very different and more real type of launch risk (of a human carrying space rocket) in the comic.
 
**The text:
 
***[The book is shown to the left as a black rectangle with large blue text and smaller gray text. On the book cover is seen Ponytail with a ladder and either black or White Hat (hard to say on black background). both are looking up on Cueball who is floating in the air with a quadcopter beneath either leg, trying to plug in an electric light bulb in a naked lamp hanging down near him. It seems he has already removed the broken light bulb, as he has one in both hands. And now he tries to put in the new one. He could have let Ponytail use the ladder...]
 
***[The header in blue above it all:] How to.
 
***[Sub header in gray to the left of Cueball:] Absurd Scientific Answers to Common Real-world Problems
 
***[Author name in blue below the drawing:] Randall Munroe
 
***[Sub header to this below in gray:] Creator of xkcd
 
***[Sub header to this below in gray:] Author of what if? and Thing Explainer
 
***[Next to this book image are the following text:]
 
***[Large heading:] HOW TO
 
***[Normal size sub header:] Absurd Scientific Answers to Common Real-world Problems
 
***[In smaller gray font below:] Available September 3, 2019.
 
***[Four links in gray blue are given with the first word still in gray:] Preorder:[https://www.amazon.com/How-Absurd-Scientific-Real-World-Problems/dp/0525537090/ Amazon],[http://links.penguinrandomhouse.com/type/affiliate/isbn/9780525537090/siteID/8001/retailerid/2/trackingcode/PRH5522E62429 Barnes & Noble],[http://links.penguinrandomhouse.com/type/affiliate/isbn/9780525537090/siteID/8001/retailerid/6/trackingcode/penguinrandom IndieBound],[https://itunes.apple.com/us/book/how-to/id1451461524?mt=11 Apple Books]
 
**It stayed up for more than two and a half month and was still up on [http://web.archive.org/web/20190422030324/https://xkcd.com/ 2019-04-22], when  [[2139: Email Settings]] was up. Then it finally changed to a new header without going back to the standard.
 
  
======2018-11-06======
+
:xkcd updates every Monday, Wednesday, and Friday.
*[http://web.archive.org/web/20181106122850/https://xkcd.com/ 2018-11-06]:
 
**[[2068: Election Night]] (on election day the day after this comic was released).
 
***It added a larger comic above the two links from the previous header. Those links of the previous header text was still up the day before [http://web.archive.org/web/20181105105855/https://xkcd.com/ 2018-11-05], when [[2067: Challengers]] was still up.
 
**Randall changed the xkcd header once more to try to make more people vote, and in this case help others to vote.
 
***Once again directly related to the new comic about election night.
 
**The text:
 
***[A line of altering blue and red stars, blue first and last of two rows of nine starts around of the heading:]
 
***Election Day!
 
***[Below Black Hat and Ponytail to the left and Megan to the right of Cueball is checking their smart phones. Cueball is addressing the reader:]
 
***Cueball: The biggest thing you can do th help is to check in with friends and family and make sure they know when and where they're voting.
 
***[Below these four characters there is the following text with two arrows pointing left and right. Both are turning up to text/links on either side of the four:]
 
***Use these links to answer questions
 
***[To the left:] Where and how to vote:  [https://www.vote.org/ Vote-org]
 
***[To the right:] What's on your ballot:  [https://www.ballotready.org/ BallotReady.org]
 
***[Below was the two links from the previous header:]
 
***Find out where to vote: [https://www.vote.org/ vote.org].
 
***See what's on your ballot: [https://www.ballotready.org/ BallotReady.org]
 
**It ended the day after [http://web.archive.org/web/20181107144453/https://www.xkcd.com/ 2018-11-07] when the next comic [[2069: Wishlist]] came out.
 
***The text then returned to the standard xkcd header: xkcd updates every Monday, Wednesday, and Friday.
 
======2018-11-02======
 
*[http://web.archive.org/web/20181103021059/https://xkcd.com/ 2018-11-02]:
 
**[[2067: Challengers]] (on the Friday, it was released).
 
***It added another link to the previous header text. That text was still up the day before on Thursday [http://web.archive.org/web/20181102015102/https://xkcd.com/ 2018-11-01].
 
***That was while comic [[2066: Ballot Selfies]] was still up.
 
**Randall changed the xkcd header to let people know who is on their voting ballot, and as before there is also a link on how to register for voting.
 
***This is also directly related to the new comic that came out that day, about helping people to decide who to vote for, i.e. who is on their ballot.
 
**The text:
 
***Find out where to vote: [https://www.vote.org/ vote.org].
 
***See what's on your ballot: [https://www.ballotready.org/ BallotReady.org]
 
**This was done at this moment because the {{w|United States midterm election}} was held on {{w|United States elections, 2018|Tuesday, November 6, 2018}}, four days after the release of this comic.
 
**It was still up the day before the election day, [http://web.archive.org/web/20181105105855/https://xkcd.com/ 2018-11-05], and then it changed with the next comic.
 
======2018-10-22======
 
*[http://web.archive.org/web/20181022120935/https://xkcd.com/ 2018-10-22]:
 
**[[2061: Tectonics Game]] (on a Monday, the 3rd day after release of this Friday comic)
 
***The standard text was still up Sunday [http://web.archive.org/web/20181021141446/https://xkcd.com/ 2018-10-21].
 
***The comic [[2062: Barnard's Star]] was released later that day.
 
**Randall changed the xkcd header to try to get people to register for voting.
 
**The text:
 
***Check your registration and find your polling place at [https://www.vote.org/ vote.org].
 
**This was done at this moment because the {{w|United States midterm election}} was held on {{w|United States elections, 2018|Tuesday, November 6, 2018}}, about two weeks after the release of this comic.
 
***It is generally believed that many of those not voting would have chosen democrats on election day, and thus Randall has an interest in getting as many as possible to register, see [[1756: I'm With Her]] (apart from the fact that he also most likely thinks that it is important to use the right to vote).
 
**It ended on [http://web.archive.org/web/20181103021059/https://xkcd.com/ 2018-11-02], when [[2067: Challengers]] came out.
 
***It was still there while [[2066: Ballot Selfies]] was still up the day before on [http://web.archive.org/web/20181102015102/https://xkcd.com/ 2018-11-01].
 
======2018-09-13======
 
*[http://web.archive.org/web/20180913133544/https://xkcd.com/ 2018-09-13]
 
**[[2045: Social Media Announcement]] (the day after the release of the comic.)
 
***It was not up when the comic was released on [http://web.archive.org/web/20180912131437/https://xkcd.com/  2018-09-12].
 
**It was a short lived reminder that NY votes today below the usual standard text.
 
**The text:
 
***xkcd updates every Monday, Wednesday, and Friday.
 
***NY votes today! Find your polling place [https://voterlookup.elections.ny.gov/ here]. (Zephyr Teachout for AG!)
 
**It ended with [[2046: Trum-]], the very next comic, on [http://web.archive.org/web/20180914175605/https://xkcd.com/ 2018-09-14], returning to the standard text.
 
======2017-11-26======
 
*[http://web.archive.org/web/20171126130857/http://xkcd.com/ 2017-11-26]
 
**[[1920: Emoji Sports]] had been up two days [http://web.archive.org/web/20171125125648/https://xkcd.com/ 2017-11-25] before the message changed from the normal version. But it changed the day before the next comic came up.
 
***It was changed to a commercial for Christmas shopping with a code for getting 5$ of the price with a codes for different online shops.
 
**The text:
 
***To anyone looking for Christmas gifts: Until Monday you can get $5 off
 
***[https://www.amazon.com/What-International-Scientific-Hypothetical-Questions/dp/0544456866 What If?] and [https://www.amazon.com/Thing-Explainer-Complicated-Stuff-Simple/dp/0544668251 Thing Explainer] on Amazon with coupon code GIFTBOOK17.
 
***At Barnes & Noble, until Sunday you can get 20% off [https://www.barnesandnoble.com/w/what-if-serious-scientific-answers-to-absurd-hypothetical-questions-randall-munroe/1118864093 What If?] and [https://www.barnesandnoble.com/w/thing-explainer-randall-munroe/1121864432 Thing Explainer] using code GIVETHANKS.
 
**It was only up a few days and ended with [[1922: Interferometry]] on [http://web.archive.org/web/20171130150053/http://xkcd.com/ 2017-11-30] where it returned to the standard text.
 
***But it was still up when the comic in between [[1921: The Moon and the Great Wall]] was up on [http://web.archive.org/web/20171129140033/http://xkcd.com/ 2017-11-29].
 
======2017-09-22======
 
*[http://web.archive.org/web/20170922232616/https://xkcd.com/ 2017-09-22]:
 
**[[1893: Thread]] (with its release).
 
***It was not up on the previous comic [[1892: USB Cables]], on the day they changed [http://web.archive.org/web/20170922025204/https://xkcd.com/ 2017-09-22].
 
**It was an announcement that Randall would visit the UK next week.
 
**The text:
 
***I'll be visiting the UK next week! You can join me in London from September 30-October 2 (at [https://live.newscientist.com/speakers/randall-munroe New Scientist Live], [http://www.rigb.org/whats-on/events-2017/october/public-lunchtime-talk--randall-munroe The Royal Institution], and [http://www.intelligencesquared.com/events/randall-munroe-on-making-complicated-stuff-simple/  Intelligence Squared]), then from October 3-6 in  [https://www.stpetersyork.org.uk/public_lectures/randall_munroe_thing_explainer York],  [https://www.eventbrite.co.uk/e/thing-explaining-with-randall-munroe-tickets-37832289396 Edinburgh], [https://www.toppingbooks.co.uk/events/ely/randall-murray-thing-explainer/ Cambridge and Ely], [https://www.eventbrite.co.uk/e/randall-munroe-book-signing-thing-explainer-tickets-38041072873 Oxford], and [http://www.cheltenhamfestivals.com/literature/whats-on/2017/randall-munroe/ Cheltenham].
 
**Ended with [[1900: Jet Lag]] on [http://web.archive.org/web/20171010045802/https://xkcd.com/ 2017-10-10] when the text returned to normal.
 
***But it was still up the day before with [[1899: Ears]] on [http://web.archive.org/web/20171009040109/https://xkcd.com/ 2017-10-09].
 
======2017-07-31======
 
*[http://web.archive.org/web/20170731021227/https://www.xkcd.com/ 2017-07-31]:
 
**[[1869: Positive and Negative Reviews]] (3rd day after release of this Friday comic)
 
***The comic [[1870: Emoji Movie Reviews]] was released later that day.
 
***Megan is holding hand with Cueball  and next to them is two words above each other: Thank you.
 
***The image is also a link.
 
****The link goes to [http://web.archive.org/web/20170801042453/https://www.nytimes.com/interactive/2017/07/25/us/politics/senate-votes-repeal-obamacare.html How Each Senator Voted on Obamacare Repeal Proposals], an article showing the senate votes. (here in an archived version).
 
**Ended with [[1872: Backup Batteries]] on [http://web.archive.org/web/20170804152509/https://xkcd.com/ 2017-08-04], but was still up when [[1871: Bun Alert]] was up on [http://web.archive.org/web/20170803124342/https://xkcd.com/ 2017-08-03].
 
======2017-07-25======
 
*[http://web.archive.org/web/20170725103104/https://xkcd.com/ 2017-07-25]:
 
**[[1867: Physics Confession]] (2nd day after release of the comic, it was not up on the first day: [http://web.archive.org/web/20170724095252/https://xkcd.com/ 2017-07-24]).
 
**Randall modified the xkcd header to ask readers to support voting against Donald Trump's new health care bill.
 
***The header was replaced with an image which is available in an archived version [https://web.archive.org/web/20170726150959im_/https://imgs.xkcd.com/notes/call-senate.png here].
 
***The image is also a link (and you can click anywhere on it to go the the link that is mentioned.
 
****The link goes to [http://web.archive.org/web/20170729003307/https://www.trumpcareten.org/daily TrumpCare Ten] (here in an archived version).
 
****Randall has previously made it clear, in [[1572: xkcd Survey]], that he knows how to make an image a link, but not how to put the link only where he says to click.
 
***Transcript of the image:
 
****[Megan is holding hand with Cueball next to three lines of large text, the same height as they are:]
 
****Please tell your senators to vote against this health care bill. It will hurt people.
 
****[After these three lines there is a phone number in a very large bold font with a line of text below:]
 
****202-224-3121
 
****Or click here for more info
 
****[Below the above is a gray line which is split in the middle with gray text, and below that four state names in white text inside black boxes:]
 
****Know anyone in these states? Ask them to call, too.
 
****Alaska Maine Nevada Ohio West Virginia
 
**Ended while [[1869: Positive and Negative Reviews]] was up on [http://web.archive.org/web/20170731164828/https://xkcd.com/  2017-07-31], when it was replaced by a ''Thank you''.
 
***That comic came out already [http://web.archive.org/web/20170728124230/https://xkcd.com/ three days before] (Friday comic), but was still up on [http://web.archive.org/web/20170730141019/https://www.xkcd.com/ 2017-07-30]) when the message changed sometimes between Sunday 30th and Monday 31st (where [[1870: Emoji Movie Reviews]] was released).
 
  
======2017-01-21======
+
==Comic==
*[http://web.archive.org/web/20170122003124/https://xkcd.com/ 2017-01-21]:
+
[[File:xkcd_comic.png|right|150px]]
**[[1788: Barge]]
+
This section of the website is dedicated to displaying comics. 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 <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 11px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 12px;">|<</span></li> and <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;">>|</span></li> arrows, which transport the user to the first or most recent comic accordingly. Adjacent to these are the <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;"><&nbsp;Prev</span></li> and <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;">Next&nbsp;></span></li> 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 <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;">Random</span></li> 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 [[:Category:Large drawings|large comics]].
**It came up almost a month after Christmas but did not really change the sales pitch of the previous. It just removed the link image with the large red text, see previous version below.
 
**The text:
 
***There are [https://store.xkcd.com/collections/featured four new shirts] in [https://store.xkcd.com/ the xkcd store],
 
***along with [https://store.xkcd.com/collections/posters posters] and [https://store.xkcd.com/collections/everything lots of other stuff]!
 
**Ended with [[1867: Physics Confession]] on [http://web.archive.org/web/20170725103104/https://xkcd.com/ 2017-07-25].
 
***That comic came up [http://web.archive.org/web/20170724095252/https://xkcd.com/ the day before] the above version of the header appeared.  
 
***So the first day after release it was still the T-shirt commercial.
 
***And it did not return to the standard version in between.
 
  
======2016-11-28======
+
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 [[:Category:Interactive comics|interactive comics]] like [[1350: Lorenz]] and [[1663: Garden]]. The structure of this link consists solely of the [https://xkcd.com xkcd.com] domain followed by the respective comic number. For instance, the link for comic [[2000: xkcd Phone 2000]] would appear as: "https://www.xkcd.com/2000/". The second link leads to the image URL suitable for hotlinking or embedding, in this case "https://imgs.xkcd.com/comics/xkcd_phone_2000.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 [[:Category:Comics sharing name|title conflicts]] or when the visible comic is dynamically generated or a composite rendering.
*[http://web.archive.org/web/20161128153015/http://xkcd.com 2016-11-28]
 
**[[1765: Baby Post]]
 
**This came up in time for the Christmas sale of 2016.  
 
**The text was
 
***There are [https://store.xkcd.com/collections/featured four new shirts] in [https://store.xkcd.com/ the xkcd store],
 
***along with [https://store.xkcd.com/collections/posters posters] and [https://store.xkcd.com/collections/everything lots of other stuff]!
 
***Above the text there was an image with two black t-shirts with white print on the chest. They were located at either end of a large red text written in the text type used in the comic. This text said New xkcd shirts.
 
***The entire image was a link to the [https://store.xkcd.com/ xkcd store].
 
**Ended with [[1788: Barge]] [http://web.archive.org/web/20170121114423/https://xkcd.com/ 2017-01-21]
 
======First======
 
*Date started??
 
**xkcd updates every Monday, Wednesday, and Friday.
 
**Ended with [[1764: XKCDE]] on [http://web.archive.org/web/20161128093459/http://xkcd.com/ 2016-11-28].
 
*More dates?
 
  
=====Unique header text=====
+
:Permanent link to this comic: https://xkcd.com/2000/
*Some comics have their own version of the header text that do not change.
+
:Image URL (for hotlinking/embedding): https://imgs.xkcd.com/comics/xkcd_phone_2000.png
**Only when the comic is on the front page, will it also be the main header text of xkcd.
 
**Put newest comic at the top
 
**Here below are examples of that:
 
*[[1928: Seven Years]]
 
**It was released as a response to another cancer diagnosis, this is explained in the [[Design_of_xkcd.com#Header_text|Header text]] which has replaced the standard ''xkcd updates every Monday, Wednesday, and Friday.'' The new one is this one, with the active link included:
 
**The text (with link):
 
***Becky Beaton, sister of fellow cartoonist Kate Beaton, has also been diagnosed with cancer. You can support her treatment [https://www.youcaring.com/beckybeaton-1008390 here].
 
**{{w|Kate Beaton}} is the creator of the web comic [http://www.harkavagrant.com/ Hark! A Vagran].
 
***Although this comic is not one on Randall's list of ''[[Design_of_xkcd.com#Comics_I_enjoy|Comics I enjoy]]'', he is clearly much influenced by another cancer diagnosis among someone in his own creative field.below.
 
**At the time of this post the on [http://web.archive.org/web/20171214171157/https://xkcd.com/ 2017-12-14] the message is still there.
 
**There is a possibility that it will be removed, when the support page is discontinued, but in October 2018 it was still there.
 
***See the comic on xkcd {{xkcd|1928}}.
 
*[[1723: Meteorite Identification]]
 
**Randall realized that his comic was almost a copy of some other person. And he has since then acknowledged this on the comics specific page see more [[1723: Meteorite Identification#Trivia|here]].
 
**At the time of this post, in the newest saved version on the archive from [http://web.archive.org/web/20161010215516/http://xkcd.com/1723/ 2016-10-10] it is still there and says:
 
***Note: Jolyon, founder of [http://www.mindat.org/ mindat.org], made a similar chart way before me!
 
**See the comic on xkcd {{xkcd|1723}}.
 
*[[1663: Garden]]
 
**This comic had a header text to help people use the comic when it came out.
 
**For some time this text was the main header text, but after a while is disappeared from the main header, but remained as the header for Garden.
 
***See more [[Garden#Header_text_after_release|here]]
 
**Today and as of the newest saved version on the archive from [http://web.archive.org/web/20161231231600/http://xkcd.com/1663/ 2016-12-31] it is still there and says:
 
***Protip: If you don't like how your garden is growing, you can click to prune it.
 
***You can copy the URL to share your garden. From other browsers, it will be view-only.
 
**See the comic on xkcd {{xkcd|1663}}.
 
*[[851: Na]]
 
**After Randall made this comic, he realized he could have "made it better" and changed the header text to:
 
***I can't ''believe'' I forgot Hey Jude.
 
***I don't get do-overs, but I couldn't resist making [https://xkcd.com/851_make_it_better/ a fixed version].
 
**See more about it in that comics [[851:_Na#Trivia|trivia section]].
 
  
=== Main comic ===
+
==Bottom segment==
*This is where the comics are displayed.
+
[[File:xkcd_bottom.png|right|150px]]
**Above the comic is the title in large bold letters.
 
***As always Randall uses a small caps font. By copying text to another program without the font, it shows as normal letters with both capital and normal letters.
 
**Below the title and above the main comic image there is a row of buttons. These are fairly standard:
 
***The two outermost with "arrow all the way back" <nowiki>|<</nowiki> or <nowiki>>|</nowiki> takes the user to either the first or the latest comic.
 
***Next to those are the ''< Previous'' and the ''Next >'' buttons taking the user to the two nearest comics to the one displayed.
 
***In the middle is the ''Random'' button comic which chooses a random comic.
 
****If the user is on the main page, the two buttons that points to the right will not do anything as the newest comic is displayed already.
 
***The same buttons are also beneath the comic.
 
**The comic is thus between these two rows of buttons. For smaller comics this is not so relevant, but for longer big comics the buttons is at hand when only one row can be seen either at the top or at the bottom.
 
**Finally beneath the second row of bottoms there are two links.
 
***The first is a permalink to the current comic displayed on the page.
 
***Permalink is also used in some of xkcd's interactive comics see the [[1350:_Lorenz#Permalink|permalink section]] on [[1350: Lorenz]].
 
***The link is just the home address with the number of the comic behind. So for the newest comic as of this post [[1791: Telescopes: Refractor vs Reflector]], the link would just be:
 
****https://www.xkcd.com/1791/
 
***The other link is:
 
****The image URL (for hotlinking/embedding):
 
****http://imgs.xkcd.com/comics/telescopes_refractor_vs_reflector.png
 
***Here the link is also on xkcd but under comics and with the comics title instead of the number, and then with the extension for the .png file at the end.
 
  
=== Bottom segment===
+
=== Footer comics ===
==== Footer comics ====
+
:''For more information, visit the [[Footer comics|main article]].''
*Five [[:Category:Footer comics|footer comics]] has been used at the bottom of xkcd almost from the beginning after only xkcd.com was used to post comics.
 
*They are likely selected to give a broad specter of the content and most likely are to some of Randall's own favorites (or users favorites).
 
*They have changed at least twice since the first was used back in February 2006 before they changed a third time to the current five comics in August 2010.
 
*They changed for the fourth time on 1 March 2019 to the present version with [[Earth Temperature Timeline]] in addition to the five previous comics.
 
  
==== Feeds ====
+
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:
*There are link to two xkcd feeds below the footer comics:
 
**[https://www.xkcd.com/rss.xml RSS Feed]
 
**[https://www.xkcd.com/atom.xml Atom Feed]
 
  
==== Comics I enjoy ====
+
{| class="wikitable"
*Beneath the two feeds there is a list of Randall's favorite webcomics wit links
+
|+
*Comics I enjoy:
+
|[[150: Grownups]]
#Three Word Phrase
+
|[[730: Circuit Diagram]]
#SMBC
+
|[[162: Angular Momentum]]
#Dinosaur Comics
+
|[[688: Self-Description]]
#Oglaf (nsfw)
+
|[[556: Alternative Energy Revolution]]
#A Softer World
+
|-
#Buttersafe
+
|colspan="5" style="text-align:center;"| [[1732: Earth Temperature Timeline]]
#Perry Bible Fellowship
+
|}
#Questionable Content
 
#Buttercup Festival
 
#Homestuck
 
#Junior Scientist Power Hour
 
  
==== Other Things ====
+
===Feeds===
*Beneath the web comic links is another section of external writings.
+
Below the footer comics, there are three feeds links. These links consist of a RSS feed, an Atom feed, and, starting from [https://web.archive.org/web/20190206060904/https://xkcd.com/ February 6, 2019], a subscription link for receiving news via email. On [https://web.archive.org/web/20190611031920/https://xkcd.com/ June 11, 2019], the last two links were also added to the [[Links|links]] at the top for easier access. They are:
*Since 2019-Feb-27
 
**Other things:
 
***[https://medium.com/civic-tech-thoughts-from-joshdata/so-you-want-to-reform-democracy-7f3b1ef10597 Tips on technology and government]
 
***[https://www.nytimes.com/interactive/2017/climate/what-is-climate-change.html Climate FAQ]
 
***[https://twitter.com/KHayhoe Katharine Hayhoe]
 
*Before 2019-Feb-27
 
**Other things:
 
***[http://womenalsoknowstuff.com/ Women Also Know Stuff]
 
***[https://techsolidarity.org/ Tech Solidarity]
 
***[https://medium.com/civic-tech-thoughts-from-joshdata/so-you-want-to-reform-democracy-7f3b1ef10597 Tips on technology and government]
 
  
==== Warning and footnote ====
+
:[https://xkcd.com/rss.xml RSS Feed] - [https://xkcd.com/atom.xml Atom Feed] - [https://xkcd.com/newsletter/ Email]
At the bottom of the xkcd page there was a [[xkcd warning|warning]] for most of the first ten and a half years, and below that there was, since 2007 a [[footnote]]. Both has been removed, but a new footnote has appeared. See the links for more information.
 
  
==== License and copyright ====
+
===Comics I enjoy===
*Randall allows people to use his comics for free as long as they do not make money on them and credit him with the work.
+
Beneath the two feeds there is a list of Randall's favorite webcomics with links:
*There are two notes:
 
**This work is licensed under a [http://creativecommons.org/licenses/by-nc/2.5/ Creative Commons Attribution-NonCommercial 2.5 License].
 
**This means you're free to copy and share these comics (but not to sell them). [https://www.xkcd.com/license.html More details].
 
***The last link is to a link on xkcd.
 
  
=== Changes over time ===
+
:Comics I enjoy:
*The design has changes many times but mainly in the beginning.
+
:[http://threewordphrase.com/ Three Word Phrase]
**Below here is only meant to be a list of huge changes to the entire page.
+
:[https://www.smbc-comics.com/ SMBC],
**Preferably only changes that can be documented with a web archive link should be used.
+
:[https://www.qwantz.com/ Dinosaur Comics],
**Give a date (in the correct format as shown in [[1340: Unique Date]]) of the link first and sort after newest at the top:
+
:[https://oglaf.com/ Oglaf] (nsfw),
*2006-02-07
+
:[https://www.asofterworld.com/ A Softer World],
**This was [http://web.archive.org/web/20060207154349/http://www.xkcd.com/ how the web site looked] after Randall had closed down for LiveJournal releases the week before on January 30th 2006 (with the release of  [[56: The Cure]]). The link is to the first copy on the web archive after that happened, and it was saved the day after [[60: Super Bowl]] was released.
+
:[https://buttersafe.com/ Buttersafe],
*2006-01-09
+
:[https://pbfcomics.com/ Perry Bible Fellowship],
**This was [http://web.archive.org/web/20060109071222/http://www.xkcd.com/ how the web sited looked] three days after the second comic, [[46: Secrets]], was released simultaneously [[:Category:Posted on LiveJournal after xkcd|on both LiveJournal and xkcd]]. The page was saved on the 9th of January 2006, before that days comic ([[47: Counter-Red Spiders]]) had been released. Randall had taken a had taken a long break from xkcd since and had just begun posting again on both sites from January 4th 2006 with [[45: Schrodinger]].
+
:[https://questionablecontent.net/ Questionable Content],
***The 41 comics released earlier throughout 2005 was at that time all included on the xkcd page as if they had been inserted on New Years day of 2006 (2006-01-01).
+
:[http://www.buttercupfestival.com/ Buttercup Festival],
***Thus disregarding that they had almost only been released using the still going Monday, Wednesday, Friday schedule from September 30th 2005, with the first being [[7: Girl sleeping (Sketch -- 11th grade Spanish class)|7: Girl sleeping]] and the last being [[39: Bowl]] released om December 5th 2005. Thus he took 30 days without a release from there and had released .
+
:[https://www.homestuck.com/ Homestuck],
***And as would be clear he also disregarded the order as the first is now [[1: Barrel - Part 1]] (which was though released the same day as the Girl, but still only as number 3), and the last number now of those 41 is now [[44: Love]], which thus also shows that three other comics have been inserted among the first 44 to make the first xkcd release number 45.
+
:[https://www.jspowerhour.com/ Junior Scientist Power Hour]
  
[[Category:Meta]]
+
===Other things===
 +
Beneath the "Comics I enjoy" section, there is another section of links to external sites. Since [https://web.archive.org/web/20190226192426/https://xkcd.com/ February 26, 2019] there have been three links. They are:
 +
 
 +
:Other things:
 +
:[https://medium.com/civic-tech-thoughts-from-joshdata/so-you-want-to-reform-democracy-7f3b1ef10597 Tips on technology and government],
 +
:[https://www.nytimes.com/interactive/2017/climate/what-is-climate-change.html Climate FAQ], [https://twitter.com/KHayhoe Katharine Hayhoe]
 +
 
 +
On [http://web.archive.org/web/20170321030609/https://xkcd.com/ March 21, 2017], this section was added to [https://xkcd.com xkcd.com] for the first time. It stated:
 +
 
 +
:[http://womenalsoknowstuff.com/ Women Also Know Stuff], [https://techsolidarity.org/ Tech Solidarity]
 +
 
 +
On [http://web.archive.org/web/20170715021703/https://xkcd.com/ July 15, 2017], the third link was added:
 +
:Other things:
 +
:[http://womenalsoknowstuff.com/ Women Also Know Stuff], [https://techsolidarity.org/ Tech Solidarity], [https://medium.com/civic-tech-thoughts-from-joshdata/so-you-want-to-reform-democracy-7f3b1ef10597 Tips on technology and government]
 +
 
 +
===Warning===
 +
:''For more information, visit the [[Warning|main article]].''
 +
 
 +
The warning on xkcd 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).
 +
 
 +
===Footnote===
 +
:''For more information, visit the [[Footnote|main article]].''
 +
 
 +
The footnote on xkcd is written in a very tiny font, which makes it very hard to read without zooming in. 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:
 +
 
 +
<small><b><i>
 +
: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.
 +
</i></b></small>
 +
 
 +
===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:
 +
 
 +
:This work is licensed under a [https://creativecommons.org/licenses/by-nc/2.5/ Creative Commons Attribution-NonCommercial 2.5 License].
 +
 
 +
:This means you're free to copy and share these comics (but not to sell them). [https://xkcd.com/license.html More details].
 +
 
 +
"More details" is a link to [https://xkcd.com/license.html xkcd.com/license.html], which expands on what people are and are not allowed to do. It states:
 +
 
 +
:This work is licensed under a [https://creativecommons.org/licenses/by-nc/2.5/ Creative Commons Attribution-NonCommercial 2.5 License].
 +
 
 +
:This means that you are '''free''' to copy and reuse any of my drawings (noncommercially) as long as you tell people where they're from.
 +
 
 +
:That is, you don't need my permission to post these pictures on your website (and hotlinking with <img> is fine); just include a link back to this page. Or you can make Livejournal icons from them, but -- if possible -- put xkcd.com in the comment field. You can use them freely (with some kind of link) in not-for-profit publications, and I'm also okay with people reprinting occasional comics (with clear attribution) in publications like books, blogs, newsletters, and presentations. If you're not sure whether your use is noncommercial, feel free to [mailto:[email protected] email me] and ask (if you're not sure, it's probably okay).
 +
 
 +
[[Category:Design of xkcd.com| 1]]
 +
{{xkcdmeta}}

Latest revision as of 03:02, 19 January 2024

The four segments on xkcd.com

The design of xkcd.com includes four white segments, 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 24, 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 18, 2005, the website was redesigned to be used to host xkcd comics. Between July 6, 2006 and July 10, 2006, the design of the website changed dramatically to one very similar to the current one.

Links[edit]

xkcd links.png
For more information, visit the main article.

The first segment is at the top left of the page, and it contains links to navigate around on xkcd.com and his social accounts. There have been multiple 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
FeedEmail
TWFBIG
-Books-
What If? 2
WI?TEHT

Header[edit]

xkcd header.png

The second segment is the header, which contains the logo, the tagline, and the header text. The header is wider than the first segment 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[edit]

For more information, visit the main article.

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[edit]

For more information, visit the main article.

The header text is updated whenever Randall has news to share. After the novelty of the news ends, the page usually goes back to its default header text, which states:

xkcd updates every Monday, Wednesday, and Friday.

Comic[edit]

xkcd comic.png
This section of the website is dedicated to displaying comics. 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 2000: xkcd Phone 2000 would appear as: "https://www.xkcd.com/2000/". The second link leads to the image URL suitable for hotlinking or embedding, in this case "https://imgs.xkcd.com/comics/xkcd_phone_2000.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.

    Permanent link to this comic: https://xkcd.com/2000/
    Image URL (for hotlinking/embedding): https://imgs.xkcd.com/comics/xkcd_phone_2000.png

    Bottom segment[edit]

    xkcd bottom.png

    Footer comics[edit]

    For more information, visit the main article.

    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[edit]

    Below the footer comics, there are three feeds links. These links consist of a RSS feed, an Atom feed, and, starting from February 6, 2019, a subscription link for receiving news via email. On June 11, 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[edit]

    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[edit]

    Beneath the "Comics I enjoy" section, there is another section of links to external sites. Since February 26, 2019 there have been three links. They are:

    Other things:
    Tips on technology and government,
    Climate FAQ, Katharine Hayhoe

    On March 21, 2017, this section was added to xkcd.com for the first time. It stated:

    Women Also Know Stuff, Tech Solidarity

    On July 15, 2017, the third link was added:

    Other things:
    Women Also Know Stuff, Tech Solidarity, Tips on technology and government

    Warning[edit]

    For more information, visit the main article.

    The warning on xkcd 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).

    Footnote[edit]

    For more information, visit the main article.

    The footnote on xkcd is written in a very tiny font, which makes it very hard to read without zooming in. 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[edit]

    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:

    This work is licensed under a Creative Commons Attribution-NonCommercial 2.5 License.
    This means you're free to copy and share these comics (but not to sell them). More details.

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

    This work is licensed under a Creative Commons Attribution-NonCommercial 2.5 License.
    This means that you are free to copy and reuse any of my drawings (noncommercially) as long as you tell people where they're from.
    That is, you don't need my permission to post these pictures on your website (and hotlinking with <img> is fine); just include a link back to this page. Or you can make Livejournal icons from them, but -- if possible -- put xkcd.com in the comment field. You can use them freely (with some kind of link) in not-for-profit publications, and I'm also okay with people reprinting occasional comics (with clear attribution) in publications like books, blogs, newsletters, and presentations. If you're not sure whether your use is noncommercial, feel free to email me and ask (if you're not sure, it's probably okay).