As you may have heard, reddit mobile launched today, at http://i.reddit.com. Reddit mobile is a specially designed version of the big reddit for mobile phones. It is more than just a custom stylesheet and a few other changes, it is a complete web app. Development on this app took approxamately 6 months, and it is only in beta. Keep reading this post for more info about the design process, ideas, and deleted content from the app.

Css3 Dependance

Reddit mobile depends heavily on CSS3. Very heavily. This has some distinct advantages and disadvanages.

No design time

Reddit mobile is fairly unique when it comes to many websites. It never saw the inside of Photoshop. There is no PSD with a mockup of the whole interface floating around. Reddit mobile design and development were one in the same. With CSS3, the ability to rapidly develop and test many different design ideas far exceeds the ability of Photoshop and other slice based approaches. We could come up with an idea, get some html for the structure of the idea, and then style it. If it looked good, we didn’t have to change it. It was already running on production code. If it was close, we could tweak the way it looks, using nothing more complicated than a web browser.

All changes we test can be done in real-time, and tested with a variety of situations. Since we developed using real reddit content, we could see exactly how real submissions look on the site, and adjust them accordingly

Lack of images

For the most part, Reddit mobile is an image-free interface. Gradients, buttons, text effects, and other UI elements are completely made up using CSS3, and occasionally a tiny bit of javascript. No dependance on images frees us from one of the largest shackles of design. If we wanted to make every button on the site slightly rounder, we just had to edit one line of css. We did not have to wait for a graphics package to load up, tweak the image, save it, upload it, refresh the page and caches, and find that we need a little more rounding. If we wanted to adjust the color of the gradients used throughout the site, again, only one property.

But CSS3 can also do so much more than a graphics package. If you look at a self post using reddit mobile, you may notice that the post box has a smooth grey gradient. As you would probably expect, this is a CSS gradient. And since it is a CSS gradient, it can expand and collapse with the height of the box. This is a simple little feature, but something completely impossible on Photoshop and other image-based approaches

Open-source nature

CSS and HTML are text files. Anyone and anything can edit them. PSD and PNG and other formats are binary files. You need special applications to edit them. And with PSD, the only truly viable way to edit is using Photoshop, which comes with its own price tag¹.

Since reddit is an opensource website, the ability for a large number of people to edit it is crucial. Having a requirement that they use a specific app, that may be unavailable to them, seems to go against this spirit. And with CSS3/HTML, you can see exactly how another developer did something, because everything is right there, available for you to see. With photoshop, if they release a flattened image, well, you either have to wonder how they did it, or ask them, and you may not get a response.

Easier on the VCS

Reddit uses the Git version control system. I wont get into the details of what a VCS is, what it does, and how it works, as that is irrelevant to the scope of the article. You probably already know how it works. All that this article is concerned with is how CSS and HTML work in a VCS.

Images that are stored in a VCS are typically stored in one way. Every change of the image is saved in full, adding up to quite a bit of space. And there is no easy way to do a diff between two images. If the developer did not leave a good log of what they changed, good luck finding it if its a tiny tiny change.

CSS and HTML, however, are simply text files, which a VCS is much better at tracking and managing. Instead of saving new copies of the files, a VCS merely has to save the changes to the file. Text files are already smaller than most images, and this cuts the size down even more. Furthermore, it is easier to see whats changed between files, as tools like diff exist to show exactly where two files are different.

Saves Cache space

Reddit mobile relies fairly heavily on some caching technologies. It has to, to remain speedy. Caching images can quickly fill up the limited cache on a mobile device, and then, when the cache starts to empty, a client has to download the images again and again. Caching text files, however, takes up far less room, and allows for more files to be saved. More files stored locally leads to a faster experience.

The downsides

Unfortunately, not all is milk and honey in the land of CSS3. There are a few problems we ran into while developing. I wont go into too much detail, if you want to know more, ask in the Comments.

CSS3 is still under development, and the specs aren’t completely defined yet. This means that sometime in the future, you may have to go through and update your code to make it work. This isn’t really as big of an issue as some of the other problems.

Perhaps the biggest annoyance with CSS3 is the need to define multiple properties multiple times. Each rendering engine seems to have its own prefix for most everything, so you have to do a lot of copy and paste coding. For reddit mobile, we developed for webkit only. With the final version of the app, however, we plan to add support for other CSS3 supporting browsers.

And finally, the last downside. Usability. If you aren’t careful about how your site degrades, it looks absolutely terrible on non-webkit browsers.

Getting out from under Steve

One of the primary drives for reddit mobile was to get out from under Apple’s approval process. There are already thousands of posts complaining about apple, the app store, and the development process/approval process, so I wont go into details about that here.

A web app, however, is not subject to the outside whims of anyone other than reddit. If reddit wants to make every link go to porn, they can do that, and dont have to wait for someone else to say OK (Although Condé might be a little upset about this if they did). Feature updates come every now and then, and previously, there would have to be a time delay for iReddit to get the update, if it got it at all. Not anymore. Reddit and Reddit Mobile both share the same backend, so features can be rolled into both platforms and released, simultaneously.

