My notebook is where I keep random notes, experiments and bits of research. Some of these become full posts in time, others stay here for prosperity.
Fixing “Page Title Not Defined” in Matomo analytics
For months I’ve had “Page Title Not Defined” popping up in my Matomo analytics. I was concerned about the impact is might be having as it seemed to be fairly consistent “1 per day” coming through. Did I have a bug in my site I needed to fix?
The short answer is no.
After a bit of hunting through server logs I found the culprit. I’ve been subjected to daily spamming through my contact form at a fairly regular rate. The spam’s pretty generic – usually someone trying to sell a freelance writer a bunch of essay writing services. It’s annoying but harmless.
Spammers use software which allows them to fire messages into contact forms and supposedly bypass any captcha or other protections in place. A (welcome) side-effect of this is it doesn’t trigger Matomo properly, hence the “Page Title Not Defined” error.
If you do find “Page Title Not Defined” popping up it is worth having a quick check of your site just to make sure you’re not missing a <title> tag in your heading, as this can also cause it. Otherwise double check your server logs for a correlation between contact or comment form spam and the appearance of the warning.
You can then safely discount these from your analysis, which Matomo has probably done already.
How I create charts for reports without using Excel
After I published my review of mobile product page designs, I had a couple of people ask how I put the charts together in the article. Their working assumption was I’d created them in Excel and they wanted to do the same.
Sorry to disappoint, but while the data was held in Excel and I did use charting to help with some analysis, the charts on the site were all hand-cranked.
I have a few templates for charting and infographics in Affinity Designer. One of these formed the base, although I adjusted it to have a portrait format rather than my usual landscape. It seemed more appropriate given the topic of mobile device design.
The template has its own grid, the base axis for the charts, base bars and text styles defined. Doing this up front makes creating repeating charts that are consistent across a piece a lot quicker and easier.
Working out all the bar lengths would have been a pain in the neck, had I not cracked it a couple of years ago. The bars are created with 1 pixel width representing 1 percentage point. A bar representing 90 percent of something is 90 pixels wide, 50 pixels for 50 percent and so on. At this stage they’re too short, so I resize all the bars together to a more appropriate length. The correct proportions are preserved, the chart is accurate and the design is balanced.
Using this approach it took about 10-15 minutes to get one chart done.
Tip for your own blog: build up a few templates for things like charts that you’ll use quite often. It saves a lot of time when you need to create them, and you’ll get consistency across your blog posts and reports.
You can read my report on mobile web page design here.
Exploration of tubes, shapes and colours
A simple experiment looking at lines, shapes and colours would work together.
I created a simple 3D tube and layered them in a rough curve. What I was interested in was how the ends of the tubes would interact with a background of the same colour.
It’s interesting how the curve seems to break when the top matches the colour of the background.
Experimenting with “hello”
I was looking for ways to use type to break a page up. I wanted to use ascenders and descenders to create grids on a page.
The one I settled on is above. It was pretty obvious in hindsight, although it popped out in the middle of my brainstorming. Maybe I was avoiding the obvious!
One alternative had the descender coming off the O. It didn’t work – it ended up making it look like a q.
Another variation on the o motif. With a little more work on the O it might work. Running a vertical away from the e almost worked.
A celebration of my Nokia 8110 “Banana Phone”
Over a year ago I decided I’d had enough of being tethered to an iPhone. I ditched it – recycled it to one of my daughters, and bought a Nokia 8110. It’s a design classic and a thing of beauty.
It has form and shape. There are curves and changing textures. It sits easily in the palm of my hand and it’s pretty good at making and receiving phone calls too.
The graphic is a homage to my favourite mobile phone.
Architectural drawing experiment
An experiment using Affinity Designer to create a perspective based drawing. Part of my ongoing efforts to improve my illustration skills with some simple, quick sketches.
Started with a basic set of perspective guides. These are created from a series of overlaid triangle shapes. The height and apex can be adjusted to create the correct perspective point. This is easier if you change the triangle to “curves” in designer and drag the apex node to where you need it.
The build sketched. This is simple, so I used a simple block building.
Note to self: do elements on the same perspective line at the same time. I made the mistake of drawing one of the windows on the right side at a different time to the left, which threw it out. Same mistake not made next time!
Detail filled in. I used one of my “city skyline” templates for the background. Not 100% convinced about the shading.
Job done. Took about an hour. Key lessons:
- converting a triangle to curves and moving the apex around is far easier than trying to adjust a triangle shape
- use multiple “triangles” to make drawing shapes easier
- do elements on the same perspective line at the same time (e.g. do all the windows on the same floor at once!)
Affinity Designer’s vector brush tool
Affinity Designer on iPad is a neat piece of software. It’s where much of my work starts life, although I might use the desktop version for finer finishing details like kerning and pixel placement.
This is an experiment with the Vector brush. I rotoscoped an image I took a year or so ago. The aim wasn’t to create photo-realism, rather to test the accuracy of the tool and a style I was playing with.
There was a second objective. In a year or so I’ll go through a tech refresh, which will probably mean replacing my iPad and MacBook Pro with a single, 2-in-1 laptop. I wanted to test whether Affinity Designer was a reasonable replacement for Adobe’s Procreate.
There’s a few problems with it, not least it sometimes decides where it wants to place nodes rather than where I want them. Being able to go back and edit the line is a bonus though.
Experiment to create a perception of shadow and light. Part of my ongoing quest to fight back against “flat” design in illustration.
Someone inside Huffpost thought this was “good design”
I can’t imagine the conversation that took place when someone said, “Yeah, let’s have the video fly out and start playing automagically”. It’s not like we haven’t distracted them enough with the crowded adverts, subscribe box and the fixed top menu.
Don’t be like Huffpost.
Choices – an experimental illustration
I’m still evolving my illustration skills. They’re a bit weak, but things are getting better.
Alternative to a Bar Chart
Bar charts can be a bit boring. I wanted to create something with a bit of movement in it. The angle each circle runs to is in correct proportion to its value, using the UK’s €24 as a baseline at 270 degrees.
The numbers are taken from a Europa.eu report. I’m not 100% convinced they’re right, but they are what they are. In any event, my aim wasn’t to represent specific numbers, rather test the design.
I think it stands out, and they’re not too difficult to create. Could be a useful addition to the toolkit.
Experiments divider for Instagram
My Instagram account was a mess. I chucked all sorts of rubbish on it: photos, illustrations and graphic design got equal billing. Mind you, I treated it more like a dumping ground than a serious social network because it is rubbish. It’s one of the reasons I deleted it (Facebook’s ownership was a bigger one)
When I shared my poster experiments I decided to segment them clearly in the timeline. So I created a mock bit of XML to carve them out. Everything works backwards, so I had to share the end of the experiment tag first, and the start last.