Activities for education

 

I like solving problems, and I enjoy thinking creatively. Building interactive online activities lets me do both at the same time.

 
 

What are ‘online activities’?

At wave, sometimes we call them ‘online activities’, sometimes we call them ‘interactives’. I’m not sure if there actually is an official term. Here are some examples, from our recent rebuild of the ‘Discovering Antarctica‘ website. We originally built Discovering Antarctica way back in about 2007, in the days before iPhones and tablets even existed. At that time, online activities were all done with Flash. Flash is pretty much obsolete now, so for the rebuild we used the HTML <canvas> element and javascript instead.

As well as switching from Flash to <canvas>, we needed to make the activities responsive, so that they work on different shapes and sizes of devices, and accept touchscreen input as happily as mouse interaction.

The interactives need to work in a wide range of settings, particularly in school classrooms. In some classrooms each pupil has a tablet, in others, the teacher runs the activity on a whiteboard.

Wilderness Challenge

 
Wilderness Challenge activity intro screen
 

Wilderness challenge‘ is the very first activity on Discovering Antarctica. It’s just a lighthearted quiz really, but with noisy penguins.

Sizing up Antarctica

 
Sizing up Antarctica activity intro screen
 

If I had my time again, I would do “Sizing up Antarctica” slightly differently. With hindsight, I can see a few UX shortcomings – but I am pleased with several of the features, especially the button that pings lots of little ‘UK’s across the screen.

Antarctic Timeline

 
Antarctic timeline activity intro screen
 

Antarctic timeline‘ gave us the opportunity to have a nice parallax scroll, and to combine the timeline element with overlaid pop-up windows featuring text, images and embedded video.

Going back in time

 
Back in time activity intro screen
 

I wasn’t a massive fan of this one myself, but I hear it is popular in classrooms, especially the dinosaur that pops up at the end.

What (not) to wear

 
What not to wear activity intro screen
 

Finally, in ‘What (not) to wear‘ you have to dress the scientist in his cold weather gear. I like his Action Man style ‘eagle eyes‘.

Find out more about Discovering Antarctica.

Technical info:

Each canvas animation requires its own set of custom assets, including javascript, json, images, sounds, videos etc. – all put together in an HTML file. We store each animation in a separate folder, containing all of its unique assets. We store shareable assets in a shared library to avoid unnecessary duplication.

The HTML is inserted into WordPress templates via iframes, using the individual activity’s folder name as a ‘hook’.

We use Adobe Animate software to construct these online activities. The work involves planning, storyboarding, design, creating and sourcing assets (photography, illustration, sound, video) and coding. The animations and interactivity are coded in javascript, in particular using CreateJS and the Greensock Animation Platform.

 
Posted in web
 

Don’t get harvested!

 

As it's autumn, here's something about protecting your email addresses from the harvesters.

 
 

Some people say the only way to be spam-free is to avoid displaying email addresses online altogether. While that does seem like a sure-fire solution in an ideal world, we have few website clients who can take that step. So how can we make it harder for spammers to harvest email addresses in WordPress?

We’ve used quite a few methods over the years. There are several plugins that do a good job. Currently we are trying a simpler approach.

What to do?

WordPress has a function called “antispambot” which changes the code of an email address so that while humans looking at the screen will see:

mary@thingy.co.uk

…the average automated harvesting tool will see:

&#109;a&#114;&#121;&#64;th&#105;&#110;gy.&#99;&#111;.u&#107;

and be suitably bewildered.

Easy to use

To enable this method in the cms we set up a “shortcode.” Once the shortcode is set up, to add an email address to your content you would just type the following into your cms editor:

To get in touch, email us at [email address=”mary@thingy.co.uk”]

It’s easy to use once you know how!

 
Posted in web
 

SEO for absolute beginners

 

When it comes to Search engine optimisation, common sense and an intelligent, methodical approach are what you need to take your first steps.

 
 

Search engine optimisation (SEO) might seem like yet another new demand on your time and energy, with a steep learning curve for beginners.

However, to get started you just need common sense and an intelligent, methodical approach. Then you can go deeper… and deeper…

If you want people to find your website, you can’t ignore SEO!

Yoast are the specialists in SEO for WordPress – they provide the world’s most popular SEO plugin (which we use on all our WordPress websites) and they also write clear, easy to grasp articles about SEO.

Here’s their latest blog, “SEO for a new website“. I might write something similar myself in future, but why reinvent the wheel? So to save time, here’s an expert post from Yoast!

More about SEO:

Page titles for effective SEO

