Make your website multiplatform in less than a day

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.

Advertisements

Journalists and robots – nasty dream

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

 

 

Time for (blog) retirement?

Hi Folks,

I'm very seriously thinking of closing this blog. This one started in 2005, following some experimentation in late 2004 after hearing Adriana Lukas speak on the subject at a conference. As a writer for Information World Review at the time, I had to try and understand this new world.

In my very first post I said I wouldn't "feed the beast" in pursuit of rankings and, rightly or wrongly, I stuck to that principle. If I don't think I can inform or entertain you, then I don't bother.

Now, the posts are few and far between and, as a precaution (against tuture regrets), I have made backups of this blog and the one I ran for Guy Kewney before he died and for tributes after he passed away.

Other places seem more appropriate for my efforts these days. I add selected useful stuff to my tebbo.com website as I discover it and I still write on interesting topics in various publications – sometimes anonymously. I occasionally speak up on LinkedIn, Twitter and Facebook. And Alison O'Leary quizzed me on Business Writing and Media Handling in a bunch of useful YouTube videos.

The question for my (very few?) readers is therefore, "Can you think of a single good reason to keep this blog going?" No need to respond if your answer is "no".

I'll just say, "Thank you for visiting and maybe see you in another place."

Kind regards,

David Tebbutt.

 

Another giant: cocoate.com

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

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?

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.)

AquaChartImageSadly, 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

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.