Difference between revisions of "Design of xkcd.com"

Explain xkcd: It's 'cause you're dumb.
Jump to: navigation, search
(Added date when comic 1732 started appearing.)
(Added the Footer->Other Things section and its recent changes)
Line 258: Line 258:
#Junior Scientist Power Hour
#Junior Scientist Power Hour
==== Other Things ====
*Beneath the web comic links is another section of external writings.
*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 ====
==== Warning and footnote ====

Revision as of 20:51, 1 April 2019

  • Here the current design of the xkcd.com front page (and other features of the page) will be described.


  • 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:
      • 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 see below.
  • The second segment:
    • 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 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.
  • The third segment:
    • 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 height of the comic.
      • See more below.
      • Around the entire segment there is a thin line where the background can be seen.
  • The fourth 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. These can chance over time see below.
      • Beneath is a link to two feeds.
      • Beneath these is a list 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
      • Finally there is the 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

  • Below are the links at the top left of the page to navigate around on xkcd.com
    • If they change then make a note of what they where in the past (with webarchive link if possible)
  • Archive
  • What If?] (see what if?)
  • Blag] (see Blag: The Blag of the webcomic).
  • Store
  • About


  • The header consist of:
    • The logo:
      • 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:
      • 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.
    • A description of the comic next tot he logo in two lines that says:
      • A webcomic of romance,
      • sarcasm, math, and language.
    • Beneath all this there is some kind of message the Header text which may change over time.
      • The go to header text is: xkcd updates every Monday, Wednesday, and Friday.
      • But the current header text can be seen below, in case it is different today.

Header text

  • The header text is often changing when Randall has news to tell.
    • But when these news wears off the page usually returns to the go to header text which is:
      • xkcd updates every Monday, Wednesday, and Friday.
      • It was last active 2018-10-21 when this section was last updated!
  • The current header text when this section was last updated on [2018-11-02] was:
  • 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
Changes to the header text
  • The header text changes often.
    • 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.
  • Newest:
  • [2018-11-02] (No link yet to this date in the archive):
    • 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 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:
    • This was done at this moment because the United States midterm election was held on Tuesday, November 6, 2018, four days after the release of this comic.
    • It had just come up at the time of this edit when. It will probably end after the election or on Election Day.
  • 2018-10-22:
    • 2061: Tectonics Game (on a Monday, the 3rd day after release of this Friday comic)
    • 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 vote.org.
    • This was done at this moment because the United States midterm election was held on 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 [2018-11-02] (No link yet to this date in the archive), when 2067: Challengers came out.
  • 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 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 here. (Zephyr Teachout for AG!)
    • It ended with 2046: Trum-, the very next comic, on 2018-09-14, returning to the standard text.
  • 2017-11-26
    • 1920: Emoji Sports had been up two days 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
      • What If? and Thing Explainer on Amazon with coupon code GIFTBOOK17.
      • At Barnes & Noble, until Sunday you can get 20% off What If? and Thing Explainer using code GIVETHANKS.
    • It was only up a few days and ended with 1922: Interferometry on 2017-11-30 where it returned to the standard text.
  • 2017-09-22:
  • 2017-07-31:
  • 2017-01-21:
    • 1867: Physics Confession (2nd day after release of the comic)
    • 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 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 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 2017-07-31, when it was replaced by a Thank you.
  • 2017-01-21:
  • 2016-11-28
  • Date started??
  • More dates?
Unique header text
  • Some comics have their own version of the header text that do not change.
    • 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 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 here.
    • Kate Beaton is the creator of the web comic Hark! A Vagran.
      • Although this comic is not one on Randall's list of 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 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.
  • 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 here.
    • At the time of this post, in the newest saved version on the archive from 2016-10-10 it is still there and says:
      • Note: Jolyon, founder of 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.
    • Today and as of the newest saved version on the archive from 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 a fixed version.
    • See more about it in that comics trivia section.

Main comic

  • This is where the comics are displayed.
    • 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" |< or >| 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.

Bottom segment

Footer comics

  • Five 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.


Comics I enjoy

  • Beneath the two feeds there is a list of Randall's favorite webcomics wit links
  • Comics I enjoy:
  1. Three Word Phrase
  2. SMBC
  3. Dinosaur Comics
  4. Oglaf (nsfw)
  5. A Softer World
  6. Buttersafe
  7. Perry Bible Fellowship
  8. Questionable Content
  9. Buttercup Festival
  10. Homestuck
  11. Junior Scientist Power Hour

Other Things

Warning and footnote

At the bottom of the xkcd page there was a 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

  • 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.
  • There are two notes:

Changes over time

  • The design has changes many times but mainly in the beginning.
    • Below here is only meant to be a list of huge changes to the entire page.
    • Preferably only changes that can be documented with a web archive link should be used.
    • Give a date (in the correct format as shown in 1340: Unique Date) of the link first and sort after newest at the top:
  • 2006-02-07
    • This was 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.
  • 2006-01-09
    • This was how the web sited looked three days after the second comic, 46: Secrets, was released simultaneously 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.
      • 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).
      • 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 and the last being 39: Bowl released om December 5th 2005. Thus he took 30 days without a release from there and had released .
      • 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.