If you want to know more about how we approach web projects, please read our Web design and build process post.

 
 

How does a new website start ranking? Does it just magically appear in Google after you’ve launched it? What things do you have to do to start ranking in Google and get traffic from the search engines?

Yoast

 

Web design and build process

 

Each web design project has its own unique personality. There is no one-size-fits-all approach to designing and building websites, but we have to start somewhere! Here is our full-length, possibly long-winded, default process, which we tailor to match the needs of individual projects of different shapes and sizes.

 
 

1. Scope and documentation

Together we develop definition documentation to ensure that everybody has a clear understanding of the initial goals and requirements of the project. We need to be sure that we understand the big picture. We will fill in the fine detail together later, during the planning stage.

Outcomes

  • We have agreed the project structure, basic deliverables and contracts.

2. Discovery

We collect insights from stakeholders about what they want the site to achieve. From this, we can start to define what the functionality and core priorities should be. We like to think about this in terms of ‘essentials’ (minimum viable product) and then ‘desirables’ (a prioritised list of other features). We find this helps clarify the thinking.

Information gathering varies from project to project, depending on timescale, complexity, budget and other factors. Here are some of the actions we frequently recommend:

  • identify roles and responsibilities
  • discuss the brief, the desired outcomes and goals
  • identify how to measure success
  • analyse the current site
  • analyse competitor sites
  • discuss content strategy
  • discuss SEO
  • discuss usability and accessibility
  • interrogate and specify technical requirements
  • develop user profiles and user journeys
  • hold stakeholder interviews
  • hold a kickoff site mapping session
  • identify and collect brand assets and guidelines
  • identify content assets – brand guidelines, text, imagery, video, etc

Outcomes

  • With this raw information gathered we can move onto the planning stage, and start structuring the site.
  • The client, with our help, can begin gathering content ready for addition to the new site.

3. Planning

Using the raw information gathered in Discovery, we work out the full technical specification and site structure, developing sitemaps and wireframes to show how everything fits together.

Site planning is a collaborative and iterative part of the web process, where we work with the client to ensure that we cover all aspects to everyone’s satisfaction.

Sitemap

  • The sitemap shows the relationships of all the pages and posts on the site. We usually present the sitemap as a tree diagram.
  • Sometimes the planning stage requires multiple iterations, at other times the client has already decided on all the specifics, and the planning stage can then be very brief.
  • While it is important to define the fundamentals of the sitemap before we begin to design and build (top level sections, for example), websites are intended to develop and evolve over time, so the sitemap is never set in stone.
  • The key is to have a carefully thought through and stable large-scale structure to the site navigation, with greater flexibility built in where appropriate.

Wireframe

  • The wireframe is a development from the sitemap, where we identify each page and describe what it contains in greater detail. It helps us ensure that we have planned for every aspect of the site.
  • The wireframe is usually displayed in a browser and looks like a skeletal website. We intentionally exclude ‘look and feel’ so that at this stage we can focus on page content, usability, strategy and functionality without distraction. We may include sample content, but a wireframe will also contain notes and comments for discussion.
  • By keeping the wireframe unthemed, we can ensure that everything is structured so that content flows correctly whatever device or browser the visitor is using. It ensures that at this point we are prioritising the fundamentals, over which the theme will ultimately be laid.
  • For pages where the layout needs to vary a great deal between different devices, we can develop ‘higher resolution’ wireframes to demonstrate how the layout alters in response to context. Typically we might do this for home pages and top level landing pages, and we might show mobile, tablet and desktop variations.

Outcomes

  • Sitemaps and Wireframes are signed off.

At this point, we should have everything we need to start the design/theming and build processes in earnest. Usually, we will have made some early steps into design and build already, but sign off of sitemap and wireframe allow us to go forward with confidence.

Design theming

The goal of the theming phase of the web process is to develop and agree on a ‘look and feel’ that will work whatever shapes and size browser you are using, rather than visualising individual pages in fine detail at one fixed size (and therefore ignoring all the other shapes and sizes).

Modern responsive website design is highly modular, with sets of page templates built from smaller modular elements. This approach is often referred to as ‘Atomic design’. It is not a perfect metaphor, but we like it.

See atomicdesign.bradfrost.com/ and demo.patternlab.io/ for more information about the Atomic design approach.

The theme design aspect of the web process usually goes something like this:

  • mood boards
  • homepage visuals for desktop, tablet and mobile view
  • standard inner page visuals at desktop, tablet and mobile view
  • where required and as agreed, further visuals for other site elements

