Your Guide to Image Speed Optimization On Mobile


Image credit: Pixabay

Your Guide to Image Speed Optimization On Mobile

Have you been told you need to optimize your images for mobile? Worried that slow load times, or a bad mobile UX are hindering your sales and conversions? Here are some truths about optimizing your images for mobile — as well as some actionable tips and advice on how to make your mobile site perform better.

Compression & re-sizing is key

One of the most important thing you need to do to your images? Compress and resize them. This will not ruin the picture, as long as you strike a balance between file size and visual quality.

Compression helps improve website performance and speed because it essentially makes image file sizes smaller. Using a plugin like ShortPixel means you can retrofit your image library, even if you didn’t do anything to them when you first uploaded them.

Resizing is just as, if not more, essential than compression. Digital cameras often, very unhelpfully, create images that are very large. Take the pixels down and resize images down to a more reasonable size using a plug in like Imsanity (featured in our review here). Imsanity is actually also a viable (free) alternative to ShortPixel that is limited in its free version.

Image resizing is especially key on mobile — even though modern smartphones are powerful computers in their own right, large images that fill the screen will slow the mobile experience down. You may want to include less images across the board so as to not unnecessarily slow the user down.

Use (trusted) image optimizers

You can optimize pictures for web use by compressing them using Photoshop (not that tricky to do yourself), or you can use some trusted image optimizers that will help you scale the process.

The problem with image optimizers? A lot of them don’t work, and it can be hard to find the best in a bad bunch.

Luckily for you, we’ve gone ahead and tested them against some pretty tough (but fair) criteria. Here are some trusted ones that made the grade.

Ditch the extra plugin bloat

Got an image speed problem? There’s a plugin for that… Or is there?

Don’t jump off the cliff with other lemmings and immediately download fifteen ‘image optimization’ plugins — you will only end up bloating your site’s backend with unnecessary plugins. Third-party plugins are notorious for slowing sites down, and can be a security risk for cyber attacks like SQL injections.

You will also find that one bad-quality plugin can do the damage of a dozen. Bad plugins can actually load down every page on your site (site drag). Slightly counterintuitively, the more popular a plugin, the worse it may actually be for your site! It’s not about quantity — but about quality.

Not sure if a plugin is worth it? Always read plugin reviews, and check how the number of downloads compares with the number of active installs. You want plugins that have good retention rates — it shows they have longevity. Don’t be afraid to install older plugins — they can be pretty reliable, even if they’re not updated as frequently. (Though updates are a good sign — it shows a developer who cares about their product).

Choose the core plugins that you need, always keep them updated, and disable any old ones.

Don’t blindly trust tools

Automated speed tests are notoriously unreliable, and have been exploited by SEOs and digital agencies wanting to sell their digital services off the back of a ‘bad result’. This is often an elaborate hoax to get people to worry about their rankings and invest in SEO.

Everyone’s experience of the internet is vastly different, and few speed tests are able to accurately reflect device experience. So take their findings with a pinch of salt, and focus on the basics:

  1. Good hosting
  2. Compressed images
  3. Well pruned code and CSS files
  4. Essential plugins and features only.

Random spot-checks and usability testing are great ways of finding out more about your mobile experience.

User perception

Too often we forget that websites are the products of layered illusions — and it’s the user’s perception of what’s going on that really matters. This quote from Lora says it all:

“The perception of how fast your website loads is more important than how long it actually takes to load. User perception of speed will be based on how quickly they start to see content render on the page, how quickly it becomes interactive, and how smoothly the site scrolls.” – Designing with Performance by Lora Hogan, p19

Don’t just focus on speed insights that come from tools and backend code — focus on speed in-action. What the user sees is what matters, so focus any speed testing around their experience of the site.

Consider image UX

Come at your ‘image speed problem’ from a different angle, and ditch the images all together! Consider whether they were really needed in the first place.

Take the following three questions into account:

  • Is the image interrupting, rather than contributing to, the user journey?
  • Are images really adding value here?
  • Are the images making the site less, or more, accessible?

Modern designs often push big featured images and hero size images on us; but if they don’t actually achieve a tangible aim: what is the point? Many information blogs that focus purely on copy may not need them at all!

Try to avoid using huge ‘filler’ images on your mobile site — being concise with your imagery is far more important.

Ecommerce product images

When it comes to the sales funnel, product photography is key. So how can you ensure that product images are doing a good job of selling your products, without slowing your site down? A customer doing product research on their mobile isn’t going to thank you (or make a purchase) if the site won’t load.

  • Create product images in-house so that you can control the process, and don’t overdo photography for the sake of photography
  • Images don’t need to have loads of details and props — they can be simple and beautiful
  • The infinite scroll is often favored by users when they’re looking through a product catalogue fast — stick to small image thumbnails to enable this
  • Carousels are bad for conversions, not favored by users, and they look terrible on mobile. Try to avoid pointlessly rotating image carousels (but if you have to — go with these ones). And avoid them on the home page if you can…

Don’t lose sight of the bigger picture!

Yes, speed 100% matters, but don’t just focus on speed and forget about all the other crucial elements that go into a good website, like:

  • Usability
  • Coherence
  • Purpose
  • Accessibility
  • Aesthetics.

Speed is often a by-product of good web development and a good content management system that’s been properly managed and maintained. Don’t neglect ANY areas of your website if you want to make the most of it.

You need to be looking at the user journey, sales funnel, and the experience of using your pages — not just what the speed test tells you. Your users are the best judges of your website — so listen to them.


Victoria Greene is a content strategist and freelance writer, blogging at Victoriaecommerce. She’s proud to say that she’s built a few websites in her time, picking up a thing or two on good and bad web design on the way.

Using faster Unicode symbols instead of Font Awesome for speed.

To be read in modern browsers, HTML/CSS files must be UTF-8 – an encoding scheme developed in 1992. WordPress uses utf8mb4 and is 100% backwards compatible with UTF-8. So what? What does that trivia have to do with speeding up mobile websites?

You can customize your site icons by setting a Unicode font-size, color and text shadows, just like regular CSS text. The name is derived from Unicode (or Universal Coded Character Set) Transformation Format – 8-bit. UTF-8 is the character encoding accounting for 88.4% of all Web pages in January 2017.

When we think of pretty font icons like arrows, hearts and stars, we think of trendy font icon services like Font Awesome or Fontello. Font Awesome is a unicode UTF-8 font referred to as a glyph icon library. You can use it as decoration, logos, or navigation. Because these are webfonts, they cause extra page weight and HTTP requests. Font Awesome and other icon fonts slow down page load times. The frequently add 75k to 100k extra page weight and HTTP requests. That slows things down.

If you are developing a website using only simple shapes, you can use unicode UTF-8 symbols as replacement for font icons. The unicodes are essentially part of your operating system so you don’t need any special library or plugin and you treat them like regular text. For example, to change the icon size, simply change the font-size values as usual.

Detoxify the Web. Make your site fast.

Above is an example of a colorized Unicode biohazard symbol.
Unicode Character 'BIOHAZARD SIGN' (U+2623)

We use a solid Unicode star in our PagePipe logo.
Unicode Character 'BLACK STAR' (U+2605)

The trouble with image files as icons.

Using raster-images files to create a menu icon – especially 8-bit PNGs – are faster loading than Font Awesome or Genericon icon fonts that are usually included with many free and paid themes. Image icons can be lightweight but still slow down your site with another HTTP request and time for the image to load. With images you don’t have flexibility over the color and scaling. SVG vector image alternatives are still not faster than plain-text (Unicode characters). Unicode doesn’t require additional HTTP requests and can be made to scale nicely.

The Unicode character for menu icons (“navicons”).

For the basic, three-line navigation menu icon, there are two Unicode characters:
One is the Chinese glyph (the trigram for heaven). It looks just like the “hamburger” navigation menu icon. It’s available as the following HTML entity:

&#9776; <!– Results in ☰ –>

The unicode character for ‘IDENTICAL TO’ (U+2261), is more bulletproof than  the TRIGRAM FOR HEAVEN’ (U+2630) on different operating systems.

The mathematical operator is used in more fonts than the iChing symbol.

Most recommend using the UNICODE character UNICODE U+2261 (8801), ≡ IDENTICAL TO as illustrated below rather than the UNICODE U+2630 (9776) ☰ TRIGRAM FOR HEAVEN which seems to have font support issues on some older Android devices.

≡ Menu

Use ≡ (x2261) shown above, instead as it has better support (96 percent).

Is there Unicode glyph Symbol to represent “Search”

There is U+1F50D LEFT-POINTING MAGNIFYING GLASS (????) and U+1F50E RIGHT-POINTING MAGNIFYING GLASS (????).

You should use (in HTML) &#1F50D; or &#1F50E;

Or use “Telephone recorder” U+2315: ⌕? It resembles a magnifying glass and seem is included in standard fonts, where U+1F50D and U+1F50E aren’t always.

Or use the ⚲ symbol (encoded as &#9906; or &#x26B2;)

HTML Entity (decimal)     &#128269;

Unicode character information
Left-pointing magnifying glass

Displayed on your computer as: ????

Unicode name: Left-pointing magnifying glass
Alternative names:

Magnifying glass, left-pointing

Codepoint (hexadecimal): 0x1F50D
Codepoint (decimal): 128269

 

http://tutorialzine.com/2014/12/you-dont-need-icons-here-are-100-unicode-symbols-that-you-can-use/

Unicodes are Icon-like, Arrows, Special, Currency, Weather, Pointers, Card Suits, Chess, Math, Fractions, and Roman Numerals.

UNICODE REFERENCES

http://www.copypastecharacter.com/

 

http://jrgraphix.net/r/Unicode/2600-26FF

Symbols gone amok:
http://unicodeemoticons.com/cool_text_icons_and_pictures.htm

http://dongerlist.com/

How to show high-resolution portfolio images on mobile screens.

My brother Brad is an artist. He does landscapes, woodcuts, abstracts, book illustration, comic books, and many other artistic expressions. His million-view blog is ThickPaint.  His YouTube-channel has around 1.4 million views. He’s an art “thought leader” with a reputation.

B
rad wanted to show landscape images to gallery owners. Speed was not an issue. The target audience has ultrahigh-resolution, large screens and fiber-optic Internet connections.

Retina-friendly images for professionals – and speed for curiosity-seeking mobile visitors?

Typical screens now have a resolution of 1024 x 768 pixels or higher. Mobile presentation of fine art is unusual. Who reviews and critiques artwork on a small, mobile screen? Not a serious buyer. Version 4.4 of WordPress added support for mobile, responsive images. That addition takes care of most mobile users needs for image resizing. (More, in a bit, on image high-resolution enhancement with a plugin).

Common ultrahigh-resolution displays are between 1,920 × 1,080 pixels and 2,880 × 1,800 pixels. 4K and 5K displays pack millions more pixels than lower-resolution displays. 4K computer monitors have a display resolution of 3840 × 2160 pixels. This is about four times as many pixels as a typical 1920 × 1080 pixel display.

Apple coined the marketing term “Retina displays” to describe ultrahigh resolutions. One-third of all iPhone users still have a 4-inch screen. Thats a pixel density of 326 pixels per inch (ppi) on a 4-inch, diagonally-measured screen. The goal when introducing the iPhone 4, was about 300ppi for a device held 10 to 12 inches from the eye. That’s the same as 300-dpi, catalog-print-quality resolution. The iPhone 7 (2017) still has the same resolution – but on a 5.5 inch screen (diagonal).

Retina images are heavy and slow loading. Very heavy. Very slow.

In 2013, Retina displays were on 1.1 percent of computers. Today, it’s much higher because iPhone and iPad tablets use them, too. Images get heavy when catering to creative professionals using large, desktop Retina screens.

Web designers can’t prepare Retina images the same as normal 72ppi web images. Images that aren’t optimized for high-resolution screens don’t look very good. Our opinion is this extra care matters little for most websites – and their users. We don’t ever prepare Retina-ready images. It’s unnecessary overkill.

Recommended image sizes:

  • Smartphones: 888 x 888 pixels
  • Tablets: 1366 x 768 pixels
  • Laptops: 1600 x 900 pixels
  • Desktops: 1920 x 1080 pixels
  • Retina Displays: 2560 x 1600 pixels
  • 4K Displays: 3840 x 2160 pixels

What size should you upload? The bigger the better. This, of course, is horrible for speed.

WP Retina 2X
100,000+ installs
1.8 million downloads (9 percent retention)
1.1M zip file

The WP Retina 2X plugin creates the image files required by retina devices. Then your website looks crisp on every device. The plugin recommends full-size image resolution of 2520 × 1200 pixels. Then the plugin generates a full set of eight images required by your WordPress website. Double the normal number.

The optimized plugin won’t slow your site down. Nor does it weigh down your WordPress database. The plugin only makes one HTTP request and it’s for a script called picturefill.min.js. It weighs 5.5k and loads in parallel with other page files in 123 milliseconds. It’s as if the plugin is transparent.

For Brad’s site, we uploaded images about 3024 × 3024 pixel size. These weighed from 1.5M to 2M file size. We did optimize images before uploading using “save for web” features in GIMP for Linux. The JPEG quality setting was 80. This reduced the image weight from 3M to 2M – about 30 percent.

Today, average web pages weigh 1.3M. Extremely heavy. The Retina images are larger than all components to build a single web page.

That image size on a mobile page destroys speed. The delay isn’t tolerated. The answer is to use a gallery plugin with lightweight thumbnails. The one we chose is Oqey Gallery plugin.

From our past research, people will only look at about 12 images per portfolio section. They get bored around nine. So we wanted a grid of 12 thumbnails. Those then open up a view of the heavier, Retina-quality, full-screen images.

We chose a free, bare-bones theme called Graphy from our under-1M-compressed speed collection. We needed a simple, unadorned, classic look that wouldn’t detract from the portfolio.

WordPress Graphy Theme demo page.

BradTeare.com home page with thumbnail grid.

Slider lightbox with Retina image quality.

Mobile version on iPhone.

Under 1-second Speed Specs

BradTeare.com
Pingdom test

Performance grade: A 100
Load time: 842 milliseconds
Faster than: 92 percent
Page size: 409k
Requests: 35
Tested from Dallas

Don’t bring down the Internet with bloated video headers.

Don’t bring down the Internet with bloated video headers. We offer some lightweight ideas- and a free optimized web graphics for branding the WordPress Twenty-seventeen-theme home page.

Save the Internet from slow and destructive Zombie design. Our Promise: You will improve first-time user perception of branding and page speed.

If you cram the Front-page Content Sections with generic stock photography then … surprise! Your Twenty-seventeen Home page is now ridiculously heavy. Outrageous even on a desktop! You can avoid these new theme pitfalls and also take advantage of some great speed opportunities.

Video headers are specially created for branding your Twenty-seventeen theme home page. It takes knowledge, skill, and patience to find – or build – non-bloated visual elements. The hunt for orchestrated, featured images is a huge time sink. We save you time and frustration.

1What’s an “atmospheric” video header? They’re decorative elements – like header images, but with motion. They play automatically, loop by default, and don’t have sound. They work best when paired with a static image for mobile fallback. Motion video is a short, looping background video without controls – except for a pause button which you can easily make more transparent.

Regarding the Twenty-seventeen theme video header, it’s either locally hosted mp4 and mov files or external, hot-linked YouTube videos. But we recommend self-hosting your motion header in the media library and not using video hosted on YouTube. The experience is much better this way. Try it. You’ll see.


2Doesn’t video ruin page speed? Twenty-seventeen theme lazy loads the header video only on desktop computers – and no load at all on mobile devices. Then just the static fall-back image is displayed. Lazy loading means the theme defers video loading until last for user perception of speed. Bandwidth is still consumed. This occurs only on the front page for viewports at least 900 pixels wide and 500 pixels tall. As a safeguard, the maximum video file size is also capped at 8MB. The theme customizer validates that local videos have a supported format, proper file size, or that external video links are to YouTube. The WordPress development team strongly encourages using smaller files. Why? Visitors won’t spend time on big, long videos. It’s a waste of resources. Hefty videos gobble bandwidth. Video hurts performance. And, duh, it causes a Web Apocalypse destroying Internet usability.

Even with an 8M theme cap for video file size, its inclusion on the site’s front page with standard, shared hosting can easily result in your site slowing down. This is due to bandwidth overages or excessive data transfers. Video files put undue strain on both the host and the visitor.

It’s not easy preparing a video that looks good, is lightweight, and loops well. It requires special knowledge to deal with the complexities of meeting a file-size limit so small. That’s what we can do for you.


3How much does your our SpeedHeader demo cost? It’s free! You get a super-fast loading, 16-second video motion header, a fall-back header image for mobile, one optimized JPEG feature-image photograph, and four other color-coordinated, large, home-page featured images that are lightweight GIF files. All visuals are harmonized to work together. Keep reading.


4Why GIF instead of PNG format for featured images? WordPress imposes automated resizing to the PNGs when they are used as feature images. They bloat up to 3-times heavier in weight. That makes them load slower. For unknown reasons, GIFs don’t get the same treatment. WordPress doesn’t touch them. They stay light.


5Are there conditions where I don’t need your demo SpeedHeader? Most site owners have found these graphic accessories a lifesaver. It keeps your website focused, mobile-friendly – and the perception and reality of fast page-loads. Our header will keep your site lean – and simultaneously save the web from certain doom.


6Can I use these free visual assets on more than one site? Help yourself. We don’t charge usage fees. But please don’t resell or giveaway our creative work. Cousin Guido doesn’t like that. Save your kneecaps.


7Does your SpeedHeader help my SEO? Lighter page weight doesn’t improve search engine ranking or visibility. Testing shows that speed affects ranking less than 1 percent. But fast pages do reduce bounce rate, improve engagement, and rescue your user experience. That is equally as valuable as improved SEO. Plus the added sense of being a good, responsible web citizen.

So, do SpeedHeaders hurt my SEO? WordPress video headers do not affect page rank or time to get listed on Google. There is no downside for SEO. And that’s without any SEO plugin help. Good SEO practices are inherent in WordPress.

Headers affect User Experience (UX). That is how people feel when they are using your website. Motion headers fall in the realm of mood. Stock 16-second video tends to be around 3 to 5M in file size – and cost about $19. These double or triple the average 2.3M page weight currently on the web. Slow speed causes user frustration. This degeneration ultimately leads to the Web Apocalypse.

Heavy video slows down the Internet. This causes poor user experience – even with lazy loading. Poor UX is the real downside – not SEO – and it’s why we created SpeedHeader. Our motion header loads fast.

TIP: We use a rocket GIF animation as PagePipe’s header image. It weighs about 300k. Much less than video and it plays on mobile this way, too. Load your animated GIF as one of the static header images. You can also rotate header images randomly in the customizer with each page change. Nice trick.

Intense E-motion – freebie header for Twenty-seventeen theme!

Intense E-motion – freebie header for Twenty-seventeen theme!

FREE DOWNLOAD 296k video size. Home-page test: 854-milliseconds.

Exciting, flamboyant, and dynamic: Intense E-motion includes an optimized, super-lightweight video SpeedHeader and supplemental featured images. These are specially made for web designers, site developers, and WordPress website owners. Created for branding your Twenty-seventeen theme.

It takes knowledge, skill, and patience to find or build non-bloated visual elements. The hunt for orchestrated, featured images is a huge time sink. We save you time and frustration.

Above: SpeedHeader demonstration video for Twenty-seventeen WordPress theme. Atmospheric motion video adds just 296k page weight. Fast-loading.

Image-heavy sites kill page speed. The top contributors to slow load times are images and videos. You now have a cure for that.

Speed Test Results for “Intense”

 

Tests were on cheap, shared, magnetic GoDaddy hosting. For us – as irrational speed freaks – a 854 millisecond load time* with a server overhead of 510 milliseconds (TTFB) is impressive. No brag. Just screaming fast. No CDN or caching plugins.

OK. Enough about speed. More about the cool branding you get with Intense E-motion:


Recommended Geometric Sans Serif Typography
London-Between Two
by Francois Bruel. Offsite freeware font download.

Display-image typography matters. Conscious and subconscious font cues influence visitor’s positive memories. We select typefaces with the right personality.


Lightweight graphic elements for featured images. Premade GIFs included with layered Photoshop .PSD file for making your own custom signage.

SUBORDINATE COLOR #70328b – purple
ACCENT COLOR #04a284 – emerald

Bonus freebie color feature GIF image and a still fallback image:

ruby #c43a2c

 


 

FREE DOWNLOAD 296k video size. Home-page test: 854-milliseconds. Pingdom.

 

Twenty-seventeen theme: a branding and speed problem with a learning curve.

We want to explain the pros and cons of the new Twenty-seventeen WordPress theme.

But first we must review a few basic branding principles. Excessive (or expressive) branding slows page loads. So why even include branding components on a site? Why not just have plain text?

Branding alters audience perception. It isn’t only the site text (content) but rather how it is imagined in the user’s minds. Branding and creative positioning strategy work hand-in-hand. They enhance visitor imagination or mood. Don’t get us wrong. Visitor motive or search intent do influence site perception. But other symbolic and intangible elements also are important. They affect how people feel when arriving and using your website.

On the web, we call this emotional perception – or feelings – user experience or UX. Branding differentiates a website from the competition. Branding fulfills customer expectations and satisfaction. User satisfaction is a component of website usability.

Users are not consciously aware of good branding. Unless of course, that’s their field of expertise. Bad branding feels fake, contrived, or noisy. Good branding is transparent, genuine, and only detected at a subconscious and visceral level. Many elements that create branding sensations are design related. These include:

  • Speed (page load time).
  • Color combinations (theming).
  • Fonts (typography).
  • Photography.
  • Illustrations.
  • Symbols (including logos, icons, and favicons).
  • Layout.
  • Readability.
  • Styling (expressive or classic).
  • Ease of use (navigation).

Speed is first in a good branding strategy.

When visitors feel frustrated or annoyed by a slow page load, they won’t tolerate it. They’ll leave by clicking the browser back button. This wastes the hard work invested in aesthetics and content relevance. We call this “twitch” behavior – or the economy of attention. Attention spans and tolerance levels are decreasing.

Branding increases the website perceived-value and credibility. It’s the famous first impression. This creates a halo bias or effect that skews all later site interaction. It’s your opportunity to present positive website body language. This improves your customer loyalty results. Increases repeat visits, encourages longer visits, and a lower percentage of single-page sessions (bounce rate). In other words, your site feels like the right place to be.

Now, back to our real topic, the problems with Twenty-seventeen theme.

Twenty-seventeen uses the full screen to present a single image or motion video. On desktop, both get loaded. On mobile, no video loads. Just the “fallback” JPEG image.  Superimposed over the screen in the bottom left corner is a small amount of text. This is the site title and tag line placed in the WordPress customizer.

“The problem with large Hero images for mobile.” Our article explains two reasons:

1) If the hero image fills the whole screen, it may not communicate the purpose and relevance of your website. What if people, go, “Huh?” wondering over the meaning of your big image? You may just bounce another visitor. You wasted communication space (above-the-fold area).

