About this site – December 2019 onwards

This site was set up as a web design sandbox, then for a while it functioned as a web design showcase under the heading ManTisDesign but it is now essentially functionless.

The blog (on which this post appears) is about web design and layout in WordPress – notes, tricks and daydreams.

The rest of the site? One “About” page, and a couple of hidden (private) pages created for specific (narrow) audiences. That’s all.


And the current theme is …

This site is now using the twenty-sixteen child theme developed for Green Path … except that I liked the Century Gothic look of a previous incarnation of one of my twenty-ten child themes so much that I have adopted that font here.

If you haven’t got Century Gothic on your device, the font defaults to Helvetica or Verdana … not so pretty but still pleasingly clear.

Header image sizes in twenty sixteen

It makes surprisingly little difference if the header images are too small, e.g. 940 x ca 200 px rather than 1200 × 280 which is what twenty sixteen recommends. At window widths less than the image width it makes no difference because the theme re-sizes the image anyway; at larger window widths the image left-aligns but doesn’t right-align. And image height makes no difference at all to the functioning of the theme, unless images of varying heights are used in a slider.

Some of my sample images are tagged with their sizes. Height varies, and (to me) 205 looks a bit miserly, 280 dominates the page too much. ‘Townsville from Mt Stuart’ is 235px high, while my paperbark blossom is 205px high (mainly because that was easiest, working from the versions I had). Both have 12pt Futura titles.


Photo sizes and file sizes

For web use, pixels are all that matter. The image needs to be X pixels by Y pixels, and that’s all we really need to know.

The resolution (usually expressed in dots per inch, dpi) is not the same thing as the pixel size but says something important about how the image is displayed, on screen or on paper. For instance, an image 250 x 250 px may be displayed on screen at 96 or 120 dpi according to the device, making it (roughly) two and a half or two inches (i.e. 60 or 50mm) square respectively; or it may be printed at 300dpi, making it less than one inch (25mm) square.

File size (usually expressed in kilobytes or megabytes, KB or MB) is related to pixel size but again doesn’t matter much for display purposes. For a given pixel size, a larger file will appear as a better quality image but will take longer to load.

Choosing colours for your site



Thanks for inviting me to check your new site. It’s great to see you sharing your knowledge of the subject we both value, and to see you tackling the technical challenges of creating your first-ever website. It’s quite a learning curve, isn’t it?

You weren’t to know this, of course, but I do a bit of web design so I looked at it from a more technical point of view than most of your first commenters.

Functionality is fine – congratulations! Everything nicely laid out and  easy to find. I’m afraid the colour scheme is not so successful however.

You obviously like the saffron colour, and I can understand that completely because it relates so well to your subject matter, but using so much of it is always going to be problematic for two reasons.

Firstly, you need a good contrast between the text and the background for readability. I checked that through the tool at http://www.checkmycolours.com and the results weren’t good at all, I’m afraid. Secondly, colour creates mood, and orange is often some kind of danger sign, subliminally arousing energy and excitement, perhaps, but also tension and anxiety.

One solution is to use your strong saffron for feature areas (e.g. header image) and a much lighter version of it (e.g. #f3d3af) as the background for your main text area. Another is to make your saffron even darker and the text very light, but I think it’s going to be a bit oppressive – still not conducive to the mood you want.

You might like to try some of the colour-design tools from The 28 best tools for choosing a colour scheme at Creative Bloq, which is (full disclosure!) where I came across the colour checker.