Guidelines for Spartan Webdesign

Posted in General, last updated on and originally published on

Disclaimer These guidelines are a work in progress. I am still trying to write a clear definition of what Spartan Webdesign is and how you can define it in a set of guidelines.

What exactly is Spartan Webdesign? Inspired by the subreddit /r/spartanweb, I describe it as a design philosophy that puts the user and the content first, with minimal visual design. The keywords are speed, readability and minimalistic design.

A Spartan Webdesign does not mean unstyled or ugly. My personal site may be a bad example since I really like a black & white, super minimalist design. But it doesn't have to be like this. One key feature of Spartan Webdesign is however minimalism, a key example is that you don't use images if they arent intended to transfer information, so no fancy stock images in Spartan Webdesign.

In this post I'd like to propose a set of guidelines that define what Spartan Webdesign is. Contrary to what some believe there is design in Spartan Webdesign. My site may use a simple black and white colorscheme with very little color, but the lack of color on my site doesn't imply lack of color in Spartan Webdesign.

Speed

Above all else, strive for speed. Yes you may have a 100mbit internet connection, as do your friends. But not everyone lives in a first world country with abundant access to Wifi and mobile internet. Even in a first world country there are plenty of people who don't have access to broadband internet.

A Spartan Webdesign aims for sub second loading, preferably below 500ms. The size of your webpage is of course dependent on the amount of information. But if you know that a 500 page book is about 1 Megabyte then I believe we can put a goal at 500Kb per page, at the most.

Clean and readable

The styling used in Spartan Webdesign should be clean and readable. The use colors is certainly allowed, but as with all design elements, it should serve a purpose.

Adopt a maximum width, don't just let text flow from one end of the screen to the next. In a readable design you should try to strive for a maximum of 80 characters on one line.

Being readable means having good contrast. Don't use a lightgray color for your hyperlinks when your text is black.

Images

In a Spartan Webdesign, images are used when they serve a functional purpose. Don't use images where text can serve the same purpose. An image used to create a mood has no place in Spartan Webdesign. Only use an image to share information you can't share in text form.

Interactivity

A Spartan Webdesign is usable without Javascript. If a user visits your website with the NoScript extension (or similar) there can't be any degraded user experience.

A Spartan Webdesign has a minimal amount of interactivity. If your website has a blog, there is no need for Javascript. If your website has a search function, there is no need for javascript. If your website has a contact form, there is no need for javascript.

Be responsive

A Spartan Webdesign is a responsive design. The size of the screen accessing your content should not be an issue on defining how good the user experience is. Whether a user is viewing your website from a 4k screen, a laptop screen or a mobile device, make sure your content is viewable.

Security and Privacy by design

Security and Privacy are very important. Protect your users, help defend their privacy. This means using HTTPS for all assets of your website. Don't include trackers or third party scripts on your website. A third party script on your site is insecure No exceptions. You might be serving the latest Facebook pixel to your visitors today, but tomorrow it can be a malware installer or a malicious government tracking code.