2) A large JPEG image is heavy. Video is extremely heavy. Those slow down page load. Another bounce risk.

Are bounce risks worth it? Remember the visitor does have a motive for visiting your site. And it’s not to admire your artistic hero image. Unless you’re an artist, of course.

Automatic resizing note: If you upload a header image with dimensions different than 2000 x 1200 pixel, the theme resizes the image to make it full screen on desktop computers. It stretches images of wrong dimensions and makes them look grainy.

The header fall-back static image is responsive but it resorts to cropping-to-center on mobile. This is a common technique to avoid a small header image and a large gap beneath the image as it proportionately resizes. It was the decision of the theme developers to crop the image.

More Twenty-seventeen temptations.

We wrote a benchmark article. In our benchmark, we mention how easy it is to overload the home page with featured images and motion video.

Go ahead use stock off-the-shelf images and video. You will have a page load time of between 2 seconds and 4 seconds on Pingdom.com or WebPagetest.org. But that is deceptive. That is the perception of speed. It’s the lazy-loaded speed or initial load time. It doesn’t take into account all the mobile bandwidth gobbled up to complete the page load. That can be over 10 seconds.

Today, the average page weight is 2.3M.

Armed with Twenty-seventeen theme and stock imagery, the page weight will far exceed that. We guess around 5M typically. All in the name of branding, WordPress introduces more web-speed abuse. They have chosen to go with the herd – purely for expressive aesthetics and thus slow down the Internet.

