Click here for the last part of this series:

Arrested (Web) Development - Part 2

Katie Adams ・ Oct 14 '19

#web #html #css #vanilla

It's been a busy few weeks for this web developer. My partner is recovering from surgery, I passed another Microsoft Office Specialist exam - this time for Powerpoint 2019 - and my deadlines are getting ever closer; I even decided to start learning Swedish! ('Kvinnan läser och talar svenska')

My brain feels about ready to burst - and my skull has regretfully informed me that this would not be advisable.

So, to try and unwind, I've set myself the challenge of producing another post in this series. And this time: it'll be real nerdy.

Arrested Web Development: Part 3

Archive of our Own

For those of you who weren't active in the fanfiction community at any point, then you might need a little bit of background on what Archive of our Own (AO3) is. I can unashamedly say that I was a fanfiction writer/reader for many years and am happy to be your guide.

AO3 is an open-source fanfiction publication website, run by the Organisation for Transformative Works (OTW). OTW describe themselves as "a nonprofit organization, established by fans in 2007, to serve the interests of fans by providing access to and preserving the history of fanworks and fan culture in its myriad forms".

I want to preface this article by saying that I have an incredible amount of respect for the team behind AO3. It is run by dedicated volunteers and solely survives on yearly donation drives. It's a credit to them and their site that every year they meet their targets through fan support alone.

A major perk of AO3 that I discovered very early-on in my developing career was the option to skin the site. It wasn't something I'd truly seen applied outside of Tumblr (is my nerd side showing yet?) so I was intrigued and began to play.

It is within the context of skins that I will be discussing AO3's site design in this post. Every aspect of the site that I suggest improvements for, I will apply. No empty comments. I'll make the change I want to see and show you the code to do it.

Over the last few months, I've been polishing an AO3 skin of my own that I imaginatively called 'Moderno'; it's purpose is to give a more modern web look for AO3. This is the skin I will use to make changes.

At the end, I will link to a GitHub repository with the CSS for Moderno in full. If you want to apply the skin to AO3 yourself, then the code will be freely available. Equally, if you want to fork the repository and suggest changes or code that I've missed, please do so.

In no way do I expect the developers to perform any of the changes I've suggested (should they ever discover this post). A complete site overhaul is a massive amount of work and they already do so much by keeping the site working as flawlessly as they do.

And so, with all of the preliminary information out of the way, let's get started!

The Best Bits

Where to begin?

The font choice for AO3 is predominantly 'Times New Roman'. An absolute classic. The choice for a serif font makes for easy legibility and gives the site the air of a classic novels. A stylistic choice, for sure, but I'll get into that a bit later.

The readability for the typography around the site is pretty good: high-contrast between the font and the backgrounds. In fact, the accessibility score for the whole site is pretty decent.

Google Lighthouse scores it at 78 out of 100. Search Engine Optimisation scores a whopping 100 and Best Practices reaches 93. The area that apparently needs a little improvement is the site's performance; this is likely on account of the jQuery that's used in place of a Javascript Framework.

In-text links are clearly highlighted with underlines, solid or dotted.

The site's brand is also clear throughout the whole site, with its signature shade of red appearing in borders, headings, and highlights.

As much as I could gush about the site, I do want to get onto the things I changed with 'Moderno'. That's why many of you are reading, no?

A lot of the style choices on AO3 are as a result of building a style. As I mentioned, the serif font emulates an Austen-style book. However, for the modern web, this isn't always preferable. The site itself feels dated.

There are techniques used in the site design that have since moved on.

For instance, a lot of grey is used on the site to differentiate between sections.


There are also a lot of sharp corners, hard edges, and 3D styled buttons. Most of these I am able to address with a skin.

Firstly, I will delve a little further into the typography. As well as 'Times New Roman' there are elements of the site that also use the sans-serif font: 'Lucida Grande'. The use of multiple fonts was the first thing I fixed, setting everything to 'Lucida Grande' as the more modern font of the two.

Next, I looked at colour usage. Dark grey backgrounds are used in sections like the menu dropdowns; this can reduces accessibility by using dark text over the top of a dark background, reducing contrast. In Moderno, this is amended by simply changing the background colour to #fff.

#header .menu,
#small_login,
#header .dropdown:hover .current + .menu {
  background: #fff;
  box-shadow: 14px 21px 15px -17px rgba(0,0,0,0.75);
  border-radius: 0px 0px 3px 3px;
} 

