Make your website multiplatform in less than a day

September 28, 2015December 24, 2015 ~ David Tebbutt ~ Leave a comment

Common sense (and Google) suggests our web pages should be accessible on all devices, from smartphones upwards. As the proprietor of a desktop-centric website, I decided to look for the quickest way to become ‘multi-platform’.

After many false starts – I won’t bore you with them – I found the quickest was to adapt a free template of a site that already worked. You need to feel comfortable about tweaking HTML (it’s only text editing) but you don’t have to be an expert by any means.

I also found it best to plan for mobile rather than start with a desktop system. This led me to a single-page main site with a menu bar that jumped (mainly) to internal parts of the same page. (Okay, I added my YouTube channel to the menu as well, but this really wasn’t difficult.)

The free one-page template I chose, called Urbanic, came from template.mo Download at http://www.templatemo.com/download/templatemo_395_urbanic

I could have just used a text editor to twiddle around with the code but I actually used Microsoft’s free Expression Web 4. Download at https://www.microsoft.com/en-us/download/details.aspx?id=36179 This lets you look at and tweak any of the files in your downloaded template folder.

Open the index.html file and (I would recommend) save it as something personal to you. I called mine newtebbo.com. This will save you heartache later on when you try it out on your live site. Instead of overwriting your existing root page – index.html – you can test it to death under its pseudonym. Only when you’re completely happy do you need to rename it to index.html. (I would strongly recommend that you first rename your existing index page to oldindex or similar. That way you can always revert if need be.)

Apart from three early lines at the top of the <head> section (title, keywords and description) your changes will all be in the <body> section of the web page. The source code is laid out neatly in divisions which start and end with <div> and </div>. These are followed and preceded by a note of the section you’re in. Just chop out any entire sections that aren’t relevant to your design.

Replace your chosen template’s text with your own. Add images you want to use to the images folder and edit the references. (You will need to add all the template’s folder contents to your existing folder contents. If a template folder doesn’t exist in your existing site, simply copy the template one across. I suggest doing it this way so it’s easy to revert to your old site if you need to.)

You’re probably best off changing only things you’re confident of. Leave the CSS and other folders well alone – unless you take deep exception to some of the colour schemes or section layouts. (My recommendation would be to stick with your template’s design for a while, it might grow on you.)

If you want to see what I did to the Urbanic template (assuming you downloaded it) – just right click and View Page Source of www.tebbo.com/index.html

[You probably don’t need this but I use Firefox’s right click/inspect element useful when fiddling around with the more techie aspects – you roll your mouse over the left panel and it highlights the part of the page you’re on and gives you all sorts of information about the CSS elements that support the section you’ve chosen.]

Best to just ‘have a go’ and keep it simple to start.

Good luck. It took me less than a day.

Journalists and robots – nasty dream

September 23, 2015 ~ David Tebbutt ~ 2 Comments

Just woke from a nightmare. I'd submitted a piece to the Guardian and, when it appeared, it contained all sorts of stuff I hadn't written.

I was used to sub-editors gently straightening my prose, but this was wholesale wrecking of my original intent. I didn't mind the historical, factual and statistical additions too much – when not too intrusive, they enriched what I wrote. But it was the wholly new paragraphs that put a commercial spin into the piece that made me hopping mad.

I quickly realised that this was a barmy attempt by the newspaper to earn money from erstwhile advertisers who had found that neither print nor web models were working any more.

Fellow journalists shared my horror – mainly appalled that something was going out with their name on that they hadn't actually written. They were also horrified by the thought that their hard-won reputations for objectivity had been destroyed at a stroke by the insertion of automated 'puff'. We collectively decided to stop writing for any paper that did this to us and to make sure readers knew what they were being served.

As I say, this was a dream. (Really – it happens to me several times every night, but this is probably the first that I thought worth sharing here.) When I woke up, and before I wrote this, I dug into 'robotic writing' and found this piece from The Guardian of all places: And the Pulitzer goes to… a computer

Another giant: cocoate.com