WordPress’ design team attempted controlling the bloat with aggressive image optimization of featured images. And by capping hosted videos at 8M. And adding nice lazy-loading. These are all commendable. But you can also load YouTube full-length feature films if you want. No cap. And someone will.

WordPress is being cool and fast at the same time. Unfortunately, they opened Pandora’s box. It’s our opinion most website owners will not understand the implications. There is a learning curve with this theme. Instead site owners will wonder if caching or a CDN will fix the problem. They will use heavy stock images and fill all the empty slots on the home page. It’s inevitable.

Education is the solution. WordPress doesn’t have the resources  – or care enough – to invest in that. This is: Apathy.

Can you make the Twenty-seventeen theme load fast in under 2 seconds on shared hosting? Yes. But it takes discipline and planning.

How hero images contribute to mobile findability and relevance.

“Hero image” is a term used in web design for a specific type of web banner. A hero image is a large banner image, prominently placed on a web page, generally in the top, front and center.

A large hero image (usually a WordPress featured image) on a posts is irrelevant or generic if it doesn’t help move site visitors towards a conversion goal. There are only two critical performance metrics: sales lead generation and improved engagement (stickiness). Visitor engagement is indicated by click-through, page dwell time, and multiple visits. These are the inverse of high bounce rates. Information is no longer scarce – attention is scarce.

As content has grown increasingly abundant and immediately available, attention becomes the limiting factor in the consumption of information.

A high bounce rate means we’re attract the wrong people (traffic) – unqualified leads. The decision to leave a page is an impatient and intolerant “snap judgment” from interpreting subconscious relevance cues. These include typography, speed, readability, color usage, images, and symbols. These combined together are sometimes referred to as branding or design. In the end, it’s nothing more that a feeling of being in the right place.

If it takes the user too long to locate something, they will find it through another application. This is done, for instance, by creating filters to make sure the first content a viewer sees is relevant, of interest, or with the approval of demographics.

A large hero image is positioned in the most critical place to influence a visitor’s stay-or-go decision. It’s usually the first thing a  viewer sees. It becomes a critical device for attention and engagement. It’s our responsibility to make sure the hero image is relevant to the user – it’s not a job for the viewer. Otherwise the image becomes attention pollution.

What are you providing by serving up a large featured image? Is it merely a cue to content? Or graphic signage to make pages appear different and less boring? Does the use of a large image communicate a message worthy of the longer load time? It the page real estate wasted?

What is really needed are systems that excel at filtering out unimportant or irrelevant information.

Users have words and phrases in their mind that will cause them to click on a link. We call these trigger words or cues. They are essential to good navigation. Users want to get to a site’s content as quickly as possible. For this, they use information scent. Good information scent give clues and implications that they are hunting and searching in the right direction. They “feel” they will find the solution to their need or problem soon. This is also called findability.

Is herd mentality affecting hero image choices?

Just because your competitor is using stock hero images in the banner of every blog page doesn’t mean it’s a good thing. The herd majority is presently doing this page design treatment. It becomes invisible or transparent. It is ignored. Why?

Milestones during typical page loads:

2.5 seconds for the headline overlay to appear.

3.5 seconds for the background hero image to appear.

4.5 seconds all critical elements are on page.

6.5 seconds for the page to finish rendering. Note: Lazy loading Facebook “garbage / widgets” during that 4.5 to 6.5 seconds window is the most common delay. That’s what takes so long for complete rendering. Can you hear our contempt for Facebook’s speed apathy!?

Double those times for mobile screens.

When you place text on top of photographs, you usually ruin the image aesthetics and the text readability simultaneously. This happens and is bad practice – but part of popular WordPress theme rigidity.

The background image (hero image) is sometimes much bigger than needed for mobile because of the desire to conform to large-screen, retina-display standards. This poor image decision most likely is made by a designer concerned first about their portfolio. Not mobile experience. A mobile audience doesn’t use these kinds of screens – let alone can afford them.

We need to limit the number of page design elements that compete for visitor’s attention.

The size of a typical hero image on sites is around 1920 pixels x 1280 pixels and is scaled to size in the browser window. HTML code downsizing means the browser must calculating page space on the fly – a bad practice for speed. It causes a screen-rendering delay as “the machine” stops to think. And only a small portion of the big image is actually seen. The Jpeg image can weigh above 400k! Optimizing a little bit more might knockoff 100k easily. WebPagetest.org agrees with us about that image-optimization assessment. But the reduction to 300k is still too heavy for mobile page loads.

COMPARISON USING STOCK IMAGE

Typical page layout with hero image.

 

Actual size 400k background image. The whole image isn’t used.

Much of what determines where people invest their attention is below the level of pure reason. Indeed, research suggests that one of the most important factors for gaining and sustaining attention is engaging people’s emotions.

Mobile screens may be just 320 pixels wide.

One source of large, free hero images is Pexels.com. They have classy, professional photography. A typical Pexel image download is almost 700k page weight and 2682px x 1782px dimensions. Resizing and optimizing helps – but is still not good enough for mobile design.

The takeaway: The fastest image to load is – surprise – no image at all. Next best is a repetitive image that is already cached in the browser. But that can get pretty Spartan and boring. For information sites, textual content is more important than images – unless images illustrate or demonstrate a point.

Since Hero images frequently fill the whole screen, it forces users to scroll to find the point of your website. Hero images are frequently eye-candy and don’t have relevance to the article or blog post. It takes work and thought to find the right stock images. So, there is often a disconnect. Instead, using a call-to-action linked with an image would make more sense. Or even a large signup form. Publishing a positioning statement about “who we are, what we do, and why you should care” is good communications strategy and good ideas, too.

Large background images add a large amount of weight to a page for very little actual gain. Any user whose screen is generally smaller than 1024 pixels will absolutely not see the background image. Small screens simply don’t have the screen real estate to display content and background images. WordPress now attempts to load an appropriately sized “backup” image based on mobile screen size. But we aren’t seeing results in speed testing yet.

A video placeholder as a hero image is a creative technique by making it seem like the entire hero image background is a video that can be played. It’s just a static image that if you click on the “play” button you get a video Lightbox that starts playing a normal-sized video for you. The idea though is that the “play” button is the bull’s-eye of the top portion of the home page. The way it is placed makes you really want to click on it. Then the video sells you on the product or service.

Moving the header hero image down the page for lazy loading is wise, also. But is it still a hero image? We don’t know.

