Tag: web design

A New Header For My Data Recovery Website

As usual, when I was writing some new content for my work website, I thought I’d also add a bit of colour with a new header. It gives me a break from writing, and also helps quickly show the relevance of a page. Some of my favourite headers are actually quite obscure, so I’ve been replacing them with something a bit clearer.

For example, I wrote a blog post about migrating data to a Mac from a backup, and made a header with migrating geese. It’s a bit obscure, but migrating geese are something local to us here in Portsmouth, and also they add some interest to an otherwise text-heavy site.

Mac Migration
Mac Migration

So when I updated the Portsmouth Data Recovery page, I wanted to make sure it also had a header that would do it justice, without being too obscure. I went for a night skyline, with a few local landmarks, and a prominent star & crescent design.

Portsmouth Data Recovery
Portsmouth Data Recovery

I’m really happy with the way it turned out, and it’s given me the motivation to make a few more for other pages.

The other notable thing about these header images is they are SVG (Scalable Vector Graphics) files. They look great on modern high-resolution screens like the 5K iMac, iPhones, iPads, and any other decent screen. They also work at any size without looking rough or blurry, so I don’t need to serve different images to mobile & desktop browsers.

I’ll leave you with another of my favourites…

Coffee Spill
Coffee Spill

The Problem is Not Ad-Block it’s Ads

I’ve seen a fair bit of discussion again recently against ad blockers. Even some new services to help advertisers avoid the blocks.

Scale: Intrusiveness of Ads
Scale: Intrusiveness of Ads

It may surprise tech nerds that people outside our field have no idea that ads help fund the free content we consume online. The vast majority of Facebook and YouTube users never stop to consider who pays the hosting fees for those heaps of family photos and cat videos. To these users, ads are just another unpredictable barrier to their stuff. This is especially true when ads are the pop-up, pop-under or pop-between-paragraph type of affair. They disrupt your session and demand your attention. I understand the need for ads to get seen but it’s a bad experience. It doesn’t take a huge leap from there to understand why ad-blockers are so appealing. They easily remove these annoyances at source. Pages load fast, text stops jumping up and down the page, the web works like it did in the good ole’ days. That advert for a new car you were researching stops following you around the web. It’s a massive win for users.

But here’s the thing. Small indie publishers are way down on the annoying ads scale. It’s predominantly large news sites, or blog networks that have the worst of these ads. Squeezing every last penny from their page-views, they poison the web for everyone.

Compare this ad on Marco.org:

Marco Ad

With the ads on engadget:

Engadget Ads

The discreet and relevant advertising on Marco’s site doesn’t alienate users & offends nobody. The Deck has taken this approach, and nobody would ever bother to block deck ads. Why would they? They are relevant to the sites they appear on, and don’t interrupt the experience for anyone. I assume they have a lower CTR than other ad-networks, but they respect the readers and don’t dance all over the page for attention. I expect the quality of leads from these ads is far better than AdSense for example.

Here’s the problem. Ad-block doesn’t just get rid of the awful flash ads that clutter news sites but also blocks unobtrusive ads like the deck. See the example below of the Marco & engadget pages below when using adblock. The engadget page is much improved showing the articles you came for right at the top! On the other hand, Marco’s site is hardly changed at all.

Engadget No Ads

Marco No Ad

Users will happily run ad-block and get their internets back, but the small sites lose out. They never hosted up video ads for cars or holidays, but they lose their small revenue stream thanks to the ham-fisted & heavy handed big networks. You can’t put the blame on users here. They have a tough enough time navigating the evils of the web. Blocking ads just reduces their hassle a little bit.

Update 22-6-2015

On Friday after I posted this article I later saw that John Gruber had basically said the same thing as me in one succinct paragraph. Smart guy.

Twenty Fourteen Single Post Page Secondary Menu Disappears

After ironing out some issues with my Twenty Fourteen Child Theme, I found another one. This one is not really a bug, as it is quite deliberate, but it was still a problem for my needs. When viewing a single post page, the secondary menu in the left sidebar is not visible. The menu is visible on other pages, and on the overall blog page. Again, I’m not sure why this was chosen behaviour, but there is a float left and negative margin that pushes the menu off the edge of the screen.

