Intro

The very simple and not very styled UI that has been on this site for the last several years needs updating. This was built to be compatible with every device and screen size, as words are more important than quickly aging effects. Particularly applying a jQuery plugin doesn't represent anything technical.

Objectives

  • Create a HTML5 UI;
  • Update my form builder to HTML5;
  • Remove all the HTML from PHP rendering classes, and put it into templates;
  • Improve readability by implementing my columniser in jQuery (and applying it to the site). It is simpler to do this on the client side as screen size isn't published to the server. Secondly, if you have some odd configuration, you get the basic HTML, which should still be readable;
  • UPDATE: After building a few resources against this spec, I also need to add pagination (or tabs). Having columns that require you to scroll to the top and bottom of the document several times is poor layout.
  • Write a "@media=mobile” style sheet;
  • Make the external links in the global content better organised, and use less screen space. May be achieved by folding them away, when they are not important to the user;
  • Improve “visual territories” so heading sections are clearly different to the normal content;
  • Manage screen size of code sections (scrollable boxes etc);
  • Fold away navigation elements when the user seems to be reading the page text (i.e. make it like a suckerfish menu). This will make the header section at the top less heavy;
  • Manage the FB “like” link, its too big;
  • Spend enough time to have all the margins between the elements to look correct.
  • Tidyup all the things that aren't currently responsive. My current design is better than average, as it is so simple;
  • Ensure everything validates under the new HTML5 schema;
  • Be readable under a range of lighting conditions, I would like usecases of “read it on the train home” to be supported;
  • Maintain current emotional tone in the colours, but make it more positive;
  • Get a better font. My random reading has given me a “dyslexia font”; I'm not sure I should deploy this for all users, but I like the idea of being ablist for all the people that hid in IT because they where dyslexic to start with;
  • Look at “readablity tech” options, as this is mostly upgrading the webrowser; im not sure how I can assist people (I could do a menu option for super-sized text);
  • UPDATE 2014 At some point I forced the default font to be Ubuntu. This is more readable, IMO.
  • UPDATE 2014 More adjustments against a phone.
  • UPDATE 2015: I wrote an article with alot of references, and decided I needed to make a biblio extractor. On a phone the links are way to fiddly.

This is known as 'reach', as I follow current marketing behaviour of attempting to subvert common words to its own brand. It is an intensional statement of having a focus on readable, findable and manageable prose, rather than the self-described minimal shell for portability. If it is better, that the changes are noticeable to casual readers is entirely un-important.

Layout discussion

This is code cleanup and a lot of visual tweaks. I have currently spent 10h fixing layout boundaries and quick colouration. I need to port all the resource to the new frame (estimate three days). The absolute gaol of “make it look nice” is open ended.
All of the design people at my current work place are removing all the curved corners and 3d projection on new designs. This will similarly look flat.

I have built another minimal colour template. This may seem cold, but should be very readable under a range of lighting conditions. As my material is objective and technical, seeming emotionally cold isn't a problem. I hope it feels clean and professional. These blue tones are used by banks to represent conservatism and trust/dependability.

In terms of layouts, I was aiming at an upper limit of six hundred words per page ~ this is about what you get on an A4 page with size 11pt text. A lower limit of three hundred, this is still a word based site. Longer articles can be split into sections, I am hoping this will encourage conciseness. The iceline API docs are an exception. I currently have no aims to add any graphics other than corporate logos for relevant links. I would like to keep the page load time to below 0.3s (although this is dependent on network and the client configuration). This helps the responsive aspect.
Having updated all the resources to the new skin, further work was necessary. There are about ten “long” resources ~ more than a thousand words ~ which have been paginated for better readability. This is in addition to splitting topics into different resources, which is also occurring. The pagination is currently a serverside function, as I don't have a algorithm, to partition the paragraph data, without moving the non-paragraphs (i.e. tables) to an extreme of the document. Putting this on the serverside improves readability for non-JS browsers, as for them its still paginated. I will probably write one in future, but this requires a better level of abstraction than is available at present. If I can get everything on the client side, the display is entirely appropriate for the screen size.