Better hero images do the following:

  • Answer customer questions.
  • Highlight your value proposition.
  • Make an announcement.
  • Feature a service or product line.
  • Include a built in CTA button.
  • Have consistent branding.
  • Reduce customization for limited resources.
  • Make our best promise that we can keep.

Good hero images contribute to the following feelings:

  • Immediacy – priority access, immediate delivery.
  • Personalization – tailored just for you. Personalization is one of the most important factors in viewers choice to attend to one piece of information over another.
  • Interpretation – support and guidance.
  • Authenticity – how can you be sure it is the real thing?
  • Accessibility – wherever, whenever.
  • Embodiment – books, live music.
  • Patronage – “paying simply because it feels good.”
  • Findability – “When there are millions of books, millions of songs, millions of films, millions of applications, millions of everything requesting our attention — and most of it free — being found is valuable.”

What kinds of images get immediate attention:

The factors most highly associated with getting attention, in rank order, are:

  • The message/image is personalized.
  • It evokes an emotional response.
  • It comes from a trustworthy or respected source.
  • It’s concise.

Messages/images that both evoked emotion and are personalized are more than twice as likely to be attended to as the messages without those attributes.

Why add a signature to the bottom of a WordPress post?

Why would anyone want to use a plugin to add a signature to the bottom of a post? It’s marketing communications touchy-feely stuff. The logical explanation isn’t that easy and not everyone “gets it.”

No one really explains the cosmic reason why signatures are “good” practice. So explaining from a marketing standpoint could be better. It seems so obvious to signature-plugin authors that they forget not everyone can see a benefit to an automatic signature.

It’s always been our recommendation for clients to add a personal signature on About pages — or what we sometimes label as Interview pages. The client always asks, “How come?”

These special pages with signatures (for us anyway) are in a FAQ format. For some reason, search engines think these are important pages. It could be the keyword “interview.”

Anyway, a signature (even a fake one – like a calligraphic script font) in blue ink on white background has a “feeling.” (Blue seems more pen like than black – again silly human memory stuff). It’s more intimate and experiential. It’s marketing voodoo. People consciously know you didn’t sign the screen – but they have a feeling of connectedness. They secretly wish you did sign each post.

Like a personal letter from a family member or friend, it’s subconscious psychological weirdness triggered by a scrawl onscreen. But it works. It’s endearing. It seems friendly. Perhaps because it appears handcrafted instead of by machine.

It definitely has to do with memories. Just like color combinations do. Or the smell of crayons. Or old songs on the radio. Why do those take us back in time? And make us smile or cry?

We could see creating a blog where we wanted that personal feeling on every page. Then we’d want a plugin so we didn’t always have to repeatedly place an image file at the end of each post.

Each post would then become a personal message to the reader (like a personality).

 

Above is an “interview” page we designed for a photographer. His signature is essentially his logotype and part of his branding. It’s at the top of the scrolled text. But most frequently, we put them at the page bottom. Here the signature almost serves as a caption for his photo.

His signature is quite distinctive. We humans can tell the difference in those small quirky details in a persons handwriting. We actual recognize the patterns and can say, “This note is from my cousin Bill. I’d recognize his sloppy handwriting anywhere.”

There are several ways to solve this automated signature problem. But not worth it if it adds one second to the load time. We didn’t do any speed tests.

We did a search on “Why put a personal signature on your WordPress blog?” and got a listing of various plugins and how to edit functions.php files that do this stuff. But no one explained why post signatures are a good idea.

https://wordpress.org/plugins/wp-post-signature/
156k download, Requires: 3.0 or higher, Compatible up to: 4.1.11, Last Updated: 1 year ago, Active Installs: 3,000+
Comments:
The screenshot of the controls looked overwhelming. It wasn’t clear if an image file is included or if it’s just text.

https://wordpress.org/plugins/sxss-signature/
179k download, Requires: 2.5 or higher, Compatible up to: 4.4.3, Last Updated: 3 months ago, Active Installs: 800+
Comments:
Has integration of TinyMCE. This allows the addition of copyright, links, images, or ads at the bottom of pages or posts.

https://wordpress.org/plugins/danixland-author-signature/
41k, Requires: 4.0 or higher, Compatible up to: 4.5.2, Last Updated: 2 months ago, Active Installs: 20+
Comments:
This plugin is brand new for 2016. The author said, “All I wanted was to be able to select an image for my user, and set the alignment and size for the displayed image inside the blog post.” He felt the other plugin offerings were too bloated. We agree. To add your signature image, go to your profile page in the WordPress dashboard and, at the bottom, you’ll find a new section for selecting an image using the standard WordPress media upload screen.

https://wordpress.org/plugins/ft-signature-manager/
4k, Requires: 2.5 or higherCompatible up to: 3.5.2, Last Updated: 3 years ago, Active Installs: 1,000+
Comment:
Appears old, abandoned and suspicious of calling offsite resource. It’s too small of file size. Did you ever think you’d hear us say that?) Too scary to use.

https://wordpress.org/plugins/dt-author-box/
69k, Requires: 3.1.2 or higher, Compatible up to: 3.6.1, Last Updated: 3 years ago, Active Installs: 1,000+
Comments:
From the WordPress plugins site: “for those who have multiple authors on a WordPress site and want to show author information at the bottom of every post for each author like a signature. This can include an image, a short bio, a link to the author’s website and their social profiles.” This is overkill for us.

Based on this quick information, the plugin to use seemed pretty obvious: Danix Author Signature. It was fast and easy and didn’t add any drag to our page loads.

author-signature-header
https://wordpress.org/plugins/danixland-author-signature/

Building a PDF library the right way.

We’ve done library sections on websites before. They are popular (meaning they are visited from search engines). But success is contingent on several things for SEO (search engine optimization). These things are details improving what is called findability.

Findability means visitors can easily find what they are searching for on the site. And it also means being able to find relevant information from offsite (from search engine listings – like Google).

So why this tutorial?

The newsletters that are frequently on websites are not findable. They are invisible. In fact, they aren’t listed on Google.

Our goal is to get every single page and document listed on Google. WordPress will handle most of that problem. But other things can help.

Why are some PDFs not listed? They aren’t MACHINE-READABLE. They are image files. If you try and highlight (select) the body text with the cursor, it can’t be done. That means search engines can’t read the text either. The files haven’t been saved with embedded text.

Do PDFs rank well when they are machine readable? The answer is “yes.” Engines can crawl them just as well and fast as regular old web pages. The PDFs rank sometimes even better than HTML web pages. Search Engines are looking for credible content. And PDFs have high credibility. They take longer to prepare. They are less disposable. They have a longer shelf life.

A library directory is a good thing. But library production requires a little more tender-loving care (process rules of how things get done).

Here’s what that means:

1. Save a PDF with embedded text.

2. Optimize the PDF for fast download.
There are various ways to automate optimization (file size reduction) with plugin or online tools. PRESS quality PDFs (300dpi) are too fat for downloading. Even PRINT quality (150dpi) can be marginally fat. SCREEN quality (72dpi) can ruin images. So some experimenting is required. Visitors won’t tolerate slow downloads. And heavy PDFs open and scroll too slow. Fat PDFs say, “We don’t care.”

3. Build a thumbnail image for navigation.
We can’t use the regular WordPress thumbnail function on PDFs. It works on Jpegs and PNG files. So we build the thumbnail by opening the PDF in an image editing desktop program. And then just save the cover page as a Jpeg image file. We then upload that to the WordPress image library. This will become the link to the actual PDF.

4. Add the thumbnail image to the library page.
Editorialize the image link. This means descriptive text is added that tells what sort of content is in the PDF and why the visitor would benefit from downloading it. (Search engines read this stuff, too). This text is called information scent. It cues the reader that they are on the right track. The text should state that the download is free. Also, the file size, dimensions, color, and page count should be stated. This information helps them know how long they will wait when they click the link. Visitors don’t like surprises and are apprehensive about pressing any “mystery buttons.” Consider this advertising the PDF.

