Responsive design preparation and general site improvements
28 March 2014 | 6th Edition
Over the next few weeks there will be a few changes happening to enable this site to be fully responsive, that is to become a better experience for the growing number of visitors coming here using mobile and tablet devices.
In order to get the that stage the details below give a bit of an insight into the furious paddling that is going on below the surface.
What is a 'responsive' website?
At its most basic a responsive website is a site where the design and content elements reflow to better fit the size of the viewing screen. The whole philosophy is about making websites device-independent — looking at their best no matter what size device viewing screen it is being viewed on.
Initial page size and meta page descriptions
As part of the process to get the site responsive — each page needs to be set to an initial scale of 1, meaning a tablet or mobile device will not automatically shrink the page to fit the screen. Initially this will mean a bit more scrolling around the page to read content when being viewed on mobile and tablet devices.
Once the site is converted to be fully responsive this scrolling will only be up and down in the usual manner.
The other aspect to this is the addition of page descriptions. These are simple one line summaries of the page that is added to the page's meta data. It helps with page searches and SEO (Search Engine Optimisation) and is something that up till now has been largely overlooked here. This is the bit that takes the time as each has to be written and added individually.
HTML5 doctype
A few months after 2010-11s massive design update the site was changed from its XHTML 1.0 Strict doctype to HTML5. This was done for a variety of reasons, not least the rapid adoption of the then new HTML5 and CSS3 (its associated style language) features in browsers that were being released and updated at the time. It also included new standards, including new page structure element clases for better Search Engine Optimisation (SEO).
Though not strictly necessary for a responsive site it seemed good practice to make the change. This required a bit of tinkering to the code on every page — luckily that could be automated.
SVG images
Most of the site's small icons are png or gif files. There is no problem with that but to enable these to render pin sharp on retina devices without any fuzzinees they will be changed to .svg (Scalable Vector Graphics) files. Also, as an svg format image is a vector (outline) illustration and not a pixel-based image, it will not suffer any pixeling even when massively scaled up.
Currently svg's can be seen in all these browsers — which are either current or at least one version back from current:
- IE 9
- Firefox 3.0
- Chrome 4.0
- Safari 3.2
- Opera 9.0
- iOS Safari 3.2
- Opera mini 5.0
- Android 3.0
- Blackberry 7.0
- Opera Mobile 10.0
- Chrome for Android 33.0
- Firefox for Android 26.0
- IE mobile 10.0
The biggest problem is that only browsers from IE9 upwards will see them. IE8 does not support svg file formats. There are workarounds to overcome this, but they will not be implemented here as IE8 (and older versions) only account for 2% of browsers currently using this site. So if you are running IE8 then now's a good time to upgrade.
Media queries
Media queries are items within the CSS style sheet that tell the browser what items need to be rendered to what sized device screen and what they should look like. A website will use predetermined breakpoints to render content effectively on various mobile and tablet pages.
Some content items will not appear on mobile devices — only showing on wide tablet or desktop displays for instance. This is intended. It just means a lot of clutter can be kept away from the smaller viewing screen sizes — concentrating on what's important and saving on download times.
Media queries are a way off from being fully implemented yet. But once finalised they are the final piece of the jigsaw to making the site fully responsive. There is a bit of experimentation going on presently with the navigation and other content items in order to get something that I'm happy with.
Publication dates
This is not a blog site so publications dates are not a critical issue. However, most Tacticas and some Tech Reports are indeed date-sensitive.
I had already initiated a programme of adding dates to all pages (apart from Oratorium pages) published since January 2011. This will continue. As I needed to add page descriptions to each page, I'm also in the throes of trawling back through older pages adding dates to those too. I've taken the view that the exact day and month is largely unimportant — but in 40K gaming terms the game edition is very important. Therefore pages might be dated using either of these two formats:
DATE PUBLISHED: 26 MARCH 2014 | 6TH EDITION
or more simply just:
DATE PUBLISHED: 6TH EDITION
The same formats will apply to pages that are designated as having been updated. Just the initial wording will change.
To WordPress or not to WordPress
Anyone familiar with web design will know the great beast that is WordPress. Known initially by many as a system to power blog sites, WP is also an extremely effective content management (CMS) tool.
Currently this site is effectively known as a 'flat-file' system in that it does not run on or need a database to function. This speeds up load times and cuts out a database that might go down or be hacked.
But flat file sites are hard work to maintain as everything needs to be produced and loaded up manually to the server. There is no online editing/page creation tool that is so familiar to WP users.
For ease of maintenance I have long considered retro-fitting the site to use WPs content management tool. But at this stage I'm afraid that with everything else going on this will be put in the 'too hard to do' pile for now.