Newspapers are traditionally in columns as this improves readability (especially when they started doing this with lower-grade printers). As my texts are quite large, columnisation should likewise help. As noted in the goals, further units of chunking are needed. Practical testing demonstrates that breaking the text up with chunking strategies like this yields much more dense pages; although it looks lower density.

The resource that I changed the most with this re-skin, is the home page. This is resource that people will look at the most, and due to high density of information must be responsive. I have added a large chunk of CSS to ensure my packed display looks reasonable in a variety of screen sizes. I will then implement this again in JS for MSIE. I reference 1 amoungst other resources.

Technology discussion

Discussion on columnisation, Discussion on fonts
My current batch of reading for HTML5. The move to HTML5 is no real change for all the HTML that just displays text (which is one of the reasons for this happening in 2013 not earlier). In order to pass the wc3 validation, I needed to set the language to 'en-GB-oed'. I wasn't previously aware of this dialect of English, but I think it is important to tag that this is written in actual English (UK) not US “American”. I have spelt everything correctly, for where I live, and where I expect my readers to live.
As I am spending more time in a single block, I am making the UX look simpler, by acting simpler. This means I am adding lot of complex time sensitive JS code, so it behaves “more like a human” and “less like a PC”. These are trait statements, as obviously, it is mostly flat text. To get this to work on all platforms, even with jQuery, is still a time sink. I suspect I will put my script into a jQuery module, to take structures out of the global scope. This class has no application outside of my framework. Javascript has poor support for singletons (aside from closures), due to open data access. This overlay should be a singleton.
The new skin would not be possible inside the f1 iceline renderer, unless I added a new renderer class. I added f2 in the first quarter this year to allow stuff like this to happen. Similarly a different rendering platform would also be more flexible. It probably should be pointed out, that an f2 renderer written in twig, smarty, fast-templates or similar would also yield similar feature improvements.
I looked at a couple of HTML5 template builders, but they seem to be a solution looking for a problem. I personally also have low utility from ms-Power-point. There are a variety of “HTML templates” that one may download (e.g. 2). I find the prose attached to these confusing. They are all basically the same HTML with a different background picture ~ not a product. I created mine from scratch, so that I know that I can ~ I wouldn't do this in a paid environment.

One may ask “why did I put all that effort in and leave it looking flat or 2D like that?", and I would answer that I was following current design trends. I reference a few blogs 3 4 5 6.

I am having aging problems on my CSS, and may need to recompile the CSS through something like less. There is CSS options specific to versions of browsers, that where added to support that precise browser several years ago. The newer editions of the same browser now reject these settings. Until I am confident that all users of the browser have updated, I cannot remove the older code. These settings are frequently important visual layout items, so there presence, in a supported fashion is necessary.

MSIE doesn't support the same font technologies as other browsers, so this will need to be implemented again with their format. I added the Ubuntu font as the default choice, this is readable. There are complications with generating MS flavoured fonts, but assuming you are seeing this as I think you are, I have this resolved. The fonts and sizes etc may be set through the appearance menu.

As a note which I will be addressing shortly; the columniser doesn't work in the presence of tables.
Update: does now, please see article.
Update again: I have tweaked the responsive CSS to it works better on tablet screen sizes.

The new skin has been tested in:

  • Firefox 22.0, 24.0
  • Opera 12.16, 11.X
  • Chrome 28.0, 26.X
  • MSIE 8 and 10 (I have yet to find a MSIE9 box)
  • It should work in MSIE7, unless there are issues with the small amount of jQuery used; but won't in MSIE6
  • Safari mobile
  • Chrome nobile

New skin for ob

RSS. Share: Share this resource on your twitter account. Share this resource on your linked-in account. G+

New skin for ob

RSS. Share: Share this resource on your linked-in account. Share this resource on your twitter account. G+ ­ Follow