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.

Aqua theme on this site

The version of my Aqua theme currently installed here replaces the site title and (optionally) description with a graphic.

In the NQCC version of it the logo sits above a header image but here a larger “logo” is used instead of a header image (technically, the logo replaces the site title via a call in the header.php file, the site description is suppressed in the same place, and the header image has been removed via the “customise” dialogue).

This version of Aqua is also using Century Gothic for headings and body text, without any tweaking of sizes and spacings, although the theme is optimised for Futura headings and Arial body text.

Testing “Press This”

Alleged captain of Mediterranean migrant boat that sank with more than 700 lives lost denies he was in charge.

Source: Migrant boat disaster: Alleged captain of capsized ship with loss of more than 700 lives appears in court – ABC News

This was posted here via Press This using default settings, and then edited in WP (1) to add this explanation and (2) to change post title from the headline to “testing Press This” and shorten the slug which was, yet again, the headline. Press This is not very smart!

Mailchimp newsletter design

Many website owners like to use Mailchimp newsletters to keep in touch with members or customers. Here are some samples – good, bad, slick and basic – to spark designers’ imaginations. Clicking on any of them will open bigger versions in a lightbox and allow you to scroll through as you wish.