Style

The Project

Description

Soylent News is not merely a feat of software engineering but a work of art. "Style" is a quality assurance project concerned with how the website looks, feels and functions. Our aim is to produce the slickest, best looking, easy to use user experience whilst preserving all the functionality that the community puts into place.

Scope

To guide the development of the site with respect to:

• Heuristics: the workflow of the site needs to be intuitive and efficient. The user should need to perform a minimum of actions to achieve each task, and the steps should be intuitive. Our task is to define these workflows, assess the performance of them on the site and direct changes accordingly.
• Appearance: the site should reach the best possible standards of visual appeal, subject to its main purpose of article presentation and peer review. Our task is to develop a set of user interface guidelines to guide developers, including placement of elements, font selection graphical styles.
• User Experience: the final arbiter of the success of our work is the community. Our task is to assess the quality of our work by monitoring the usage of website elements, studying user workflow patterns and giving the community the opportunity to give feedback on style related matters.

We direct, coordinate and liaise with all of the creative groups of the project (Coding, FrontEnd - CSS/HTML, Graphics, Core content creators - Editors and Posters) to ensure that all development of the site works towards a common goal of being the most awesome thing ever to happen to the World of Nerd.

Basic Plan

• Phase 1 we repair the existing site
• Phase 2 we design a new and improved interface, (not a buck feta), which retains the same functionality but is slick, quick and works well on contemporary devices, not just large landscape monitors.

Members and Roles

• MrBluze - Overlord
• shogun - HTML
• moo_kuh - Testing
• Hyper - Testing
• ragequit - CSS / JQuery
• mtrycz - User Interface
• CynicGalahad - Website Design
• FrogBlast - Art
• xlefay - IRC

• All members please supply MrBluze with your email contact details. Email style@soylentnews.org

Recruiting

We are interested in people wanting to help who have skills in:

• Graphic design - for critical appraisal, or assistance in the art department.
• User interface design
• Mobile app development

Contact

style@soylentnews.org or '#style' on irc.soylentnews.org

Work in Progress

Typography

Paragraph element: This needs to be narrower in all cases: .intro p, .full p { margin: 0 0 0.4em; }

Lynx mode

I (Shogun) decided to create non-CSS, non-JS theme for site. It would be advantageous for some users because:

• Not all browsers support CSS at all(Lynx, w3m)
• Not all browsers support CSS correctly according to W3M standards (IE6 for example)
• Not all browsers have full implementation of "newest" version of CSS (currently it's CSS4)
• Not everyone wants to use CSS because of performance issues on slower machines (CSS is very flexible and provides a lot of complexity like CSS sided animations, alpha-transparency and other resource heavy(for old machines) effects
• Not everyone wants to use CSS beasue of potential security issues:

It is proven that CSS is Turing complete, therefor there is theoretical possibility that someone could put some rogue code(shell-code) withing CSS and inject it into memory of computer using nothing else but CSS. This AFIK have not been done yet - but I believe that in incoming years someone smart enough will be able to generate such hostile CSS.

• JavaScript implementation is usually very slow in old browsers (up to 50x slower then modern 2013 browsers). Because of that majority of scripts are simply unusable for users - being well too slow.

• Owners of old computers can't or don't want to upgrade their browsers - because of lack of RAM needed to run them. It's nearly impossible to work on computer with 256MB ram with newest[2014] versions of Firefox,Chrome or Opera - because of excessive memory usage. Funny fact is that those new browsers have superior execution speed of JavaScript - but this is ALL LOST because of overall excessive memory usage of browser.

• JavaScript libraries tends to be "big". It does matter when you are using modem or 3G capped connection(speeds in range of 64kbit/s - 128kbit/s). Process of loading some of the libraries can be as long as one minute on such connections, and often JS code taking as much as 75% of overall content on the side. Early slash-dot beta was great example of that.

• In good old days, web pages were static. You download it, and after download you plug-off your Internet cable, read the article, fill-up form, write comment, and connect back to continue minutes later without any problems. With JS - most websites force user to be permanently connected to Internet.

This is especially painful in high latency links. some scripts are tracking each click on form and transport them to server and back with new orders - this is problematic because if script requires 20 operations with server, and each operation takes 500ms - it would increase end-user lag to humongous 5s... And that is all AFTER all scripts have been downloaded. Unfortunately most modern Internet sites suffer from this - because developers does not test sites under low quality Internet links.

• Because JS on websites tend to run in unlimited loops - they consume cpu cycles ALL-THE-TIME, unlike good old plain html where after download and parsing cpu usage went to ZERO.

• Javascript is Turing Complete, therefor it is possible to write malware with it. For example in August 2013 FBI injected JavaScript based exploit into various TOR servicies.

Comment by MrBluze: Possible task list:

• There is already a minimalistic mode, simplified view etc. Have a look at it.
• There are UI problems with this mode, it contains JS!
• Need to strip the JS and replace with single page settings .. not trivial
• Need to simplify the path from setting and UNSETTING the simplified mode
• Need a way of triggering simplified mode by a URL argument
• Need to bring look/feel as close as possible to original site so there is no culture shock from switching
• Need basic navigation items to duplicate at top and bottom of pages
• Need user preferences to be complete on a single page

Identified Problems & Wish List

Phase 1 Repair List

These are what needs to happen as a priority on the current site:

• Login / Logout - needs to be in the SAME PLACE at all times. This should be top right box.
• 'Read More' link and 'n Comments' needs font size definition changed to em from points, as it is unreadable on small devices such as phones. All links in the center column should be checked for this.
• 'Yesterday's News' needs to not have < and > surrounding it as this is confusing. It should either have square brackets or none at all.
• The Comments under articles need to be brought in line with the center column and not spill over to the right column. Otherwise this results in unacceptable whitespace when article summaries are short.
• When posting comments: The original article must appear at the top and the parent thread must appear also, whereas currently this does not occur. Very disorientating.
• The same goes after moderation. There should not be separate notification pages that then link to the original page. Notifications should appear conveniently at the top or bottom of the working page.
• The entire user preferences section should be merged into a single large page.
• We need to have a single column view for phones/narrow mobile devices with reduced functionality - working on a schematic for this

These are more minor cosmetic problems:

• Bottom right of the right column there are some included lower-borders of non-existent boxes. They need removing
• We need a more consistent font that looks the same on different browsers, need to make some mockups and see what people think
• The left bottom window needs to have some kind of links of interest, and not a message "put links here"
• The word slashdot needs to be removed from the face of the earth, including soylentnews.org

Typography

The fonts are "not right", but to elaborate:

• Some people consider the typeface to be too 'generic' and does not give the site a unique look.
• Because of differences in rendering fonts between operating systems and browsers, there is inconsistency in font weight and kerning.
• We need to trial different font sets and ordering of fonts and decide on the optimal set.

Color

• Red theme is ok, however color contrast is excessive on wide gamut displays, especially some Apple devices.

Theming

• User selectable themes

Usability

• Comment submission - The article summary and the entire thread to which the comment replies should be visible when writing a comment.
• Bug #51 - Tricky main page navigation - This appears to be an ambiguity issue. 'Yesterday's News' should not have directional arrows surrounding it.
• Bug #20 - Scroll bars on 800x600 screens - Do we need a low res (single column) version of the site? Which functionality needs to be 'buried' for this? Need to discuss.
• Bug #22 - Navigation --> Past Polls ==> Submit Poll : Goes to same page as Navigation --> Submit Story; In other words, submitted a poll makes it looks like you are submitting a story.
• Bug #40 - Log out needs to be more prominent - Further to this, User session controls need to be TOP RIGHT DIV at ALL TIMES.
• Bug #48 - Ugly Login / New User Account page.
• Bug #?? - Current Pending Submissions / "Submissions List" page only shows ~ 35 characters of each submitted headline.

Resources

Human Interface Guidelines

Apple

• IOS 7
• OSX

Microsoft

• Guidelines

Comments on Human Interface Guidelines

The layout of elements on a website is influenced by the OS on which the interface is being designed. On the other hand, for the user, the right pattern of mouse / finger actions can differ depending on which OS is in use and the location of utility buttons on devices. Therefore it's not enough for the website to render correctly on different browsers. The workflow has to take into consideration:

• The size and orientation of the display.
• The pointing device
• Location of utility buttons, especially soft buttons such as browser config / bookmarks toolbars.

Accessibility

Select colors that contrast with each other well. Use the following link to help select fore/background color combos: http://gmazzocato.altervista.org/colorwheel/wheel.php

Related Areas

CSS Work - CSS Working group for soylentnews.org