It is the dropdown menu that is coloured and each menu item is left transparent. A box-shadow behind the dropdown menu makes it appear into as though the menu item is above the rest of the site. It's a little trick improves the usability of the site. Lastly, I rounded the corners of the dropdown a little using the border-radius CSS. This makes the menu appear a little more modern with not a lot of code.

The last trick I applied to the dropw down menu is some animation. Rather than highlight which menu item is being hovered over with a partially transparent colour, I decided to use the transition property.

#header .menu li {
  border: none;
  transition: border 100ms linear;
} 

When the user hovers over a menu item, the left-hand side of the menu item slides in with a red border.

The final result of the dropdown menu looks like the below:

My next task was tackling the use of textures throughout the site. A common web trend at the moment is smooth clean colours in graphics. The footer on AO3 and the navigation bar have a textured red background that looks a little dated on the 2019 web space.

Rather than just apply a solid colour to these sections, I did a couple of different things to shake things up.

Firstly, I made the header of the website sticky. Something I have personally experienced as a user is that I will be browsing search results, not find the fanfiction I'm looking for, and want to search something else. When on mobile, scrolling all the way back up to the top feels quite tedious, quite quickly.

#header {
  position: sticky;
  top: 0;
  box-shadow: 5px 0px 18px #888888;
  background: #fff;
  z-index: 1;
} 

In this example, I used position: sticky but be sure to check caniuse.com as there are a few bugs on modern browsers with this, as well as just being completely unsupported on IE.

I've also added another box-shadow to the header so that, much like the menu dropdown, the illusion is given of the header floating above the site.

#header .primary {
  background: #990000;
  box-shadow: none;
} 

The resultant appearance looks like the below:

The calmer background of the navigation bar improves the contrast and readability of the white text on it.

You'll also notice that as well as redoing the font in the rest of the site, I also restyle the Archive of Our Own logo using the 'Impact' font. It draws the eye more to the logo and was just my personal choice.

Back to the footer! I applied a gradient to this section, as opposed to a solid colour. This is to avoid bland colour usage across the site. I also put in a boxshadow. However, this one I set to be inset.

#footer {
  box-shadow: 0px 5px 30px #282828 inset;
  background: linear-gradient(135deg, #990000 0%,#750000 52%,#4a0000 100%);
} 

This gives the illusion that the footer is underneath the main site. This creates a page-like appearance, paying homage to the classic 'novel' style of the original site.

Lastly, I looked at the search bar and the buttons, which had 3D effects applied to them. The search button specifically had the styles below attached to them.

#header #search .button {
  background: #fff;
  color: #000;
  border-radius: 2px;
  box-shadow: none;
  height: 1.6em;
} 

The contrast and readability was improved by designing a button with black text on white background. The search bar underwent a similar redesign:

#header #search .text {
  background: white;
  box-shadow: none;
  border-radius: 2px;
} 

You'll see as well that I've edited the border-radius for both. Initially, there were no discernible corners; now there are nice rounded corners, emulating the corners that I implemented on the menu dropdowns. A nice modern approach that is neither a sharp corner nor a totally round end.

The result is displayed below:

The placeholder beneath the search bar appears when you begin typing in the search bar. This had a dark grey background initially but was amended to match the rest of the site design, with white background and black text.

#site_search_tooltip {
  background: #fff;
  border: 0.75px solid #ccc;
  border-radius: 2px;
} 

There's plenty of honourable mentions within the CSS that I wrote, but I didn't want this article to go on too long. For instance, there was nothing wrong with the hovering transition on the submit button - however, I did amend this to include a fun, colourful little animation as the background.

#header #search .button:hover {
  color: #fff;
  border: none;
  background-image: url('https://art.pixilart.com/0fe65fb08e889f4.gif');
  background-size: cover;
} 

Without tidying up a little of the HTML and using a framework to handle the site's content generation, there's not much flexibility with the site's layout. Where there is, it would require creating a site with a complete overhaul of the CSS which - as I said - is time-consuming and more effort than I've been willing to put into the project at the current moment. That being said, I feel like there's so much potential with the site.

I hope that you enjoyed seeing some of the changes I made, and that it inspired you to make a skin of your own! If you'd like to contribute to 'Moderno' or see the latest version of the code, checkout the GitHub repo containing the CSS for the AO3 skin.

Do let me know if you decide to contribute anything; perhaps I'll do a continuation of this post, highlighting some of the gret community contributions that have been made.

In the meantime, see you in the next part of this series!