We present visuals online using a variety of tools and software, including Invision. Visuals can be printed from the screen if needed. Depending on the nature of the project visuals may be ‘static’, but there may also be visuals with some functionality to demonstrate dynamic elements, for example, drop down menus.

Outcomes

  • The overall look and feel are signed off, along with the particulars of key pages and modular elements.

The theming process usually continues to run alongside the build even after the overall look and feel are agreed.

4. Build the site

Using the information gathered in the planning stage, and the look and feel agreed in the design stage, we start to build the website.

As with all the other stages, we make the build stage of the web process as collaborative as possible and will endeavour to make the ongoing build available for the client to view. We prefer this ongoing shared process to periods of silence followed by ‘ta-da’ moments, and we are sure you do too.

The build will occur in a private hosting space where it is only visible to the client and us.

Outcomes

  • The build is complete and signed off, subject to testing and bug fixing

In some cases, the build might be more staged, with some parts of the site developed independently of others, at different speeds, and signed off separately. This approach can allow the site to go live sooner, with all the ‘essentials’ online, perhaps, but some of the ‘desirables’ added in later on.

5. Test the site

All projects are subject to ongoing in-house testing throughout the build, using a variety of browsers and devices. It is not something that only happens when the website is ‘finished’. However we also have pre-launch and post-launch checklists that we use for every project to ensure as little as possible is missed.

Testing is concerned with the functionality of the site and also with user friendliness, successful user journeys, accessibility and other factors.

Where budget is available, clients can arrange external user testing with a representative audience, or if required we can organise this for you.

Where budget is not available, you can test the site for yourselves at appropriate points during the build.

Outcomes

  • The testing process is signed off.

In fact, the most rigorous testing will always be that given by real visitors once the site is live. Sign off of the testing stage means that the client is happy that the site works correctly and that we can confidently proceed to populate the site with content and then make it live. Bugs may still appear, and we will fix them when they do, as part of the maintenance agreement.

6. CMS training

The site is ready to have real content added using the cms. If you are managing content yourselves, we need to make sure you understand the cms.

While different content management systems often have much in common, there will always be unique aspects to the cms of any custom theme, so training and advice is a necessary part of the web process.

We aim to build ease of use into the cms and we provide on-screen guidance within the cms screens themselves wherever possible. As well as these help notes, we can provide ‘how to’ videos within the cms where needed.

Ideally, training is provided person to person, but sometimes training via telephone or Skype is preferable. The initial training session usually takes between two hours to a full day, depending on the complexity of the site and the cms.

As well as the training session, we provide ongoing support and advice as part of our maintenance agreement.

Outcomes

  • The initial training session is completed.
  • Clients are able to add content to the site themselves, with confidence.

7. Add content

Depending on what we have agreed, content might be added by us, by the client, or both. Typically we will add at least some representative content to the site to help our clients see how it all works.

Gathering content should be an ongoing process, undertaken while the site design and build are underway, so that by this point most of the initial content is ready to add. We have various tools to help you with this, including Gather Content.

Outcomes

  • Initial content is all in place, in preparation for the site going live.

8. Make the site live

The site is ready to be made available to the public. While this might appear just to be a case of pressing the ‘go’ button, there is always more to it than that.

In fact, there can be different kinds of ‘live’. ‘Going live’ might simply mean making the site publicly available to people who know the web address. It might also mean getting search engines to index the site and display it in search results. It might mean a publicised launch date with press releases, newsletters and so on. There might also be a staged approach, where some parts of the site go live while other features are still in development.

As mentioned above, the most rigorous user testing is that done by real visitors, once the site is live. Therefore we recommend a ‘soft launch’ first, where the site becomes available but is not highly publicised. A soft launch provides further opportunities to hone and bug fix before any more high profile official launch.

Outcomes

  • The site is live and available for viewing.

9. Maintenance

All websites need ongoing care and attention to keep them in step with the ever-changing environment of the web.

We have an ongoing basic support package to make your life easier and to keep your site as secure and up to date as possible. The package includes:

  • regular backups of both the site files and the database with a premium backup service
  • various premium quality plugins that we can only provide as part of an ongoing maintenance service
  • monthly updates to the cms and plugins
  • advice and support
  • minor bug fixes and edits
  • scheduled checking of the site for errors, bugs and quirks (optional – bit like an MOT)
  • anything else we can do to help ensure the site stays up and successfully running

As the designers of the site, we have a vested interest in making sure that your site is a success and that you are happy!

 

Cache your website

 

Caching is a set of processes used to improve the speed at which web pages load into the browser. It happens behind the scenes. Most people have a cache on their site. Few know much about it, and some don’t even know they have it.

