Create a One Page Wonder Website Workshop at HCGC

The key message for this workshop was Keep it Simple. We wanted to avoid over complicated processes when creating a website for a new project. To do the workshop was divided into three parts. 

  1. Chat about us and our experiences with websites
  2. Generate ideas on paper and talk about an upcoming project that would need a website
  3. Play with technology that will allow us to share these ideas

digitalstories_hcgc002

Part One – Introduction

We shared a bit about our experiences of updating or creating websites. There were people with different levels of knowledge here so we tried to keep the talk accessible but it was also good to go into some details. I also made up a story to illustrate the difference between wordpress.com and wordpress.org framing it as a battle of money grabbing Americans versus a plucky local community loving hero. No resemblance to persons real or imagined should be inferred. 

I shared a bit about the idea behind a one page website. Sometimes,  simple approach can avoid common Pitfalls of websites

  • Too much information, a complex structure with many pages and posts
  • No clear audience in mind
  • Not clearly directing your readers to what you want them to do, too many choices

So focusing your message to just one page can be a helpful starting point. 

This is not the equivalent of a blog or a website for an organisation. These have their places. But this is an activity which can be very productive at helping you create a targeted approach to communications.

 

Part Two  – Group work to generate ideas

I asked groups to 

  • Pick a project to do a one page website about. 
  • Imagine your target audience. Who are they and why are they interested in your project.
  • What about secondary audience think of some key facts or messages you want to communicate.

Cover Story Activity  

We explore the above using a template below. It’s to generate ideas around the key messages of your project imagining you are creating the cover of a magasine. What the the audience of the magasine. What is your Cover Title? What are 2 Big Headlines, etc. 

httpatomoreillycomsourceoreillyimages653937

http://gamestorming.com/games-for-design/cover-story/

 

  • “Cover” tells the BIG story of their success.
  • “Headlines” convey the substance of the cover story.
  • “Sidebars” reveal interesting facets of the cover story.
  • “Quotes” can be from anyone as long as they’re related to the story.
  • “Brainstorm” is for documenting initial ideas for the cover story.
  • “Images” are for supporting the content with illustrations. Choose one that you may be able to find online or an image you know you have.

Part Three – Creating a Website using WordPress or HTML Code

We then moved quickly to ask participants to make a choice to use WordPress.com or HTML code as a choice of how to create a one page website. All three chose WordPress, but I persuaded one group to try Thimble. Here is a summary of the two approaches.

 

1 – Use WordPress to create a one page theme

Creating a one page website with WordPress is more about turning features off, than using them. This may only make sense if you are used to the system but once users had chosen a blog name and address and logged in, I asked them to follow these steps

  • Choose a theme with strong images
  • Remove Menus from the page
  • Delete all posts and pages apart from one page
  • Set a static front page for your blog to be this one remaining page
  • Customise Widgets so that you only have footer messages not sidebars
  • Customise your page by adding a ‘featured image’ 
  • Edit the text of home page (add footer widgets) to put in your messages from the previous activity.

2 – Thimble to experiment with HTML template. http://goo.gl/MVywYC

A way to demystify the process of creating code. It is quick but can be a bit fiddly. Also if you make mistakes of leave the page it can be tricky to get those changes back. To counter that it is worth signing in and saving changes as you go along.

Debrief

In the intro I did a quick technical aside, I did a summary of the advantages of HTML websites compared to database solutions. I’ll try to find links to relevant articles about this or ask Kim Foale community techie to help explain via an interview.

I think that this could have been dropped from the introduction of the session as it veered into being a technical distraction.

That could be a session in itself including issues like

That could be a session in itself including issues like:

  • What human resources do you need to run your own hosted website?
  • What are your choices – pros and cons for web development?
  • Do it Yourself or get a tech to help
  • WordPress, Drupal, Wix, HTML