November 13, 2014 ~ David Tebbutt ~ 2 Comments

A final thank you (not really belated, I found them after the previous post) to cocoate.com

A flaw in my HTML mark-up was causing some screen elements to misalign on a few devices. Nothing really serious, it was just that the third column on the people page dropped on some of the less popular browsers.

cocoate's explanation of the 960-grid mechanisms was wonderfully clear.

Thank you folks. Or should I say "Merci bien mes amis"?

Thanks to the giants upon whose shoulders I stood

November 5, 2014 ~ David Tebbutt ~ Leave a comment

Once upon a time (1966 was the first time), I'd learn a programming language and then apply this knowledge to whatever problems were chucked my way. As I've got older, I decide what I want, then go online for help in doing it. Okay, it doesn't make me a professional coder but I learn plenty along the way and end up with a website that I'm in charge of and can change at the drop of a hat.

Without Google and the World Wide Web, Lord knows what I'd have done. But, thanks to them and all the places they led me to, I have a site which, while falling short of elegant, does what I want. More importantly, I hope it gives its visitors an enjoyable and useful experience.

This post isn't about the website, although you may need to know that it's epocselet.com in order to understand some of the comments below. This post is about recognition of all those people and places I discovered on my journey. Without their help, I would still be trying to learn JavaScript or PHP from scratch.

Here they are, in order of the number of hits I recorded in my Firefox History file. First the top ten (the first three were on tap continuously):

Hits

??? Microsoft ExpressionWeb4 was an invaluable website development environment.

??? W3C's Markup Validation Service. As the name suggests, it checks the validity of web pages.

??? Firefox Web Developer tools – especially Web console and Debugger.

230 stackoverflow A marvellous forum which covered pretty much everything, including PHP, JavaScript, HTML5 canvas and colour drop-down menus.

131 w3schools.com An online reference manual which I referred to for JavaScript, HTML5 Canvas, HTML colours, JS programming tips/demos and string parsing.

101 JQuery Radar Plus Mehdi Tazi adapted Ryan Allred's Radar Chart. I adapted Mehdi's. Figuring out how it worked was like solving a giant puzzle.

55 The PHP Manual and source of everything.

51 Radar Chart JQuery Plugin Ryan Allred's original code.

29 Plusnet's 'friendly' area. I used it for CGI and PHP hosting stuff.

28 SitePoint is a great source of web-building help. I used it for Canvas, HTML5. PHP, JavaScript, Radio button array and 960 grid stuff.

Now for the rest of the top 20. They may be lower in hit count but they were no less valuable – a single hit would often point me in the right direction:

19 Mario Lurig's PHP code checker came in handy when the PHP would stall.

7 Maths Is Fun took me back to schooldays to remind me about radians, sines and cosine. I could remember 'sohcahtoa' but couldn't remember what practical use to put it to.

6 tuts+ explained the 960 grid system, but also explained other things, including HTML Forms.

5 The jquery learning center does what it says on the tin. I used it as a reference for scopes, arrays and operators.

5 960 grid system. I found the 960 24 grid system perfect for laying out the web pages (and, often, changing them quickly.)

4 A simple guide to HTML came in handy for checking how to include JavaScript in HTML.

4 Six Revisions is a website hints and tips site. I used it to read about the 960-grid-system and HTML5's canvas (on which the charts appear).

4 Chris Pietschmann kindly explained how to colour dropdown items in an HTML form.

3 Chris Wiegman showed how to dig out the correct IP address for a visitor. (If you're with a hosting organisation, you're still fairly anonymous though.)

2 Home & Learn helped me a lot with understanding how to work with the HTML5 canvas.

Other honourable mentions should go to:

Google Analytics – which keeps an eye on visitor behaviour.

The many people who looked and commented as we went through. I guess some would prefer not to be named, but you'll know if you were one of them. A big thank you to you. I learnt something new from every single discussion.

Finally, my partners in crime Dr. Bill Nichols and Martin Banks.

It's been a blast. It made me remember why I loved programming. But also taught me that I could never make a living at it these days.

