By Kirsty Munro
Everything you need to know to survive a conversation with your tech team.
Working as a freelance writer for a digital agency, I was blissfully unaware of the rest of the work process. I delivered my words and my invoice, and I was out of there. But the first time I worked on a website at FunkyCorp, the designer asked me to make a wireframe. A what?
Since then, I’ve learned a whole new language. I’m lucky to work for company that offers me the opportunity to get involved in all stages of site design. Knowing how it all works helps me to write copy that will better serve the reader, and it’s interesting to know how all the parts fit together. Now, when I have meetings with our software developers, designers and digital marketing team, I’m not frantically Googling every second word.
Here’s my cheat sheet:
This is pretty fundamental – a content management system is a place to store data. As a writer, you might be asked to write your stories in a CMS that makes it easier for the production team to upload what you have written to the website.
The basic structure or plan of a website – what do users see first on the page, where are the different elements located on a page, what items should go in a drop-down menu…An understanding of the wireframe is really important before you start writing. You need to know where the text will go and if you don’t explain this topic here, will it be covered somewhere else on the site? The easiest way to get a basic wireframe is to sketch it out with pen and paper, then you can show it to your designer or developer and adjust it together.
This is all the elements that are going into the website, with a hierarchy. This will help you work out how to get from A to B and how many pieces of text you will need to write. At FunkyCorp we create a lot of websites for tourists, so the sitemap usually includes essential topics like “Must-See”, “Plan Your Trip”, “How to Get There”, near the top, down to topics like “Cafes in Tokyo”. You can sketch it out, but it’s probably better to design a sitemap in a spreadsheet, so you can assign columns to different levels (how many times a user has to click to get to the next bit of information). Tip: don’t make people go further than about three levels or they’ll get frustrated and leave the site.
Search Engine Optimization: the keywords and phrases that will help search engines find your page and drive more traffic to your website. Does this mean you just crowd an article with key words? Nope. Hierarchy of information helps: start with the important info first. Compelling content that answers your reader’s questions is also key, and if it gets shares and links that will help too. You do need some keywords that will be found by searchers – you can use keyword finder applications to see what words people are searching for around your topic. An easy-to-navigate site will also rank higher in searches.
This is a short snippet of information around 155 characters (it’s actually an HTML tag, but don’t worry about that), which will get someone to click on your website when it comes up in a search. In other words, it’s a short sell. Keep it simple, to the point, truthful and written in active voice. And include a keyword.
This is how the website will look on different sized screens and devices. You don’t want to write a thousand words of copy without breaks if most of your users will be scrolling through on a smartphone.
Hyper Text Markup Language: now you know what it stands for, you can ace the next pub trivia night. It’s not a programming language like Python or Ruby (never mind!), but a system of instructions to control formatting. Do you need to know this? Not at first, since most content platforms like WordPress have a simple visual editor—you just type in the text boxes, insert a picture or two and you’re done. HTML gives you more options for the look of your page.
Front End vs Back End
Don’t blush, this is just developer-speak for the people who write code. The front end is what the client or user will see, including user interface or experience. Back end is how the site works – basically all the bits you can’t see. And for extra points, a “full stack” developer is a generalist who can do both.
Breadcrumbs and Hamburgers
Sadly, we are not talking about food. Breadcrumbs are those words at the top of a web page that show where you are, and how to get back to the beginning. These are useful when your website has a lot of levels. Click on one of these words and you’ll get back to that page. For example: FunkyCorp>Blog>Talking Tech
A hamburger is that little icon on the top left or top right of a website that indicates a menu without taking up much space. The three short bars look a little like a hamburger. Some users don’t like it, as you can’t see what items are there until you click. There’s been quite a debate over the merits of the hamburger over the years. And now I’m hungry.