Helpful Tips for 2013

bauble

After a little blip last year, I’m really pleased that we’re able to bring our series of advent tips for smart digital communicators  back for 2013.

Helpful Technology was a freelance business when I first started the tips, but now we’ve grown to a gargantuan four people, so this year there are tips coming up from all the team. (The eagle-eyed may spot a few changes over on the Helpful Technology website…)

First up is Anthony’s little trick for neater YouTube embeds. Enjoy!

24tips Christmas bonus: build RSS feeds from any listing

25 Dec: Happy Christmas! Here’s a little get-it-while-you-can Christmas bonus tip.

Even in this day and age, plenty of sites don’t make it easy to grab RSS feeds of listings of news, articles, speeches, publications, consultations or whatever. The creators of Dapper decided this was a shame, and built a neat little app to enable you to build your own RSS feeds from other people’s published content, making the scraping process as easy as point and click. It was so neat, they sold to Yahoo who turned it into something completely different, but left a backdoor to the technology at open.dapper.net.

dapper

You can browse feeds others have built, or create your own, specifying a page or pages, and highlighting parts of those listings that should map to the title, description and date items within an RSS feed. It’s clever, but not foolproof, and depends on the listings being fairly clean in their own right, but if luck is on your side, you can have a functioning RSS feed set up and embedded on your Netvibes dashboard, WordPress blog or corporate site widget within 10 minutes.

If there’s a glimmer of hope for its future given Yahoo’s approach to innovative startups with neat technology that it has acquired, it’s that Dapper is a great fit with Yahoo Pipes, as well as claiming to have some commercial application, so fingers crossed it will still be here next year.

24 helpful tools and techniques for doing web stuff cheaply

24tips: build a mobile version of your site

24 Dec: in the rush to build apps for everything, it’s easy to lose sight of the easier, simpler and cheaper approach to making your content accessible to mobile users: a mobile version of your site. Huh – isn’t that an app? Not necessarily: with a bit of inspiration and tweaking of your templates, you can serve a different HTML page to visitors on phones (smart or otherwise) including some pretty fancy visual tricks.

guardian mobile app

  • CSSiphone is a nice gallery of inspiration for how mobile sites can appear on the iPhone, and there’s another gallery from Smashing Magazine
  • WPTouch is a free WordPress plugin, which switches your site to an iOS-style layout for visiting iPhone and iPod Touch users, for virtually zero effort
  • Mobify offers visual tools to help you identify which parts of your site you want to reformat into a mobile version, and counts some pretty serious web designers and CSS purists among its users

In 2011, I’m hoping to have a bit more to say about this space, and share a little something I’ve been working on to make it really super-easy to build a mobile site. Stay tuned!

24 helpful tools and techniques for doing web stuff cheaply

24tips: filler text for realistic layouts

23 Dec: if you’re in the business of mocking up sites or designs for other people to comment on, you’ll have encountered the challenge of making a layout look realistic without having much content to play with.

Fillerati

The conventional approach is to use ‘Lorem Ipsum’ or a special chunk of faux-Latin text designed to show how text flows around your layout using realistic words and sentence lengths, but without distracting your (internal) client with the content itself (doesn’t always work in my experience). If you’re looking for a chunk of Lorem Ipsum text, try the Lorem Ipsum Generator, which can produce paragraphs or lists to your specification.

But faux-Latin isn’t the only option: for something more readable (but beware: potentially more distracting for your audience), try Fillerama, which takes the same approach but using quotes from Star Wars, The Simpsons or Futurama. Even better, the lovely Fillerati gives you passages from great works of literature by HG Wells, Jules Verne and others, and lets you choose exactly how many words or list items to copy.

Educate and delight your clients, in one easy step.

24 helpful tools and techniques for doing web stuff cheaply

24tips: can your site handle the load?

22 Dec: so, you’ve got your site looking nice. But what happens when lots of people come and look at it? The truth is, most of the time nobody really knows, and the accurate answer is ‘it depends’. But if your site falls over easily or becomes really slow under moderate traffic, The Man will ask Why. And ‘it depends’ doesn’t sound so clever then.

LoadImpact is a handy little service to help you see what happens to response time when your site is subjected to simulated load of 50, 100 or more concurrent users. It’s just a guess, but the charts it shows you may give you some clues as to whether your site can cope with the scale, or whether you need to take more radical approaches to optimising or offloading some of the content to caches or content delivery networks such as Amazon’s CloudFront.

speed test

When you’re trying to work out what’s causing your pages to load slowly, there are some great little utilities to help you:

  • Google Page Speed is a page speed analysis utility you can run yourself, or use via the excellent WebPageTest hosted service to run reports such as the one above, complete with an optimisation checklist and visualisation of which elements of your site are taking the time to load.
  • Yahoo’s YSlow does a similar job, and comes as a handy Firefox add-on you can add to the indispensable Firebug browser utility every webby should have installed

In terms of monitoring, I like the paid-for service Pingdom, which alerts you when your sites become unresponsive and also records their average response time from different locations around the world. It’s a nice visual way to track how your site responsiveness changes under different conditions.

24 helpful tools and techniques for doing web stuff cheaply

24tips: visualising your strategy

21 Dec: digital strategies are meaty things to write, taking into account all the domains of digital and the ever changing environment in which it sits.

