In this post I discuss the development of the “new” user-interface for OnlineGroups.net, and how it has shaped up. Now is a good time for a review because it has been a bit over a year since I released the new interface for the open-source GroupServer mailing-list manger (11 June, 2013) and a bit under a year since I deployed the interface for OnlineGroups.net (5 November, 2013).
My first step in the redesign was sitting down with Dan and discussing the fundamental concepts that needed to be expressed by the new design: things like people are members of groups, posts made by the members are organised into topics, groups belong to sites… We then started discussions with Mike Harding at Cactus Lab, who questioned our assumptions, pushed our concepts, and created the early static prototypes.
We did all our work, including the prototypes in monochrome. This ensures we use colour to enhance information, rather than causing accessibility issues by conveying information using colour. It also allowed us to concentrate on the layout and typography. It has resulted in a design that remains usable even when entirely in monochrome, as is shown by GroupServer.org.
The design was made for the desktop first, bucking the current trend for creating prototypes for small-screen devices that are then altered for larger screens. However, on each page the design did have to present a hierarchy of information. Identifying the hierarchy for each page — and presenting it clearly to the person viewing the page — made the design of all forms of the various pages much simpler. I see mobile first design discipline as primarily a way of identifying the information hierarchy; because our hierarchy was clear to us we could create a design that was also clear to the people that use OnlineGroups.net without going through a mobile-first process.
I started by developing the page for a single post. While rarely seen, it sits at almost the base of the information hierarchy and incorporates much of what needs to appear on other pages. I then spiralled out from there, working on the image, topic, and group pages. At each stage I would learn more and tweak the designs of the earlier pages, further evolving my understanding of the design. By the time I had finished the group page I had most of the design for all of GroupServer finalised.
I tried as much as possible to implement the new design using just CSS, altering the HTML as little as possible. This allowed me to gradually release the new design to production sites, using the skinning system in Zope to serve up both the old and new designs as needed. We wanted to do this, rather than switch everyone over at once, in order to gather feedback, improve the design, and warm up the existing user-base at OnlineGroups.net.
The markup is XHTML5. I chose the XML-variant of HTML because I appreciate the extra automatic validation that is possible with XML. I used very few of the newer features of HTML5, because at the time of development and deployment we had a significant number of corporate clients that used surprisingly old version of Microsoft Internet Explorer. However, as time progresses newer features, such as responsive images, are being rolled out.
Microformats are used to provide generic CSS class names with the new style, as they were for the old design. I use microformats because it ensures I use consistent class-names across all of GroupServer, with the added benefit of search-engine optimisation.
Once I had implemented design for the desktop I implemented the breakpoints for the responsive design. I did this simply by narrowing my browser window to identify when things looked incorrect on the post page, topic page, and group page. I then added a width-specific media-query and then repeated the process until I could confidently narrow the pages down to a screen as small as a feature-phone.
I avoided using SCSS because of the open-source nature of GroupServer. The biggest problem we have with GroupServer is installation, and I could envision the addition of SCSS complicating an already complex problem. Instead I use a system with two files: one provides the core layout and typography for GroupServer, while a second provides the colour. We currently have two colours in addition to monochrome: blue and green.
Web fonts are not used in the new design, with Helvetica used as the primary typeface. This typeface reflects the generic nature of GroupServer, and the old-school charm of mailing list managers. It also avoided the performance problems of web fonts.
Sadly, soon after I released the new interface a new version of Twitter Bootstrap was released. I have avoided updating Bootstrap because of the difficulty caused by the switch from jQuery UI.
Thinking about the information hierarchy helped with the performance optimisation. With the group page, for example, the important static content, such as the name and the About box, are rendered first. Then AJAX requests are made for the dynamic content: first the most recent topics are requested, before the requests for the lists of most recent posting members and files are made.
The images, such as profile images, are heavily compressed in comparison to many sites. Large images have relatively “high” quality (or low compression) set, at 75%, which is still much lower than the 98% quality that is used when posting photos to a group. As the size drops the quality also drops, because it becomes harder to see the compression artefacts (the strange square ghosting in JPEG images) that appear. For the tiny 20×20 pixel profile images the quality is dropped to 40%; in addition data URIs are used to embed particularly small images in the page, reducing the need for an HTTP request.