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.

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.

Testing and modifying 2016 for GP

Installed twenty sixteen kitten here on 5.1.16, mainly to take advantage of the modifications I have already done.

Used “Customise” to adjust site identity, header and background colours.

Fonts updated via the Editor, to Georgia, “Bitstream Charter”, serif; and Helvetica, “Helvetica Neue”, Verdana, Arial, sans-serif; and site-title and entry-title weight –> normal instead of bold.

Link colours similarly updated to 2010GP colours, except that “hover” colour made less bright.


Spacings reduced in several places – mainly to half of original.

Headline font weights reduced (but prev/next posts headlines still need the same action).

Widgets reformatted, given padding and bkgnd colour while bottom margin drastically reduced, to 1.25em. (5.25em is a bottom spacing used elsewhere and should be similarly cut.)