Thank you all for five very interesting months.

telescope or epocselet? Which way are you looking?

November 4, 2014December 27, 2015 ~ David Tebbutt ~ 3 Comments

How often do you glaze over when someone enthuses about a product or service because you don’t “get it”?

They blast off without the faintest idea about your circumstances, your needs or your desires. Result, a baffled story-teller and a semi-comatose listener.

In extremis, it’s the religious zealots who knock on your door. But milder forms exist – the Facebook enthusiasts who are always trying to shove some dodgy philosophy down your throat – usually through pictures or video links. (Recommendation: ‘unfollow’ them – they stay in your friends list but you’re spared the distraction.)

Sadly, these zealots exist in business too. Some organisations are so wrapped up in their own inventions that all their publicity and promotional activities are inward-looking. Self-obsessed, if you like. And this goes for the company spokespeople too. Anyone who says ‘we’ more than ‘you’ is likely to be guilty of this.(By the way, you can get a chart of where you stand, by doing this quick assessment – it takes just a couple of minutes.)

Once you start putting your prospect first (in the same way that all good journalists put their readers first) your story will emerge as something your prospect wants to hear or read. Something that promises to, and will, deliver a desired value. This will lead them to your physical or digital door and, if you continue to play your cards right, you’ll have a new customer.

Common sense? Yes. But, in decades of dialogue with vendors of all kinds, I’ve discovered that many actually fail to make that bridge. They pay lip-service to the principle, but their words let them down. When consulting (often with Martin Banks and, more recently, with Dr. Bill Nichols), we’ve found ourselves using the term ‘looking through the wrong end of the telescope’ to describe this inward-looking approach.

We’ve even created a website called epocselet.com (that’s ‘telescope’ backwards) as an umbrella for our disparate but aligned services. Our focus is firmly on executive management and we’d be delighted to act as guides or sounding boards in the discovery, articulation and sharing of your stories. Use us as little or as much of us as you like.

The journalist’s mantra ‘know your audience’ can be applied equally in business. Change ‘audience’ to ‘prospect’ if you want, but the principle applies to anyone trying to influence anyone else, whether a prospect or an intermediary. If you’re in business, you may have multiple audiences but, at heart, you’re trying to move the same stories through to the ultimate audience, your prospect. You may be trying to influence internal staff, analysts, bloggers, journalists and the many social media cascades. In every case you need to ask yourself, “what’s in it for them?”, in order to refine the basic story to best effect.

Written baldly like that, it seems like common sense. But sometimes it’s hard to change your perspective without independent and objective help. It’s not my place to tell you where to go for this. Anyone intelligent who understands communication skills, your marketplace and who has no axe to grind will be able to help you.

But I have to mention that Bill, Martin and I – solo or in various permutations would be more than happy to help you if you’re interested. You’ll find more about us and our services at epocselet.com

Apologies to all the marketing people I’ve insulted

July 29, 2014 ~ David Tebbutt ~ 2 Comments

Yes, it's true. I've been known to say rude things about marketing people. Analogue marketing people and, frankly, I can do a good job of justifying these comments.

But, as I discovered recently, there's a new breed of digital marketer about and, if they play their cards right, they can be a force to be reckoned with.

My transition started last year when I talked to IBM's CMO for EMEA (top marketing bod in Europe etc., to translate loosely). I came away with the idea that marketing is moving from an art to a science.

Earlier this year, I found myself doing some training with Marketo, a marketing automation company, among other things This, as with all my clients, involved a lot of pre-course research. I became more and more interested in the subject, way beyond the call of duty, in fact.

When I got back, I carried on digging and this led to two articles for CIO UK. The first is What is marketing automation? and the second is IT's role in marketing automation.

For the marketers who've grasped these new opportunities, I take my hat of to you. For the rest? Well, I'll still proceed with caution.

Something for would-be writers and spokespeople

March 4, 2014December 24, 2015 ~ David Tebbutt ~ Leave a comment

All the above are free.They help you get started with handling the media or with business writing.

