Web Design Blog

A function similar to ACF get_field(), only if the post does not have a value for the field, it recursively searches up the post’s parent(s) for it.

function get_field_inherit($field_id, $post_id = false) {
    global $post;

    if ($post_id) {
        $post_to_try = get_post($post_id);
    } else {
        $post_to_try = $post;
    }

    if ($field_value = get_field($field_id, $post_to_try->ID)) {
        return $field_value;
    } elseif ($post_to_try->post_parent) {
        return get_field_inherit($field_id, $post_to_try->post_parent);
    } else {
        return false;
    }
}

If you are thinking about a new website, you may well have some questions about search engine optimisation. Unfortunately there is a lot of misinformation out there, and myths about SEO are pervasive, so managing expectations can be difficult.

SEO is often seen as a bit of a dark art, and many marketing agencies capitalise on this in order to charge a hefty fee for their SEO services. In some ways they are right. The fact of the matter is, the only people who know exactly how Google’s search algorithm works, are Google’s own employees.

While there are many factors that affect your website’s search engine rankings, they can generally be split in to two categories. Unfortunately, while both are important, these two sides of the SEO coin are often conflated, leading to even more confusion.

1) Avoiding things that will cause your site to lose rankings

This is the easy bit.

The things that search engines will penalise you for are more well known, and avoiding these common pitfalls is half the battle. These are usually things that your website shouldn’t be doing anyway, such as:

• Not being mobile friendly
• Being too slow
• Not being secure i.e. not having an SSL certificate (https/padlock next to URL)
• Lacking correct HTML structure, aka semantic markup

What do we mean by semantic markup? The code that websites are written in, HTML, contains many different kinds of tags. While some tags are multi purpose, most of them have a specific purpose which is designed to convey a specific meaning, such as sections, headings, paragraphs etc.

This meaning is the only way a computer has of knowing what the content of your website means. Using a generic tag (such as a <div>) in place of a semantically meaningful one (such as a <h1>) greatly dilutes this meaning.

One way of visualising this is to view your website without any CSS, just the browsers default styles—while it may look bad, it should still make sense.

As it happens, this is also of importance when it comes to accessibility. The same techniques that help search engine crawlers understand your page, will also greatly help those with disabilities or impairments who rely on technology such as screen readers to browse the web.

2) Doing things that will cause your site to gain rankings

This is the real trick.

Avoiding things that could hurt your rankings will only get you so far. If you are in a competitive industry, it is likely that even if you manage to avoid every single potential SEO pitfall, you might not get on to page 1 for your desired search terms.

In the early days of the web, search engine algorithms were simple. Google started out by ranking pages by the number of other pages that linked to them.

Unfortunately, this simplicity meant it was also simple to exploit loopholes in the algorithm to gain a competetive advantage. Over time, in order to still provide useful results for their users, search engines have been forced to change their algorithms, and they are still constantly evolving.

The unfortunate truth is that there are no cheap tricks any more.

The good news is, there are a few techniques that are universally agreed upon to have SEO benefits:

• Having well written content that contains all the keywords you would like to rank for, but not in an obviously forced fashion
• Having high quality content that people genuinely want to read and engage with
• Having links to your site from reputable sources
• Having fresh content that is updated regularly

While all of these things are relatively simple (in the sense that they are not complicated to describe), none of them are easy.

Writing a blog is one way to add fresh, relevant and engaging content to your website. As a CMS, WordPress has its roots in blogging, so it is perfectly suited for this.

Some closing thoughts

SEO takes time. While search engines are constantly crawling the web, the sheer volume of websites out there means this is a time consuming process, and change happens slowly.

I recommend the popular Yoast SEO plugin for meta titles and descriptions, and social media images.

Lastly, being at the behest of Google carries risks. Due to the ever evolving nature of search engine algorithms, it is not uncommon for an algorithm change to cause sudden, unexpected drops in rankings. If your entire business model depends on Google search traffic, this could have severe consequences.

Looking for a web developer to help with your SEO? I can help.

Get in touch

Since writing my first piece of HTML in 2003, internet speeds have increased dramatically. Sadly, the average size of a web page has increased at an even faster rate. As a consequence, the average website is now slower than ever.

While developers can’t take sole responsibility, lazy development practices have certainly exacerbated the problem (and believe me, I have probably committed every performance faux pas that it is possible to make).

Optimising a website for speed is often treated as a low priority—When internet speeds are always increasing, poor website performance can feel like a problem that will simply solve itself in time.

But this is not the case. Your website needs to be fast today.

