motherfuckingwebsite.com Redesigned. My Other Poster Presented at #ICWE2014

(Disclaimer: motherfuckingwebsite.com was not made by me!)

Device-agnostic design poster presented @ ICWE 2014From my original post about redesigning motherfuckingwebsite.com (see here), I have created a poster along with a corresponding short paper, which have been presented at the 2014 International Conference on Web Engineering (ICWE).

The short paper will be included in the conference proceedings published by Springer: Maximilian Speicher (2014). “Paving the Path to Device-agnostic and Content-centric Web Design”. In Proc. ICWE (Posters).

Special thanks go to Fred Funke, who helped with designing the poster!

Advertisements

This is a motherfucking website. And it’s not completely fucking perfect

(Disclaimer: motherfuckingwebsite.com was not made by me!)

motherfuckingwebsite.com
The motherfucking website.

I recently stumbled upon motherfuckingwebsite.com, which is the most pragmatic and minimalistic approach to website creation I’ve seen so far (except for plain TXT files, of course). The first two lines read “This is a motherfucking website. And it’s fucking perfect.” The site has raised quite some attention on different social media platforms with lots of people stating that the guy who created it is absolutely right.

Basically, he says that the site is perfect because it loads fast, is accessible to everyone, is dead responsive (without using media queries), has content (i.e., it gets its “fucking point across”), uses semantic HTML5 tags etc. Most of the statements he makes are indeed right and there are undoubtedly lots of web designers out there who should take them to heart. The creator’s final note is that motherfuckingwebsite.com is “fucking satire”. His aim is to convey that websites are not broken by default. Instead, developers break them.

“Good design is as little design as possible.”
— Dieter Rams

Based on the facts that lots of people like the idea behind the site and that the creator makes a whole bunch of true points, I want to point out three things in which he is not completely right or that he passed over. These would bring a site of this kind closer to perfection, assuming that we follow a text-centric and device-agnostic approach.

  1. Line length: Text lines on motherfuckingwebsite.com span across the whole width of the viewport. This is particularly disadvantageous on large screens. An optimally readable line should contain only ~66 characters, which corresponds to ~30 em.1 To reduce the amount of scrolling, this must can (Update July 23, 2016) be augmented with a multi-column layout and pagination.2
  2. Navigation: motherfuckingwebsite.com does not make statements about navigation. However, a website featuring larger amounts of content would require a navigation bar, optimally fixed to the top of the viewport.3 This navigation bar should adapt to smaller screens without device- or resolution-specific break points (= device-agnostic design).
  3. Aesthetics: motherfuckingwebsite.com follows a completely technical/functional point of view. Yet, this does not completely cover perfectness from the users’ perspective. Particularly, research has found that visual aesthetics are a crucial factor concerning user satisfaction.4 Even without excessive use of graphics this can be reached by leveraging more sophisticated color schemes and typography rather than just black/white coloring and default fonts.

Keeping the above points in mind, motherfuckingwebsite.com is for sure a good starting point for “back-to-the-roots”, minimalistic and device-agnostic web design.

Update (November 28, 2014): Please also pay attention to the follow-up posts based on this article, as well as the conference article published by Springer:

1 http://goldilocksapproach.com/article/
2 Michael Nebeling, Fabrice Matulic, Lucas Streit, and Moira C. Norrie (2011): “Adaptive Layout Template for Effective Web Content Presentation in Large-Screen Contexts”. In: Proc. DocEng.
3 Cf. http://www.dartlang.org/
4 Talia Lavie and Noam Tractinsky (2004): “Assessing dimensions of perceived visual aesthetics of websites”. International Journal of Human-Computer Studies, 60(3), pp. 269–298.