julianharty / testing-heuristics

Experiments to see if we can establish evidence of the value of testing heuristics
MIT License
3 stars 0 forks source link

Improvement: generate content that is still readable and usable without CSS #9

Open julianharty opened 7 years ago

julianharty commented 7 years ago

I realised that there's a long standing adage: to design the HTML so that the content is still usable without the CSS. Currently the heuristics have HTML that renders in long, contiguous lines that are hard to read or use without the CSS. I've added a screenshot of the way I SLICED UP FUN renders currently (as kiwixlib - I guess - doesn't find style.css) screenshot_20170506-193858

ISNIT0 commented 7 years ago

Latest changes: image image

Latest changes (in progress) to structure mean content looks like above with no css

julianharty commented 7 years ago

It's improving, however I realise it's vital for me that the links fit on a screen and that the cross-links in the content actually work (as they do for the basic markdown when rendered by github, etc). As we can see in the following screenshot (from the HP Chromebook I'm writing this comment on) the layout of the generated links is hard to read compared to the in-content set of bullets. I expect we can address the formatting somewhat with CSS and other changes - let's remember to keep things simple in the content we generate to reduce the effort needed to make the material presentable and usable on various devices (I'll add some screenshots from an Android device in another comment from that device) screenshot 2017-05-09 at 06 59 22

julianharty commented 7 years ago

Here are screenshots for the latest improvements taken in kiwix android v2.2 for a zim with the material. The formatted heuristic exceeds both width and height of the screen. Also the back link appears (and does in desktop Safari too) and the formatting of the back, the heuristic, and title get a bit messed up) screenshot_20170509-070454 screenshot_20170509-065551 screenshot_20170509-070459

julianharty commented 7 years ago

In comparison, on both android and the Chromebook the plain list of terms for SPIES is formatted fairly cleanly and easily fits on the screen.

julianharty commented 7 years ago

To be clear, I'm happy if we can present the heuristics and their terms more attractively than a plain list of page links, my concern is about the current behaviour. Perhaps you'd be willing to try generating plain links in the Javascript code and then formatting these using CSS?

BTW: Personally I prefer reading mixed case, however YMMV (ditto for users of the material) https://ux.stackexchange.com/questions/33708/mixed-case-vs-all-lower-case-which-is-more-readable http://www.graphics.com/article-old/how-people-read https://en.wikipedia.org/wiki/All_caps