Finally, reddit mobile lets reddit roll their own advertising solution into the mobile website, instead of having to rely on outside packages like iAd or Google Mobile Advertising. Reddit advertisments have always been different than the advertisements at the web at large, and why should the mobile experience be any different?

The Design process

I touched on this earlier, but reddit mobile had a very unique design style. No photoshop was used to make this site. The whole design started out with a html mockup, and eventually transitioned over to reddit code. Since the mockup and reddit code share the same classes, the CSS didn’t have to change, and only minor tweaks to the reddit template had to be made.

Once the initial site was made, feature creep began. We began working on the big ticket features first, like voting, commenting, viewing comments, logging in/out, etc. Slowly but steadily these progressed, and the site became more usable. I’ve been using it as my primary reddit on my phone since around mid-Febuary, and it has steadily been getting better.

Some ideas that exist in the site today havn’t changed since their original inception. Others have undergone about 6 different designs, and settled into the ones you know now.

Post options

One feature that saw more than its fair share of skull sweat was post options. Early on, the post options were nothing more than links, in a row, like on the main reddit site. Eventually these were replaced by a drop-down menu, similar to the options menu. This design stuck around for quite a while, but was eventually replaced by a popup bubble, similar to the one found on Android 2.x contacts. And, less than a week before launch, this was replaced, yet again, but a far more flexible bubble. This final bubble is what you know today

This is just how the post options were shown. The method through which these menus were triggered also underwent several different design iterations.

First of all, it was a little link that said options, at the end of the tagline (the line with the user, time, etc). This solution was quickly removed, due to the sheer difficulty in clicking the button. We tried moving the link to the right and left sides of the link lines, but this didn’t seem to solve the click issues. Eventually, it was turned into a button, and a few elements (domain) were moved into the popup bubble it triggered.

Comment options

Comment options has a history similar to the post options button, but has a few different steps. It started out, much the same way as the post options did, with a simple options drop-down menu. This lasted well into the development. When the new (the current) popup bubbles were implemented on posts, they were implemented on comments as well.

But the trigger saw the most changes. First, it was an options button. This stuck around for quite a while. Soon it turned into a click event, in which the whole comment was a trigger. This was easy to click, but limited the functionality of comments, as links became difficult to use.

Finally, we moved on to what we currently have, which is a little chevron in the top right of the post. This is functional, and doesn’t take too much space.

Voting Arrows

Reddits arrows are perhaps more of a logo and branding than its logo. People recognize them, and redditors take great pride in them. Putting them on the mobile site was a priority from day one.

The now obsolete iPhone app, iReddit, actually didn’t show the reddit arrows on links, only on viewing the site or comments itself. This reduced arrows to at least a two-click function level, rather than a first-click function level.

At first, the arrows were exactly as they are on the main site. Same code, images, and style. The score in the middle, the arrows on top, etc. This lead to various click problems, as people would miss the arrow they wanted to hit, and accidentally downvote or upvote. Eventually we bumped the size of the arrows up, and changed them from using an image sprite to a mask sprite. The mask sprite actually reduces the number of arrow iterations we need to include, as the colors and fill are done with css gradients. With the increased size, the score made each link too tall, so it had to go. But the score was still nice to have, so it moved into the tagline, where it is visbile, but doesn’t take up too much room.

Things that got cut

Now, everyone likes to know what they missed out on, so here is a quick rundown of some stuff we had at one time or another, and had to remove.

The toolbar on pages would actually bounce down to be visible no matter where you scrolled. We used CSS3 animations for the bounce down, and it looked really cool, but it could really obscure some content, so it had to be cut. It also upped the load time of the mobile page, as some javascript had to be included. This is also a way we worked around the absence of fixed positioning on mobile devices

For a while, up arrows would pop up a little bubble telling you you actually voted on the article. This was great when they were small, but it hampered usability of the link itself, and had to go. It also looked ridiculous when the arrows got bigger.

There was once a preference page, with a few cryptic options, but it got cut. It will return later, allowing for adjustments to the font size, colors, and other things.

There was probably a whole lot more, but i cant think of it.

How we collaborated

Reddit mobile was built with absolutely no face-to-face interaction between myself and the reddit team. All communication was done using IRC, Google Talk, Gmail, and Google Wave.

Google Wave was actually quite useful for tracking down issues and as a todo list. Ideas could be hashed out there, and put into action later. We really didn’t keep our wave that organized, it was more of a giant whiteboard, with notes stuck here and there, and deleted when they were old enough to not matter anymore.

Gmail+GTalk were indespensible, mainly because they integrated so tightly. Chat logs could be quickly searched through, so that one thing we talked about a month ago could be dug up.

What’s next?

The next set of things we have to do on reddit mobile are get the final version ready.

Some things we are going to do no matter what:

• Cross-browser CSS
• Graceful degredation
• Hide/save features
• Preferences
• Tighter integration, perhaps even an award for mobile use

Some things we want to implement

• Ajax
• Bookmarklets

1. I know gimp and a few other packages can edit PSD, but they come nowhere near the functionality of Photoshop [↩]