On line 3596 I changed the following:

#secondary {
 background-color: transparent;
 border: 0;
 clear: none;
 float: left;
 margin: 0 0 0 -100%;
 min-height: 100vh;
 width: 122px;
 }

To:

#secondary {
 background-color: transparent;
 border: 0;
 clear: none;
 position:absolute;
 min-height: 100vh;
 width: 122px;
 }

So far, this seems to have reinstated the menu, but I’ve yet to test this much yet. There is a chance it may cause trouble under certain conditions. I will see if it causes issues on a full-width page, and check the other media queries for knock-on issues.

Twentyfourteen Sidebar Bug

After updating to WordPress 3.8 I was keen to give the new Twenty Fourteen theme a try. I’ve been using a modified twenty eleven theme forever so thought a change would do me good! Within an hour I had changed the default green accent colour to match our company blue, made sure our contact-form plugins still worked, and got everything looking perfect on my testing site. My pointer hovered over the Publish button, but I decided to give it a quick check on the iPad. Just in case.

It looked great. The responsive layout was beautifully readable, and everything looked fresh and new. There was a slight, but game-stopping problem though.

The Content Sidebar Became Unclickable!

Some of the media queries that control the responsive layout had clashed and caused widgets within the content-sidebar to become unclickable at certain viewport sizes. In my case this was the contact form we have on every page, so losing the ability to fill the form is pretty bad news! I checked on the desktop version of Safari and found the same problem if I reduced the window to approximate iPad size. I couldn’t replicate the problem in Firefox at all.

For reference I was able to find the culprit. Two lines of CSS.

On line 3186 I changed width:100%; to width:66.66666666%;

On line 3192 I changed margin-right: 33.33333333%; to width:100%;

This fixed the unclickable problem, but caused a bit of overlap elsewhere with another media query so:

On line 3578 I changed:

margin-left: -29.04761904%;
width: 29.04761904%;

to:

margin-left: -25%;
width: 25%;

Remember that changing the live-version of the theme is a bad idea, as the changes can get overwritten by theme updates. I changed it in my child-theme instead.

I’m pretty sure this breaks a bunch of conventions that were used in the development of the theme (I hated changing the specific -29.04761904% to a generic -25%) , but it works for now, and that’s what matters. I couldn’t find the correct place to post theme-related bugs to WordPress, so have posted it here for posterity. I will probably have a look at fixing this more cleanly soon, as I suspect there is a quicker fix that I’m not seeing. Especially as this doesn’t seem a problem on Firefox. z-index maybe?

How To Get Ahead? Content Is Not King

Cat Zipped

I work in a niche industry, which has 312 million results in google. We are a small company, and don’t feature prominently amongst those 312 million pages. When researching some of our competition, I have noticed something strange in the results.

Forums & Review Sites

It seems that one tactic these sites are using to generate links is to simply create them for themselves. Some start up industry review sites, with their own sites featuring prominently (read exclusively) in the results, links and adverts. Others create and administer forums which moderate and edit the information, again making sure all roads lead to their own door.

Trading As…

Another strange thing is to have loads of different company names, each with their own websites. These websites are so different that potential customers are likely to be comparing the services of what are essentially loads of the same company. For example, three of the top ten results are the same company using different names, but you wouldn’t necessarily realise that.

Is It Wrong?

I don’t actually know. I’m not sure they are actually doing much wrong here. I certainly wouldn’t be comfortable with it myself, but I’m an honest sort of guy. What they are definitely not doing is creating good content. Whenever I write something on our website or blog, I make sure that it is first accurate, and second useful. If there is an opportunity to suggest one of our services, I will do so, but the content needs to stand up alone. I’m sure this means I’m missing out on some hard sell stuff here, but overall I think it keeps us trustworthy, and helps us stand out from the crowd of shouty fear mongers.

By not playing these games we often lurk around near the back of the search results, feeding from long-tail searches, where most people will never find us. Don’t worry, It’s not a problem, just an observation. I already mentioned that we are small so the long tail stuff is plenty. We already have a great service & reputation, so I don’t want to sacrifice it by chasing rankings.