This week I launched a mobile-first redesign of my SEC digital calendar website which is a resource for the Scottish Episcopal Church to enable anyone to integrate this year’s church calendar and lectionary with their digital calendar (e.g. Google Calendar).
Continue reading SEC digital calendar website is now mobile first
Over the last few months in the evenings and at weekends, I’ve been working on redesigning the Pittenweem Properties website for friends here in Anstruther. The site launched a couple of weeks ago.
Pittenweem Properties offers high-quality self-catered holiday accommodation and property management services in and around Pittenweem. They currently manage properties in Carnbee just outside Anstruther and Pittenweem. But their portfolio is growing and for good reason — the properties they own and manage are to a very high standard and in a beautiful part of Scotland: the East Neuk of Fife.
The site was quite fun to build.
We used Trello for communication and project planning, WordPress (of course!) as the content management system, and the Divi theme from Elegant Themes which allowed me to very quickly design and build the site. I also changed the built-in projects custom-post-type to properties using the method I blogged about in March: changing the Divi projects custom post type to anything you want.
For the booking calendar we turned to a premium theme: WP Booking System which we found intuitive and offered most of the features we needed:
If this plugin had also allowed online payments, say via PayPal, then it would have been absolutely perfect but as it is we’ve been really happy with the functionality and usability of this plugin.
There is a free version of the plugin, but it offers only one calendar and has customisation limitations. The premium version costs only US $34 (approx. GBP £21.50).
While the site is now live there are still a few bits and pieces to do, such as keep an eye on analytics data and try to improve search engine rankings.
Websites are never really finished, are they?
It was a fun project to work on. Time to focus on optimising family finances and admin, and cracking on with writing my book.
Last month I said that I would soon be redesigning and re-architecting my website, including this blog. It has now begun!
Something I want to do is standardise the URLs used on the site. Once upon a time I had an idea of using subdomains for all my mini-sites, so
I got as far as setting up my blog on a subdomain and I changed my mind. (Or got lazy, I can’t remember now.) 11 years later I have now decided to bite the bullet and move from www.garethjmsaunders.co.uk to garethjmsaunders.co.uk/blog. It’s potentially going to involve a lot of work (and a little .htaccess wrangling) but it will be worth it in the long run.
My plan was to create a new sub-site called “blog” but when I set up a WordPress multisite installation on my local machine to test how this would all work I encountered an unexpected problem. When you try to create a new site called “blog” WordPress multisite returns this error message:
The following words are reserved for use by WordPress functions and cannot be used as blog names: page, comments, blog, files, feed
Ah!
The workaround I worked out, however, is pretty simple:
Of course, if you want your blog to use a different theme than the rest of the default site pages you will need to use a multiple theme plugin.
Something that has been on my task list for the last few years has been to redesign and re-architect my website garethjmsaunders.co.uk. It has been a perfect case of the cobbler’s shoes: I’ve spent so much time making and fixing websites for other people that I’ve not had time (or energy) to do anything with my own.
Enough is enough. My last site design was in 2003, I think. That was over 10 years ago. In 2003 Internet Explorer 6 was the dominant web browser, the war in Iraq began, Concorde made its last commercial flight, Apple released Mac OS X Panther. A lot has happened in the years since then: web standards have been embraced, the mobile web is on the move, and table-based layouts are so retro!
The last time I built my site I hand-coded everything using 1st Page 2000 (how I loved that application) before eventually moving to Dreamweaver 4.0 as it automated asset-handling and rewrote paths more quickly than hand-coding everything. I had only just learned CSS 2 and was eager to put it into practice. My site still suffers from a very bad case of both ‘divitis’ and ‘classitis’.
And there’s not much room for expansion. When I created a mini-site to support my Blueprint CSS extras I couldn’t integrate it into my site. The same happened with my original SEC Calendar site.
And last but not least, there is a mild hotchpotch of URLs: a mix of sub-domains (www.garethjmsaunders.co.uk) and directories (/mahjong, /psion, /writing).
After a few months of procrastination and mulling things over, I now realise that I have a number of projects that I want to work on, but as each requires that my website be up to date it is now time to bite the bullet and re-architect.
My current plans:
Having delayed this for a couple of years it will be good to finally get these ‘shoes’ fixed!
When designing (or redesigning) websites I tend to follow a five stage process:
During the second stage (structure) I will focus largely on two aspects of the website’s structure: the overall site hierarchy and the structure of each of the pages, what are traditionally called ‘wireframes’.
To design the site structure, for years, I’ve used mind maps and my mind mapping application of choice is Mindjet MindManager.
I love MindManager, and each version just gets better than the last. An important thing for me is that the software interface doesn’t get in the way of capturing and organising the information. It’s packed with subtle but powerful features such as keyboard shortcuts and the ability to drag information from web pages and Windows Explorer directories).
When it comes to designing page-level structures I pretty much always start by drawing wireframes using a good old fashioned pencil and pad of paper.
Wireframes are visual guides that present a skeleton or framework for the information on the page. They are concerned more with where information and design elements should sit rather than how they look.
If you think of it in terms of architecture, the building blueprint will show you that the kitchen needs a window between the wall cupboards, and in front of the sink, but it won’t tell you what colour or make they are.
As I said, I usually start all my wireframe diagrams with a pencil and pad, but occasionally I want something that I can save, edit and share with others via email.
Until now I’ve usually used either Balsamiq or Mockingbird, both of which have limited, free accounts. But recently I’ve been trying out PowerMockup.
PowerMockup is a wireframing tool that integrates with Microsoft PowerPoint 2007 or 2010. It is essentially a library of PowerPoint shapes offering
And it is as simple to use as finding the element you want to use and dragging it onto your PowerPoint slide. The UI elements and icons can all be resized, and recoloured too which provides a great deal of flexibility.
Also, remember, although you are working in Microsoft PowerPoint which, by default, is set up for a 4:3 or 16:9 aspect ratio screen you can adjust the page setup for any screen size and aspect ratio. That way you are not limited to only designing for ‘above the fold’.
As a quick example, I mocked-up the PowerMockup website homepage using PowerMockup in Microsoft PowerPoint 2010:
I have to say that I was very pleasantly surprised using PowerMockup. Because it integrates with Microsoft PowerPoint I didn’t have to learn a whole new application: it was very intuitive to use.
I really like the design of the elements too. My main criticisms of both Balsamiq and Mockingbird is that their UI elements have quite a sketchy, cartoony feel to them; particularly Balsamiq.
In contrast the UI elements in PowerMockup are clean, unfussy and unobtrusive. While Balsamiq and to a lesser extent Mockingbird’s UI elements have a Comic Sans feel to them, PowerMockup’s UI elements feel more like something classical like Helvetica.
PowerMockup costs US $39.95 (approx. £25 GBP) for a single-user license, although obviously you also need a licensed copy of Microsoft PowerPoint 2007 or 2010.
The cheapest, standalone version that I can find, Home and Student, will cost you £75.00 GPB on Amazon UK), so you’re talking about a total cost of around £100 for one user.
If you already own a copy of PowerPoint 2007 or 2010, however, then you’re laughing and you may even qualify for a free license.
There are also two team licenses available: 5 users for US $119.95 (approx. £74 GBP), and 10 users for US $199.90 (approx. £123 GBP).
I’ve been genuinely very impressed with PowerMockup. What is not to like? It has a very extensive, very attractive, and very usable collection of UI elements and icons, and most importantly it’s really simple to use.
What might be nice is if someone could throw together a number of PowerPoint template files (with sensible background grids) to emulate the most common page dimensions, e.g. Blueprint CSS’s 950px width, 960 Grid System’s 960px width, plus some responsive-style tablet and mobile templates. Coupled with PowerMockup these could be a very useful, very affordable combination for small design studios and individuals.
I can definitely see myself using PowerMockup on the next design project I need to work on.