Sunday, 13 October 2013

Web design for academics, part 1: making a website

In this post I'm going to share all the resources that an academic (or anyone else) needs to make a simple and effective project website from scratch using html and css. I don't think it's necessary to explain why - at a time when scholars are increasingly keen (and encouraged) to share their research beyond the academy, basic web skills are an extremely useful skill. It's something I've recently had to learn myself, and I wanted to share the tools and techniques I've used to do that, and hopefully save others some time and effort in the future.

It's been a long time since I've seen an academic funding application that didn't include a project website in the proposal. Of course, you can always use wordpress.com or blogger, but sometimes the lack of customisability on these sites can be an issue, and anyway, it's great to know how to do something properly! I'm not going to go into the nuts and bolts of code writing and web design here - that would require far more space than one blog post provides. Instead I'm going to point you to a few fantastic resources that really helped me, and outline a series of simple steps that will lead you from no-IT-knowledge-at-all to master of your own up-and-running project website.


Step 1: Find your way around the internet 

Cost: free

The first thing to do is to get a feel for the basics. A great way to do this is to sit down and enjoy the excellent video series Don't Fear the Internet, an artists' guide to web design made by the talented (and adorable) Jessica Hische and Russ Maschmeyer. Unfortunately the series isn't complete, so it won't tell you everything you need to know, but don't worry, I'll make up for the shortfall!


These short videos are clear, simple and entertaining, and after less than an hour you will have a good grasp of the nuts and bolts of making your own website.


Step 2: Get a snazzy text editor

Cost: free


You could write your html and css in your common-or-garden text editor provided on your computer, but it's way easier if the text is marked in colours so you know what is doing what, and it's easy to spot any mistakes. I use TextWrangler on my home computer (a Mac) which is great, and Notepad2 on my work computer (a PC) which is good, but not quite as good as TextWrangler (it has no spellcheck, so it's easy to make typos). There are loads out there, so you can either go with my choice or make your own.

Tip: Make sure you name all your html files only using lowercase letters - this will make your life easier when it comes to uploading your files to the internet. Also, give them sensible descriptive names, as file names will become part of your web address.


Step 3: Step by step instructions

Cost: Around £15 (or free if you get it from a library)



Sorry, this step costs - but I promise you it's worth it. There are free instructions on the internet but I've never discovered anything as simple, easy to follow or effective. Once you've got your text editor and you know the basics of the field you're working in (thanks to Don't Fear the Internet), this excellent book by John Duckett will tell you everything you need to know about writing your website using html code (for web content) and css code (for web design). Start at the beginning, and by the time you get to the end you will have made a wonderful website that looks exactly how you want it to. 

With the resources above, you should be able to write all the code you need in your text editor (downloaded in step 2), where it will look like this:


To see how the site will look on the net, just drag the text file from your desktop into an open browser window, and the site will magically appear in all its glory, just as if you were on the internet. The text above is a sample from the very site you're looking at now - this blog.

Tip: As an addition to all the info in the book, here you'll find a handy guide to the code you'll need for the colours you want on your site. 


Step 4: Troubleshoot

Cost: free

With the all the clarity of John Duckett's instructions, you shouldn't really face any serious hitches in putting your site together, but sometimes your code just doesn't seem to work and your dragged-and-dropped file really doesn't look how you want your site to look - your menus are skewiff, your font isn't right, or your boxes are floating all over the place. You know it's probably just a silly mistake, but can't for the life of you work out what.

A great way to troubleshoot is using Google Chrome. Drag your file into a Chrome window, right click and select 'view element'. Direct your cursor to the offending bit of code at the bottom of the screen and it will be highlighted in the 'proper' website at the top, so you can see exactly how what you have written corresponds to what you see. You can inspect elements in all browser windows, and I'm usually a Firefox fan, but Chrome has a useful colour coded highlighting system (see picture above) that makes it really easy to spot layout mistakes, so is my favourite browser for this particular use.


If you still can't work out how to fix your problem, there's no better resource for troubleshooting than Stack Overflow. I can only assume this site is run by a team of professional internet ninja-angels. You ask a question, copy in your code, and within seconds a professional internet ninja-angel will give you an answer that solves it. Quite often, other people will have had similar issues, so it's always worth googling your problem first to see if anyone on Stack Overflow has already dealt with it.

So there you go - acquire the resources and follow the steps above, and you should be able to make a simple, effective project website to exactly your own specifications in no time at all. I'll let you get on with that, and in my next post I'll talk you through the next steps - getting your site online.