Caching, understandably, might sound dry, impenetrable, incomprehensible and generally unappealing to you. This is why we’ve tried to lighten the mood with a squirrel, caching his nuts, at the top of the page. Nonetheless, if you have a website you should at least know the utter basics of the cache.

Cache – the really short version

Without caching:
Every time someone visits a web page, the server has to construct the page from a variety of bits and pieces. This involves reading different kinds of code, getting text from the database and so on. It puts all the bits together, then sends off the constructed page to the person who requested it. It’s a bit like reconstructing the same jigsaw, over and over, every time the page is requested.

With caching:
A snapshot of the fully constructed page is stored on the server, like the completed jigsaw. The server does not have to spend any time putting things together. and can simply and quickly send off the cached copy of the page.

Caching plugins for WordPress

We think WP Rocket is one of the best caching solutions for WordPress, our favourite cms. There are others, but we find Rocket the easiest to configure and manage, and it works very reliably.

WP Rocket’s guide, Caching for WordPress, Explained in Plain English, explains, in plain English, some of the basic concepts behind caching. They do it far better than I could. Why recreate something when there is a perfectly good version cached and ready to use?

Find out more

If you want to know more about how we approach web projects, please read our Web design and build process post.

 

 
 

One of the best explanations of caching I have come across was at a WordCamp talk (I wish I could remember who the speaker was so I could properly credit him). He asked the audience, what’s 3,549,752 divided by 23,234?

Everyone fell silent. Some people pulled out calculators to do the math, and finally someone yelled out the answer after a few seconds.

Then the speaker asked the exact same question again. This time everyone was able to immediately call out the answer.

Lucy Beer ,  WP Rocket

 
 

Page titles for effective SEO

 

Well conceived page titles are essential in helping people to find your content, whether they are searching on Google or already viewing your website. Page titles and post titles are a crucial, high scoring piece of the Search Engine Optimisation (SEO) / findability jigsaw puzzle.

So many titles!

Page titles (and post titles) appear in all sorts of places:

  • as the top level heading on a page or post
  • in a website navigation menu
  • in a browser toolbar tab
  • in a browser history list
  • in Facebook, Evernote and other sharing or bookmarking apps
  • in a Google search results page.

They have to do several jobs – and what works well as a title in one place may work less well in another. Luckily, a page (or post) has a range of titling options and using these effectively can make your page much more enticing.

Meta titles

The meta title does not appear directly on your site but shows up in a wide variety of other places, most importantly as the ‘big blue text’ at the top of a Google search result. If you were to look at the HTML for your page, you would find the title meta hidden away in the “head” section along with other meta information.

The meta title needs to provide a very clear, accurate and concise description of what your page is about. It needs to be literal and to-the-point.

 
Search engine result snippet, including page title and meta description
 

If you use WordPress, you can get easy access to page meta titles by using the Yoast SEO plugin, which also provides on-page advice about making the most of your meta titles, page descriptions and other meta elements.

Page titles and post titles

You will usually see these titles at the top of a page as the main heading. In publishing software like WordPress, this is the title you type in at the beginning of your cms page, and which WordPress uses to generate the URL of your page.

 
Page title/post title in WordPress
 

This title appears within your site rather than externally in search engines and social media. It might show up in your internal search results, listings and archives, as well as at the top of the page itself.

You can safely assume that people viewing this title variant will know more about you than someone merely looking at your Google results. After all, they have already decided to visit your site. This title can afford to be more granular and detailed than the ‘meta’ version. Nonetheless, you need to ensure that it is clear and unambiguous in the context of your internal search results, or as a title in a list of posts.

Permalink and slug

 
The slug is a version of the page title
 

The permalink is the long-term web address (URL) of your page, and the last bit of the permalink is known as the ‘slug’. It is the piece of the URL referring specifically to the individual post or page title. By default, the slug is usually a lowercase variant of the main page title, and is created automatically by the cms. However, in most cms, you can craft the slug to make it more useful to your visitors. In particular, you can shorten the slug to make it easier to type, and rewrite it to make it more easy to understand.

If you are feeling ambitious, you might also look into page redirects, allowing you to make even more user-friendly URLs and customised landing pages for visitors.

Navigation titles

You can choose to give your pages alternative titles in your navigation. If you have long, complex page titles, you may want to make shorter, cleaner variants to display in your navigation menus, to avoid ending up with a cluttered and confusing navigation system. If this were a page rather than a blog post, ‘Crafting titles for effective SEO’ would probably be too long to fit comfortably into a navigation menu – perhaps the single word ‘titles’ would be a good replacement.

