SemanticScuttle: New Interface

Abstract: I created a new interface for SemanticScuttle, a free, open-source, self-hosted social bookmarking service. It allows you to build a vast database of web articles on your own web space.

Over the last three years, I have saved, tagged and excerpted 4.224 bookmarks. My collection serves as a personal chronicle as well as a cabinet of curiosities. It has proven useful both for journalistic research and for ending chat arguments by providing statistical data. Up until June, I had stored all of these links in my Delicious account. As is well known, the service has become increasingly unusable due to various usability improvements. Ultimately, I felt the benefits I received did not make up for the value my links provided to the proprietors of Delicious.

A few weeks ago I’ve had enough and decided to migrate all bookmarks to my own personal web space using SemanticScuttle 0.98.5. SemanticScuttle, built by Christian Weiske, is a fork of Scuttle. It features pretty much everything you need for building a database of web articles. It even supports structured tags and collaborative tag description. Both the CMS and the Firefox plug-in work quite well. If you plan to switch, I suggest you’d give it a try.


Flat interface

SemanticScuttle is not the design miracle everyone’s been waiting for. But if you have some basic knowledge of CSS and enjoy digging into people’s code, you can easily create an interface of your own. My own attempt turned out to be so flat, I even named it flat. Grab it on GitHub and don’t hesitate to add your own styles – there is plenty room for refinement. This is what it looks like, compared to the default layout:

I won’t tap too deep into design lingo, but these are the most prominent changes I made. Keep in mind that flat caters to my own particular use case: I’m a single user with admin rights and all my bookmarks are set to private.

  • no gradients, no borders, no underlines
  • no distinct style for visited links
  • no voting system, no URL sorting, no welcome message
  • no highlighting for private bookmarks
  • W3C-compliant XHTML 1.1
  • minimalist coloration using Flat UI Colors
  • outsourced date and editing functions into a separate column
  • horizontally switched ‘related tags’ and plus symbols
  • added Font Awesome icons via Fontello (thanks for the hint, Martin!)


Build your own interface

Your use case might be entirely different from mine, and you should make the system cater to your own needs by all means. To create your own interface, you must distinguish between /data/templates/ and /www/themes/ – while templates affect the information displayed, themes affect the way they are displayed. The division reflects on the logical structure and the design of the page, in a manner of speaking. That’s why the flat distribution contains two different folders.

Two more hints to get your Scuttle installation up and running: If you don’t want strangers to access your bookmarks, make sure to enable the “private” option during import and keep saving bookmarks in private mode. If the import fails, slice your database file into small <1MB pieces and everything will be fine (4k Delicious bookmarks  2MB).

Comment on this article

Thanks for this post. I was looking for some examples of someone using Scuttle in the recent. Also going to self host.

hallo roman,

ich schreibe hier einfach mal auf deutsch. habe gerade dein flatdesign ausprobiert und finde es schon mal sehr schön. sieht auf jeden fall viel moderner als das original aus.
was mir auffiel ist, dass es mit thumbnails nicht so gut funktioniert. da verrückt die linke spalte weiter nach recht und schiebt sich über die rechte. vlt haste ja da nochmal zeit ein auge raufzuwerfen ;)
ist es eigentlich viel aufwand es für mobile endgeräte anzupassen? also dass die große rechte spalte zb. unter den bookmarks ist.

schön, dass das projekt wieder mal jemand belebt :)
danke dafür

@Christoph: Stimmt, die Thumbnails hatte ich gar nicht bedacht. Bei mir werden ohnehin keine angezeigt – schätze, ich werde sie komplett entfernen. :]
Responsive wäre auf jeden Fall der nächste Schritt, auf dem Handy ist Scuttle echt anstrengend. Ich probier’s mal mit Bootstrap.
In den nächsten Tagen kommt übrigens ein kleiner Bugfix. Ausgeloggt sind nämlich noch die letzten Suchanfragen sichtbar.

Danke fürs Feedback! :)

//Edit: Das Kommentarsystem hier müsste ich auch mal erweitern…


endlich ein super Design für Semanticscuttle! Gratuliere!

Gibts eventuell schon ein Update wg. den Thumbnails, Responsive usw. oder ab wann darf man damit rechnen… ;-))

Greetz, Lisa

@Lisa: Besten Dank! Responsive ist bereits in Arbeit, die Thumbnails kommen später. Zu viele Pet Projects. :]


Dein Theme gefällt mir sehr gut. Wie hast Du es hinbekommen, dass der Suchdialog in der grauen Überschriftsleiste platziert ist? Bei mir erscheint er nämlich darunter und überschneidet sich mit der “welcomeMessage”.

Viele Grüße,