I created them because organisations need to influence their prospects, customers and other stakeholders either indirectly through the media or directly through their own efforts, whether they're self-published (company website/blog) or through submission to a media company. (See Tom Foremski's EC=MC: Every Company is a Media Company if you want to read more.)

The top image links to two videos, each broken down (if you want) into eight mini-videos of approximately two to five minutes duration. The bottom two link to downloadable pocket-sized memory-joggers. (They're actually A4 and come with printing and folding instructions.) If you prefer, just go to tebbo.com which also includes some useful links.

I offer all of this free of charge. In one respect it's me 'giving back' and sharing my knowledge. In another, I hope they reflect favourably on me and my work and attract people who'd like me to work with them. They're all Creative Commons – share by all means, but please don't alter them.

The videos are hosted on YouTube and the memory joggers are hosted on Google Drive. I had some fun writing the delivery script for the Tebbo's Tips memory-joggers, but that's another story.

I hope you enjoy what you see. I showed a few of my more critical friends and they've been very kind.

I'm enormously grateful to Alison O'Leary for agreeing to work out some questions and grill me for the videos. And, of course, to all those customers, friends and colleagues that have helped me throughout a most enjoyable career. Which, incidentally, I hope is far from over.

Blog navel gazing over

November 20, 2013 ~ David Tebbutt ~ Leave a comment

My last blog post prompted Euan Semple to post two more of his own. These grabbed far more attention than mine and led to some interesting debate, much of it on Facebook where he's recently taken to repeating his blog posts.

Before Euan got involved, I was getting an even mix of opinions. Some who thought I was right to not post much, if at all, and others who thought I was mad to even think of stopping. Then, when Euan got involved – the first time to share my angst, the second time to rail against someone who said "blogging is just showing off". (One riposte to that was the sensible, "Blogging is so varied you can't make blanket statements.")

Let's cluster some representative comments. Draw your own conclusions.

First of all, why blog at all?

Your blog is your gravitational centre
Write for your community
My community is so small we may as well meet down the pub
My community is global, we can't meet down the pub
I'm going to move back to my blog to serve my interests rather than some IPO'ed profit engine's
If I post knowledgeable/interesting stuff it leads to opportunities
Writing forces me to think and get feedback
Co-creation results in greater/deeper insights
Co-existent thoughts rob dominant thoughts of power

And here are some tips for would-be bloggers

Don't do it if your heart's not in it
Be selective and deliver gold
Be an example of good writing
You stand or fall by your content
Get people to think, not tell them what to think

Some commercial organisations see blogging and commenting as an obligation. (See the 'heart' comment above.) Someone suggested it's a publishing strategy, just like the pamphleteers of old but with the world as their potential audience.

When I was an established columnist, Dave Winer wrote his first blog post. I remember thinking "Who does he think he is?" One of Euan's comments took me right back to that moment. But it's only now, 19 years later, that it's dawned on me what irritated me so much. It was his use of the first person. He was writing as himself, as if he were important. In several years as an editor, writer and columnist, I always tried to avoid the first person. My attitude was "I'm not here to promote myself" (except through the byline, which few people notice).

I have a massive list of more great comments eked from the Euan posts, but I'd like to conclude this post with a rather elegant contribution from Vicky Smith (reproduced with her permission). Thank you Vicky. Here goes:

"Blogging offers egotistical natures a platform to broadcast and attention seek. For others, it's a release of private thoughts in a more therapeutic manner (one could maybe say both make the blogger feel better). For others again it's for money… This discussion has prompted me to think of blogging like art or painting, a form of self expression, which just happens to be shareable online. I'm sure many artists would like their work seen more, be it for making money or for ego, others less so because it's more a private hobby for personal reasons. It all just depends. We're all different, and it's a platform for expressing those differences, if one so wishes in whatever way one wants."

David Tebbutt

media skills trainer, writer (ghost/regular) and closet techie

New media

Make your website multiplatform in less than a day

Journalists and robots – nasty dream

Thanks to the giants upon whose shoulders I stood

Apologies to all the marketing people I’ve insulted