So there are a few hoops to jump through when preparing a library. Based on our experience, do we think the trouble is worth it? Absolutely. Library sections are popular with both people – and engines. They are a good draw. Some people will drop into the site right on the library page – bypassing all other pages.

We also encourage harvesting content from the brochures and make HTML entries to the blog. This redundancy is perfectly acceptable because people like information delivered in different ways. They have a choice.

Just a note: These kinds of pages with many thumbnails (also called catalog pages) benefit from a WordPress lazy-load plugin to keep load time fast. One we recommend is Rocket Lazy Load. Lazy loading delays loading of images in long web pages. Images outside of the browser viewport (below the fold) are not loaded until the user scrolls to them.

For more about automated PDF optimization, read our article: Polite PDF Downloads

Quality-82 image-compression change for WordPress.

By default, WordPress always compressed images upon upload. In version 4.5, WordPress changed Jpeg compression from 90Q to 82Q. This reduced image weight by an average of 25 percent.

Since version 2.5, WordPress used a default-quality setting of 90 to optimize images. A 90Q setting creates larger file sizes than recommended by modern web best practices. For example,  WebPagetest warns site owners if images aren’t compressed enough.

Images are 62 percent of page weight in 2017. The average page now weighs between 2M and 2.3M.

WebPagetest specification: Images compressed within 10% of a Photoshop-web-save quality of 50 will pass. Up to 50% larger will warn (we guess that would be around 70Q to 75Q). Anything larger than that will fail. The image score is the percentage of bytes saved by image re-compression.

Photoshop provides a handy “Save for Web” option that keeps file sizes low. But what about a large website with a lot of images? An online store might have thousands of images. Having to create different sizes of each of these is an enormous task.

WordPress uses ImageMagick, an open-source command-line graphics editor, to quickly resizes images. This technique maintains great visual quality and small file sizes. It automates resizing image compression with formats like Jpeg and PNG.

The Odd Number of 82Q.

Researchers compared ImageMagick’s various compression settings against Photoshop’s high quality (60Q) setting for JPEGs. An Imagick compression setting of 82Q was closest. They used an open source test to compare dissimilarity of input and output Jpeg images.

Changing the default image quality setting is a small change. Yet, it makes a big impact on file size without sacrificing perceived image quality. The new 82Q setting only applies to the intermediate size images. Not the original files uploaded by users.

To change original image size dimensions and quality settings, we recommend Imsanity plugin (100,000+ installs).

We repeat: original full-sized, uploaded images remain unaffected. This change only affects images resized by WordPress, such as image thumbnails. For international users, on slower web connections, this is important for performance optimization.

We agree with these changes for improving WordPress speed.

How to properly crop thumbnails for UX and speed.

Thumbnails are a scaled-down or cropped representation of larger pictures. They help in recognizing and organizing images. Thumbnails are used on web pages as separate, smaller copies and linked to the original image or another page. This distributes page load, reduces bandwidth, and speeds up load time. Thumbnails serve as web signage or navigation links.

Proper cropping is usually a more important issue than quality settings for thumbnails. In other words, compositional interest or focus provides viewer recognition and motivation to click. Rather than create a smaller dimension image copy, some web designers cheat by making the browser shrink thumbnails with HTML code. This is not good web practice but sometimes unavoidable. This results in no saved bandwidth. Visual image quality from mathematical resizing is usually poor. So both quality and speed suffer.

Graphic dimensions specified in HTML code are not always the same as the actual image dimensions. This forces the web browser to calculate the difference before displaying the graphics. With the large number of graphics on popular masonry and image grid pages, this adds significantly to the download time.

No image scaling on the fly. Thumbnail “math” can slow down a page. When pixel versus code dimensions mismatch, the web browser must recalculate the page graphics. That takes a long time. And it clogs the pipes. Make sure image dimensions match your code for a faster-loading page with better-looking images.

Brad’s portfolio example. A grid thumbnail layout for navigation to individual posts. No captions are used. Captions appear on roll over. This makes for a more geometric, Bauhaus grid.
BRad's thumbnails were custom built at 385 pixels square. They were added as the feature image. Normally, the large feature would be shown on the post page and the thumb would be a mathematical resize in the browser of the original. This means the thumb would weigh considerably more.
Brad’s thumbnails were custom built at 385 pixels square. They were added as the feature image to posts. Normally, the large feature would be shown on the post page and the thumb would be a “mathematical resize” in the browser of the original. That means the thumb would weigh considerably more and wouldn’t look as good. The large image was inserted into the body area instead. We used 2 images instead of one but kept the Home page loading very fast.

Displaying a relevant crop instead of a full image helps maintain recognizability or emphasis. For example, when thumbnailing a full-body portrait of a person, it may be better to show the persons’ face than a small figure.

default-thumbs
Kathy’s case study. This is a masonry grid style with captions extracted from the post content. Using the default WordPress crop.

 

Better thumbs are hand-built in an imaging editing program.
Better thumbs are hand-built in an imaging editing program. Customized cropping and optimizing.

WordPress automated cropping of thumbs can be pretty bad at times. Above: On the example van thumbnail, the automatic crop cut off the most important detail: the graphic wrap above the wind shield.

We didn’t let WordPress create the thumbnails. Instead, we cropped and optimized them in a desktop imaging program. This reduced the weight by 5X. The featured images are “zoomed in” for detail and exclude type. This is because, at small image sizes, text becomes unreadable and people will squint to try to read it!

WordPress automatically produces preset thumbnail sizes. It also applies unsharp mask to them. Sharpening images restores and improves internal edges. Humans do pattern recognition based on edge shapes.

Default Media Settings
Thumbnail, 150 x 150 pixels
Medium, 300 x 300 pixels
Large, 1024 x 1024 pixels

Images are centered and cropped to these dimensions. These three image sizes, as well as the original full size, are the only ones available when you edit a post and insert media. They can be changed in the WordPress administration panel under Settings > Media.

Media image sizes allows you to change the maximum dimensions of images that are displayed on posts and pages. When setting a thumbnail size, the image will be cropped and resized to the setting. Medium and large images will keep the dimension proportions, taking the maximum width and height into account.

Set large images at the theme’s screen width for full width pages and posts, and medium images at the width of a content column.

Regenerating Images
Any time you change your WordPress default image size definitions, they will only apply to new uploads. All your existing images remain at the original dimensions. There’s a great plugin that will go back through your posts and regenerate these new image sizes for you.

AJAX Thumbnail Rebuild lets you select which sizes to regenerate, and will work through your archive. The plugin won’t resize images already inserted into posts. Regenerating images makes new sizes available to use in future pages. You can’t bulk edit the size of existing images that you’ve inserted already.

enable-media-replace

To do that you need to use Media Replace plugin. It’s still one-at-a-time work.

Cleanup-Images

Even if you’re no longer using a certain size, old images will remain on the server. WordPress won’t delete unused images for you. We don’t like wasting server space. The Image Cleanup plugin will help by scanning and giving you the option to delete unused images. [This plugin has been retired. There is a plugin called DNUI (delete unused images) that is very dangerous and can delete all of your media files with one button click. Be careful!]

my-eyes-are-up-here

My-Eyes-Are-Up-Here plugin helps you control how WordPress crops thumbnail images. Finally, a WordPress plugin to help with cropping by using facial recognition or a user-specified hot spot. It’s a step in the right direction. When WordPress generates thumbnails, you run the risk of a bad image crop. This plugin remedies most bad photo crops of thumbnail images.

If you have uploaded a full-portrait image of a person, WordPress may center the image so you end up with just a headless person.

plum-dress
Original image of a model in a plum-colored dress.

Or let’s say you have a landscape image, with a person’s face on the right hand side, but you need it to display in a square thumbnail. You’ll end up with half a face as WordPress centers the image.

Original face.
Original face.

With this plugin, you can either use the automatic face detector or if you want even more control, you can manually add hotspots.