A properly optimised, fast website is truly a delight to use, and will have a dramatic improvement on your conversion rate. This is even more important if your site generates income through ecommerce.

Search engines are now starting to penalise websites for being too slow, which is a great reason to improve your site performance. However an even better one is that using a slow website is simply frustrating—I’m sure we have all experienced the agony of trying to browse on a sketchy mobile connection. The wider Shropshire area (and even parts of Telford and Shrewsbury) does not yet have the luxury of 100% 4g coverage.

It doesn’t have to be this way. Instantly loading web pages are attainable (without sacrificing functionality). Sadly, even though most experienced developers know this, many still treat site speed as an afterthought.

While there is a lot that can be done to optimise a poorly performing website, true speed can be attained only by following development best practices from the ground up. As a wise man once said, you cannot make a WordPress site faster by adding more plugins.

Do you need to speed up your WordPress website? I can help.

Get in touch

Some thoughts and general usability guidelines that I have jotted down over the years, that I am collecting here for posterity (and occasionally update). This is by no means an exhaustive list, and I am by no means an authority on the subject (and have probably broken every one of these at some point or other).

General

• Out of sight, out of mind—Assume anything not visible won’t be seen by a large percentage of users
  • Avoid carousels except where they make sense e.g. an actual image gallery
  • If using a carousel, ensure it’s swipeable on mobile
  • A novel idea I came across is to not completely hide the navigation on mobile (e.g. show a few of the most common navigation items in addition to the hamburger)
  • Avoid hiding search behind an icon
• Require as few clicks as possible for any action
• Require as few page refreshes as possible (unless your page refreshes feel instant)
• Simplify navigation as much as possible
• If you fix the header on scroll, try to make it as small as possible
• Try to make click areas as large as possible
• There is research to suggest ghost buttons are less effective than solid buttons
• An icon with a label is better than just an icon
• If an element has a dark background image and white text, don’t forget to set a dark background colour as well, so the text is readable before the image loads
• Hover states on mobile use up a tap, causing actions that should only take one tap to take two—Wrap CSS hover states in a @media (hover: hover) to disable them on touchscreens

Typography

• Optimal line length is 55-75 characters
• Text should never touch the edge of the screen
• Headings should be closer to the paragraph they relate to than the previous one
• Spacing between separate page blocks should be greater than the paragraph spacing within the block
• Centered text is harder to read (for large blocks of text)
• Uppercase text is harder to read (for large blocks of text)
• Light text is harder to read—body copy should be regular weight

Scrolling

• Don’t interfere with scroll behaviour (e.g. custom smooth scrolling, scroll snapping)
• Never put any important information below an infinite scroll
• Don’t worry about the “fold” on the web—everyone scrolls, it’s one of the most natural interactions there is on mobile
• However, ideally I shouldn’t have to scroll to complete an individual interaction (e.g. selecting a colour, then quantity, then adding to cart)

Ecommerce

• Make search/categories easy to find. From my own experience buying online, even if I think I know exactly what I want I’ll see what else is similar in price. So I either search then filter, or browse by category then filter.
• When listing categories (e.g. in a grid), also show me what subcategories they contain. I might have an idea what subcategory I want, but not sure what parent category it comes under

Just don’t p*ss me off

• If a site takes longer than a couple seconds to load, I will give up. If I don’t give up I will at least be annoyed as I use it. Instant page refreshes are attainable with the right optimisations e.g. lazy loading images
• Never show a popup unless the user clicked something
• Never interrupt me while I’m reading (e.g. by showing a newsletter popup after a certain scroll threshold, or autorotating a carousel that contains text)
• Consider instead putting the newsletter signup form at the bottom of the content. If a user makes it to the bottom it’s more likely they actually enjoyed reading the content and would want to subscribe
• Try to prevent content moving during page load, to avoid users going to click something and then clicking on something else. Give images width and height attributes so the browser knows how much space to accomodate before the image has loaded
• Give instant feedback on an ajax interaction that will take some time, so I at least know my click/tap registered
• For sites that users will be visiting on a daily basis, avoid in-your-face hero images if the client is unlikely to ever change them, they can quickly become tiresome/annoying.

Looking for an experienced UI/UX designer? I can help.

Get in touch

Some blogs/articles that all web designers and developers (and anyone else involved in the creation of a website) should read.

In no particular order:

• The Veil of Ignorance
• Show, Don’t Tell
• Project Managers, Ducks, and Dogs Marking Territory
• “Just”
• Things You Should Never Do, Part I
• The Law of Leaky Abstractions