Web from SimonCox.com

Measuring the effectiveness of your redirects

Simon Cox — Fri, 13 Feb 2026 24:00:00 GMT

When I work on a site migration I like to redirect everything I possibly can find, very much in a 'no one gets left behind' sort of way. Most migration projects don't do this, for a multitude of reasons, but years ago I was told to only redirect the top 200 pages of a site which was about 10% of the live pages. I did strongly voice an opinion on this and after lengthy discussions was firmly told I was wrong. Inevitably the site lost 66% of its traffic for several years following that migration. Now this is part of my processes that I do not take any short cuts with.

So how important are redirects? If you look in your Google Search Console at any page you can find where they found links to a page. Sometimes it can be a URL on your site that vanished many years ago and isn't even in the Google index. This usually means there is a page out there somewhere on the web with a link to the old URL on it. Googles bots find these and add these old URLs as incoming links. If you followed Sir Tim Berners-Lee’s advice Cool URIs Don't change and never changed any of your URLs, this will not be a problem. You do do that, don't you though?

The thing is you don't really know where all the backlinks to your site are. No-one has a complete database of the whole internet - it's just to big.

Tracking 404's

To mitigate these issues I track incoming traffic that arrives at my 404 page. I have set this up as a Fathom event - read how I did that here and I also track this page with Google Analytics - the only page on the site where I use it. The reason for the GA4 is that I switched to fathom but initially had no way to track the 404s so kept the GA4 tracker on there. I built a Data Studio dashboard using that data and still find that handy to look at now and then so the code is still there.

As I already have most of my old URLs redirected it means the URLs are usually misspellings, or badly formed links.

LLMs hallucinating urls

I have noticed recently that I am getting 404 URLs that never existed and these appear to be coming from LLMs hallucinating URLs on my site. This is a concern but with regular checks of the 404's I can mostly set up suitable redirects. I don't however have any context where the link was created - so it is a bit of guess work.

How often do people arrive at my site using an old URL though? I was wondering this so have set up an experiment to track this by utilising UTMs in my redirects.

Using UTM's in redirects

I use Fathom analytics and it has a section in the dashboard for Campaign tracking. This is normally used for marketing campaigns where you want to track effects of adverts. Campaign Source Medium Content Term

Currently I have set the UTM tracking up as: source=redirect medium=301 campaign=simoncox.com content= last part of the old URL

/blog/swanage-belle /post/2011-10-16-swanage-belle/?utm_source=redirect&utm_medium=301&utm_campaign=simoncox.com&utm_content=swanage-belle 301

I have not used the whole old URL because of some concerns over parsing the forward slashes and some other characters that creep in, though might change this - I should at least experiment!

Anecdote alert: Many years ago I tracked all the links on a home page as someone had surmised that the links at the bottom of the page got no traffic - actually they did and more than those in the middle of the page!

UTM examples for redirects

Looking back through my extensive set of redirect for my own site I realise now that it would have been helpful to keep a record of where I found the URLs to redirect from. However in future I will use the campaign field for where I found the redirect. Potentials for the campaign field include:

campaign=archives
campaign=GSC
campaign=Bing
campaign=Semrush
campaign=Ahrefs
campaign=404
etc.

For wholesale directory changes, for example I have kept my articles in several different directories over the years, I use Cloudflare's 'splat' redirect to change the directory - the last part of the URL has remained the same. For these I have used the content field to indicate which redirect rule was firing. I wholesale moved /article/ to /post/ and have this in my redirects file:

/article/* /post/:splat?utm_source=redirect&utm_medium=301&utm_campaign=simoncox.com&utm_content=articleSPLAT 301

Google Analytic UTMs

Most of you will be using GA4 for your analytics and that has a larger set of parameters available that you can customise to track what you need.

utm_id: Campaign ID. Used to identify a specific campaign or promotion. This is a required key for Google Analytics data import. Use the same IDs that you use when uploading campaign data.
utm_source: Referrer, for example: google, newsletter4, billboard
utm_medium: Marketing medium, for example: cpc, banner, email
utm_campaign: Product, slogan, promo code, for example: spring_sale
utm_source_platform: The platform responsible for directing traffic to a given Analytics property (such as a buying platform that sets budgets and targeting criteria or a platform that manages organic traffic data). For example: Search Ads 360 or Display & Video 360.
utm_term: Paid keyword
utm_content: Use to differentiate creatives. For example, if you have two call-to-action links within the same email message, you can use utm_content and set different values for each so you can tell which version is more effective.
utm_creative_format: Type of creative, for example: display, native, video, search but utm_creative_format isn't currently reported in Google Analytics properties.
utm_marketing_tactic: Targeting criteria applied to a campaign, for example: remarketing, prospecting but utm_marketing_tactic also isn't currently reported in Google Analytics properties.

Conclusion

So far since installing these UTMs I have not had that many hits on the redirects so they may not be as important as I considered, but I will leave it for a year or two before making any claims – and of course everything in SEO will have changed again. THis does not give me any insight into how Google are processing any old links they find but resolving them to the correct content can only help.

Sort ordering for your Fathom Analytics accounts

Simon Cox — Tue, 10 Feb 2026 24:00:00 GMT

I use Fathom Analytics for measuring my sites as it is privacy based and has a great dashboard. One of the features of the dashboards is that it has keyboard shortcuts to switch between the sites being tracked. They are 1-9 and 0. 0 actually takes you back to the overall display showing all sites - except that it actually show 12 and has pagination if you are tracking more than 12 - which I do.

What I did not realise is that the 1-9 keys are assigned alphabetically - thank you Ash at Fathom Analytics for pointing that out to me. This site happens to be currently 13th in the list so I have no shortcut to get to the Analytics data.

But wait!

Turns out you can rename the accounts in the settings for each one. And so I did - i added a 1. to the start of the simoncox.com name - and that puts it first alphabetically:

And that allows me to press the 1 key and pop up the data for my site. Later I will be assigning 2-9 to the other sites in the order I think I might want them in.

If you think you might be interested in Fathom Analytics - please do use my affiliate link https://usefathom.com/ref/ILRGSP

Creating Cloudflare redirects

Simon Cox — Wed, 08 Oct 2025 01:00:00 GMT

I was having issues sorting out the redirects on Cloudflare and have learnt a few things on the way so am documenting them here – because I will forget it all whilst in the pursuit of happier things.

Directory migration

I made a major change to the structure of a section of my site /shorts/ has reverted back to /short-articles/ as I am testing out a possible issue with this sites current lack of SERP visibility in Bing. As such I needed to revert the redirects from /short-articles/ to /shorts/ back again. Not usually an issue for my skills but I thought I'd make some notes.

Cloudflare hosting

This site is currently hosted on Cloudflare pages, auto deployed from its github repository. I can use the inbuilt redirect solution that Cloudflare provides but that has a very limited capacity so I have created a file named _redirects that Cloudflare recognises (as does Netlify) and uses for redirects. This is in my 11ty setup and has a passthrough so that it is output in the build exactly the same as I have written it.

This file can have up to 2,000 redirects if properly formatted. I have had issues with only being able to use 120 redirects but this was because I had built some of them incorrectly.

Deployment logs

One source of info that is really useful is the deployment log files. Find it here: Cloudflare > Compute (Workers) > your site > View details

Now scroll down in the Build log and it will tell you all sorts of interesting things such as time and what happened. This includes parsing the redirects file.

10:41:26.990	Parsed 83 valid redirect rules.

The log helpfully tells you redirects that have not been implemented and also provides some optimisation suggestions such as the order of the redirects.

Notes on Cloudflare redirect rules best practices

Exclamation mark on the end of the rule

I think this was a leftover from Netlify's redirect rules

http://simoncox.com/*   https://www.simoncox.com/:splat  301!
Valid status codes are 200, 301, 302 (default), 303, 307, or 308. Got 301!.

I did a find and replace and removed the exclamations marks.

There was another issue with this particular rule though!

Only relative URLs are allowed

I had some domain redirects in place, because you can't have enough domains, but Cloudflare doesn't like them as the source URL, they have to be a part of the directory structure, so I had to take them out.

https://www.tagsoup.net/*  https://www.simoncox.com/:splat  301!
Only relative URLs are allowed. Skipping absolute URL https://www.tagsoup.net/*.

I am now forwarding those domains using an external method.

Redirect rule spaces and or tabs

Cloudflare is quite particular about the number of spaces - it looks for gaps in the redirect rule of 2 and 3 sets of spaces or tabs. If there are 4 or more sets of spaces and the rule will be ignored.

/blog/category:Model Railways /narrow-gauge-modelling/ 301
Expected exactly 2 or 3 whitespace-separated tokens. Got 4.

This means if your URL has a space you will need to use %20 in place of the space:

/blog/category:Model%20Railways /narrow-gauge-modelling/ 301

Colons interpreted as placeholders

I have some URLs with colons in them, such as /blog/category:things, and have put these under section 2 as the colon is interpreted as a placeholder, or you can URL-encode the colon of course!

/blog/category%3AModel%20Railways /narrow-gauge-modelling/ 301

Order of redirect rules

For performant reasons it is better to list static redirects before dynamic ones so that Cloudflare’s systems can run these more effectively:

Static rules - /home, /about, /contact
Rules with placeholders - /blog/:slug, /users/:id
Rules with splats - /old-site/*

I split these up using # comments in my redirect files.

Final thoughts about the Cloudflare redirect file rules

I originally thought I could switch the sites hosting between Cloudflare and Netlify hosting by just changing the DNS, a very handy and quick solution, but I am not going to have to keep two sets of redirect files if I want to do this as the rules are quite different between them.

Having learnt more about the Cloudflare redirect rules If am much happier running the rules from this file. Also, this started off as a shorticle but is long enough to be a full article.

You can read more on Cloudflare’s full documentation on redirects and let me know if I have missed anything important out!

Apple OSX Messages full stops emoticon bug

Simon Cox — Sun, 15 Jun 2025 01:00:00 GMT

I came across an odd bug in Apple OSX Messages and reported it to Apple a few months ago, but I am sure they have had other liquidy things to focus on at the moment.

I use Messages on my Mac OSX desktop quite a bit as I find typing on the keyboard more convenient when I am working on the Mac. It is also a bit easier than the iPhone keys. I do use the occasional emoticon - mainly with family messages.

To do a heart emoticon you can type <3 and the emoticon will appear in a tiny pop up and you can then tap the down arrow and Return/Enter key to paste it in the message.

However, this does not work at any time after you have three full stops in the message. After some testing I also discovered that other symbols that complete a sentence, such as a question or exclamation mark, or any combination of also cause prevent the emoticon from popping up.

On iOS the emoticons are right there and very handy and typing the short cut keys for emoticons does not bring up the emoticon at all – doesn't need to – so this is confined to the OSX desktop Messages only.

I do wonder if this will be fixed in the next version of OSX – 26 I believe it will be - the Liquid Glass effect look and feel. Only time will tell!

Oh yes, and I do use em dashes a lot as it is not a tell tail for AI content but good English when one digresses – and I do that a fair bit away from the keyboard too.

Recovery from a Bing de-indexing

Simon Cox — Mon, 07 Apr 2025 01:00:00 GMT

This has been quite a journey and as professional Technical SEO, quite the challenge.

I have been using Bing Webmaster Tools for many years, mostly as a confirmation tool when comparing issues with Google Search Console. As Bing tends to only provide 5% or less of organic search results it hasn't been that important to keep track of whats going on.

Why Bing is becoming more important

However with the introduction of Large Language Models (LLMs) and the Bing index being used to populate various AI tools, it has become more important that your site is being indexed by Bing. Bing is also used by some other search engines to complement their own databases DuckDuck go being one of these.

Something's up

In January 2025 I checked how my personal website was doing and there wasn't a great deal of impressions or clicks - which is fairly normal. I checked the home page in the URL inspection tool and realised there was a bit of an issue!

The dreaded note: "The inspected url is known to bing but has some issues which are preventing indexation. We recommend you follow Bing Webmaster Guidelines to increase your chances of indexation." This really is as much information Bing will give you about the error on your website that is preventing indexing. You are on your own finding out where the issue is.

It should normally have a couple of green ticks stating that the page is Indexed successfully, URL can appear on Bing and No SEO issue found - that's where we need to be.

I checked the Live Page tab:

Odd - the URL can be indexed by Bing.

The Crawl and Indexing report

I checked the Crawl and indexing report which is in Search Performance last position in the Filter by drop down menu. oh dear me. At this point breathing excersises come in handy.

Sure there were some crawl errors but that didn't correlate with the drop in August 2024 from 120 pages index to zero in a few weeks.

Site check

So I did a site check in Bing Search: and sure enough there were no results in the Search Engine Results Page (SERP). None of my sites pages were in the index at all - disaster!

Site scans

Bing Webmaster tools allows you to run and keep, up top 5 separate Site Scans that are useful for troubleshooting.

Five http 500 errors was concerning.

The information on what actual errors were occurring and which URLs just sin't provided. None of the crawls I ran, using Sitebulb or Screaming Frog, were giving me any errors at all so I could only put this down to Bing crawler errors at the time of running. Five URLs with server errors would not course the whole site to be de-indexed though, would they?

Manually adding pages to the index

I began trying to resolve this by manually adding the pages using the URL Inspection and Requesting indexing. This should normally work, and is good practice when you publish a new page.

I did this for 37 pages and then left it for a week or so and then checked to see if they had been indexed. No they had not.

In the IndexNow section in indexing Insights I was able to find some details. It appeared the issue was Content Quality. And yes I did read the Bing Webmaster and no they were no help as they were as ambiguous as you would expect, as I knew they would be. They have to cover a huge amount of potential situations without giving too much away - because search engines change aspects of how they work a lot.

Content quality

Content quality is always a worry though. There isn't any AI written content on the site - you can tell that by my deplorable spelling mistakes.

A while back I published a short, Cobbles of Mousehole, a few days before the start of the decline in the indexed pages. It contained several paragraphs lifted from online news articles and I may have been auto penalised for plagiarism, but if you read the piece it is a review of those articles. So I considered that I might have fallen foul of the Guidelines and replaced the live text with screenshots. I believed that my content was squeaky clean at that point.

Not the first to have been de-indexed

So I had a look around the web and found that a lot of peoples websites had been de-indexed by Bing - this wasn't a niche issue that I had. Fortunately there was plenty of advice to hand on how to get your site re-indexed. The one that I found to be most helpful at this stage was Deindexed in Bing?.

To summarise the tips for a quick for for Bing De-indexed sites:

Confirm whether you have a Bing indexation problem
Have a working XML sitemap file
Check your robots.txt for weird issues
Make sure your site 404s correctly
Setup a Bing Webmaster Tools account
Log a ticket with Bing support
Check your Uptime + other technical SEO elements

My Results from that checklist:

Yes I do have an issue - no pages are showing in Bing search.
XML file works fine. Tested with SEO Testing XML Sitemap Validator
Robots.txt validates in Bing webmaster tools.
Seems to be ok - I got the correct responses in testing
Already done.
Not going to do that if I can help it.
Uptime should be ok - Netlify is a CDN… Speed test all ok.

When checking the 404 page I checked the headers and noticed there were three missing headers but on comparing with some other sites that I knew were not de-indexed there was no difference.

Sitemaps

I deleted an old sitemap entry and resubmitted the main sitemap and also added the rss feed in the Submit Sitemap section.

Blocking AI crawlers

At this time I was blocking all known AI crawlers using the ai.robots.txt list was this the problem. I knew Bing were testing Co-pilot with a view to adding it to search, and now has been launched, and did wonder if by blocking AI crawlers If might be running fowl of some terms and conditions that I had not found.

I took those out of my robots.txt file, deployed and left it a week. No change.

At that point I thought nearly everything else has been ruled out. So it time to raise a Ticket with Bing.

Bing Help ticket

So I did raise a ticket with Webmasters Support. and explained what I had done and waited for their response.

Bing support replied

"After further review, it appears that your site https://www.simoncox.com/ did not meet the standards set by Bing the last time it was crawled. Testing: https://www.simoncox.com/post/2024-05-28-log-store-build/ Bing URL Inspection states: The inspected URL is known to Bing but has some issues which are preventing indexation. We recommend you follow Bing Webmaster Guidelines to increase your chances of indexation."

I wasn't sure that their response was that helpful.

More changes and a switch in hosting

I made some more subtle changes to the site and ran the Bing webmaster site scan several times to eliminate all issues. I was able to identify a 500 error while doing this so ended up switching the site from Netlify to Cloudflare hosting. This didn't take too long and I now have the site deploying to both so with a switch of the DNS, managed through hover.com, I can flick between them if needed.

After the hosting migration the Bing Site scan gave me no errors.

Redirect issues with Cloudflare

Having moved to Cloudflare I checked a few things and some redirects were not working. What is good is that the _redirect files works on both Netlify and Cloudflare, even the splats. Cloudflare state that you can have 2000 static and 100 dynamic redirects on the free plan - but anything after about 100 static didn’t work for me. So I had to work them into splats to get below the threshold.

With all that done I waited a week and again raised a support request. This time I got a really quick reply:

“After further review, it appears that your site https://www.simoncox.com/ did not meet the standards set by Bing the last time it was crawled.” ...

IndexNow

One feature that Bing has is IndexNow which allows a webmaster to get pages indexed almost instantaneously and shared with other Search Engines using the IndexNow system. Delightfully Cloudflare can do this for you automatically in their Crawler Hints - just switch it on.

Having moved the site to Cloudflare I can make use of their IndexNow feature! Had to shift theDNS to Cloudflare as well so that I could turn on Crawler Hints to get the IndexNow feature. Then had to turn on Custom domain in Cloudflare pages and reactivate the site as I think it got turned off when I switched the DNS.

In no time at all I had 839 URLs submitted to the index.

What happened next was a surprise! There was a massive rise in errors - of course there would be as the pages were getting indexed but this got me thinking.

HTML validation

I checked the site on the W3C Nu HTML checker tool and I had the Fathom Analytics script inserted after the closing body tag and before the closing html tag. Years and years ago this was ok. Google thinks its ok - well it wasn't de-indexing the site so I presume it forgave me and got on with the job in hand.

Apparently that was a change in HTML 4.01 (1999) and I had forgotten. I looked back through my deployment sand I had switched the Fathom script from the head to the base of the html just before the site was de-indexed. Coincidence? Had I found the cause?

I moved the Fathom code inside the body tag, ensured the html validated and then resubmitted all the page urls using the URL submission tool.

Finally success and pages started to get indexed

I kept a check on progress and suddenly the number of pages crawled started going up daily.

The site started appearing in the SERPs again!

Here we go, good content for people to read and enjoy back in the SERPs where they belong.

interesting differences between the layouts depending on your search terms!

Conclusion

It is a bit of an odd one this. For years we have been bowing our heads to Google and its ways. Google have constantly stated that they really do not care if your web page is valid or not. (Though it really does matter if you break the head with a body tag.) This is probably for the best as there are many web pages out there that don't validate but still provide the user with a good experience. Bing however is a little more fussy and I applaud it for that. I like pages to be written with valid html as it helps other developers sort your code out when they need to and for people learning html to understand how it works.

I let my standards slip though and suffered for it (well 5% less people visiting wasn't really suffering but my fragile ego was complaining).

And I was done. Or at least I thought I was...

The aftermath of the Bing de-indexing

When I started writing this article a search on Bing with the site operator for my site was providing a full list of the pages. As of today there is nothing showing again - yet the webmaster tools is showing impressions and clicks as well as the pages being in the index. Google has some of my content ranking really well but since the initial euphoria of the pages appearing in the Bing SERP again I think the new site honeymoon period may be over as nothing is cutting the mustard for Bing.

Again I think I know what may have done it this time and have made a change and booked a test in for next week. I will update this article if I have fixed it again.

I am Simon Cox. I really am.

In looking at the SERPs today I though that the new Copilot might shed some light on whats indexed on the site. I asked it to tell me about simoncox.com and it clearly mentioned Technical SEO but links to a different Simon Cox - who happens to be a Microsoft Regional Director... Am I being blacklisted now? A conspiracy tin foil hat has been ordered. Back to the keyboard.

Update 30th July 2025

The site is indexed according to Bing Webmaster tools but not showing in the SERPs. It did come back in the SERPs for a couple of weeks in March, after I added IndexNow, and then vanished again in April. The Bing Webmaster team have escalated my support request and I have been waiting since.

Update 19th November 2025

Am I finally back in Bing's good books?

I have spent an extraordinary amount of time trying fixes to the site, rebuilding some posts and even renaming a whole section in case the URL segment I was using caused issues with a reviewer, AI or human.

What moved the needle - what was causing Bing to de-index my site?

No idea. All I was told is that the site had been reviewed and would be back in the SERP in a week or two as it got recrawled. Actually was a lot faster than that because, I assume, I am using Index Now in Cloudflare.

You can see that in February to March and then from April to November there is barely any impressions. In the first week of November the impressions start up again as the site is released back into the index.

Creating a blogroll page from Mastodon bookmarks

Simon Cox — Fri, 04 Apr 2025 01:00:00 GMT

Why did I want a bookmarks page?

A thing that has been on my ideas list for quite some time is to create a links type page from the Toots I bookmark on Mastodon. The mastodon bookmarks are really handy for items that I want to go back to, to read more or as a prompt to get me to do something. Having them actually on my website makes it more like a blogroll of old and here is my bookmarks page.

Mastodon API

Mastodon has an API that you can pull many interesting things out of and this was what got me thinking about this idea in the first place. It has been on the ideas list for a few years because I can't really write Javascript. I can look through it and make some good assumptions to whats happening but coding this is still a dark art to me. The Mastodon API docs are available to peruse and I had a glance at one point.

Down the rabbit hole of code I go

So I turned to AI. Of course I did, and if you think less of me for it then that's just fine with me and no doubt you will give me some grief on Mastodon. Off you toddle.

Meanwhile for those of you that are still interested I went through a fair bit of prompting and trial and error to get this working in the first place and then how I wanted it to work. It wasn't 5 mins time of ChatGPT and there it was. No, it was a week of spare moments pulling out hair, trying to understand things and then trying again. In the end I got there and I did learn a lot from it.

With the Mastodon API you can pull out 40 bookmarks in one go - you can pull out more but then you have to call the API again asking for pagination and I have not had time to work out how to do that properly yet. I may not ever bother as 40 takes me back quite a while as I don't bookmark that often, though I might do more of it now!

The environment file

First I had to set up a .env file with my Instance and Access token at root level in my 11ty folder so that the script to make the authenticated call. In this file I added the following two lines (I have not filled in the instance or token in this example!): MASTODON_INSTANCE=https://your.instance MASTODON_ACCESS_TOKEN=your_access_token

My instance being the Mastodon server I am on. The Mastodon Access Token I needed to create by going to my Mastodon Preferences > Development to create New application. I give the Application a name and then at the top of the page I found my access token - it's a long string. Next I choose the Scope - read:bookmarks is all that I needed for this and then I saved the application down at the bottom with the Save Changes button.

I added those two values to my .env file.

The bookmarks Script

Next I created a bookmarks.js file in my _data folder and this is my current script:

// Load environment variables from the .env file
require("dotenv").config();

// Import EleventyFetch for fetching remote data and caching it
const EleventyFetch = require("@11ty/eleventy-fetch");

// Get Mastodon instance URL and access token from environment variables
const MASTODON_INSTANCE = process.env.MASTODON_INSTANCE;
const MASTODON_ACCESS_TOKEN = process.env.MASTODON_ACCESS_TOKEN;

// Helper function to check if an image URL is valid (it will try to fetch only the header)
async function checkImageExists(url) {
  try {
    // Send a HEAD request to check if the image exists without downloading it
    const response = await fetch(url, { method: "HEAD" });
    return response.ok; // If the response status is 2xx, the image exists
  } catch (error) {
    // If there's an error (network issue, or image doesn't exist), return false
    return false;
  }
}

// Helper function to extract the 'next' page URL from the Link header (used for pagination)
function getNextPage(linkHeader) {
  // If the link header is missing, there's no next page
  if (!linkHeader) return null;

  // Regular expression to extract the 'next' link from the pagination header
  const match = linkHeader.match(/<([^>]+)>;\s*rel="next"/);
  return match ? match[1] : null; // Return the next page URL or null if not found
}

// Main function to fetch and process Mastodon bookmarks
module.exports = async function () {
  // Check if the required environment variables are set, otherwise log an error
  if (!MASTODON_INSTANCE || !MASTODON_ACCESS_TOKEN) {
    console.error("Missing Mastodon credentials in .env file");
    return []; // Return an empty array if credentials are missing
  }

  // Construct the URL to fetch bookmarks from Mastodon API
  const url = `${MASTODON_INSTANCE}/api/v1/bookmarks?limit=40`; // Fetch up to 40 bookmarks
  // Add the authorization header with the Mastodon access token
  const headers = { Authorization: `Bearer ${MASTODON_ACCESS_TOKEN}` };

  try {
    // Use EleventyFetch to fetch the bookmarks with caching for 12 hours
    const data = await EleventyFetch(url, {
      duration: "12h",  // Cache the result for 12 hours
      type: "json",     // Expect JSON data from the API
      fetchOptions: { headers } // Include the headers (with the access token)
    });

    // Process the fetched data (map over each bookmark and handle the media)
    return await Promise.all(
      data.map(async bookmark => {
        // Check for images in the media_attachments array and validate them
        const images = await Promise.all(
          bookmark.media_attachments
            .filter(attachment => attachment.type === "image") // Filter only image attachments
            .map(async attachment => {
              // For each image, check if it exists by using the checkImageExists function
              if (await checkImageExists(attachment.url)) {
                return attachment.url; // Return the image URL if valid
              }
              return null; // Return null if the image doesn't exist
            })
        );

        // Return a simplified structure for each bookmark with the relevant data
        return {
          id: bookmark.id,  // Bookmark ID
          content: bookmark.content,  // Bookmark content (text)
          url: bookmark.url,  // URL of the bookmarked post
          created_at: bookmark.created_at,  // Timestamp when the bookmark was created
          account: {
            username: bookmark.account.username,  // Account username
            url: bookmark.account.url,  // Account URL
            avatar: bookmark.account.avatar  // Account avatar URL
          },
          images: images.filter(img => img !== null) // Remove null image entries
        };
      })
    );
  } catch (error) {
    // If there was an error fetching data, log it and return an empty array
    console.error("Failed to fetch Mastodon bookmarks:", error);
    return [];
  }
};

Page code

To display the output I set up the following. I have the styles inline at the moment as I am still mucking around with it so they may well end up in the site css.

{% for bookmark in bookmarks %}
<section style="border: 1px solid #ccc; padding: 10px; margin: 20px auto; border-radius: 20px;max-width:360px;overflow-wrap:anywhere;">
	<img style="width:40px;margin:0" src="{{ bookmark.account.avatar }}" alt="{{ bookmark.account.username }}" width="40" height="40">
	<p>from {{ bookmark.account.username }}</p>
	<p>{{ bookmark.content | safe }}</p>
	{% if bookmark.images.length > 0 %}
	<section class="images">
		{% for image in bookmark.images %}
		<img src="{{ image }}" alt="Mastodon image" />
		{% endfor %}
	</section>
	{% endif %}
	<small><a href="{{ bookmark.url }}">Link to the the Toot</a> – Saved on {{ bookmark.created_at }}</small>
</section>
{% endfor %}

Process of adding the bookmarks

I did not want this process to be client side as it would have taken too long to load the page and there was a bigger risk of exposing my token. So I have this setup to build out the page when I run my build command locally. the html page gets build and the images added from cache to the img folder. That is then submitted to Github and deployed to the server.

The disadvantage with this is that I need to go through a build process to get the latest 40 bookmarks onto the page. I am always tinkering with this site though so that's not a problem for me!

What next?

Hopefully some others will find this useful and create something similar if not a lot better and I await for you to post on Mastodon so that I can bookmark them!

Marketing URLs - when and how to use them

Simon Cox — Fri, 07 Feb 2025 16:50:51 GMT

Many years ago when I was working for a global financial services organisation I came up with a strategy which I called Marketing URLs. I developed this as a workaround for the obligatory CMS paths we were forced to use in the server set up. It was less than optimal but in those days usability had not been considered.

This came to mind today because Jon Henshaw posted on Mastodon that Bitly has changed its policy and is introducing interstitial ads into millions of shortened URLs. Jon followed up with an excellent post on Bitly,

Now, when you click a Bitly link, you will see an ad before reaching the destination site. How this will work with ad-blocking software remains unclear, and its impact on a site's inbound link SEO is yet to be determined. It could be detrimental depending on how Bitly implement it.

Are URL Shorteners good for SEO?

There are many articles stating that url shortening services help your SEO. This is based on ease of use of remembering a shortened url but most links are clicked on so it does not matter how long they are. I really don't believe that URL shorteners help with SEO at all - marketing perhaps. Building brand is a better use of your time

The Marketing URL strategy would help with a lot of these situations, but not all, of course.

Marketing URLs - what are they?

Most websites use directory structures that can include technical directories caused by the way the Content Management System works. You don't see these so often anymore but there are still plenty about.

Example

www.example.com/1/widgets/

The /1/ isn't helping the user - just the system.

A Marketing URL for this would be

www.example.com/widgets/ This then 301 redirects to www.example.com/1/widgets/

On my own site I could have a marketing url for this article: https://www.simoncox.com/post/2019-01-02-using-google-data-studio-to-review-your-http-to-https-migration/

My marketing url would be

https://www.simoncox.com/migration

Go on try it!

This is much more memorable than a bit.ly link, reinforces your brand and you have complete control over it.

How to create Marketing URLs

The first aspect you need to consider is control. One entity needs to be in charge of the Marketing URLs be it a Marketing, IT or, if there any left, a Webmaster.

I used a simple spread sheet that included Marketing URL, destination URL, Requestor, Date implemented.

If it was for a campaign then I would also have a Completion date field and if this was set then the redirect would be a 302, temporary redirect. These did not happen often.

How that is then implemented on your site does depend on the CMS you are using. For this site I am using 11ty so have a hand built redirects file which takes me a few seconds to alter, build and deploy. When I first created marketing URLs I would have to raise a change request and IT department would set up the redirect for me. It was not available in the CMS we used back then!

My current recommendation for Bitly links

For now I recommend you audit your website and incoming links for Bitly links and consider if you want to continue to use them.

The 2025 blog question challenge answers

Simon Cox — Mon, 20 Jan 2025 14:49:58 GMT

I was tagged by Bob Monsour to answer the challenge. I accepted. The challenge was started here Ava's Bear Blog Challenge

Why Did You Start Blogging In The First Place?

In those heady early days of the web we built sites for the fun of it - there were not that many people out there able to see our sites anyway. I read a few other peoples blogs about web design and development, so started writing up my own experiments and findings. In those days it was the main way of finding out new techniques and solutions - there was a growing community of blogs doing this. They are mostly gone now as other avenues of communication have evolved over the years.

What Platform Are You Using The Manage Your Blog, And Why Do You Use It?

My site is built using 11ty, version control on Github and it is deployed to Netlify. I have really enjoyed building with 11ty and have switched most of the small sites I run for myself, friends and clients to 11ty for the ease of set up and use. As they final site is flat file html is it fast and a lot less vulnerable to issues and malicious activity. 11ty has been a game changer for me and the community using it reminds me a lot of the early days of the web - it is fun!

Have You Blogged On Other Platforms Before?

Oh gosh yes - and apart from one period I have hosted my own content on servers that I am in control (to an extent) of. I would never blog on a platform like Medium as I don't own it - anything could happen to my content.

I started in the late 90's with flat file sites, hand coded then using Page Mill, Go Live (before Adobe bought it) and Macromedia Dreamweaver (before Adobe bought it) to build my site.

For some years it ran on MovableType. They then got funding, which killed the community so I switched to PMachine. That soon became ExpressionEngine, which I still use today for one project.

Then Craft CMS was developed by users of ExpressionEngine that wanted it to do more so they built their own system from scratch and it was very, very good.

A few years later I decided I did not want to use a database for the content any more (had some issues, please don't ask). So I tried the excellent Kirby CMS out for a couple of years and all was great.

After lockdown I switched to using Wix for my site as I had become a member of their initial SEO Advisory Board. I meant I could fully understand the Wix system and help drive its development both from an SEO point of view and as a user.

After that appointment finished I was looking for a flat file solution and finally found 11ty. I rebuilt the site from scratch and it has been running on 11ty since 2023.

How Do You Write Your Posts?

These days I tend to write my longer articles in Hemingway Editor as the first part of this process. This is bashing out thoughts and is usually a big bundle that needs thinking through and then editing. I try to leave it a day or so before editing an article so I have fresh eyes on the piece. It is amazing how terrible my spelling and punctuation is on first drafts! The text then gets copied into 11ty, styled, with links and images added before publishing. I write from my perspective and I write as if I am chatting to you over a pint.

When Do You Feel Most Inspired To Write?

I'm not a prolific writer and can't turn inspiration on like a tap. It is usually after I have achieved something and this is especially so with my railway modelling. The short posts on the site are of the moment, when I want to document something that I think might be important for me to recall in the future. They are for me more than anyone else. I have had situations where I am looking something up on a search engine and find that I have written a short post about it some years ago!

Do You Normally Publish Immediately After Writing, Or Do You Let It Simmer?

For the Short posts its bang and they are live. For the main articles though I always let it simmer even after the initial burst of enthusiasm and not just for the editing. I do jot down a lot of ideas for posts that - some could be months.

What’s Your Favourite Post On Your Blog?

Probably the log store build as it is getting a fair bit of traffic at the moment (I don't monetise it). I am rather happy that it is now outranking serious brands, such as Stihl, for "Log store design" in the UK Google SERPs! Means I still know what I am doing. Also it has been a favourite project of mine for 2024 outside my railway modelling.

Any Future Plans For the Blog?

I'm always tinkering with it but have no long term plans. Short term I do need to go through the images and sort them out now that 11ty Image 3 has been released and I don't need to use 11ty shortcodes any more. I also promised myself a fresh design so have been learning some new, to me, css techniques that have been developed in the past few years.

Who Will Participate Next?

I officially tagged Seth Goldstein and Preeti Gupta to answer the challenge.

Newspaper style layout for my content

Simon Cox — Sat, 14 Sep 2024 10:40:00 GMT

I read a short post on Mastodon from Pierre Carrier saying that his blog had a newspaper mode - and it looks great! Pierre has his site on 11ty, as my site currently is, so I thought I would have a quick go at building a newspaper version of my content - the Simon Cox Evening News.

First off I didn't want to change any of the code for my site and this would be on one page only - not a toggle between site designs. 11ty automatically builds collections to gather content into groups so with testing I picked my Shorts collection of posts and built a small piece of html to reiterate over each story - that pulls in the heading, link and content etc.

This gave me a long page of content. What I wanted to do was have columns of content. CSS grid sprang to mind but of course it segments articles into blocks with spaces in the rows, so that would not work. A masonary type approach might work - but that runs in rows. So I went back to an old favourite that, in my opinion, does not get used enough on the web - columns. This is really old CSS and for various reasons designers appear not to like it - control of the flow being one of them.

The design and html for the page is standalone - it does not uses any of the CSS or templates from the rest of the site.

I had some issues:

Initially I set media breakpoints for the number of columns to give a responsive layout depending on viewport size. Pierre rightly asked why I had not set the column widths and he was spot on - that was a much better approach.
Image widths had to be set to width of 100% to fill the column correctly but some were smaller than the columns widths so Max-width 100% was used.
I was getting a lot of white space to the right meaning there was a lot of horizontal scrolling which was not great. I eventually tracked this down to the pre tag, that I was wrapping code in, needing white-space: pre-wrap; in the css.
I had used the Shorts collection to test and swapped that to my posts collection to do a second test. What I really wanted to do was both and I thought I would have to set up a new filter in 11ty to do that bet remembered I have already done this for the rss feed – so I was able to use the feed collection! 11ty does make this kind of thing easy!

Once I had the layout sorted I added some enhancements.

The images and links were in colour and I wanted an old newspaper feel. I added filter:grayscale(1) brightness(80%) contrast(150%); mix-blend-mode: hard-light; to the container making everything monochrome without touching the source content.
background - a seamless crumpled paper image.
post titles were set in Playfair Bold and the kerning tightened.

Things to do: I was hoping to add some filters to make the images look like halftones but after a lot of experimentation it has eluded me. There are some lovely online codepens and blog posts on halftones for this but I could not get them to work without changing the posts underlying code. I may come back to this in the future.

As Seth Goldstein said It's overwhelming but he is a recovering journalist.

Anyway - here it is - the Simon Cox Evening News.

Update

15 Sept 2024

I have added a couple of extra pages that filter the Articles and Short articles so it is a little bit easier to read. Not sure this will have a huge amount of traffic as it is more of an excercise! I am, of course, monitoring what happens from an SEO aspect - always testing!

The cobbles of Mousehole

Simon Cox — Sat, 13 Jul 2024 17:50:14 GMT

That's odd I though - does Mousehole actually have cobbled streets? As lovely as it is with Stargazy pie, traditionally eaten on Tom Bawcock's Eve, and the last person to speak Cornish as their first language to live there, Dolly Pentreath, but I'm not sure it is known for its cobbled streets. Mousehole no longer has cobbled streets.

I do know the beautiful tourist trap of Clovelly has the iconic cobbled pathways through the village down to their harbour - but that's not even in Cornwall, it is in North Devon.

So whats going on? Why would a Cornish website - CornwallLive - tell untruths?

Well it was not CornwallLive that actually first published this story (11 July 2024), it appears to be the Daily Express.

Hmmm, that's an oddly familiar headline and name. When you compare the two stories it seems all Jeff has done is run Lauras text through chat GPT to change it just enough to stop any duplication algo's picking it up.

Laura's 3rd paragraph:

Jeff's 3rd Paragraph

Oh wait - Jeff also writes for DevonLive

This really looks like the cobbled streets aspect was made up to get traffic to the sites so they can sell advertising - and there is a lot on all those sites. The argument is that local news sites need advertising to be able to operate but stories like this are just rehashed and wrong - there is no local news left on local news sites – it's just all click bait.

It is exactly this type of reporting that has killed off local newspapers and why your high street has the same shops as my high street and any other high street. Always follow the money.

Tracking 404 broken links with Fathom Analytics

Simon Cox — Sun, 11 Feb 2024 24:00:00 GMT

I switched all my small projects over to Fathom Analytics in 2023 for various reasons but there was one page on my site where I kept the Google Analytics code - the 404 page.

I did this so that I could pull the data into a Data Studio dashboard to provide me with errant URLs being visited on my site.

The above image shows a classic example of a URL that didn't exist on my site. Not sure how someone got this wrong but they have missed one letter, 'e' out of the URL thus breaking it! They have put:

/post/2010-02-04-th-perfect-angle-to-staple-paper/

when the actual page is at:

/post/2010-02-04-the-perfect-angle-to-staple-paper/

And it had nine visits (probably the same person wondering why the link was going to my 404 page - so they may have fixed it.)

So the report is super useful to see what is going on under the hood.

Why do I want to see what is happening on my 404 page?

Well, broken URLs in my site can usually be found quite easily by running a crawler across the site and fixing anything that breaks but there is the odd occasion where someone linking to my site uses an old URL or creates a URL with a typo in it - essentially they have created a broken link to my site and I don't know who has done that and I can't ask them to fix it.

With the old URLs I have redirects in place to catch them but for new broken URLs I don't know they exist unless I can track the referrer. So that's what I have been doing.

Set up the Redirects

When I get a new broken link I can add a line to my redirects file to redirect that to the appropriate page if one exists. If it is not obvious where to send the traffic then I still let is resolve to the 404 page.

Creating this report in Fathom Analytics

I thought I should be able to create a similar report using Fathom Analytics so read the Creating and using events documentation and it looked like I could set an event up and track them there.

This code looked good so I tried it:

<script>
window.addEventListener('load', (event) => {
  fathom.trackEvent('checkout completed');
});
</script>

All I needed to do was change the checkout completed to 404. It worked but of course only told me that there was a 404 event. I needed more data from the script - I needed the URL. Javasripty people will be well ahead of me now and using the word 'just' a lot but despite using the fabulous 11ty for this site I really can't cope with much more than a sprinkle of javascript.

Fathom to the rescue

So I contacted Fathom Analytics, and told them what I was trying to do. The wonderful Paul Jarvis came back with the code I needed and even tested it out before sending it to me!

Here is the code I have ended up using - courtesy of Paul.

<script>
document.addEventListener('DOMContentLoaded', function() {
    var path = window.location.pathname;
    fathom.trackEvent('404: ' + path);
  });
</script>

On testing, I now get the following report in my Fathom Dashboard:

That allows me to spot 404 URL errors and set up new redirects for them!

Fathom Analytics

Thank you Paul Jarvis for your help on this. If you are interested in Fathom Analytics, this is my affiliate linky.

Update

Paul has already added this technique to the Fathom documentation!

Build your own 11ty starter

Simon Cox — Sat, 05 Aug 2023 01:00:00 GMT

Recently late one evening when I should have been going to sleep, I had an idea. I spent the next 30 minutes building and launching a website from scratch. OK, it's not a brilliant site but the fact I can spin a site up quickly got me thinking. Can I do this even quicker? And yes I can!

The move to Eleventy

I have moved a lot of my projects over to eleventy (also know as 11ty), a static site generator. I wanted something simple that generated flat file html, the fastest type and original type of website. I'm not a fan of javascript but that's exactly what 11ty is behind the scenes - but the output has no javascript! Fantastic!

Eleventy does a lot - I mean a huge amount and you can use it in a huge number of ways. I'm not a React code bunny – would not know where to start – but I know my html and css and that's all I really need to build a website. If you know javascript then there is a lot more you can do with 11ty than I can.

I have learnt a huge amount building sites in 11ty in the last 18 months but the key moment that got me started was this video from Kevin Powell.. Well worth a watch if you are just starting with 11ty

I keep notes as I build so that I can repeat the steps I need to begin a site build. Now I have taken that a step further and built a starter pack for myself as a template in Github so I can spin up a new populated repository in a few moments.

Build your own 11ty Starter Pack

Create a new repository for your starter pack on Github and assign that to a folder on your workspace.

Set up the folder structure you want to work with and include the files you need.

I have not included any content structures in my starter pack, such as blog posts, as each project is going to be different. This structure gives me a flying start.

I have included the following - you might want to consider some of these for yours:

robots.txt
redirects (for Netlify. or Cloudflare.)
a 404 page
xml sitemap (from Duncan McDougall's article.)
Assets folder
11ty includes for the html template and the css
11ty data (helpers and site meta config)

Add any extensions you commonly use in the .eleventy.js config file. In my case I like to use the 11ty clean-css plugin on most sites. I use (handwritten and minimal) included in the head of the page rather than as a seperate file for page load speed.

I also include all the Pass throughs I tend to use on a regular basis for the files I want 11ty to passthrough to the output directory.

Github Template

When you are ready with everything change your Github repo to a template repo - in settings for the repo.

This changes the repo's green button from Clone to Template and allows you to create a new repository based on the files structure.

Here is my 11ty starter pack. for you to have look at, or even use it for your own project.

Let me know how you get on. or if this can be improved in any way.

Hat tip to Bob Monsour. for proof reading this one!

How I set up lastmod date in my 11ty xml sitemap

Simon Cox — Thu, 06 Jul 2023 01:00:00 GMT

Google's new policy has meant changes to the xml sitemap

Google have recently got a little more particular about the last modified date in your xml sitemap following their decision to drop the ability to ping updates to thier endpoint..

In the post they make mention of the lastmod element and its need to be accurate. Many content management systems just output the date of the last time the file changed which is misleading and will mean that Google will ignore updates if it finds this is constantly happening on a site.

So I wanted to ensure I had a process to ensure I could manually update the lastmod in the sitemap as there is no programmatic way to determine what Google considers to constitute a page change!

In my 11ty set up I have used the original published date as part of the url which means that I can easily pull that date into the xml sitemap. If I wanted to make a change to that article I needed a way to update the lastmod in the xml sitemap without changing the page url.

I did this by adding a field in my posts front matter and I called it dateUpdated.

Here is my 11ty post front matter:

title:

description:

image:

imageAlt:

tags:

topic:

sitemapIgnore:

dateUpdated:

If I make a significant update to the page content I can add the date updated in the front matter.

My xml sitemap template is now coded with an if else statement to pull in the updated lastmod date in place of the published date used for lastmod.

The original code for creating the xml sitemap came from 11ty Recipes. and you can copy the original code from there.

In lastmod I have pulled in the DateUpdated data and used .toISOString() to get it in the correct required format and it the dateUpdated field is empty then it uses the page.date from the url - which is the original published date.

And that is it - a fully automated xml sitemap with the ability to manually edit it when articles significantly change.

Sitemap ignore

I also have a sitemapIgnore switch.. If I do not want a page to be in the sitemap I can set sitemapIgnore: True and it skips creating the url entry for the page.

Comments

If you have any suggestions or questions then please message me on Mastodon.

Update 2026-02-08

I have since removed the changefreq as it is never used by anyone!

Here is the latest sitemap.njk code: (and I have now improved the logic to prevent inclusion of draft and files not wanted in the sitemap.)

---
permalink: /sitemap.xml
eleventyExcludeFromCollections: true
# To remove a page from the sitemap add this into frontmatter– sitemapIgnore: true
---
<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{%- for page in collections.all %}
	{%- if page.data.sitemapIgnore !== true and not page.data.draft %}
	<url>
		<loc>{{ site.url }}{{ page.url | url }}</loc>
		<lastmod>{{ (page.data.dateUpdated or page.date).toISOString().split('T')[0] }}</lastmod>
	</url>
	{%- endif %}
{%- endfor %}
</urlset>

Netlify prerender cache

Simon Cox — Sun, 04 Jun 2023 13:14:13 GMT

In February 2023 I discovered I had an issue with crawling a site after some changes. I like to fix things to make websites work properly so often go through several itterations of the code fixing things.

The same issue cropped up again in June 2023 so I thought I had better post a Short about it to remind myself rather than just moan about it on Mastodon! When running a crawler, such as Sitebulb, Screaming Frog or SEO PowerSuite, against a site on Netlify you could hit the prerender cache. The same happens when you test a page in Google Search Console but the real Google crawler is ok. To get the real results either wait 48 hours and crawl or change the crawler User Agent to something else, such as Safari, and rerun the crawl.

There is a very good explanation of what's happening on the Netlify support pages.

Cloudflare Pages error with 11ty build

Simon Cox — Mon, 15 May 2023 10:05:13 GMT

I have a couple of 11ty built sites that are auto deployed out to Cloudflare Pages. I normally prefer Netlify for the hosting but I do like to keep some eggs in other baskets.

I updated a site yesterday and it kept failing the deploy to Cloudflare with the error stating that Node had to be at least version 14. I checked my local Node version and it was 19.3.0. So I changed my gitignore to allow the node files to be in the deploy in the hope that this would enable Cloudflare to build out the pages correctly.(Then I had issues with Git Authentication - another post another day on this perhaps but I had to restart my Mac to get the Auth to work.) That did not work.

Turns out you have to set the Environment Variables for Node to work. This seems a bit of a faf and must be new in Cloudflare since March - the last time I deployed this site. Not sure why they have complicated things.

Navigate to Pages > site > Settings > Environment Variables and set up a new variable named NODE_VERSION and I put the version I am using in there.

And the next deployment worked!

Update 2024-09-29

On reflection this may have only happened when Cloudflare increased their minimum version of Node. Even though I was using 19.3.0 Cloudflare appears not to be detecting the version you have used, even though that is in the package.json, and relies on you setting it in the Environment Variables. This certainly does allow easy customisation but could be automated.

Interaction to Next Paint, the new Core Web Vital

Simon Cox — Wed, 10 May 2023 22:40:22 GMT

What is INP?

INP means Interaction to Next Paint and will be part of the Core Web Vitals measurements from March 2024.

Will INP affect my rankings?

Probably not in most cases but it could be the tipping point between your page and another page being ranked higher in the Search Engine Results Pages so it should be considered as part of the sites usability.

Where can I learn more about INP?

You can learn more about Interaction to Next Paint from Google's web.dev site.

Alternative to Google Analytics

Simon Cox — Wed, 10 May 2023 12:22:48 GMT

Is there a viable alternative to Google Analytics?

Yes, Fathom Analytics is a more than capable alternative to Google Analytics and is from a small independent team in Canada.

Like most people who build websites I have been using Google Analytics for many years. The change to GA4 this year though is significant. Having used GA4 for over a year I can attest that it is OK - difficult to understand to begin with but that's because it uses a different data model that the outgoing Universal Google Analytics. GA4 is very customisable, which is great, and I have been able to put together several dashboards for SEO related data. However there is one big issue looming on the horizon.

How far back can I look at my Google Analytics data?

16 months is all you will be able to review making seasonal comparisons much more difficult. Google Universal Analytics will sunset on July 1st 2023 and currently the data will be available for 12 months and then it gets deleted, forever.

Seasonal comparisons are important but we have not really had a normal year since 2019 8so only being able to compare traffic data from last year doesn't hold any comfort for me.

I had heard about Fathom Analytics some years ago and liked the idea but it is not free like Google Analytics but it is inexpensive. The big factor for me though is that they have just launched the ability to pull your data from Google Analytics into Fathom.

This left me with a data gap though as I had switched my Analytics from GA Universal to GA4 in February but I was able to then import my GA4 data from February to today using the date feature! So I have combined all the available data and ported into Fathom!

html neck tag

Simon Cox — Tue, 09 May 2023 09:30:27 GMT

Do we need a neck tag in html?

The neck tag doesn't exists in html but if it did I have a use case for it.

Dave Smart made a suggestion on Mastodon:

<head>, <body> but no <neck>? 
Where do I put the <meta name="trachea" > tag. 

Madness.

I thought about this for a while and realised that there is a use case. Sometimes scripts in a head tag can break the head. If you have an advertising tag, your advertising team might inadvertently add a tag, such as iframe, that is only mean to be used in the body - and the way Google, and other crawlers, interpret the head mean that they stop reading head tags as soon as they come across a body tag. The assumption is that perhaps the body tag was missed and that is fair as the only tag that is actually required to be used in html is the title tag. This means that any head tags after the script are ignored. The best practice is to put all scripts last in the head but if we had a neck tag they could go in there.

Just a thought.

AI making some astonishing leaps

Simon Cox — Thu, 23 Mar 2023 08:30:26 GMT

The AI revolution really began in 2022 for the common person but 2023 is the year where it really took off. Whilst everyone is trying to get the most out of ChatGPT, already on v4 Google Released its own text prompt AI yesterday called Bard and it is fast. I was able to pull in information from live URLs unlike ChatGPT which has a LLM that is at least 2 years old.

It is, however, the Ai image space that has interested me the most and Midjourney v5 was released last week with a significant jump in quality to the point where it can be difficult to tell the creations are not real photos.

Whilst I say AI, it is not true Artificial Intelligence but we are getting closer to that.

The image below I generated using Midjourney – wasn't quite what I wanted even after several attempts but it is photographic and he has the right number of fingers! However if you look at the laptop there is no keyboard...

Webmentions

Simon Cox — Sun, 05 Feb 2023 10:55:00 GMT

I have tried to add Webmentions to the site having read Max Böck's post on this and then Chris Bongers post - both very helpful and bewildering at the same time! Have found my natural limit again having got so far with 11ty!

Netlify CMS

Simon Cox — Sat, 04 Feb 2023 16:58:00 GMT

No issues with coding the pages up as and when I need but if I am on the go somewhere making changes to the site will have to wait - except that I have now installed the Netlify CMS! It's very lightweight for a CMS and is based on the 11ty Collections so static page changes are a little more difficult but posts are ok - such as this one.

Update:

Netlify CMS was rebranded to Decap CMS and is now run Independently by a Netlify partner agency. More info on Decap CMS.

11ty inline minified css

Simon Cox — Fri, 03 Feb 2023 24:00:00 GMT

Minifying css for 11ty sites is quick and simple. Quick Tip #001—Inline minified CSS Using the CleanCSS plugin and moving the css file to _includes and then pulling the code into one line in the base.njk head.

Website re-platform and a light redesign for 2023

Simon Cox — Fri, 03 Feb 2023 24:00:00 GMT

This website has been rebuilt many times since it was first put together in 1995 and it will probably go through more iterations in the future. Part of my enjoyment of the web is creating and optimising websites and I am always keen to learn more and try out different things.

Wix website builder

The site had been hosted on Wix for a few years as part of my involvement on the Wix SEO Board. This allowed me to really dig into the platforms capabilities, discuss it and feed back many suggestions to the Wix teams. Wix had a pretty bad reputation for all things SEO pre pandemic but with some very clever hiring, and a lot of hard work, they have turned the platform around and I can recommend it to anyone -now – especially those of you who don't have time to tinker under the hood like I do and need a lot of functionality.

That said, I felt it was time to move my personal site on. I still have client sites on Wix and am still good friends with the Wix SEO teams.

Things that go around

Back in the early days of the web there was no choice but to hand code a website and it was all just html files and images simply served. Over the past 28 years things have become considerably more complex. Page sizes have been bloated as broadband rolls out across (some of) the world. Then Google decided that speed of delivery of a page was a factor we had to think about and I applaud that. It has meant that a careful look at site code and a need to develop a slimmer, quicker set of code to deliver a website to someones browser. So some simpler techniques have come back into fashion. Client side javascript can really slow down a users experience of a page so server side scripts are now preferred. And likewise why build your page on the fly when requested by a browser, as I had done for years with php based CMS's. Now the smart thing to do is deliver flat precompiled html from the server.

Static site generators

That does make building the site a little more tricky though as you really want to share bits of common code between pages. SSGs (Static Site Generators) do exactly this and provide flat file html output that you can then push to your hosting.

I had been looking at flat file site generators for some years - all needed Command Line set up which I was not comfortable with. I ran the site on Kirby CMS. (a great CMS) up to the point of moving it to Wix and had hoped to revert back to Kirby but use it to create an flat site - you can actually do that..

However, I came across Eleventy. early in 2022 and it ticked a lot of boxes for me. I realised some of its potential (I'm still learning new things about it all the time!) and even though it uses NPM and Terminal commands to set up, I dove in. I found several very helpful tutorials on how to set up a site in 11ty, this video on turning static html/css into a blog being the one I kept going back to..

I have been using Visual Studio Code (Microsoft – you hero's! ) for some years and it has a built in terminal and Git making my process all in one place. Easy to use.

A change in CSS techniques

I was using style sheets before the web - in print programmes so when CSS launched I was onboard with it immediately and have been a big fan since. However it has come a long long way since those early days I whilst I had been using grid successfully on some sites I knew there was a better way.

CSS Layout

I have used Every Layout. from Heydon Pickering. & Andy Bell.. This is set of very well thought out techniques for CSS layouts. This isn't a framework but a methodology so you need to think through what your layout is and how you can build that out. I'd been looking at this for a few years and not really had a chance to try it out so now was the time to give it a go and am very glad I did!

The layout of my site is roughly what it has been for many years but the code underneath is much smaller an better thought out. It's not perfect - but I'm not a CSS Master Craftsman. It is however light and functional.

Fonts

Typography has always fascinated me since I was a child and I have been making fonts for computers since the late 1970's. I couldn't afford Letraset rub down type. sheets back then but was able to get a free Letraset Catalogue that had all their typefaces with all characters so I was able to copy them by hand. Sometimes I wish I'd made a career out of typography, or model making, but it never happened. So I made a fairly big decision early on to utilise system fonts. This is the first site I have built for many years that does not have any fonts to download. This does mean the site looks different on different platforms but who is to know!!! The css uses your system fonts to display and that means a much faster site! And, importantly, I am really happy with the way the site looks!

11ty plugins

Whilst I'm not a fan of plug ins, because of the issues around dependencies and the vulnerabilities that WordPress tends to face, the plug ins for Netlify I am using so far are really just extensions of the core modules and I am a bit more comfortable with them. Of course they are not on the final site so not exposed to any shenanigans! Here are the one's I have used so far.

Minimise CSS

Last week I realised there was a plug in for 11ty that allows you to minify the css. You put your css file in the _includes folder, and 11ty runs the minification on build and adds the minified css as a single line in the head. For smaller sites I am loading a minified line of css in the head of each page but for bigger sites it would make sense to build a minimised css file and link to it in the normal way. For this site it is fast, one less download, and very manageable.

Date time

Small plug in to format date and times, using Luxon, on the blog pages.

RSS feed

Finishing touches on the site build

The finishing touches took almost as long as the rest of the build and include:

Lighthouse optimisations

Performance - 100% – this is mainly down to being a flat file html site and deciding not to use any fonts!
Accessibility - 100% – had a few issues to fix - the usual touch areas around links were to small, and I have fat fingers so should know better.
Best Practices - 100% – Again I had a few issues to deal with here but surprisingly few - images being part of that but they are always trouble.
SEO - 100% – As I write this the site isn't actually launched and the SEO score is 97% and that is because the robots.txt file has blocked any indexing while it is only accessible on the Netlify dev URL. I really don't want the search engines indexing the pages until I move the domain over. I did quickly test without the block and got 100% on the SEO test so I know it's only that to deal with.

Structured data

I have included structured data to help the search engines understand the content. This was easy as an json script in the articles template with the content pulled from the article front matter. The other pages that have structured data are the home page and the About page – nothing else on the site really needs any.

xml Sitemap

For completeness I added a sitemap.njk file and used Duncan McDougall's very handy post with code.. Nice and quick - auto updates when the site is built = thats all I need. Added a link in robots txt to the sitemap file for completeness but it is in the normal place for one.

RSS feed

There is a lovely 11ty plug in that does all the heavy lifting - you just need to point it to the collection you want to feed and set up the feed.njk file and it outputs a very serviceable feed.xml file. That is unless you put an 's' on the end of your collection name and don't realise for several hours while wondering why it's not working. I did give up at one point and put collections. All - but that really does produce a mess - don't do that. But aren't people going to set up something that uses your feed to auto populate their bot sites and beat me in the rankings for my own content? Never happened yet but I do have people reading my feed.

Hosting

One of the attractions of an SSG is that there are a couple of very good hosting solutions available. Cloudflare Pages. and Netlify.. I'm using both and the key factor for me is the automated deployment from Github. I can push to git and this triggers deployment to the live server and in 30 seconds or so the changes are live. The first time you do this its almost magical! Of course both services are known for their CDN's so everything is fast. For small sites the cost is free - another massive incentive!

What did I learn?

I have a really fast flat file site. I don't yet have a CMS to be able to update it quickly but thats ok for me as I have several tools that I can write in and then output to markdown. There are a lot of solutions for this that I am looking into. Netlify has a simple CMS - took a bit of setting up but I am using it on one site. I am a lot happier using Terminal, NPM and even javascript than I thought I would ever be and I have learnt a whole lot doing this.

So far I am loving building in 11ty and have converted quite a few sites over to it. It cannot replace everything but for sites of a certain size and sets of requirements it's really doing it for me this year!

How to get your Wix website verified on Mastodon

Simon Cox — Tue, 08 Nov 2022 24:00:00 GMT

Steps to verify your website on your Mastodon profile

Winters coming (Nothern hemisphere) and it's time to migrate. There is a large outbreak of avian birdflu around at the moment and in short people are looking toward other platforms to provide them with a Twitter experience. Luckily for me the SEO community, whom I very much enjoy the company of, has set up a new home on Mastodon. Most have not left Twitter yet, I have been there since 2007 and am reluctant to go but will not be posting there as much any more.

Mastodon is a lot like Twitter but not the same so it's all new and takes a bit to get used to, much as Twitter did in the beginning for all of us. One of the features is that you can add up to four links to other websites such as your own. And when you add a link to your own site you can get it verified to prove to others who you are.

The Mastodon instructions are simple enough - add this code into your site:

<a rel="me" href="https://your.mastodon.server/@you">Mastodon</a>

so mine is

<a rel="me" href="https://seocommunity.social/@simoncox">Mastodon</a>

You can find it in your profile settings:

Mastodon edit profile page showing website verification panel and instructions

Like any closed system Wix is not perfect and while you can add quite a few different 'rel' instructions to links in the pages, such as nofollow and noopener (good for security), there is no rel="me" yet. I say yet - date is 8th Nov 2022 and they may well have added this before I have hit publish as a few of the top Wix people are already on Mastodon!

Wix advanced SEO link options

So I tried to add the code using an embedded HTML element. I often turn to this for elements not available.

Wix html element

It needs styling but it's on the page.

However, that does not work and will not verify as the way this is loaded at run time means that it is not in the source code and Mastodon cannot find it. I believe it is loaded via the DOM. Javascript will destroy the world.

This is how to get your Wix site verified on Mastodon

Hang on I thought - is there another way - and yes there is. On my home page setting, I went to SEO and then Advanced and added an extra tag.

Wix page settings options showing additional tags added

To do this use the Add New Tag function.

Adding a new meta tag in Wix

As this is in the head the code will need to be a link tag: <link rel="me" href="https://seocommunity.social/@simoncox"/>

Change yours to your server and name. Publish your site.

You may need go back and remove, save and then re add your website link in your Mastodon profile and there may be a delay as I had seen this week with others trying to get verified..

& voila!

You get the green tick on your website link

Mastodon with my website verified

Underwhelmed? Yes of course you are! This is no Twitter verification but that in itself has gone down the drain and at least with this people will trust who you are a bit more, unlike on Twitter as that only costs $8 - this cost me hours.

Summary TL:DR

Edit and bung this in your website's head tag. If you are on Wix then read this whole page.

<link rel="me" href="https://your.mastodon.server/@you"/>
and live a happier life.

You can find me on Mastodon..

How to find insecure pages in your site before Google start penalising

Simon Cox — Sat, 10 Feb 2018 24:00:00 GMT

Embrace the security push

With the announcement that Google will be highlighting all non-secure sites., https, from July 2018 website owners need to think about how their sites are being delivered to the public. For those not yet aware there are two protocols for web pages — http and https — HyperText Transfer Protocol and HyperText Transfer Protocol Secure. The Secure version needs a certificate that provides a level of security for the user to prove that the site they are visiting is encrypting the data between the site and the user’s browser — which in theory is safer than not encrypting it — I will not go into the deep dark depths of that now. What you do need to know is that secure sites are already in the majority after a big push by Google over the past few years to get the digital community to embrace security more. https is slower than http but there are now SEO advantages that outweigh the speed disadvantage.

The keen eyed of you will notice as at this point in time (February 2018) this simoncox.com is not actually running on a secure server- other sites have taken precedence but I will be moving it to a new server as part of whats been a very long set of migrations to the fabulous WESH UK hosting. where I will be enjoying automated SSL certification! Once a site has been moved over to https you need to check every internal link to ensure that they are also https. Often image paths are not relative (start with a / or ../ ) but contain the full URL, such as:

http://example.com/images/image.jpg

A full site audit needs to be undertaken to catch all the URLs that were not migrated. It is possible that those URLs are being redirected to the https URL but that adds a redirect into the journey and will slightly compromise the worth of the internal link — better to link directly.

I recommend you download the Screaming Frog SEO spider tool. to run the audit on your site. It is free for 500 URLs so anything bigger you will need to pay or you could hire someone to do that for you — I am available to do this kind of SEO audit at coxand.co.uk. of course!

With Screaming Frog run a crawl against your website.

Once finished go to the Protocol tab and then you can filter by http to show the un-secure URLs on your site.

Or you can use the Internal tab and click on the Address column header to sort it. You should then be able to review all URLs and easily spot anything that is not https. If you have a shed load of URLs then you can use the filter on the top right — just add http:// to that and it will filter the list to show you all non secure internal URLs found.

List them and fix them!

How I add canonicals into Perch CMS sites

Simon Cox — Wed, 29 Nov 2017 24:00:00 GMT

Canonicals can trip up your sites SEO

Originally conceived for situations where articles were duplicated they would reference the original. Google tends to choose the oldest version of a page that it can find (but not the only method it uses) and any other pages with the same or very similar content are considered duplicates and will not do a well on the Search Engine Results Pages - SERPs and we want our pages to do well there for the traffic.

In most content management systems, developers tend to take the quick option and reference the URL the page is on. To an extent, this works very well but duplicate pages can occur by accident / non-design. For example, if you are using Perch and you decide to prettify your URLs by removing the .php you will have set up .htaccess rules to remove them. But did you decide your URLs should end in a / or not? Search Engines index URLs with and without the / as different pages — hence you can suffer from duplication.

http://www.example.com/index.php
http://www.example.com/index
http://www.example.com/
http://www.example.com
http://example.com/index.php
http://example.com/index
http://example.com/
http://example.com
https://www.example.com/index.php
https://www.example.com/index
https://www.example.com/
https://www.example.com
https://example.com/index.php
https://example.com/index
https://example.com/
https://example.com

All the above are essentially the same page of content — a home page and the search engines have to work out which one is the original. They are getting much better at this but that’s not a reason to help them understand your website.

For subpages, canonicals are more critical as the search engines are less likely to be tolerant and often they will find your site through links to a subpage rather than down through the home page. Having the canonical automatically generated means that any URLs that resolve that you actually do not want on the site will include the incorrect canonical. If you remove the .php from the URLs, as I tend to do, then you may have situations where Perch is outputting links with the .php — the canonical would then include the .php and cause duplicate content issues. Footer menus are an example of where this may happen.

I like to manually add the Canonical so that I know I am in control but this can lead to issues if an editor mistypes the URL so the technique I use grabs the list of pages from within Perch as a dropdown list for the editor to choose from.

Perch field type — Pagelist

You will need to add the Perch field type into /perch/addons/fieldtypes/— drop the folder and its php file in there and you are good to go.

The Perch 2 field type Page list is available from the Perch CMS site. At the time of writing, there is no Perch 3 version but the archived Perch 2 version seems to work ok.

Perch template code

The following code goes into perch/templates/pages/attributes/seo.html

<link rel="canonical" href="<perch:pages id="domain" /><perch:pages id="canonical" type="pagelist" output="pageurl" replace=".php|,/index|" label="Canonical page" help="Please select the page you wish to have as the canonical URL for this page (normaly just choose this page)" required="true" />">

replace=”.php|” removes the .php from the URL.
type=“pagelist” provides the list of pages on your site

On each page in the CMS appears a drop-down box with the pages you have on your site. The editor can select from this list thus avoiding manual errors — though they could choose the wrong page so that’s worth checking!

Example of dropdown list used in the Perch content management system

The output code in the head:

https://example.com/my-new-page">

And there is more...

Pagination

Clive Walker. asked me how do I deal with pagination. Generally, I don’t as I pagination is the work of the devil and advertisers. There are so many sites who make you click through a series of pages to read an article — this is just to sell advertising, not to make it easy for you to read as usually the whole article could easily go on one page and you would scroll down to read it.

There is, however, a situation where pagination is very useful — lists of article entries, categories, topics and tags. In these situations, it is recommended that there is a view all page and that the paginated pages are canonicalised to that, but with huge lists, a view all page is impractical — will take days to load etc. and then the paginated pages can be self-canonicalised. If you want to know more then head over to Deep Crawl’s information on canonicalisation and pagination..

18 December 2017 Update for home page

I have also updated the perch code I used as there was an issue. The home page was outputting ‘/index’ so I have added that into the replace statement as it was canonicalising the home page to a URL that didn’t exist — and that is a bad thing! Apologies to anyone who had used the code prior to today.

Fix Apple Mail ’Unable to Verify Account Name or Password’ Error

Simon Cox — Thu, 05 Oct 2017 01:00:00 GMT

Have you been unable to verify account name or password, or changed your keychain password and had issues with Apple mail and services such as Linkedin, Google, Flickr, Vimeo? I have had this situation and I was able to solve it with a fix that will save you time.

Quickly fix the Apple mail ”unable to verify account name or password” issue

Reenter your password in the blank field and then press the tab button to move the focus out of the password field — the system will then check the account and password and if you have the correct password it will validate. Read on for more details

Changed your keychain password recently? It may have wiped your passwords in Internet accounts

Recently I upgraded to High Sierra — the Apple OSX released in August 2017 and all appeared to go well with the upgrade — it certainly looks fresh. During the install a new security check came up — apparently, you cannot have the same password for your Mac log-in and your iCloud log-in. I was not expecting this so didn’t have my 1Password available on my iPhone to help generate a new one so I muddled through and thought I would change that again later. When I opened Apple Mail all my email accounts failed to connect — all were asking for the password. I have quite a few email accounts for different side projects and luckily I have the password all stored in 1password. However, none of the passwords would verify. I checked online webmail for a couple and the password worked just great so it wasn’t that.

I got onto Apples very responsive and helpful help desk, who in turn asked me to do safe restarts and other things but nothing would change so they asked me to reinstall High Sierra. Several hours later (rural broadband…) I had the Mac back up and running and all seemed to be ok. I was able to get emails and life was back to happy.

That was until I shut down the Mac a few days later. On rebooting it I was back to square one when the OSX asked me to reenter my password for Google services — I immediately checked Mail and sure enough none of the accounts were connecting — same ‘Unable to verify account name or password’ issue yet again.

This time I was not going to reinstall the OSX — I’d had this issue years ago and had solved it then but could not remember what I did — just remembered it was simple but not obvious. After a lot of trial and error, I found the solution and am writing it up as much for myself as for anyone else who runs into the same issue. here you go:

Process to recover your OSX Mac Mail and Internet Accounts from the ‘Unable to verify account name or password’ issue.

Open your email account in system preferences
Choose the email account to verify
Note that your password field is blank
Fill in the password
Press Tab to move to the next field (Important!)
Enjoy your email life

Details on how to fix OSX when you are unable to verify account name or password

Let’s go through the process in more detail. It took me a while to sort this out but it is in fact very simple.

Open System Preferences and then Internet accounts.

You will have a list of your email accounts and other internet services on the left.

For account where you have your own server:

Click on your account and a few seconds later you get the popup asking for your password.

Press cancel here as nothing you enter will validate.

Once you have cancelled you will see the Mail account details:

Please note the password field is blank — enter your account’s password here and then press the tab button to move the focus out of the password field — the system will then check the account and password and if you have the correct password it will validate.

Do the same for each email account.

Easier than reinstalling OSX…

For accounts like Google mail, Facebook, Linkedin etc I deleted the account and created a new one.

Summary

So it looks like the keychain is used to validate your password — and because I had changed my login password, all the passwords stored for those accounts had been deleted. This is a very frustrating bug in OSX and I would have expected better from Apple but it may be an edge case that rarely happens and other factors may be at play with keychain keeping us secure.

And there is more...

From the amount of traffic and comments I have been having this might not be such a niche issue! Come on Apple!

13th February 2019 Update
Just had a comment from PaddyC stating that he found another solution as mine was not working for him — this may help others! Thank you Paddy!

But, in the Mac Mail > Preferences > Accounts dialogue window, I found that there was no password in the Outgoing Mail Server section of both accounts (click on desired account then on Server Settings). Simply putting the password in here and clicking the save button got everything working properly again.

Using a CDN to help migrate your sites hosting

Simon Cox — Sun, 18 Sep 2016 01:00:00 GMT

without having that DNS propagation wait

As part of an upgrade to a site we wanted to add a blog to provide news and updates. The site was flat filed so putting it onto Perch was the obvious way to go — there were plenty of other benefits as well. I wanted to make the transition from the sites US hosting, where it had been for some years, to WESH — a UK based host.. I had developed the site locally and was ready to upload it to the new hosting but I wanted to avoid the DNS propagation dance which always annoys me.

This site was already set up on the cloudflare.com, a Content Delivery Network.. The domain name then resolves to Cloudflare’s platform and caches your site allowing for faster delivery.

The new site was then uploaded (old school FTP) and the mysql file installed on the new host using the IP address.

I checked through the site using a chrome plug in — Virtual Hosts — that allows you to do a local DNS change. I mapped the sites domain to the new IP address and then could test using the domain name. It has a little red light to remind you that it is on — don’t forget to turn off later!

I then logged into Cloudflare and changed the type A settings for the domain to the new IP address. On this site I only have the website going through Cloudflare’s services. FTP, Mail and other stuff is DNS only and avoids the CDN services.

The delivery of the new pages is instant as there is no DNS propagation needed as we have not changed name servers. But there is one more step to smooth things along. I go to Caching in Cloudflare and use the Purge cache process. The ‘Purge Individual Files’ button is a drop down and you can choose Purge Everything. The refreshes the CDN with the files from the uploaded site. This step isn’t necessary if you have moved everything over from the old host. In this case I had rebuilt the site onto Perch so it was a new site and I needed to purge the cache. You could leave the cache priming to the first visitors but I like to give a quick visit to the main pages. This triggers Cloudflare’s caching so following visitors can enjoy the fast pages.

I did not change the IP address for the mail services as I will need to talk the client through that. At the moment mail services are still managed through the old servers. Updating email settings is usually the most time consuming part of the whole process. In this case I can send a file so it reconfigures her email settings automatically. Once done I leave it a few weeks then close the hosting service down.

And that is it. While others are refreshing waiting for the DNS to propagate I am off for a cuppa.

EU cookie consent law largely ignored

Simon Cox — Mon, 28 May 2012 01:00:00 GMT

Most UK organisations have ignored the EU directive on cookies

The EU Cookie Consent law has been making a lot of waves in the web industry since it was first announced. The UK was given an extended period to implement the law and this has been overseen by the Information Commissioner’s Office. — “the UK’s independent authority set up to uphold information rights in the public interest, promoting openness by public bodies and data privacy for individuals” — know as the ICO.

The ICO published a list of organisations that it has written to, spread across a wide spectrum of operations, and in many cases has been working with to get feedback on the approach to the cookie law issue. This resulted in an 11th hour change to the law on the 24th May 2012 much to the outrage of those companies that have spent a lot of time and effort getting compliant in time.

I reviewed that list of organisations expecting to see the majority of sites in compliance with the new law — especially since the ICO had highlighted these and had been in contact. These were my findings:

UK top organisations cookie review
© Simon Cox
Organisation	URL reviewed	Opt in/out?	Cookies
Acumen Professional Intelligence Limited	http://www.thestudentroom.co.uk/	No	4
Amazon.co.uk Limited	http://www.amazon.co.uk/	No	4
AOL (UK) Limited	http://www.aol.co.uk/	No	11
Apple (UK) Limited	http://www.apple.com/uk/	No	1
Argos Limited	http://www.argos.co.uk	No	2
Associated Newspapers Limited	http://www.associatednewspapers.com/	No	1
Automobile Association Developments Limited	http://www.theaa.com/	No	2
Barclays Bank PLC	http://www.barclays.co.uk	Yes	2
BBC News	http://www.bbc.co.uk/news/	Yes	5
BBC Radio 1	http://www.bbc.co.uk/radio1/	Yes	6
BBC Sports	http://www.bbc.co.uk/sport/0/	Yes	6
Belfast City Council	http://www.belfastcity.gov.uk/	Yes	2
Betfair Limited	http://www.betfair.com/	No	11
Boots UK Limited	http://www.boots.com/	No	11
British Airways PLC	http://www.britishairways.com/	No	18
British Broadcasting Corporation	http://www.bbc.co.uk/	Yes	7
British Sky Broadcasting Limited	http://www.sky.com/	No	8
Channel Four Television Corporation	http://www.channel4.com/	Yes	5
Department For Transport	http://www.dft.gov.uk/	No	2
Deputy Company Secretary	?	?	?
Derry City Council	http://www.derrycity.gov.uk/	No	1
Direct Line Insurance Plc	http://www.directline.com/	No	3
Domino’s Pizza Group Limited	http://www.dominos.uk.com/	No	1
Dumfries and Galloway Council	http://www.dumgal.gov.uk/	No	1
easyJet Airline Company Limited	http://www.easyjet.com/	No	21
Ebay (UK) Limited	http://www.ebay.co.uk/	No	4
Everything Everywhere Limited	http://everythingeverywhere.com/	No	1
Facebook UK Ltd	http://www.facebook.com/	No	5
Giving.com Limited	http://giving.com/	No	5
Google UK Limited	http://www.google.co.uk/	No	6
Group Regulatory Relations	?	?	?
Hallmark Cards PLC	http://www.hallmark.co.uk/	No	6
Haymarket Media Group Ltd	http://www.haymarket.com/	No	2
HSBC Bank PLC	http://www.hsbc.co.uk/	Yes	3
IPC Media Ltd (NME)	http://www.ipcmedia.com/	No	2
Jamie Oliver Enterprises Limited	http://www.jamieoliver.com/	No	6
Jet2.com Limited	http://www.jet2.com/	No	14
John Lewis PC	http://www.johnlewis.com/	No	3
Lloyds TSB Bank PLC	http://www.lloydstsb.com/	No	2
Merthyr Tydfil County Borough Council	http://www.merthyr.gov.uk/	Yes	1
Met Office	http://www.metoffice.gov.uk/	No	1
Microcourt Limited	http://www.jacquielawson.com/	No	10
Microsoft Limited	http://www.microsoft.com/en-gb/default.aspx	No	1
Mind Candy Limited	http://mindcandy.com/	No	4
Moneysupermarket.com	http://www.moneysupermarket.com/	Yes	4
MyMaths Limited	http://www.mymaths.co.uk/	No	1
National Assembly for Wales	http://www.assemblywales.org/	No	1
National Lottery	http://www.national-lottery.co.uk/	No	9
National Westminster Bank PLC	http://www.natwest.com/	Yes	6
Network Rail Limited	http://www.networkrail.co.uk/	Yes	1
Next Group PLC	http://www.nextplc.co.uk/	No	2
NHS	http://www.nhs.uk/	No	3
NHS Choices	http://www.nhs.uk/	No	3
Northern Ireland Assembly	http://www.niassembly.gov.uk/	No	4
Public Service Ombudsman Wales	http://www.ombudsman-wales.org.uk/	No	2
Qype Limited	http://www.qype.co.uk/	No	19
Rightmove Group Limited	http://www.rightmove.co.uk/	No	2
Royal Society For The Protection of Birds	http://www.rspb.org.uk/	No	14
Sainsburys Supermarket Limited	http://www.sainsburys.co.uk/	No	10
Scottish Government	http://home.scotland.gov.uk/	Yes	2
Scottish Parliament	http://www.scottish.parliament.uk/	No	1
Scottish Public Services Ombudsman	http://www.spso.org.uk/	No	1
Tesco Stores Limited	http://www.tesco.com/	No	6
tfl.gov.uk	http://www.tfl.gov.uk/	No	3
The Cabinet Office	http://www.cabinetoffice.gov.uk/	No	1
The National Trust	http://www.nationaltrust.org.uk/	No	10
The Office Of The Ombudsman For NI	http://www.ni-ombudsman.org.uk/	No	4
Trader Publishing Ltd	http://www.autotrader.co.uk/	No	25
TSL Education Limited	http://www.tsleducation.com/	No	2
Turner Broadcasting System Europe Ltd	http://www.turner.com/	No	1
Virgin Media Limited	http://www.virginmedia.com/	No	18
Weightwatchers	http://www.weightwatchers.co.uk/	No	8
Welsh Government	http://wales.gov.uk/	No	1
William Hill (Bookmakers) Ltd	http://www.williamhill.com/	No	2
Yahoo UK Limited	http://uk.yahoo.com/	No	5

Of the 75 organisations listed by the ICO 13 had implemented a cookie consent function, 60 had done nothing (and may not need to) and 2 I could not fathom who the ICO had written to so could not find a website to test.

This is despite good advice and tips on Cookie Consent law implementation. being readily available around the web. One UK agency, Silktide, have even created a Cookie Consent kit. that takes 5 minutes to update a site to make it compliant. For the bigger companies though this kind of change is a challenge and the court costs and fines may well be less than the cost of implementation.

If you want to read more about the Cookie Consent law I suggest you start your journey at the ICO..

To do this test I used the Ghostery Chrome plug-in to show the cookies but in some cases it did not detect any so on further investigation with the Web Developer plug in I was able to see the cookies set by the website. It’s not perfect but its a good indication of the state of compliance with this law.

Note that simoncox.com is not on the ICO list and therefore I have not been directly consulted by the ICO and since none of the EU websites have bothered to comply (seriously!) I will wait to see what the best practice is — or for a change in the law.

Uploading images outside of Perch CMS default resource directory

Simon Cox — Fri, 11 May 2012 01:00:00 GMT

I have been building a site using the fabulous Perch CMS but discovered that the default upload path for images is inside the perch directory which caused my a bit of concern. Most Perch based sites I have looked at have been happy to use this but to be extra safe I like to change the name of the Perch directory which is easy to do in the config.php file.

define(‘PERCH_LOGINPATH’, ‘/admin’);

However any uploaded files go into the resources directory which is actually inside the Perch directory - thus revealing what you have renamed it. That wasn’t really how I wanted it so I contacted the Perch chaps - very helpful - to see if I could set a path for the uploads outside of the Perch directory.

What they suggested was changing two of the line in the Perch config.php file to include the full path to the directory file and the directory from the root of the site:

define(‘PERCH_RESFILEPATH’, PERCH_PATH . DIRECTORY_SEPARATOR . ‘/Volumes/Drobo/www.mysite,com/
development/20120508/assets/img/content’);

define(‘PERCH_RESPATH’, PERCH_LOGINPATH . ‘/assets/img/content’);

I set this all up as instructed but was getting errors in the control panel - Perch was appending the perch directory - /admin in my example above - on the beginning of the URL for the upload directory giving a path of /admin/assets/img/content- not what was wanted at all!

So I raised the issue with the Perch team again and they gave me some (apparently) undocumented advice to change the two file path lines in config.php to:

define(‘PERCH_RESFILEPATH’, ‘/Volumes/Drobo/www.mysite,com/
development/20120508/assets/img/content’);

define(‘PERCH_RESPATH’, ‘/assets/img/content’);

and that worked a treat!

ExpressionEngine custom log-in page

Simon Cox — Wed, 12 Oct 2011 01:00:00 GMT

Just read a great article at 40horse.com on creating a custom ExpressionEngine2 Login Screen so decided to have a quick update to my own login screen. It is slightly frivolous as only I will ever see it hopefully but every little bit helps.

I edited the login.css found inside the main themes folder /default/css themes/

body {
background-color: #ffffff;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align: center;
font-size: 12px;
color: #ecf1f3;
margin: 0;
padding: 0;
}

Changed the main image:

#content {
text-align: left;
padding: 260px 20px 5px 20px;
margin: 20px auto 0 auto;
width: 440px;
background: url('/images/illustration.png') no-repeat center top;
}

Changed the submit button colour:

input.submit {
background: #91cb0a;
padding: 7px 16px 9px 16px;
color: #fff;
font-weight: bold;
border: 0;
width: auto;
}

And added some shape to the form element.

form {
background:#333333;
padding: 10px;
border-radius: 20px;
border-top: 1px solid #999999;
moz-border-radius: 20px;
webkit-border-radius: 32px;
}

Simple, quick and easy way to add a bit of pizazz to a site. I have known about editing the login screen for a long time but was one of those things I had never tried so thanks to Josh Hopkins for the prompt!

Update October 2025

I did switch away from ExpressionEngine for this site – though io still use it for others and highly recommend it. I have a tendency to try out different systems on my own site and have used four different ones to date since ExpressionEngine.

EEUK11 report from the 2011 ExpressionEngine conference in Manchester

Simon Cox — Sat, 27 Aug 2011 01:00:00 GMT

The first UK ExpressionEngine conference

I first considered going to the EEUK11 conference when it came up in a discussion at one of our LondonEErs meetup sessions. I had seen a few tweets about the possibility of a UK conference following the superb EECI event in Leiden in 2010 run by Robert Eerhart but I honestly didn’t think it would amount to much. I am very pleased to have been proved wrong on that first assumption as the EEUK event was fabulous. I bought my ticket, booked a hotel and after checking the prices for travel realised that a first-class advanced booking seat on Virgin trains was only a few pounds more so went for that as well. As it was I got to use the Virgin Lounge at Euston and Manchester Picadilly including their WiFi and power. On the train, I also had free WiFi, power at my seat, a sandwich, biscuits, plenty of tea and a refreshing beer. That all set me up in the right frame of mind when I arrived at Manchester where by chance I met @MarmaladeToday who was staying at the same hotel so we wandered into the centre of Manchester.

On the train on the way to EEUK11 by - Thu, August 25, 2011: Updating the EEUK11 'Tweets From' page using my ipad and bluetooth keyboard

I have never been to Manchester before and the Victorian industrial visage they opened up before me was a delight. Street names such as Whitworth (key mover in industrial revolution standards — and hence a forefather of modern web standards — kind of) resonated with me. I felt comfortable despite the recent riots (though I was travelling up from Croydon). The hotel was good — nearby to the venue and in the middle of Manchester. As we walked into reception there was Robert Eerhart relaxed on a couch tweeting away waiting for the others in the hotel.

@RobertEerhart by - Thu, August 25, 2011: Twittering before EEUK11

After checking in we popped out for a swift beverage in the Waterhouse (Wetherspoons.) up the road where we were joined by the delightful ‘nut bag’ known as Mrsflinger, and John Henry. then we set off for the night’s venue — Dukes 69. This appeared to be a set of old warehouses surrounded by canals. It was a lovely venue but was packed with Manchester nightlife — I'm not sure I agree with 6-month-old babies being in a noisy wine bar even if their mums do want a night out. Despite that we had a good time — pizza was consumed along with White Witch beer. The speakers decided they would go back to the hotel at about half nine as they had all had ideas to further enhance slides — mainly jokes at the expense of each other, so I tagged along as I fancied an early night. We met several groups of EE’rs on their way down to the bar and pointed them to where the remaining contingent were located.

After a good night’s sleep and hearty breakfast, I arrived at the venue which is absolutely awesome. Manchester Town hall is a gothic masterpiece and well worth a visit if you ever pass by Albert square. Badges were collected, goodie bags picked up — with a We are Hippo sponsored T-shirt, pen and Pixel and Tonic coaster in an EEUK11 bag. Tea and coffee were waiting in the anti-room with many old and new friends to chat to. It is always great meeting up with people you follow on Twitter — though I am always a little awkward at first! Then we moved into the main room for the conference. I regret not having taken my camera as the conference room had a gothic fireplace with minstrels gallery above it. Ian kicked off the show with a big thanks to the sponsors and I will repeat them here as they all deserve some link love:

Pixel and Tonic.
Solspace.
Made by Hippo
Brand New Box.
Better Workflow. (Electric Putty)
and of course, DesignKarma. who put the show on.
Here are my fuddled notes of the conference:

So first up and opening the conference:

Joel Bradbury: 101 ways to skin a cat

There is a tendency to learn ExpressionEngine by diving — usually in due to time scales /deadlines / enthusiasm / ADS or not wanting to read the manual.

Anecdotes of really badly built site using PHP to do base EE functions — done by someone with good PHP skills but had not read the EE manual.

Suggestion by Joel is that we need conventions to build sites which we do for HTML and content but perhaps neglect the build part.

Joel mentioned the dry style templates garnered from the John Wells blog post on template “partials”.

Variables

put some structure into variable names
news_body
blog_body
page_body

Strict style

{cf_news_body_en}
type marker, channel marker, field name, language marker
only real flexibility is the field name

strict prefix examples

cf_custom variable
sn_snippet
gv_global variable etc

All in all an excellent talk and got everyone thinking about how they name elements in their builds

Leslie Flinger: Freelancing as an EE Developer: Tools of Success

175 pro members
598 directoree listings
1,000 sites at showee
20,000 members at the ee forums

The EE community is really good at helping each other

How people are making EE work in their business
Most EE agencies < 5 people <20 sites per year

1 top business software — freshbooks

Mac Freelance — Flinger preferred

2 Budget and scope

phone, face, Skype and always email follow up, always.
Contract and scope sent
Final approval

3 begin work

Ways to cost
per template
per hour — estimate and Flinger preferred — time tracker shows you how long you take
per task

4 typical hours estimated

CSS and 5 template html build = 15 hours
EE back end set up (channels fields etc) 20 hours
template integration 8 hours
content — 10 hours
Browser testing — 3 hours
John Henry adds a shopping list to the quote for extras — new channel, new firm etc.

5 contracts

depends on a detailed proposal to act as the legal agreement.
always ensures written approval via email before beginning work.

6 tools for production

7 when is it done
Snag lists

use the scope provided
Offer a stage /phase 2
Shopping list
written confirmation that you are complete
provide a number of revisions on the agreement
offer a maintenance package/retainer

Final advice

find a niche
don’t start a project without a deposit — freelancers — not agencies because of short term relationship (normally)
communicate with clients often
Invoice often
learn to say no

Great talk as ever by MrsFlinger — she knows her stuff.

John Henry talked about an unusual aspect of ExpressionEngine builds that I don’t think many of us have had experience with — or have needed to understand so his talk about multifaceted ways of navigating content was very interesting.

Users searching for an item — all facets of that item are a potential entry to the item.

Not aparametric search (users specify search terms)
amazon is a good example of faceted.
categories, author, published dates etc.
well-formed-data.net/experiments/.

use when you have good meta data, when content naturally forms facets, when users understand facets, when you have large amounts of content.

duplicate content is a big issue — crawl depth is important and shows only single URL for each item piece of content.

Cruft free URLS

template-group/template/URL=title
/template-group/URL/title is preferred -

mentioned switch — new article on EE insider last night.

Solspace Super Search. a very complex way of doing search.

Complex talk by John Henry and I don’t think I understood some of it completely!

Then we had a superb buffet lunch in the anti-room all laid on in the ticket price and a good chat about what the talks that morning. Electric Putty gave a demo showing their yet to be released ExpressionEngine add-on — Better Workflow. I have already seen a couple of early demos of this at LondonEErs and this is the extension that I think will potentially take EE into the corporate realm. Authorization and workflows are a big must have for any CMS that wants to be used by corporate’s or even SME’s where they need structured approval loops in their work procedures. Ian then produced a toy bingo machine to call out some numbers for prize winners — each of the 82 delegates had a chance of winning one of the 67 prizes (think I may have been one of the unlucky few!).

EEUK11 Bingo! by - Fri, August 26, 2011: Ian draws some prize winners for Better Workflow

More Bingo! by - Fri, August 26, 2011: And more prize winners drawn using the latest up to date bingo machine

Then back to our seats for the afternoon’s talks:

Stephen Lewis: Commercial Add – on Development for Clients

Profitable Add on development

do an environmental check list
Apache or IIS
PHP versions
Mysql version
EE version etc
3rd party add ons

Add ons requirement check list

MSM
external events
admin reqs
resorting reqs
data export

Client competency list

Does the client know EE from a hole in the ground?

Write the documentation first — rather than a tech-driven spec.

describe how to use the add-on
exposes missing requirements
Done when it works as documented.

Build an Add-on builder

pkg.io: ok but very generic and needs tweaking
custom templates and scripts: difficult to manage
Custom Add-on builder: Custom fit hits the ground running but more upfront effort.

Addonis add-on builder (his programme)

Sets up all the base files you need for an EE plug in — can be loaded up into EE as an extension and all set up ready to go — then you just need to build the plugin inside it!

@monooso by - Fri, August 26, 2011: Stephen Lewis giving his sophisticated talk about making more money in less time.

I don’t build commercial addons but I might need some building for me in the future so this was interesting stuff as its obviously really easy and quick to build add-ons so they should be dirt cheap.

Lodwijk Schutte: Parse Order Pro

expression engines parse order PDF — quite famous apparently.

Parse Order
Takes document and basically find and replaces markers and values (variables, tags, data)

Early v late parsing

Input before tags
output after tags

Variables

Global — parsed early (Snippets, config variables and segment variables)
-Parsed late (user-defined global, standard global variables))

Regional variables

Parsed easily

Local Variables

Passed during tags
more complex
variable parameters

Conditionals

types
simple (only work with early pass variables, one per and, without if:else
advanced (anything not in simple — parsed after the tags) Most conditionals are advanced.
special (parsed during and by the tags)

Tag types

module or plugin
single or pair
example — he has recently rediscovered preloads.
{preload_replace:pre_title=“By Category”}

Low is one of the mad EE Dutchmen, lives on a barge and drinks pear cider (it wasn’t Perry) that smells of cough drops. He really knows his stuff about the parse order of EE templates. It’s something I have only ever had issues with once on an EE site and I think I avoid these issues by designing the content in ways that I know will work in the first place — most devs don’t get that option.

Carl Crawley: Structuring your EEcms build — Creating your optimal build

Carl showed us a slowed down video of a shell script that updated an EE site in less than a minute. I think a lot of people want that!

build this — zip it up and keep it safe
elements:

Images
CSS
JS
HTML
templates
uploads
otter elements (snippets etc)

All go into his assets folder
They move the dbase and config out of the core system to version control it and edit.
Create new config files that have 1 line of PHP pointing to the config file in Assets.

remove unwanted add-ons — everything non-essential.
set security and press — user tracking etc
define your default Snippets and Vars
set your upload folders

docs, files, images, videos.

Version control — they only version control the assets folder — hence the config is on there. System files don’t need it.

Absolutely no add ons on a standard build! dealt with on a per build basis.

.net article Optimise your EE site
Joel’s tool/plug in — Graphite — the graphy thing for seeing what takes time in page rendering.

upgrading EE and SHELL.
A shell script.

on upgrading Carl uploads new directories with _version number after it — so themes_222 then runs the script and the folders get renamed leaving back up folders of the old ones.
A script will be available on Git.

need to execute shell scripts — engine hosting doesn’t do this.

This was Carl’s first ever Conference speech and he was rather nervous beforehand but came good on the day. Carl, I applaud your efforts! Not sure I truly have the bottle to do it myself due to the nativity incident when I was 10…

Garrett Winder; Going Mobile

Huge surges currently in Mobile web usage PayPal changed their predictions twice this year

Problem is that users are increasingly using mobile devices to visit websites.
need to rethink the way we build websites

dedicated or responsive design?

dedicated; pros — user given option to browse either. more control of resources. not same front end. cons — 2 (or more) websites — more time to manage, duplicate content.

I didn’t really take enough notes on this. Garret is from Texas and recently joined Erskine Design — this was a good talk about EE and responsive design which is big on everybody’s agendas at the moment. I have recently read that the majority of mobile internet access is actually at home so making your site only show certain content based upon location (i.e. if you were a restaurant your mobile site might only show the menu) might not be a very good idea! I had a long and good chat with Garret about this at the after party.

Strangely there was not one Englishman speaking. Two Americans, Three Welsh and a Dutchman — that’s how we roll in EE.

After

Then we went off To Sam’s Chop House for the evening’s party — more EE talk. One thing that ExpressionEngine has that is so special is its community. Those words have been bandied about a lot over the past few years but it is true. Years ago I watched the Movable type community dissolve into thin air after the $20m funding and direction change and that’s what brought me into the warm grasp of ExpressionEngine. It is events like these that really cement the community together and although originally we did have official representation from Ellis Labs in the shape of Mrs Flinger, and no disrespect to John Henry, but it would have been good to see the CEO there as Europe is an important Market. I suspect they are concentrating on EECI11 in New York, but all the same, we had the same complaint last year in Leiden. However, the evening in Manchester was great fun. Friendships were made and cemented, one or two deals were done, beers were consumed and everybody had fun. Some may be a little too much. I bailed out early (for me) at about 01:30 but there were tweets going on till about 03:00. Splendid!

Hopefully, this event will happen again. Ian did this basically by himself, with some help from his lovely wife Ali, and I suspect he will need a bit more support next time and I am sure there are plenty willing to help if he asks. Next year should see EECI back in Leiden and perhaps a UK event every other year would not be too onerous. I hope to be at the next one and if you use ExpressionEngine I hope to see you there as well.

And there is more...

Ian Ebden of Design Karma. has published his report on the event — always good to read about these from the organiser’s view!

The Flickr stream for the event:. https://www.flickr.com/groups/eeuk11/.

Assets for ExpressionEngine

Simon Cox — Sun, 03 Jul 2011 01:00:00 GMT

Installing Pixel & Tonics new Assets add-on

This week Pixel & Tonic have released Assets., a new file management add-on for ExpressionEngine. This is an area of content management that has been lacking in the past but has been improving with EE2 — but Assets takes file management to a new level.

The extension installs as most do — files going into the third party folders in the system folder and the themes folder and then a quick click on the install link in the Add-ons control panel and it’s installed.

In the left panel of the add-on interface, you can see the folder structure — right-clicking on a folder allows you to add subfolders with a popup that allows you to name the subfolder. Assets can be dragged between folders and importantly, if your code is using the Assets tags and parameters rather than direct urls, then the paths will change automatically in your templates allowing you to reorganise your assets quickly and easily!

Assets add on showing pop up panel with image details including date, alt text and caption

I thought I would add an image gallery to the article pages on this website. First I added an Asset entry field into my articles fieldset and named it ‘pagegallery’. Next, I added the HTML (in Coda and using Mountee because I love the combination!). The code sits within the ‘exp:channel:entries’ tags and I set up a description list as I wanted to add captions to each image.

This is the code

{if pagegallery} <h3>Gallery</h3> <dl class="pagegallery"> {pagegallery} <dt><img src="{url}" width="100%" height="100%" alt="{alt_text}" /></dt> <dd>{title} by {author} - {date format="%D, %F %d, %Y"}: {location} {caption}<dd> {/pagegallery} </dl> {/if}

The ‘if’ statement means that the code is used only if the pagegallery has some content. The {pagegallery} tag is the one named in the field set and will loop until all entries are completed. The Assets variables are used to provide the caption content and are pulled out of the image meta data.

I could have made this more complex with a thumbnail gallery or carousel to show the images, but for now, I am content with this and examples can be seen below and on the Vintage Tractors article..

Assets add on showing 4 pictures of tractors in the assets panel

Assets will, I predict, quickly make it into the default set up add-on lists that ExpressionEngine developers use — it’s awesome!

And there is more...

4th July 2017
Small update to the look and feel of the gallery piece — added dark background to pop out the images. Meant to do that yesterday but time defeated me!

January 2018
Some time back Pixel and Tonic decided to focus solely on Craft CMS and so EE Harbour has taken on Assets for Expression Engine..

Responsive web design

Simon Cox — Tue, 31 May 2011 01:00:00 GMT

This site now uses responsive web design - go on, resize you browser!

Until you look at a website on several different platforms you may have no idea that it is using responsive webdesign. However you will know pretty quickly if it doesn’t — if your on a small screen and you have to zoom or scroll horizontally then it’s not responsive.

The creation of the 960 grid was a great leap forward for mass web design, allowing designers to utilise traditional grid structures for easy page layout, but with the emergence of smart phones and tablets website needs changed quickly and 960.gs. wasn’t flexible enough — although a flexible version has since emerged. Standardisation is what lifts a cottage piece work into industrial strength production and we are going through the early stages of the digital revolution in much the same way that the Georgians and Victorians went through in the Industrial Revolution. There is still a place for the individually crafted website but our industry is moving toward mass production — that’s not a bad thing. Have a look at the sites now using 960.gs — and you will see its not the leading edge web designers but the big multi nationals. Standardisation rules!

The idea that your website should look the same on all browsers was been shot down a long time ago and the same has existed a long time for platforms but previously most sites that have catered for mobile have used platform detect methods to deliver different CSS layouts. That’s not ideal especially as today we are seeing an emergence of a huge range of screen sizes because of all the iPad killer tablets coming out. Despite desktop screen getting huge these days we actually now have to cater for a bigger range of window sizes then ever before and we also need to double that number because most mobile devices now orientate the screen to the way the user is holding it. Therefore we really do need a standard design grid and ways of working that are truly flexible.

For the simoncox.com version 6.4 website I have used the Skeleton grid. for my responsive design — though truth be told there is a lot to do design wise of this skeletal look and feel! Hat tip to MrQwest. for finding Skeleton. It may not be what I am using in 12 months time but it has the level of complexity that I needed to make the transition.

On resizing your browser (I am supposing you are on a desktop/laptop) you will notice that the site goes through several sizing transitions. It snaps to predefined minimum and maximum column sizes retaining a semblance of the proportional grid layout. Order of content in the html is vital as when you get to the smallest size, to accommodate mobiles, the order really shows — there is one column with content blocks vertically following each other.

Twisting the orientation around on the iPad you might not even notice that the grid has changed due to the way that Skeleton changes the layout according to the available viewport/window size. This is all relatively straight forward but one item that is going to royally burger up your responsive layout is images. Normally images are a set height and width as they are rasterised images based on pixels. Enlarge them too much and the pixels show — not nice — shrink them too much and you are wasting bandwidth — you could make the image much smaller than what you need it for. This poses a bit of a problem. I turned to Ethan Marcotte’s Fluid Images article. (hat tip to the Mr Rutter.) for the answer and all seems well.

As ever the design you see today probably isn’t quite the one that was live when I wrote this piece which is why I have started numbering them. Version 6.4 is a rough guess at the many versions of this site since 1996. I constantly tweak the design, layout and back end when I really should be writing articles worth reading!

Responsive Web Design iphone screen shot of simoncox.com

Updates…

8th June 2011 and Eathan Marcotte’s Responsive Web Design. has been published by A Book Apart.. Whilst most of what he has written is not new to me I think I will be using this book as a reference point for a few years to come — it’s superb, very well written and marks a sea change point in approaches to designing and building websites. There is a great article, part of the book, on A List Apart — Fluid Images. and I encourage anyone thinking of building a new website to read this and then the book (which incidentally I have been reading on my iPhone, iPad and iMac as an eBook).

9th June 2011 I have finished reading Responsive Web Design and the big take away is design for the small screen first and then add on additional content and layout as the screen sizes go up. Very interesting read and a wholly new approach to web site design. OK reasonably new approach as some folk have been expounding on mobile first for quite some time but I suspect that most of us think of mobile versions of websites, this method uses the same site and content for all devices though it is complex and I would like to see some emerging best practices that don’t rely on putting html code in JavaScript to display to those with JavaScript — it works really well in the fact that it degrades well for those without JavaScript but is clunky way to implement. I am thinking on how to deliver more content based on media type with ExpressionEngine as it would be better to keep the alternative html in separate template files pulled into the JavaScript. Anyone with any ideas on this comment or tweet me please!

20th June 2011 I changed the intro text as Simon Collison’s website is in fact an Adaptive design, not a Responsive design — though it’s a subtle but important difference

Preventing deep linking

Simon Cox — Tue, 09 Nov 2010 24:00:00 GMT

There really is no reason to prevent links into your website other than to appease Compliance and Legal teams who are covering all options. Some sites have gone down due to high traffic loads when they have been listed on Boing Boing or Slashdot (not mine - not yet anyway) and that could be the reason why IT teams have got into flusters and the legal teams have tried to apply impossible T&Cs. I’m not talking content theft linking here - linking to images on your site or scraping content.

W3C recommendations for deep linking

According to the W3C Technical Architecture Group,

“any attempt to forbid the practice of deep linking is based on a misunderstanding of the technology, and threatens to undermine the functioning of the Web as a whole”.

That’s pretty serious - but no compliance/legal team is going to listen to that when their job is potentially on the line.

Couple of good resources that got me writing this short: The insane world of “No linking Policy” – what happened to the interNET? and from Sir Tim Links and Law: Myths

WebFonts

Simon Cox — Wed, 28 Jul 2010 01:00:00 GMT

Whats going on at the moment

Typography has long fascinated me — I’m not a great practitioner but am a lover of the art and to me typography is one of the foundations of great visual communicative design. So my move away from print in the mid to late 1990’s to the evolving web, whilst very exciting did make me reluctantly lower my expectations on quality of design for the web. We have always been restricted to just a few commonly available platform fonts which are all fairly pedestrian. Now however with html 5 finally gathering speed and, possibly most importantly, IE9 about to be delivered (I know — but it could tip things couldn’t it — IE still has the big pie slice),

I made my own font

So I recently got an iPad — which is great — and this week I spotted a font creation programme. I had a copy of Fontographer back in the mid 90’s and created a few partial fonts for my own use so I had a good idea what this was going to involve. I purchased iFontMaker from the App store for the reasonable amount of around £4 and within seconds was able to begin to create my own font. iFontMaker allows you to set up a ghost font as the example t trace over and within 30 mins I had produced a simple Comic Sans type font including upper and lower case, numerical and several other glyphs. I then uploaded the ttf file from the ipad to the 2ttf.com website where I was able to download it and install on my Mac!

Adding the font to my website

Next I uploaded the ttf file to FontSquirrel and created a whole font kit which I downloaded and installed into my website, creating live typeface of my own creation in about 40 minutes.

Useful (to me at least) Webfont links of some sites in this space at the moment.

Fantastic — but perhaps not quite as easy to set up as the Google API offering or for that matter more commercial options like Typekit.

Other font resources

I have include some links to further reading about Webfonts.

And there is more…

Incidentally the W3C has published its first working Draft for WOFF setting a stake in the ground for us — WOFF File Format 1.0.

17th August 2010
Last night I attended the August London Web Standards meeting where Richard Rutter, (@clagnut) from Clearleft , gave an inspirational talk about the future of web typography — and its very exciting to typo nerd like me — ok I appreciate gorgeous type more than I can practice it (does that make me a typographical pundit?). There are loads of CSS3 controls being ratified that allow a massive amount of control over typography.

The font size adjust property looked incredibly useful but difficult to work out quickly (I have yet to try). But it was the font stretch property that was most exciting — though if this will ever be properly implemented we will see. this allows the designer to specify adjustments to a font to get its variations: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded — and these have to be available of course.

The one real question I have is do the current crop of web designers have the skill sets to use them? Possibly not. Certainly the younger ones with no print design background will have very limited understanding and instruction on typography — not their fault as the web has been sadly lacking in this area so they have not needed to learn. The older ones of us who cut our teeth on print design do have those skill sets — can’t keep on old dog down!

One very interesting comment last night was that in future designers could be designing for print using a web browser — create your design in html with CSS and then print to a pdf for sending off to the printers! Web based fonts may be a lot cheaper so we may see web based page layout tools making an appearance.

21st August 2010
Webtype has now opened up as the latest online service.

Nibbler

Simon Cox — Tue, 09 Feb 2010 24:00:00 GMT

Online testing tool that checks out how your website measures up

I have been evangelising web standards for quite a few years now and tools that help you test your work are very appreciated and make the tasks a lot easier. For pure code there is the W3C testing suite that tells you where your code is invalid and gives good hints on what to change — though I can imagine it could be frustrating for people relatively new to html. W3C also do CSS and feed validators. However by far my favourite testing tool is currently Nibbler from Silktide. Several years ago Silktide released a cut down on-line version of its commercial service called Sitescore but they were very quickly overwhelmed with people testing out sites and there real emphasis had to go back to the commercial tool and the free service was demised. Sitescore has now morphed into SiteRay and version 4 is on the way. Somehow they have managed to do a small side project of another cut down version of their testing suite — this time they have named it Nibbler.

Nibbler tests a website across a large range of automated tests. Automated means that they are not perfect but will take you most of the way there which is a very good start and more than most even think about.

You just put the URL into the test field and press the test button and a minute or two later you have the score.
As of the 9th of February 2010 this site, simoncox.com, is scoring 7.9 out of 10 — and that’s pretty good — veerle.duoh.com, alistapart.com and www.w3.org all have the same score so I am in good company. www.silktide.com is only 0.1 points ahead and they are the experts.

Nibbler runs the following tests:

Trustworthiness
Social media
Popularity
Incoming links
URL format
Images
Inoffensive content
Analytics
Alternative text
Titles
Headings
Links
Meta tags
Printability
Feeds
W3C compliance

and the report will give you some good clues on what’s wrong and how to fix. I will point out that this is currently in alpha but I have raised a couple of issues with them on Get Satisfaction and they have responded very quickly. For example yesterday on one site was doing very badly for feeds so I rebuilt the feed and added the meta tags so that it could be found. The report said that although it had found the feed it had not been updated for over a month — I had 10 new items in the feed for the last 8 days so something was wrong. Andy from Silktide spotted that I had used the Dublin Core date stamp which was perfectly valid but Nibbler was not detecting it so he fixed it same day — splendid.

I am sure a lot of people will get frustrated with the initial scores from Nibbler but with a bit of patience and understanding what’s going on you can really improve your website. Not everyone will agree with some of the tests Nibbler uses but if every site was tested against this or similar tools then the web would be a much better place.

Nibbler can be found at nibbler.insites.com.

Note: I have no affiliation with Silktide but in my day job I do use the full blown version of SiteRay to test the websites I work on. Nibbler I use for my personal websites.

And there is more...

19 August 2010
I have just tidied up some of the html on the site — now fully validates and the site is getting a Nibbler score of 9.2 — very pleased with that and I find the site at no. 54 on the Top 100 on the Nibbler top 100 chart. — sure it won’t stay there for long but its an achievement!

23 August 2010
I have made a few more minor adjustments to the site and its now up to a 9.4 rating putting the site 7th on the Nibbler top 100 at the moment!

New look for 2010

Simon Cox — Tue, 26 Jan 2010 24:00:00 GMT

New year heralds new design and some long overdue focus back on this website

I have now updated simoncox.com and have moved the site to EE which I have been using since 2006 for other sites but had kept using the MT content management system for this website. I had been waiting for ExpressionEngine (EE) version 2 to launch before making the foray — although EE1 would have been very suitable but I wanted to test out EE2 on something not mission critical! The new look and feel is a great design but not mine. I expect I will end up modifying a lot until I am happy — well this site has always been my test bed anyway! I am not sure what to replace the cup of tea with at the moment and am hoping for a bit of inspiration to burst forth.

Right now though all the old content is missing — just waiting for EE2’s import facility to be completed and then I can pull in the old site’s content and spend a lot of hours sorting through the rubbish and distilling it into some hopefully still readable content. Integration with my images that are sitting over on Flickr is also a priority and I will put together a gallery as I have quite a lot of images to show you.

Comments will be back at some point so I can expect the inevitable abuse from my chums and of course the model railway section will be getting a much-needed boost. This was one of the most visited parts of the old site and one of my main hobbies now.

Content stealing

Simon Cox — Wed, 14 Jun 2006 01:00:00 GMT

Is someone stealing your content? You probably don't know. I just read a piece over on Learning Movable Type that sparked this post off.

If you publish RSS feeds then I expect someone will have used those feeds to fill their auto generated site to build ad revenue. So how can you check? I use Copyscapes offering thought there may be others out there. You can input URLs from your site into their engine and it gives you a list of sites that have plagiarised your content. If you don't use RSS feeds then you probably will be alright - unless someone really has cut and pasted you words.

As I said if you do use RSS then you are bound to have found that the ad hustlers have generated something somewhere and its annoying - why? Because search engines penalise your site if you have duplicate content. I may well stop doing an RSS feed in the next version of this site - MT3.3 has just been released so I might have a look at the designs I have been bouncing around over this year. (lest see if someone plagiarises this post!)

Dashes vs Underscores

Simon Cox — Thu, 01 Jun 2006 01:00:00 GMT

Dashes vs Underscores is an ongoing debate about whether it is better to use a dash, or hyphen, in file name or to use an underscore instead. Over the past few years I have always used the underscore both at work and in home projects. This was for two reasons - the first being that underscores make the file name easier to read and secondly it means that I can use hyphenated words correctly in file names.

Example:

my_day_out_with_co-pilot_paula.jpg

my-day-out-with-co-pilot-paula.jpg

I think that the first is far more readable than the second from a grammatical sense it is correct. However there seems to be a great deal of talk in the SEO communities, and especially from Matt Cutts of Google, that hyphens, dashes are better than underscores in file names hence the Dashes vs Underscores debate.

Matts argument is that Google reads underscores as part of the word and that the dash is seen as a separator. This would mean that “co-pilot” is read and co and pilot by Google and co_pilot is read as a single word “co-pilot”. Hang on though this is back to front - the wrong way around! This would mean that all my hyphenated words in file names should have underscores to allow Google to correctly read them.

Hence the best file name for the jpeg file above should thefore be: my-day-out-with-co_pilot-paula.jpg which is just semantically silly.

The reasoning given found in a post on webmasterworld behind this is that it was to allow techies like us to search for HTTP_USER_AGENT and not have to sort through millions of results containing “HTTP”, “user”, and “agent.” But why would they not use quotes to get the correct term?

So I did some searching on this term in Google and these are my results:

Dashes vs Underscores searches on Google Search term – Number of results

HTTP_USER_AGENT – 1,440,000
HTTP-USER-AGENT – 3,240,000
"HTTP-USER-AGENT" – 3,220,000
HTTP USER AGENT – 138,000,000
"HTTP USER AGENT" – 3,220,000
co_pilot – 1,230
co-pilot – 7,740,000
"co-pilot" – 4,070,000
co pilot – 95,200,000
"co pilot" – 4,070,000

Interesting reading I think. With the first search term HTTP USER AGENT numbers 4 has the most results as it is just the three words but 3 and 5 are the same suggesting that Matt Cutts(and reiterated again recently) is correct in saying that hyphens are seen as spaces. 8 and 10 would also confirm that this is a fact but if the hyphen is the same as a space then 7 would be the same as 9. So adding the dash without the parenthesis does do something.

So am I going to change all my file names to use a dash? No. Like Shawn Hall I have had very favourable results using underscores and especially from Google. What Matt Cutts is saying might be technically correct but grammatically it is the wrong solution. Other search engines will resolve this correctly and perhaps Google will soon follow.

Javascript SymWinOpen function pain

Simon Cox — Fri, 23 Dec 2005 24:00:00 GMT

This one really bugged me. I was trying to validate some code I had uploaded to a staging area on a site and it would not validate back on my PC running CSE HTML Validate because something somewhere was inserting extra bits of javascript, SymWinOpen, and I could not work out what was happening. I was getting the same added script in Firefox, IE and CSE HTML Validator (and this extra code was stopping my pages from validating) until I opened the same page up in Safari on my Mac and it didn't have the extra code...

I eventually found that it was Norton Anti Virus 'adjusting' the pages for me as they came in on my PC. I probably should be grateful that its doing its job but you can turn it off:

This is the code:

function SymError()
{
return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

//

followed by:

var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
window.open = SymWinOpen;
if(SymRealOnUnload != null)
SymRealOnUnload();
}

function SymOnLoad()
{
if(SymRealOnLoad != null)
SymRealOnLoad();
window.open = SymRealWinOpen;
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//

Hopefully this will prevent hair loss as people try to figure out where this extra code is coming from!

Update!

Just discovered that the link I had to the Symantec page with information no longer resolves.

Peter Cochrane's Uncommon Sense - Web Realities

Simon Cox — Thu, 08 May 2003 01:00:00 GMT

Article on how internet usage is actually following traditional industrial revolution models of growth.

Originally published on silicon.com and Peter Cochrane's personal site - both no longer available so I have posted it here.

Peter Cochrane's Uncommon Sense: Web Realities

Who does what online, and why?

The commercial internet has only been visible since 1995 and mobile phones didn't appear until 1989. In just a decade the PC, internet and mobile phone have become accepted and dominant business tools and modes of communication. With the benefit of hindsight, and real data on the Internet and its contribution to society, all the past media debates, arguments and objections now seem quaint and a total waste of time. They also mirror previous debates re typewriters, telegrams, recorded music, radio and TV.

Recent studies show a surge in online sales and the abandonment of security fears regarding the use of credit cards, and a realisation that the internet is one of the safest forms of financial communication. It has also been discovered that the internet is dominated by educated and professional people with a higher than average disposable income and not a bunch of nerds in bedrooms and workshops. Men and women seem to spend almost the same amount of time on the internet, but women focus on academic pursuits and their jobs, while men look to entertainment, commerce, games, music, purchasing and banking.

Surprisingly the internet is not dominated by the young, the age distribution is actually bimodal with a suck-out of around about 35 to 40 years. Young and old seem to be on the web in roughly equal numbers and the middle group tend to be disadvantaged by work and the need to earn to support both!

The internet veterans predominately gain access for news, trading and stocks, and have a work focus; while the newcomers tend to focus on hobbies, music and entertainment. It appears that the majority of the non-internet population want to get online and feel that they are being left behind.

In complete contrast to the fears of many, those who use the internet actually read more books and newspapers, listen to more music and radio, make most phone calls. And children exposed to PCs from the age of three upwards appear to gain about 20 IQ points by the time they are 15. In short they become smarter and not dumber as the pundits predicted. Engaging in computer games seems to engender a higher level of strategic thinking and adaptability, perhaps even making children more compatible with a world that is fundamentally chaotic.

In the USA less than 40 per cent of all homes have a computer, in much of Europe it is even higher, and across most of the Western world 60 per cent of peoples have access to computers and the Internet at their workplace.

One big surprise emerges from the online population is that they are most likely to see pornography and security as non-issues, and less than three per cent of the online population express any concern. Parents on the other hand feel that they have to police their children's PC and TV time, and specifically, the subject matter. But the children don't agree and get to do and see what they want anyway by bypassing their parents and their wishes.

Over 80 per cent believe that they spend about the right amount of time online, and have not given up any of their non-screen activities such as sport, socialising and hobbies. They consider that their lives have become more productive because they have gained from the computer and even more from the abandonment of TV. And internet users are far more optimistic about the advantages of IT technology than non-users.

Those people not yet online record scores that are more or less an inversion of all of the above, and those that have declared no interest in the internet (around 16 per cent) say they would never buy a computer or go online at any price. Overall it seems that 84 per cent of those online have email accounts and over 40 per cent check their email more than once a day. Most have an 80 per cent satisfaction level with the internet, the speed of access remains the key dissatisfaction parameter and the lack of broadband connectivity a major problem.

There now seems to be a new (positive) breed of anecdote contributing to the internet growth. Looking back we can trace a similar progress with the steam engine, automobile, telephone, radio and TV. I can remember TV debates about the bad influence of television programmes depicting nudity, violence, pop music, and the use of unacceptable language. Today it all seems so tame and society doesn't seem to be any the worse for it. Perhaps what we are learning is that freedom actually works.

Out of all of this seems to come a single useful constant - 10 years. Over our recent technological progress during and since the industrial revolution, it always seems to take about 10 years for society to accept the new. Cheque books, credit cards, standing orders, direct debit, internet payments, computers in the home, mobile phones, digital cameras, VHS, CD, DVD et al all took about 10 years to be accepted and established. But at every transition point the luddite lobby has always mounted an energetic campaign to stop progress. Typewriters will see people unable to use a pen, television will turn everybody into zombies, computers will wreck education, pornography on VHS will corrupt the population etc. Of course there is a grain of truth in all of the objections, but the upside always proves to be far greater than the down.

The reality, and great success of the internet is that having transformed the way we do business it has become invisible in less than a decade. It is everywhere, accepted, the business and society norm, and proving highly beneficial. Only a few luddites remain to be convinced, but they are now in the minority and fast becoming insignificant. Perhaps the useless and pointless debates will rapidly go away too!

This column dictated to tape while travelling between Cambridge and Ipswich on the A14, typed by my PA on her Apple notebook, dispatched to me via broadband from her home, picked up by me on the Ipswich to London Intercity train via my GSM phone and G4 laptop, edited as soon as I had finished breakfast, and dispatched to silicon.com via the same path from the same train.

Update 2nd January 2026

I find this fascinating when re-reading - Ai is now going through these same thought processes. Again and again we go through the same stages with anything new and have done for time immemorial.

“The farther backward you can look, the farther forward you are likely to see.”
— Winston S. Churchill

Peter Cochrane's current personal site.

Microsoft plans toilets with Web access

Simon Cox — Wed, 07 May 2003 01:00:00 GMT

"Now on the way: "Surfing on the loo" with Internet access at portable toilets.

The iLoo being developed by the MSN division of Microsoft Corp. in Britain is a standard portable toilet -- a "loo" to the English -- with a wireless keyboard and extending, height-adjustable plasma screen in front of the seat.

There would also be a "Hotmail station" with waterproof keyboard and plasma screen on the outside for those waiting in line.

MSN officials say they're negotiating for the manufacture of toilet paper imprinted with Web addresses that users may not have tried. " Salon.com

They could try some Microsoft urls then! I love this story - especially as I have been known to surf whilst having a number 2 at home - thanks to our WiFi - very upsetting for friends when they are on Messenger and realise I'm in the small room!

from Salon.com Technology | Microsoft plans toilets with Web access - (no archived page)

wma189

Simon Cox — Tue, 06 May 2003 01:00:00 GMT

I had a great deal of people reaching this site having followed a search for wma189. The reason they landed here was that I have a page of e-mail addresses that have spammed me and this has been indexed by the search engines.

I can only assume from the amount of visitors that lots of people are getting fed up with getting unsolicited e-mail from wma189.com.

What amazed me was when you put wma189 into Google the only result is this site.

Fortunately there are laws surfacing to reduce the amount of spam on the internet, reports say that over 40% of all internet traffic is span e-mail. Virginian laws are about to get tougher and as they are the access point for AOL and other services this should cut down a lot of the spam. But where will it all go - my guess is mobile phones as I am starting to get unsolicited calls and sms text messages now - and that's even more of a pain…

Boogle

Simon Cox — Wed, 23 Apr 2003 01:00:00 GMT

Very disappointed today to open Google UK to find no St George's Day banner. Google excelled themselves last year with a special banner and we must not forget that St George is the patron Saint of many places - not just England - Barcelona, Russia, and others - let me know!

Google have a logo already so why have they not used it today - I suspect the St Patrick's day logo has been used every year since they started specialty logos. England apparently is not allowed to celebrate our Patron Saints. St George's day its seems to be regarded as xenophobic and racist - the same with flying the cross of St George's flag - England's flag. Why am I not allowed to have pride in my country? Why in London does the Mayor spend a fortune on St Patrick's day festival and not a jot for the 23rd April?

Update

On reflection in 2025 this post made me sound like a bit like a flag waver - I'm not, and I'm not going to let my national flag mean anything other then help and support for all people.

Web site undergoing more changes

Simon Cox — Sun, 20 Apr 2003 01:00:00 GMT

If you have followed a search link to this site you will have noticed a lack of consistency in the styles used. That is because I am moving the cms over to Moveable Type and have yet to do the housekeeping to convert all the old pages plus a few stand alone pages need building and the css needs properly structuring, organising and finishing off.

It feels like moving house - things need throwing out but I am not 100% sure yet which bits I actually need!

Movable Type moves to Simoncox.com!

Simon Cox — Wed, 16 Apr 2003 01:00:00 GMT

I have installed MoveableType personal Publishing System onto the site as the current Content Management System has gone into a development hiatus. I would rather go with a system built by professionals, nominated for a 2003 Webby Award and has some amazing features!

New look new server

Simon Cox — Tue, 09 Jul 2002 01:00:00 GMT

I have got my act together at last and started shifting content to a dedicated web space. Previously it has been kept in three different locations.

If the look is familiar then you are working on a certain lizardy project - thing is this version IS css and has a cms system behind it. Please dont ask how long it took and how much it's cost. You won't like it!

Upgrade to The Gallery

Simon Cox — Fri, 17 May 2002 01:00:00 GMT

I have upgraded the Gallery software and started to change its appearance to match the rest of the site. Enhancements include a slide show facility within each album so you can site back and enjoy the show!

Update

Sadly I had to remove the gallery in 2010 due to some technical issues at the time and have not rebuilt it. I do have some images that you can view in my Flickr account.

Accessibility links with css

Simon Cox — Tue, 14 May 2002 01:00:00 GMT

Lots of sites use short catchy 'action' terms to entice people into further sections of thier sites. The dreaded 'click here' is the all time classic but 'more', 'read more' and other variations also abound.

The alternative is to highlight the actual text that the link comes from - though it is not always clear that there is a link there or that you should follow a link for more info.

It is even worse for screen reader software when confronted by a list of links all saying 'click here' without any explanation of what's on the end of the link.

I have developed, following a suggestion from my work colleague Celia (who got miffed because I didn't mention her in the first draft of this piece! :P ), a simple technique that I hope will allow more usability and accessibility.

The following code visually highlights the word 'more' in the sentence but actually all of it is the link, which is apparent when you mouse over it. Screen readers, such as Jaws, pick the whole link up.

The style

a { color: #000000; text-decoration: none}
a:hover { color: #FF0000; text-decoration: underline}
.highlight { color: #FF0000; text-decoration: underline}

The html

<a href="#" title="Read more about accessibility">Read <span class="highlight">more</span> about accessibility</a>.

Mac Classic OS windows with css!

Simon Cox — Mon, 13 May 2002 01:00:00 GMT

A couple of Mac sites have complicated tables forming Mac like windows for showing stories. I wanted to try and do this in css alone and reduce the number of graphics as well.

The css is as follows:

#box1 {
border: 1px #000000 solid;
}

#box2 {
border: 1px solid;
border-color: #fffffe #999999 #999999 #fffffe;
}

#box3 {
border: 1px #cccccc solid;
background: url(box3_full_background.gif) no-repeat #cccccc;
color: #000000;
text-align: center;
}

#box5 {
border: 1px solid;
border-color: #999999 #fffffe #fffffe #999999;
}

#box6 {
border: 1px #000000 solid;
color: #000000;
background: #fffffe;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
font-weight: normal;
text-align: left;
}

Mac OS 6-9

Five boxes inside each other. Viola. I might have a go at OSX and windows next.

It's a start with CSS

Simon Cox — Sat, 11 May 2002 01:00:00 GMT

Over the past few years I have become more and more engrossed with Cascading Style Sheets and the benefits they offer to the web. This year I have stepped up that interest with an eventual aim of changing all the sites that I run over to css. My mantra now is that the only time I use tables in my code is when I need to display a table of content!

This does mean that the layouts are going to get simpler and while I am at it I intend to make the sites fully accessible and make them Bobby and 508 complient. No small task.

As part of this secion of the site I will be including little snippets of real life css code that I have used, strategy for css and cms driven sites and anything else that is relevant. Links to useful css and accessabilty sites will appear in the menu.

CSS rollovers - no javascript!

Simon Cox — Sat, 11 May 2002 01:00:00 GMT

I have seen a couple of examples of css roll over buttons on the web but they changed a simple square block of colour and I wanted something more stylish - more like what you do with graphical javascript rollovers. I decide the way to do it was to use an image as the background and change it in the style for a:hover and a:visited.

First of all I made 4 graphics. The first was a 15px square transparent gif and the other three were coloured buttons also 15px square.

I then coded a link and included the transparent_15.gif before the links text: This is a link to another page.

This is the link to the demo page

Notice I have added both a title tag for the link and an alt tag for the image to help with Accessibility.

Then I added the css:

a { background-image: url(orangeround_15.gif); background-repeat: no-repeat; background-position: 0px 3px; color: #000000; text-decoration: underline}  

a:hover { background-image: url(greenround_15.gif); background-repeat: 

no-repeat; background-position: 0px 3px; color: #000000} body { font-family: Arial, Helvetica, sans-serif; font-size: 12px}  

p { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px} a:visited { background-image: url(greenroundtick_15.gif);   

background-repeat: no-repeat; background-position: 0px 3px; color: #000000 }

The orange button appears as the link style background and the transparent gif ensures the text is moved to the right the correct amount. When you mouse over the link the a:hover style comes into play which changes the background to the green button. When you have visited the link and come back the a:visited style shows the green button with tick as a background. You could also add images for a:active if you wished. You could do this without the transparent gif by adding 15px left padding but we can use this technique for links in the middle of a paragraph of text.

New look site!

Simon Cox — Fri, 03 May 2002 01:00:00 GMT

The up side of being unwell is that I have spent this week delving into CSS. What a minefeild! I have used CSS for a longtime now but never for the page layout. The home page now uses my first public stab at it.

I still have to break the home page down into php elements so that the rest of the site can be rebuilt quickly. I may even run parts of the shared code within the CMS so that I can do remote code changes to the whole site quickly... Hmm.

And I have had a brilliant idea about style sheets and a local random varient to drive them - more later! (What?)

I just realised that there is a bug with IE5Mac. Poo. Have to work on that later - only me that looks at the site on a Mac anyway.

Microsoft - Hotmail pain...

Simon Cox — Fri, 03 May 2002 01:00:00 GMT

Just checked my hotmail account - which I only have so that I can use MSN Messenger because certain friends use it rather than ICQ.

MSN are now expiring unused hotmail accounts after 30 days. What a pain! They claim its to save disk space. Hmmm. More likley to ensure that the e-mail addresses they are selling to third parties are good ones - thereby bringing in more income. I have had loads of spam in my hotmail account and yet have never used the address anywhere...

MSN Hotmail account expiration policy

Please be sure to sign in to your MSN Hotmail account every 30 days. If you don't, your account will become inactive, and: You will lose all e-mails and attachments in your Inbox and other folders All of your incoming e-mail will be rejected You will lose all contacts in your Address Book

Unfortunately, this information cannot be recovered.* As a valued Hotmail member, we want to make sure you know that subscribing to MSN Extra Storage exempts you from this account expiration policy. It's the smartest way to prevent the loss of all the important information in your MSN Hotmail account.

The latest webcam images

Simon Cox — Sun, 09 Jul 2000 10:01:00 GMT

OK Big changes to this page in July 2007! We now have a timelapse webcam picture for you.

This is achieved by loading up the last 50 images onto the server and then showing you a flash slide show of them in reverse sequence. I have used the Monoslideshow flash system to create the slide show and I can highly recommend it as the xml is easy to put together and the possible customisation is extensive - so important on the web to day to make sure every site looks different!