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

3 thoughts on “motherfuckingwebsite.com Redesigned. My Other Poster Presented at #ICWE2014”

1. You’ve made an interesting redesign but, I think, partly missed the point of MFW. And, in the process, I think you’ve made it *less* accessible. Let me briefly explain:

   Your first point, line width, is one of the most misunderstood parts of typography. I will say that I am glad that many web developers now acknowledge a thing such as typography exists and that we’re slowly moving past the idea that typography is all about fonts (very slowly, it seems, with the unnecessary explosion of webfonts; there is a right and wrong time and place for everything!). But the idea that lines should be 60, or 66, or 70, or 72, or any other number of characters is shaky, at best. Some research (http://viget.com/inspire/the-line-length-misconception) suggests that line lengths of around 100 characters are *more* readable and comprehensible than shorter lines. That’s not what a lot of “gurus” will tell you, but that’s the science. I tend to look at line length as a multi-variable problem, based upon the “viewport” size (physical or digital), font, font size, font weight, viewing angle, margins, and many other factors both physical and psychological. But you know what the best, most accessible answer to the problems is? Let the user decide.

   Sure, there are some fixed-width websites that look very nice—I’ve even designed a few. But setting the width, while it can improve aesthetics in some cases, affects accessibility. Why would I want some “typographer” telling me I have to read their page at a certain line width? Why can’t I be trusted to change the width to suit my own preference (whether my preference be based on reading efficiency or some other concern)? This is not bleeding-edge CSS3: I can change line width on any common browser I want to by resizing the window. This works on a modern browser, on the notorious IE6, and even on console-oriented, text-based browsers like Lynx (which eliminates all the CSS-induced restrictions by basically ignoring them). But, it’s not difficult; people do it every day. Taking away this choice from the user is the first place where your redesign gets in the way of free access. Add some reasonable margins and padding if you like, to frame the content. But don’t force the user into a line length they don’t want.

   I will grant you point 2: MFW really doesn’t address navigation. But does it need to? I am not really sure. It seems implied by the rest of the design: navigation should be immediately obvious to even the average user. Yes, depending on the type of website, you could use a top navigation bar (and based on your description of its “inner working”, I think that’s a very clean, responsive design you’ve created in the HTML). But this is not necessary and even communicates a certain message about your site: the current page’s message is less important than the ability to jump around to different parts of the site. Of course, hyperlinking is one of the foundational parts of HTML, but is the purpose of every site to frenetically dash from place to place and have no sense of stability? I can think of many websites that do (or could) use navigation less obtrusively. I think sidebars are a poor universal answer (especially considering the wide variety of screen widths), but can we not have navigation at the bottom? Or have in-text hyperlinks (c.f. Wikipedia)? Further, your navigation uses the idea of a bar to denote the hyperlinks. While green is certainly my favorite color, shouldn’t the semantic consistency of hyperlinks be enough to communicate their functionality in the page? Why are we overriding the basic hyperlink behavior, creating this new semantic category of “bar”, and then re-teaching the user that words or pictures (however visualized and styled) within this special bar *might* be links, too? If it wasn’t so common nowadays, it might be laughable. It certainly isn’t very simple or intuitive, when you break it down. So I am hesitant to say you’ve made an improvement here, either. Changes? Yes. But I don’t think it’s really any better.

   Finally, on to aesthetics. This is where things get really awkward. Part of the point of using HTML instead of plaintext is that we can add elements that are not text (e.g., images, backgrounds, audio, video, and so on), style the text we do have (with different fonts, weights, sizes, colors, etc.), and generally embellish the content. This can be used for good (e.g., to clarify meaning or solidify a brand image) or ill. “Aesthetics” gives the developer a lot of latitude, but also the potential for great harm. I’ll spare everyone a discussion of how we can easily override the font face, font size, text color, link colors, and background color of any webpage with the accessibility tools provided in [many] browsers themselves and won’t comment on your font and color choices; this is largely moot (though I am glad you actually considered the issue of sharp black/white contrast which, sadly, is default on most modern browsers). Instead, I have more semantic concerns.

   Most noticeably to me, why are your paragraphs in boxes? How does visually separating (both with a border and slightly different background shade) a header and its child paragraph help anyone figure out what’s going on? I can see a blockquote, an aside, or some other block-level element which is to be understood outside the normal flow of text in a box. But a basic paragraph element? I don’t understand. And the list in your first “p-box”: are you trying to communicate something about the hierarchy between the paragraph and the list by having them together in the same box? If so, what is it? Next, the list itself doesn’t have an indent or left margin on any line after the first. When your list items are just one simple string, that’s not too much of a problem. But what are you going to do if you have two paragraph in a list item? How will the reader know if the second paragraph is part of the previous list item, part of the list but *not* a formal item, an aside or quote, or if it ends the list and starts a completely new paragraph? And I could provide a more thorough critique if I could view the original redesign (including source) and see how you handled the rest of the page (horizontal rulers, blockquotes, etc.).

   But there is one other issue I see, and this is something that I find designers doing almost unconsciously. What do I mean? Look at the overall design of your page: it looks like about every fixed-width template blog (or webpage) I’ve seen in my entire life. Ok, you’ve decided not to have a zillion columns and/or sidebars (and I am happy about that choice), but it still looks eerily similar. Is this particular design the only possibility for fixed-width and/or column-based layouts? No. Does this visual style have some documented rationale for its usage, acclaim for its usability, or even reason for its existence? I don’t know of any. Not that this particular design is inherently wrong—it can actually be executed very well—but didn’t I just get through noting how we can use aesthetics for good or ill? How does this design, in this specific instance, say anything different than could be achieved on plaintext? It doesn’t really enhance the meaning or communicate anything [positive] about the developer. Here is what it does say: “template”; “common blogger”; “not a web developer”; “not professional”; “what website is this again? It looks like the last one I visited, and the one before that, and… where am I?”. How does this design choice say something powerful about a brand? If this website sold a product, here is what the style of the page would say about the product’s quality: “cheap”; “made in [insert place you’re biased against]”; “this must be a really new, obscure product with a website like this; maybe it is another scam”. And this is not because you don’t have images, or a logo, or anything like that. It would still look like just about every other webpage, and not in a good way. I would say you should either accept that commonality as a good thing (i.e., not try to disguise it, instead sell it as consistent and elegant, and use it with a clear purpose) or really, truly do something different.

   I hope you do not take my words as being too harsh. I am very interested in the future of the web, especially the semantic consistency of information; this is something even web designers barely notice, despite the fact that most everybody repeats the phrase “don’t use tables” nowadays (and sometimes even follows their own advice!). I am learning and struggling through this, too; I may have put more time into figuring this out than most developers (accessibility is probably my main specialty, after all), but I don’t make perfect websites (there is no such thing, even on an unlimited budget!) or get everything “right”. But I want you and everyone who comes across MFW (and in particular, this redesign) to know that this is not the answer to “more accessible”. Or “better UX”. Or anything else, really. While I appreciate the time you took to try to make MFW better, I think you inadvertently took away a lot of control from the user, confused the semantic clarity of everything from paragraphs to hyperlinks, and forced upon the reader an aesthetic that screams “Not Special!” and which doesn’t seem to add anything to the readability, consistency, or “brand image” of the page. I do not think this makes MFW better, but worse.

   Now, where do we go from here? Well, I am working on a fairly comprehensive project which unifies the semantic meaning and writing style of all forms of text: handwritten notes, plaintext, typewritten papers, neat word-processor-based documents, web sites, everything. That won’t be ready for a while longer and, in any case, it doesn’t prevent developers from using the concept of “progressive enhancement”; in fact, it encourages it. And I think that might be a good idea for MFW: a sort of CSS-Zen-Garden-like competition of how the content can be styled but, unlike the more artistic focus of the Garden, a minimalistic approach. Antoine de Saint-Exupéry said that “perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away”. And so I think that should be the challenge: can we add to MFW (either through HTML or CSS, preferably) in a way that actually adds clarity, increases the simplicity and/or precision of semantic information, and sells the “MFW brand”? Can we contribute something that becomes so valuable that it can’t later be taken away, so useful that it might even be set as a browser default? Or will we be beaten by MFW: will we be forced to acknowledge, with our (and I include myself) incredibly impoverished understanding of typography, orthography, and design (ironic, given the fact that the wisdom of thousands of years of masters—and the lessons of thousands of years of mistakes—is immediately available to us; we don’t even have to get up out of our chairs!), that, as far as we can glean from an honest assessment of our skills, MFW is perfect?

   +Bizzlebin

   LikeLike

   1. Hi Bizzlebin,

      thanks for your interesting reply. Although it’s kind of tl;dr-ish, I’ve now worked through it. I won’t address all of your comments, but what I think are the most important ones.

      1. While you state that I “partly missed the point of MFW”, I think that you take all this way too seriously. MFW is a satire site that *ironically* claims to be perfect. It is definitely not how a website should look like nowadays, but rather illustrates the exact opposite of over-designing. The point I try to get across with my example redesign is that it is possible to start from this most basic set-up, but that you can’t to neglect some design considerations when it comes to device-agnostic websites.

      2. By adjusting the line length to a certain amount of characters, you cannot make a site less accessible. All of the text is still there, it is just displayed differently, i.e. it is still accessible to screen readers and everything. I think you’re confusing accessibility with usability in this respect. Accessibility is not an element of usability. Rather, the two are different concepts that have a certain overlap. The only thing you could state is that a predefined line length might affect readability, which is a factor of usability in the dimension efficiency.

      3. Of course there is no definite number of characters per line that satisfies every user, but web design is mostly about finding trade-offs. The ~66 characters per line is one number I found; if you have a different source that says ~100 characters is better: go ahead, make it 100 characters. Anyways, I’ve conducted a lot of ethnographic studies with users working on large screens and they only barely adjust browser windows, even if sites are displayed very poorly. In fact, users are lazy and don’t want to get the web designer’s job done before they can start using a site. I don’t remember the exact reference, but I also read about a study that found that users also don’t really make use of customization options provided by websites.

      4. The redesign I propose is not fixed-width. I’m exclusively using em units, which is a relative measure.

      5. I don’t really understand your reservations regarding a top navigation bar. Of course, MFW doesn’t need navigation, because it’s only a rather short, single HTML document. But as soon as you have a non-satire website with a realistic amount of content, you need some kind of efficient navigation. That’s an essential point of usability (e.g., http://www.webdesign.org/web-design-basics/website-usability/good-web-design-the-importance-of-navigation.2748.html). Particularly, I never stated that a top navigation bar is the one and only solution. Also, what’s your problem with making links in a navigation bar look different from standard hyperlinks? Top navigation bars are a best practice nowadays and when the user sees one, they know that such a bar contains links. That’s common sense and thus simple and intuitive, because of good learnability and memorability (http://www.nngroup.com/articles/usability-101-introduction-to-usability/).

      6. The demo page that you refer to as my redesign of MFW was just quickly hacked together. I didn’t even pay attention to low-level details such as the specific appearance of paragraphs or list items. It is nice that you are trying to interpret these design decisions, but unfortunately, there is no basis for interpretation. I’m sorry for that 😉 . Also, I *never* stated that this quick-and-dirty redesign is what a website should look like nowadays. Of course it looks like some standard template page everyone is using, but I also didn’t intend it as the perfect design-by-example template. It’s just a quickly compiled demo page that shall roughly illustrate my high-level thoughts: line length, navigation and some sense of typography and contrast.

      7. Finally, on to aesthetics, I simply wanna quote Tim Brown, CEO of IDEO: “Abundance has satisfied, and even over-satisfied, the material needs of millions – boosting the significance of beauty and emotion and accelerating individuals’ search for meaning.” (In: Harvard Business Review, June 2008)

      I hope you do not take my words as being too harsh, but I think you have spent too much effort on insignificant details and have missed my broader message: the importance of and need for device-agnostic and content-centric web design, completely decoupled from the specific appearance of MFW or my example redesign.

      Thanks again for your interesting thoughts! 🙂

      Best,
      Max

      LikeLike

2. Congratulations on your paper’s recent Honorable Mention Award and your new job at bitsars!

   As I noted, I have been working to unify all types of writing. And it is finally done (at least the first beta version!): http://uewsg.org . The UEWSG (or “Uniform English Writing Style Guide”, pronounced like the word “usage”) contains not only rules for handling grammar and ensuring consistent usage, but also creates a uniform syntax across all media. This is the first step in, as you said, a true “device-agnostic” approach—whether that “device” be a certain model of smartphone, a computer, or even a piece of paper. Despite the obviousness of this concept, I am still not aware of any other serious attempt at something like this and so there is still a lot that needs to be done. Since our specialties only overlap in a few areas, I would be thrilled if you had the time to glance over it and provide some useful criticism.

   Obviously, this is not a plug-in solution for the MFW just yet—my syntax requires the use of line breaks and so the MFW would look squished without them. However, if you spend a few moments and take my reference stylesheet, replace the universal “margin:0” with “margin-bottom:1em”, and apply it to MFW, I think you will see a noticeable improvement. Without any change to the MFW code or any loss of control to the reader, everything becomes just a little clearer, easier to read, and more semantically obvious. Not too bad for the first beta version! And you can add any coloration, background, or whatever on top of it; it becomes less and less compatible as you do so, but I am not against it on aesthetic grounds. I realize that this is still a bit different than what you have in mind when you are talking about UX, but I think something like the UEWSG will strongly compliment your own work and make your life a *lot* easier if it gets widely adopted.

   +Bizzlebin

   LikeLike

This site uses Akismet to reduce spam. Learn how your comment data is processed.