Navigate to your media library then click on the image you want to edit. Use the detect faces or edit hotspots option to edit your image. You’ll see thumbnail previews when you’ve applied these edits, when you’re happy hit update. Pretty simple.

You can increase or decrease WordPress JPEG image compression. WordPress used to automatically compress JPEG images to 90Q.They now compress to 82Q. Because JPEG quality settings are non-linear that setting actually produces a big reduction in file size and the quality is visually the same. If you’d like to change that default, paste the following code in your theme’s functions.php file:

add_filter('jpeg_quality', function($arg){return 100;});

Setting it to 100 would mean that WordPress would compress the image at its highest quality. We don’t recommend that setting except for photographer portfolios (maybe if insisted upon).

WebPagetest.org testing online recommends compressing images between 50Q and 70Q. Place 50 in the code instead of 100 and try it out by uploading a test image.

Using image-optimizer web utilities for improved speed.

When you’re working hard to optimize a website, you learn that image file size is an important detail for speed. Many online publishers haven’t the time to learn Photoshop or other image editing programs. Automated optimizers are the next best thing and can speed your production. But which ones do a good job and how good is good enough? Big questions.

Continue reading “Using image-optimizer web utilities for improved speed.”

Web readability is 16px size with gray #333.

Human eyes have limitations. There’s a theme trend to use light-gray type on web pages. This is not good UX. But designers, who should know better, are setting bad examples. Black on white was the standard  for many years. That color combination is fatiguing when reading large block of text onscreen.

The recommendation is #333 dark-gray on white to reduce harsh contrast. But going lower contrast than #333 makes viewers squint to attempt reading text – even when the font size is 18px. We recommend using browser tools for checking font specifications including color and size. We use FontFinder for Firefox. There are equivalent tools for Google Chrome.

FontFinder type specification tool using Google Chrome.

 

“An article about how the web is becoming unreadable has been making the rounds. I feel like most designers already know that light gray text on a white background is a bad idea. The article focuses on text color but I think a more relevant issue is font weight – I’m seeing so many sites these days set body text in 100 and 200 weights which were not designed for body text use.” — Jeremiah Shoaf of TypeWolf

How the Web Became Unreadable
I thought my eyesight was beginning to go. It turns out, I’m suffering from design. by Kevin Marks

Look at these websites. They look fabulous indeed but how good is that if people can’t read them?

Light-gray text is fake minimalism.

“Minimalism in web design started as a backlash against decades of interfaces that increased the prominence of so many elements at once that they all clamored for attention and became visually overwhelming.

What’s great about minimalism is the principle of stripping out non-essential elements. In most cases, this is a best practice to follow.

When it becomes an issue is when there is lots of essential content on a page. Having a lot of content doesn’t suit the minimalist approach to design. So the designer’s compromise has become reducing the contrast of those elements so that, at a glance, the page still ‘looks’ minimal.

Yes, low contrast text does ‘look’ minimal, the same way a blurred photo on Instagram can ‘look’ retro. But you wouldn’t blur your website even if it were fashionable. Don’t lower your contrast, either.”Nielsen Norman Group

Easy reading helps learning and enjoyment, so what we write should be easy to understand. Readability is about ease of reader understanding. Text should be inviting. Text depends on content (vocabulary) and typography (font size, line height, and line length).

Readability Plugins for WordPress

An interesting article about web readability mentions several WordPress plugins that help assess readability of body text. The one plugin we feel is most appropriate (because it’s lightweight) is: FD Word Statistics Plugin. It shows word and sentence counts at the bottom of the WordPress editor. Plus a readability analysis of the page or post currently being edited is shown using three different readability measurements. Those are the Gunning-Fog and the Flesch-Kincaid indexes. (Plus one labelled Flesch that we don’t care about).

Various factors to measure readability have been used, such as speed of perception, perceptibility at a distance, perceptibility in peripheral vision,  visibility, the reflex blink technique, rate of work (e.g., speed of reading), eye movements, and fatigue in reading.

Readability and legibility aren’t the same. Legibility is a measure of how easily individual letters or characters can be distinguished from each other.

The average adult reads at the 9th-grade level. It also shows that, for recreation, people read texts that are two grades below their actual reading level.

Four variables give the most reliable measure of web reading ease:

  • Words per sentence.
  • Average grade level of words.
  • Characters per word.
  • Sentences per paragraph.

Readability should be your number one goal. Someone in your company or organization should especially check graphics to ensure they’re readable. This means:

  • No “reverse” (white body text on a colored background, which is hard to read).
  • As few italics as possible (they’re hard to read).
  • Not too much boldface (ditto).
  • Not too much super-wide full-width copy (ditto).
  • No type above headlines (confusing).
  • No hard-to-read colors like light grays. There should be a 30% grayscale differential between text color and background color. We search for edges of letters for character recognition.

 


Measure onscreen font sizes in pixels using the Firefox browser tool: Font Finder or the Google Chrome browser tool: WhatFont.

6pt, 8px, 0.5em, 50% Sample text

7pt, 9px, 0.55em, 55% Sample text

7.5pt, 10px, 0.625em, 62.5%, x-small Sample text

8pt, 11px, 0.7em, 70% Sample text

9pt, 12px, 0.75em, 75% Sample text

10pt, 13px, 0.8em, 80%, small Sample text

10.5pt, 14px, 0.875em, 87.5% Sample text

11pt, 15px, 0.95em, 95% Sample text

12pt, 16px, 1em, 100%, medium Sample text

13pt, 17px, 1.05em, 105%, Sample text

13.5pt, 18px, 1.125em, 112.5%, large Sample text

14pt, 19px, 1.2em, 120% Sample text

14.5 pt, 20px, 1.25em, 125% Sample text

15pt, 21px, 1.3em, 130% Sample text

16pt, 22px, 1.4em, 140% Sample text

17pt, 23px, 1.45em, 145% Sample text

18pt, 24px, 1.5em, 150%, x-large Sample text

20pt, 26px, 1.6em, 160% Sample text

22pt, 29px, 1.8em, 180% Sample text

24pt, 32px, 2em, 200%, xx-large Sample text

26pt, 35px, 2.2em, 220% Sample text

27pt, 36px, 2.25em, 225% Sample text

28pt, 37px, 2.3em, 230% Sample text

29pt, 38px, 2.35em, 235% Sample text

30pt, 40px, 2.45em, 245% Sample text

32pt, 42px, 2.55em, 255% Sample text

34pt, 45px, 2.75em, 275% Sample text

36pt, 48px, 3em, 300% Sample text


Baked-in font bloat.

WordPress themes often come with two icon fonts employed. Genericons is an open-source icon font to replace image icons. Genericons fonts have a page weight of 25k to 100k page weight (average 75k). Why different weights? We’re not sure. But we know it happens. We’ve tested it.

The other font is Dashicons (67k page weight). WordPress uses Dashicon in the WordPress administration control panel. But themes can access the invisible and unused font.

WordPress baked Genericons into four themes: Twenty-twelve, Twenty-thirteen, Twenty-fourteen, and Twenty-fifteen. Many other theme developers are in love with the font. We have a low opinion of the icons because it requires hacking to remove. They are dead weight. Just because you can do something “excellent” doesn’t mean you should.

Many designers who care about load time wish they could disable these icon fonts. It’s possible to do – but requires “unorthodox code exorcisms” via FTP. Risky business. We’ve messed with it and it’s not fun. We wish there was a plugin for disabling font icons.

The problem is, when calling even one single icon symbol from your theme, WordPress loads the entire icon set. In our testing of themes, we’ve seen 30 percent of Genericon loads produce 404 errors.  The server can’t find the requested icon font. That’s a big fail because 404 errors cause page-load delays. They can be worse than loading the heavy font itself.