Here’s a little visualisation I’ve used a couple of times now to help illustrate the direction of travel in a digital strategy:

digital strategy

(click to enlarge)

There are four key dimensions:

  • Channels: your site, your social media channels, email/mobile/RSS etc
  • Programmes: the cross-cutting projects and work you do on your channels, from analytics and research to technical infrastructure and CMS selection
  • Capabilities: the skills and configuration of the team
  • Proposition and Content: what the digital platforms are for and what you’re doing with them

By describing in some short phrases where you are on each of those now, in the short/medium term (3 months) and longer term (6-12 months), it’s a way of communicating the breadth, direction and pace of change to senior stakeholders and the people involved.

Feel free to adapt and improve!

24 helpful tools and techniques for doing web stuff cheaply

24tips: lo-fidelity wireframing

20 Dec: the biggest challenge in a web project is getting everyone’s expectations in roughly the same place. The big boss thinks it will engage thousands (but is actually happy with it looking shiny), the (internal) client says it needs to have functions X, Y and Z (but actually doesn’t mind, as long as it is simple to manage). And you? Well, you’ve got your own ideas, which evolve as you spend time thinking about it and learning exactly what the goals really are.

wireframeLow-fidelity prototyping is a big part of the solution. For years now, I’ve carried around a plain paper notebook full of rough sketches of projects and sites I’m planning or working on – the one on the right is from an early iteration of this site.

These kinds of sketches are good to help with your own thinking, but when you’re trying to get other people onto the same page, low-fidelity wireframes are even more important. They take away the concerns about colours, fonts and imagery, and help to focus attention on what’s really important on a given page, and the flow between different pages on the site.

And while sketching on paper is good, there are some great apps to help you come up with tidy, low-fidelity prototypes of common web interfaces:

Balsamiq wireframe

Balsamiq is a downloadable Air app ($79 one-off) with a whole library of interface elements and icons, to get you started building a wireframe quickly (see example above)

Mockingbird (from $9/month) works in the browser, and has a similar template library, with a bit less of the Comic Sans about it and a slightly cleaner interface, including some neat features like being able to create links between pages and export the linked wireframes as a PDF

Of course, low fidelity wireframes are design discussion documents, and need to be presented carefully. Some (internal) clients don’t really engage until they see a design concept with a bit more polish, especially at senior levels. For those guys, showing them comparative examples of live sites with the kind of style or functionality you think they have in mind, and gauging their reaction, can be a more effective place to start the discussion.

24 helpful tools and techniques for doing web stuff cheaply

24tips: Google search tips

19 Dec: Ah, the mighty Google. You type in the keyword you want, hit return, and chances are the result you want is at the top. That’s it, right?

Google search

Here’s a lovely list of some little-known power-user tricks you can use to supercharge your Googling, including some I knew and some I didn’t:

The NCR Command

This command is particularly useful if you are abroad, and Google redirects your search page to the local country you are in. If you type /ncr after google address, no redirection is made.  For example:

http://www.google.com/ncr = google.com
http://www.google.co.uk/ncr = google.co.uk

The link:domain.gov.uk/project -site:domain.gov.uk is a nice little way to look at how many inbound links you have to a page or section of your site, minus those from your own organisation’s sites – I’ve used that in the past to surprise people with how much external interest there has been in their campaign.

Enjoy!

24 helpful tools and techniques for doing web stuff cheaply

24tips: analytics by email

18 Dec: Google Analytics is such a good free web analytics package, it’s hard to think of a really good reason why it’s worth paying for something to do that kind of job. Web analytics is a brilliant source of insight into what’s happening with your site, but too often it’s left as another job for the web team, who frankly have enough things to log in to all day long.

GA reports by email

Google Analytics reportOne of Google Analytics’ really nice features is the scheduled email report, which delivers a summary of your latest website analytics data in PDF, CSV or XML formats direct to your (internal) client’s inbox. You set it up, choosing who you’d like to send the report to, what covering email text it should come with, and whether to send it daily, weekly or monthly. And by magic, it will drop into their inbox, neatly wowing them with your insight and diligence, and more seriously, reminding them of their online audience.

Google Analytics

24 helpful tools and techniques for doing web stuff cheaply

24tips: the basics of natural SEO

17 Dec: there’s an awful lot of stuff talked about search engine optimisation, much of it peddled by people who make a good living out of making it a dark art. The truth is, some clever copywriting and lateral thinking gets you a long way in search, and there are some simple ways to do it right.

seo analysis

In SEO for the Average Joe, Kim Stearns of web agency Forty distills a whole bunch of tutorials and lists into fifteen commonly-cited, useful rules of thumb to ensure your website copy performs as well as it can in search engines, including:

  • Keyword prominence – keywords and phrases should appear as close to the top of the page as possible
  • Less than 100 links to external pages
  • Make sure singulars and plurals are used in keywords and phrases
  • Keywords appear in alt text (yes, but don’t distort meaning – Ed)

There’s also a nice link to this keyword density analyser. While we’re with the SEO tools, here’s a handy link analyser and a spider simulator, to give you a sense of what the Googlebot sees when it lands on your site. And if you’re into SEO, you could do worse than follow Matt Cutts’ blog.

24 helpful tools and techniques for doing web stuff cheaply