I’m tired of repeating myself, so here’s a list of the 12 things you should never do in your tumblr theme.
W3 Consortium QA Tips, 2003/07/30:
A certain trend among designers, believing that small text gives a Web page a sleek appearance and provides more space per “page” for actual content, sometimes results in the use of unreasonably small font sizes.
Unfortunately, this does not go well with the diversity of platforms used to access Web pages, from portable devices with tiny screens to projection devices hooked to computers. And even within a specific platform, text settings may vary.
The problem here is a basic usability and accessibility issue: a good design should look good without requiring the user to enlarge or reduce the text size.
The default font size is 16px. If you override the standard font size, and make it smaller, you are making a mistake.
There are certain decorative elements which can use smaller text, sure, that’s fine. But making all the text on the page small is a mistake. Don’t do it.
CSS Disaster posts: #1, #2, #3, #9, #15, #18, #19, #22, #24,
[Do not] have a theme with transparent text boxes that overlays some obnoxiously patterned background so everything is unfuckingreadable, seriously that shit is neither kawaii nor kakkoii choose your fucking themes to be r e a d a b l e so people can READ THEM, because that is why you have A FUCKING BLOG, so that losers can look at this dumb shit you have deluded yourself into believing anyone else cares about and READ IT,
Dark gray on light gray is bad. Dark red on light red is bad. You want contrast, otherwise you can’t read the text.
There’s a contrast calculator which can give you objective numbers on just how bad a particular color combo is.
CSS Disaster posts: #5, #NA, #13, #14, #15, #19,
The rule of thumb with image scaling is that when you use it to make big images smaller, then you’re throwing away data that you spent time to transmit over the network; and when you use it to make small images bigger, then you just have a blurry mess. It has some uses, so it’s not a “never do this thing”, but if you ever write a theme that scales all _500 images up to 600px, then you are making another mistake. Use max-width or min-width instead.
<blockquotes>.Nested blockquotes aren’t common on the greater web, and they’re not in the standard set of example posts in Tumblr’s theme preview page, but long reblog chains are very, very common in everyday use by average Tumblr users. If your CSS reset does * {margin: 0}, then don’t forget to set 20 pixels of margin-left for blockquotes, or else it will be impossible to see who’s saying what.
Additionally, if you're not using a CSS reset, it can be helpful to set margin-right to 0, to avoid crushing deeply nested blockquotes down to a single-word column of text.
The Web is a fairly mature platform, which means certain conventions have emerged, and unless you want everyone to hate your fucking guts, you have to respect those conventions. One of those conventions is to put the top level, or “home” link, up, and to the left. Up, and to the left. Up, and to the left.
Always. Always always always.
CSS Disaster posts: #25.
!!c1QfXUgcGY0, 2011/11/29:
The Principle Of Least Surprise is the absolute bedrock foundation of UI design. It’s the First Commandment: Least Surprise is the Lord your God, you shall follow no other God but him.
Never move the Tumblr controls. Never fade them out, or in any way obscure them. Make no CSS rule that targets their iframe, or any way violates their sanctity.
All these other elements are yours to style— except the Tumblr controls. Attempt no landing there.
Pagination links are one of those bikeshedding arguments which spawn pages and pages of circular arguments. Screw those nerds, because there’s only One True Way to do it: older posts are viewed by clicking a link that points to the left, newer posts are viewed by clicking a link that points to the right.
Automatically playing music on your blog is incredibly tacky and not recommended.
CSS Disaster posts: all of them.
[Do not] change the fucking mouse cursor, no stop this is dumb nobody thinks those little trailing pink sparkles is cool, it makes you look like a 13 year old girl, and if you are actually a 13 year old girl you should be working harder than the rest of us not to look like a 13 year old girl because there is absolutely nothing about 13 year old girls that is cool unless you are a pedophile i guess but somehow i doubt that is the target demographic,
In general, novelty features are bad. Everybody hates them. Javascript has its place, but if you’re using it to add sparkles, animate the page title, disable right click, or obscure the page text with falling rainbow stars, then stop. Do not. Step away from the computer.
CSS is generally a less than powerful language, which is why SASS and LESS exist. But no language is so inexpressive that it can’t be used to shoot holes in things, and you’ll find yourself blowing your own foot off a lot less often if you avoid certain language features completely.
You can change the mouse cursor with cursor.
Don’t.
There’s no reason to do that, ever.
CSS Disaster posts: #2, #7, #11, #22, #23.
text-transform.Never.
CSS Disaster posts: #16
-webkit-scrollbar.This is only ever used to make the scrollbar harder to use. You don’t want to do that.