Find out more:

Crafting good titles for SEO

How to write meta title tags for SEO (with good and bad examples)

Create good titles and snippets in Search Results

If you want to know more about how we approach web projects, please read our Web design and build process post.

 
 

When kings the sword of justice first lay down,
They are no kings, though they possess the crown.
Titles are shadows, crowns are empty things,
The good of subjects is the end of kings.

Daniel Defoe ,  The True-Born Englishman: A Satyr

 
 

Don’t get accessibility fatigue

 

Not that long ago, online accessibility was a hot topic in the web design community. We designers loved to add WCAG logos to the sites we built so that we could show evidence of our expertise - even though those logos were not exactly pretty...

 
WCAG accessibility badges
 

…yech!

More recently though, enthusiasm doesn’t feel quite as strong as it used to be. Sometimes people seem to look on it all as a bit of a chore, and with a poor ROI to boot, rather than as a fundamental aspect of good web design.

Ensuring that all visitors can use their online services, whatever their needs, is often a much higher priority to the kinds of organisation we prefer to work with. Furthermore, it’s a legal issue.

Besides, we think combining quality UX design with accessibility is one of the challenges that makes web design interesting, and we certainly don’t want to disempower people with special requirements. In fact, we believe that a focus on accessibility and usability for all visitors helps us think in a more focussed way about the fundamental requirements for a website, so consequently it can improve everyone’s online experience – it’s not just for people who use screen readers.

Big up accessibility

If you need to convince your boss or the person who holds the purse strings that you should be building accessibility into your projects, ‘The Inaccessible Web‘ is a great place to start your investigations. It is a useful, informative read for anyone who cares about information being available to everyone, regardless of what technological needs they may have.

Find out more:

If you want to know more about how we approach web projects, please read our Web design and build process post.

 
 

Accessible websites and apps can absolutely be beautiful, innovative and user-friendly.

uxdesign.cc

 
 

Further reading

Here are some more places that can help you find out how accessible your website really is.

W3C Accessibility pages

Web Content Accessibility Guidelines (WCAG) Overview

The A11Y Project

 
Posted in web
 

The Cooperative Technologists have landed

 

Last week was an exciting and unusual week as I was out of the office for the inaugural Cooperative Technologists annual retreat. Coop-Tech, as it’s known for short, is a collaborative network of tech co-ops in the UK.

 
 

Ellie Harries from Outlandish wrote this excellent blog post about the retreat and has kindly given permission for us to re-post it here. Coop-Tech, as it’s known for short, is a collaborative network of tech co-ops in the UK. It is also the new name for the brainchild/beast formally known as the Megazord (more info on the inception of the tech Megazord here).

 
 

‘Now take it from me, I’ve been to a conference or two in my time, and this event really was up there. Perhaps it was because we were all co-ops? Perhaps it was because it was the first time we’d done it? Perhaps it was because everyone there was super lovely and committed? (This was definitely the case). Whatever it was, it worked.

As co-ops, we abide by the 7 Cooperative Principles. I won’t go into all of them here, but the two that we lived out at the retreat were:

5. Education, Training and Information

6. Co-operation among Co-operatives

There were long discussions deep into the night about soul-searching topics like pay, fairness, and how to deal with conflict at work. All things that matter enormously to co-ops who are socially orientated both in terms of clients and workers.

One of the things I particularly enjoyed was the open and practical skill sharing that went on among co-ops, masterfully facilitated by Seeds for Change. All of the co-ops at the retreat were viable businesses, and many of us face similar challenges. Some of these challenges are particular to us as co-ops, while others are challenges faced by all organisations, whatever their constitution.

 
diagram on a white board
 

We had sessions on:

  • Pitching
  • Remote and flexible working
  • Tech for good
  • Operational management, structures and processes
  • Useful tech tools for invoicing, scheduling and task management
  • The nature and mode of production of free software

And these are just some of the skill sharing sessions! We did a whole heap more on what the name of our network should be, planning the next retreat, how we can work together, what skills there are within the network, and how to understand power and privilege at work (salient for a group of mostly white, middle class men!)

A week on from the retreat, Cooperative Technologists is a live-and-kicking network with over 30 tech co-ops in the UK. We have our own wiki, our own (interim) logo, and a load of new opportunities to work together and be better companies.

From all of Outlandish, thank you to everyone who came and made it such a special week – we look forward to seeing you again soon. And for everyone else – watch this space. Tech co-ops are where its at!’

 
wortley hall, retreat, coop tech