It’s possible to subset icon fonts to accelerate load times. Sub-setting creates a font that only contains the characters you use. This can reduce icon page weight. Fontello Font icon generator is an example of online automated icon sub setting. Genericons and Dashicons are not in the collection – yet.

These are the freeware icon sets available on Fontello:

  • Fontelico
  • Font Awesome
  • Entypo
  • Typicons
  • Iconic
  • Modern Pictograms
  • Meteocons
  • MFG Labs
  • Maki
  • Zocial
  • Brandico
  • Elusive
  • Linecons
  • Web Symbols

If your WordPress theme carries an icon speed burden, perhaps you should give in and leverage it as a graphic asset as best you can. You can adjust the size of the icons via css or, when using a shortcode, the size attribute. Default size is 16px.

To make this functionality happen on post, pages, and widgets, just use free Genericon’d plugin. It enables easy use of the Genericons icon font set from within WordPress. You can insert icons using either HTML or a shortcode. But remember 25k is equal to 12 to 25 two-color, 8-bit PNG images. Is it worth slowing down every page on the site with font drag when you could have just one page bear the burden of a PNG image? One tiny 16 x 16 pixel Twitter bird icon font symbol can add 39k weight to all site pages!

Of 167 free WordPress themes we examined,

25 Genericons 25k, 7@ 404 errors

25 Font Awesome 77k, 2@ 404 errors

7 Dashicons 67k

2 Glyphicons 33k

2 themes used both Genericons and Dashicons. This is overkill.

3 Misc:
Eleganticons 48k
Elusive 61.8k
G.F. icons 16.9k

TOTAL 64 of our theme sample used icons (almost 40 percent). It’s an official bloating trend!

Why changing your logo won’t save your web business.

Frequently, the website owner (your client or boss) thinks they’re the clone of their audience (their potential or actual customers). Of course, they aren’t. We’re all different and have different perspectives and opinions for many reasons. That’s good. Otherwise, this would be a pretty boring world.

Logos make little difference in the outcome of client profitability. They have other benefits but it’s not money.

“Can you make the logo bigger?” In most venues, a logo really is pretty meaningless – except for the owners who see it as a “flag”. A flag can be good for morale. But a good trade name carries more weight (potent meaning) with a small audience than a clever logo. Then as long as the name is memorable, readable, and pronounceable, it *might* make a difference. For many businesses, a logo is reduced to a mere decorative element. When is the last time you paid for a solitary dingbat?

Dingbats are ornamental or decorative type characters. Dingbats are used as directional signage informing the reader what is important. They can also serve as graphic elements or exaggerated illustration. destroying white space. They work fine as a temporary symbol.

Logos can be fraught with emotional upheaval for the owners and cause unneeded, repeated presentations. “Does it really represent me?” Uh. It’s not supposed to represent that deep of a psychological burden. Arguments and doubt could go on forever with that as the goal.

There are three marketing components needed for success. You CAN succeed with any two –but it’s best if all three are present to some degree. They are: 1) the offer, 2) the market need, and 3) the design. If any two are missing, it’s a sure failure. Notice the logo is not one of the three but a subordinate part of design. In the hierarchy of what really makes a difference, a logo will not guarantee much. Yes, it’s possible to succeed with bad design. It can even be more memorable for the wrong reason!

But if no one needs the client’s product or service, or the price is too high and delivery too long (bad offer) –even fantastic design cannot save the venture. Stupid ideas especially cannot be saved by design (let alone by a logo). Statistically, half of all businesses fail in the first year whether they have everything right or not. It’s a coin toss. Great design will never make up for a flawed business model or product/market fit. Some erroneously think design can be the difference between crushing your competitors, or being left in the dust. Often, it will just suck your new business of its precious limited resources.

Nonetheless, design is a secret weapon giving companies an edge over competitors IF they have a good product and a market that needs it. When we say market, we mean names and addresses –a list of individuals with common needs.

We like an attractive logo. It feels good to own one. It feels nice to own a new, fancy car, too. We don’t invest much money or credence in logos because we realize ideas are disposable sometimes. If the business idea survives it’s first year then maybe it’s time to get out the check book. But you do not need a logo when starting up. You can just use type and maybe a dingbat. We believe in bootstrapping. With little or no investment in your company *identity*, you won’t weep so much if things fail.


Christian: I don’t get excited about logos, because I think the importance of logos is way overstated…except in the case of huge outfits like Coca-Cola, IBM, Apple, etc. Who cares what your logo looks like? Who cares what my logo looks like? Who really cares what San Diego National Bank’s logo looks like? No one.

Steve: Surprisingly, Christian and I completely agree. Logos are overrated and are useless deliverables sold by designers because small-business clients insist on one. It’s usually vanity and pride driven. There are literally millions and millions of logos. For a small company with limited resources, they’re a waste of time, energy, and money. The days of creating a world-recognizable Coca-Cola logo are gone for small to medium-sized companies. It simply costs too much hard, cold cash. I do believe your company name is important much more than a logo and needs more consideration.

Christian: Company name is more important than the logo…but not by much. What really matters is the quality of your work…but even *more* important is your ability to market and *sell*…that’s where it’s at…that’s what will make you successful or not in the crowded arena of design these days. A logo is not going to make any big impression on your customers. As long as it doesn’t look horrible, I don’t have a problem with it.

I prefer heavier font weights because it helps the logo stand out on your web page or in a brochure or whatever. But avoid generic type. If I had to choose between two typefaces in a logo I would go for a heavier weight. For a logo, I would want a more distinctive type.

Steve: I’m always curious as to the goals for a logo.

Christian: As Steve has wondered…what do you want your logo to do? If the answer is…”Just something to put on my stuff because everyone else has a logo, so I need one, too,” I’d say, “OK…this does the job. It’s all you need. Now get started on a more worthwhile project.” If your logo has to do more than that…I’d say…Fuhgeddaboudditt…it doesn’t matter…no logo will do more than that. No logo is going to make customers flock to you…
…stop wasting your brain power.

Steve: This is all true. It shocks designers to hear Christian and I who are designers ourselves say something so radical and unconventional as “Forget the logo drain.” In the end, type compatibility is *practically* insignificant. It will not alter results one iota. Yet, Christian on occasions has insisted we NOT use certain font combinations because they clash and are in poor taste. So continuity does matter to him. I have to call him out on the carpet sometimes. Want to make an adjustment, Christian?

Christian: Nothing to adjust. Yes, continuity matters. And font combinations are very important. Some combinations work and some don’t…peanut butter and jelly works but peanut butter and tomatoes probably doesn’t work…gin and tonic works but gin and coke probably doesn’t. The choice of font combinations is *very* important…and I say this not based on anything I learned as a typographer (I know you were waiting for that…sorry)…but I learned it based on my experience as a graphic designer.

But none of that matters when it comes to the typeface used in a logo. The logo is just a small part of most projects. Very small. Tucked away in the upper left-hand corner of something…or lower right-hand corner of an ad…whatever…and the typeface used in that logo matters not one iota in regard to the combination of typefaces used in the project itself.

See why Steve and I get along so well? Ha ha ha…we are like evil twins…we keep each other alive while at the same time always trying to kill each other.

Steve: We’re definitely evil twins. Which is the evil one? Shall we vote on it?

Christian: So my final comment about logos is: relax…choose the logo version you like best…make sure it’s readable on a web page and in other uses, and be done with it. Steve and I have been applying the Pareto principle to website design…maybe you’ve heard of it…related to the 80 – 20 theory…I recommend you read up on that, and think for a few minutes about how that principle might apply to the amount of time and work you probably are putting into your logo project….see if you think it’s really worth it.

Steve: Our philosophy is a great example of where reducing expenditure (optimization) can prevent ulcers and sleepless nights.

Christian: Designers spend countless hours and hours thinking about logos and constructing the logo, etc…time and energy that would have been much better used on other projects. Forget about evil twins…Steve and I are like Siamese twins on this one.