Continuing my post about the web design for Pockets Full of Fun. Compare and contrast old design with the new.

The hardest parts of the site were actually two of the main pages: the News/FAQ page, and the Contact Lisa page.

News/FAQs

The News/FAQ page was an idea to converge the FAQ page of Lisa’s original site with her blog. It seemed logical to me to put them in the same place, and not have an extra menu item lying around. I wanted the navigation to be simpler than her original design. But also: Pixie, the program used on the site, is actually a blog program. It seemed logical to kill her Blogger account, and use Pixie as the blog, that way the visitor always remains on the same website and doesn’t need to scramble around to figure out where her site is/has gone. Also, I would have had to create a new theme just for Blogger, so it was just more logical to do a redirect from her old blog than to rehash a theme I just made for Blogger’s particular quirks.

The News/FAQ page was difficult partly because Pixie isn’t particularly theme-orientated. Although it’s designed for simplicity, from a design stand point, simple isn’t always best. Pixie uses one theme across every single page on the site. (Far cry from b2evo, what I use on my site, which allows a theme per page) How the theme works is that you have one single piece of code that calls stuff, no matter what page you’re looking at, and then you work with CSS to show/hide those things. So if I want, say, the date a post was made showing only on the News/FAQ page, I have to have the post date code on every page - and just hide it with CSS on every page I don’t want it to appear. This is more than a pain in the ass than it sounds.

But the major problem of the design was this: how do you make a flexible-height design for a blog post, using a circular background? I’ve used ’round corners’ through CSS before, like on the School of Puppetry comments, but that was with rectangles. I discovered that if you use the same solution for circular backgrounds (that is, dividing the image into four - with top left, top right, bottom left, bottom right - and a middle section for the actual post) the edge of the bottom of the circle never quite matches up with the actual bottom of the circle. It’s kind of hard to explain in text, but imagine the left side of a circle - the arc is wide in the middle, but curves in at the top and bottom. If the post is the same height as the total arc, the pieces match perfectly. But if the post is shorter than the height of the arc, then the pieces don’t match at all, and you’re left with an image that juts out into nowhere.

The trick in the end was to use tables, which meant adding a new piece of code to the template. This of course, due to Pixie’s one-template-fits-all thing, meant I had to go back and do a lot of redesign on the pages I’d already finished… mainly because IE sucks.

At any rate, I finally fixed it all with great difficulty, only to discover that Pixie’s core commenting system doesn’t work. At all. Not wanting to spend a year hacking code that should work out of the box, and not getting any support from the woeful Pixie community, I gave up and simply added Disqus comments to the code instead.

Contact Lisa

The Contact page, however, is quite possibly the most work I’ve done on the template and in Pixie, altogether. See, Pixie’s core mail form didn’t work either. And again, the response from Support wasn’t forthcoming. Pixie’s mail form is actually a ‘module’, an additional plugin that you can add to the site. Fortunately on their Pixie download page, you can get your own module template. So I did, and then proceeded to find whatever mail form tutorials for PHP I could on the net, using trial and error to figure out what worked and what didn’t. And literally pasted together bits and pieces from various tutorials to make my very own mail form. I think I count about 7 things I taught myself (not including Pixie’s temperamental coding for modules. I’ve never coded a plugin for b2evo, so this was indeed a first): making a mail form; adding validation to prevent empty fields being sent through and of the right format; a spam filter (which is actually hidden); figuring out how to add the contact info provided in Lisa’s user profile; adding a spam filter for the email address shown on the page; adding in headers to the email sent so it has a subject and a ‘from’ address; adding IP address collection to the mail form… That’s pretty awesome considering I had no idea what I was doing or if it would just totally break Pixie. (I also love that there are so many free tutorials out there and a bit of a Google can lead you to them. Seriously, everything I know about websites I got from other websites!)

… But that’s only half of the Contact page. Lisa had a calendar - really a list of dates/places - on her original design, which showcased where she was going and when. I thought a calendar, a proper monthly calendar, would be a good thing to have on her site. It allows people to check her availability before making a booking, and it seemed logical to add this to the Contact page - instead of a separate page as with her original design. Pixie, un/fortunately, came with an events module. But it also listed the events rather than displaying them like a monthly calendar. Looking into the code Spending a week staring at the code and a whole bunch of PHP events calendar tutorials, it was clear I both had no idea how to massage the module into an events listing, and that Pixie has a stupid method of calling the date for something.

Completely frustrated that I was on the last 6th of the design and had no idea if I could actually complete it, I went hunting for design solutions. Maybe there was a novel way of doing a calendar which didn’t involve me learning PHP from scratch. (Events calendar options abound on the net, but by far 95% of them are separate programs with or without a payment fee, and then 5% of them that were tutorials I couldn’t figure out how to implement) I spent some time browsing Smashing Magazine, my ‘go to’ place for web design info. And happened across something I’d seen ages ago, but never really thought about.

It was a link to http://all-for-design.com/portfolio/#contact. And an idea was born!

The biggest problem with an events calendar is, and I hope she will forgive me for saying it… Lisa. She’s not very net savvy, which is fine because we chose Pixie for its ease of use. But any events calendar requires it to be extra simple, not just for her, but for her visitors, most of whom would be low-tech teachers or librarians. Which is why I wanted an events calendar that worked with Pixie’s core, because then all she’d have to do is add a date, description, and press save. Something that was visually easy to use from the front-end POV too. But it was clear that my coding skills weren’t up to that: so I needed a solution that did three things. 1. Be simple to use. 2. Be something I can create. 3. Be pretty.

The All for Design website had a simple solution that covered all three problems. What if I just created a page that can be edited in the backend of Pixie, with a table full of cells. Each cell can be filled with a colour, one to represent an empty day, and one to represent a day with bookings. With some fancy drop-down effects - which I’ve had a little experience implementing - you could view the day’s bookings. Lisa only has to enter the event info into the cell in the backend; everything else is done on the frontend by my coding. … It’s actually slightly more complicated than I make it sound, but it’s as simple as I could make it. Lisa has some very clear step-by-step instructions that I’ve made, in order to explain how it all works… since it isn’t as easy as entering a title and date and pressing save. But it’s as close as I could get to a decent solution, which doesn’t involve a month fiddling with another program.

All in all, the Contact page is both my favourite and my least favourite page of the entire site. My skills were challenged, and I came up with a good solution; but it was a nightmare to get there. Really, the trick to the entire page was to set aside my thinking completely. I got so stuck on the idea of an events calendar, it never occured to me -  until I was desperate - to seek an alternative design solution. This can be applied to whatever we are working on creatively speaking: Never be afraid to chuck away the obvious, for the better and more novel solution.

…. This completes my summary of the design process. Once everything was designed - and it was done on the back of my domain name - we proceeded to kill Lisa’s old host (Microsoft Office Live) and move everything to a new one. This went exceptionally smoothly, except for one thing. Transferral of the domain name. I had done this before (and with the same registrar to boot) so it should have taken no more than a day. It took a week! Why? Because in the email notification from the registrar, it said “don’t do anything. Click the link if you want to reject the transfer". That bolded word is important, because apparently, they meant “click the link if you want to approve the transfer". Naturally, neither of us read the email and thought to click the link, having specifically being told not to do anything. After a week, she put in a call to the registrar, who corrected themselves.

Since the redesign reveal, the site has received many compliments from Lisa’s friends, family, colleagues and clients. Lisa herself has been very happy with the new look, and despite some teething problems, seems to be using it all with ease. I think I can call this my first successful web design! And you know, it’s a nice feeling helping other puppeteers out. Mainly for me, it was all about the learning experience. I not only know I can do this, but I can walk someone else through it with a modicum of intelligence and with the ability to precisely articulate my design reasons.

Continuing my post about the web design for Pockets Full of Fun. Compare and contrast old design with the new.

I discussed the basic design premise in my first blog post on this: I won’t restate it all, but basically the aim of the design was to create an updated look that fit with Lisa’s new logo; and to create a simpler, easier to understand system of presenting content.

For the most part, design was just a continuation of how I created the home page. But there were some things I’d like to document so I know how and why I did it a certain way.

It should be mentioned also that Pixie (the program used on the site) has two options for creating pages.

1. A static page, allowing only one section of content to be presented.
2. A ‘blog’ or dynamic page, allowing you to create numerous posts.

Technically speaking, a static page is just a single post page of the dynamic template.

And also worth mentioning: My screen resolution is 1280 X 800. But Lisa told me her screen resolution was 1024 X 768, and the majority of the ones in libraries and schools that would be looking at her site, was . So in designing the layout, it had to be flexible enough to work for both sizes, and everything in between. A lot of compromise happened in terms of placement of content because of this.

Home page

There wasn’t much to tweak for the home page once I created the draft design. I explained the design theory in the first post, linked above. However, there was one addition that I added in late: an announcement area. This is a small area on the page where Lisa can add an announcement or something. I thought it would be useful since many times people hit the home page and not necessarily view other pages where they might see some late breaking news or exciting feature. Lisa can turn this announcement on and off in the backend in a simple push-button fashion, and edit the content as she would anything else.

About Lisa

Lisa’s original site had two about pages - it was clear from her design and content that a lot of culling was necessary - so I reused the home page design and reworked the text into a readable few paragraphs. I also made sure to use one of her professionally-taken photographs as a headshot.

What I do

When I came to designing the page that introduces people to Lisa’s shows I got a little stuck on how to best present them. She has some 8 or 9 different performances, all adaptable, and a variety of target audiences. Her menu navigation wasn’t really clear, and her main ’shows’ page actually had info for her library show on it; so I decided that it would be necessary to have a small description and image of each show, which then linked to a hidden page for more info about each.

Initially her website had these shows separated into sections based on the target audience (ie. churches, schools, etc.), but I thought it was too confusing to navigate, especially considering her shows often cross-categorise. It was a new experience for me, having a discussion about how best to present the content; even more so for Lisa, who knows very little about this kind of stuff. At times I felt like I was pushing in one direction, but I always gave Lisa enough information so she could make up her own mind on which way to go, and wanted to defer to her as the “buck stops here” person.

But anyway, my thoughts were that it would be more attractive to a potential client to have interesting names for the shows. Many of the good puppetry websites out there list the actual names of the shows ("We Built This City” or “Cinderella") whereas many of the bad puppetry websites state boring things ("Library programs", “shows for church"). Now to me, the names of the shows are ten times more inviting than the target audience names. For a start, the visitor is immediately given the theme or content of the show from “Cinderella", along with an unspoken hint at audience age and appropriateness. With “library program", I have no idea what that means or what it is. My concern was that a page that introduces you to puppet shows should be enticing as well as descriptive. In the end, Lisa agreed.

I think this really helped: it clarified some points I had been reading about usability on the net and the way in which language can be used to make ease of use better. This is kind of like what I had learned in my degree on editing too, in that if you make a suggestion for a change, you should understand why you want it changed and give a suggestion for a better way of doing things. In the end, I was happy to defer to Lisa if she didn’t want to head in that direction, but at least I was able to discuss it with her in an informed manner.

Singe show page

Each individual page about a show has some basic info: top left, image and description of show (and links to the bottom sections of the page); top right, short testimonial, link to contact page and link to bookings calendar; bottom right, images, news clippings or video; bottom left, technical info about the show.

Originally Lisa’s shows were a haphazard mix of info and images, an over-reliance on testimonials instead of descriptions of the shows. This was another point we discussed along with show names: it’s hard for a client to get excited and take action to book you, when they have no idea what the show is about. Lisa gave me descriptions of the shows, and from there the rest was easy.

My main idea was to present a description and image up front, since that is what most people will be looking for in searching for puppet groups to book. They want to know what the show is about, whether it’s age appropriate, and whether it’s venue appropriate (ie. for libraries, for churches, etc.). People are more likely to book if they think others have and enjoyed it, so the testimonial was a must - particularly as Lisa had some great comments on file. That too went at the top.

Making use of info I’ve read on Smashing Magazine about how people tend to be drawn to the bottom right corner of the page, I put two ‘action links’ there. (Action links are where you call people to action, ie. “buy this", “call now", etc.) One is large and specifically differentiated from the rest of the style of the site: the “make a booking now"; the second, smaller but just as important, “check Lisa’s calendar". Both invite you to do something, and the first is also given a sense of urgency with the use of the word “now".

Beneath all of this are the less important sections: the technical info, where Lisa can give the potential client descriptions of other things, like how much space she needs to set up, whether special gifts are included in the show, links to her promo pack, and so forth. And to the right, she can add images of the shows, images and links to sites that have reviewed her or given her publicity, and video clips from Youtube.

Now each part of the page has a specific use and meaning, rather than content being added at random and in random places.

Fun stuff

As with the show pages, Lisa’s original design had her fun stuff broken up into separate pages. However, there wasn’t a lot of fun stuff to warrant such separations, so for the most part, I put them all on one page - reusing the ‘What I do’ design. This included cutting down the info on her books (Lisa’s also a published children’s book author), for which she hopes to create a separate site for anyway.

Gallery

Lisa had a lot of amazing photos of her work, along with shots of grinning children. They were placed haphazardly around her original site, and though I didn’t want to use too many images, I couldn’t allow myself to cull them altogether. So I thought a simple gallery page would be useful. Knowing Pixie didn’t come with a gallery component, and not wanting to install additional programs - for which Lisa would also have to learn to use - I simply created a dynamic page with three posts in it. Each post has some text and a table; in the table cells Lisa can insert images and link to the larger ones. It’s not the best way to present a gallery, but it certainly is the simplest!

You’ll notice that for most of the pages, there’s no “one way” I’ve placed those big white circles. For the most part, it has to do with trying to present the content for each page in a way that both fits it all in, and leaves ‘white space’ (aka margin, room, padding, etc.) so the visitor isn’t overwhelmed with stuff. I wanted the important things ‘above scroll’ (aka you don’t have to scroll down to view it), which meant juggling what went where. I actually don’t mind that it’s a bit hodge-podge, because that means that each page is a little different, and you’re not constantly wondering which page you’re on.

Meet the cast

Lisa’s page for her ‘coloring page’ (a graphic specifically for colouring in and using as a rainy-day activity) was badly formatted. Instead of having some way to print the image out, it was just presented on the page as content. So I converted the image into a pdf, and then also added the images of the characters to the page so that people can ‘meet the cast’. I also added in the names of each character, since they are not listed anywhere else in Lisa’s content.

… There were also a couple of pages which I removed entirely - the news and clippings page, and the client testimonials - all of which the content went into a downloadable promotional package. I thought the content, although useful for some people, did not warrant their own pages. The info seemed to me to be ‘additional’ content that if needed, people could request or download.

You’ll also notice in the above that I haven’t discussed the contact page or the news/FAQs page… that’s because they’re special and I’m saving them for the next post. Basically, these were the pages that required the most work and will require the most documentation for future reference. UPDATE: The next post is here.

Continuing my post about the web design for Pockets Full of Fun. Compare and contrast old design with the new.

Before I explain in more detail the way the site has been designed, I wanted to document the choice of program for the site and my thoughts on using it. I’ve used this program for the first time, and so have some impressions of it I want to remember for ‘next time’. (If there is one)

So when Lisa said ok to let me redesign, we discussed what options were available in terms of creating a site that she could use easily. Initially I suggested using b2evo, since that’s what I’m most familiar with; however, it turns out that she was using Microsoft Office Live as her web host. MOL is one of those free/upgrade website builders, which means you use their functionality or you don’t use it at all. I did some basic investigation on their FAQs and forums, and it looked like I could create my own templates using their site builder. Sounded easy enough.

But, as with everything else, Microsoft proves themselves incapable of doing anything that is even remotely web developer friendly. Their template builder amounted to nothing more than a ‘choose how many columns’ thing and style with CSS. Oh, and by the way, the CSS works for every single page, not just bits you select to style (in other words, their code is totally devoid of using classes or IDs to differentiate between sections of code). Their backup system creates files that you can only ever use on MOL: and only if you have less than 10MB of space used does it save in one file. Naturally, if you have more than that, you have to go through and manually tick files which you want to save - no add all, or select none… And worst of all, if you want to use transparent .png files, MOL saves them with an ugly black background. (Because of course, we all know that IE hates png transparency)

Suffice to say after a glancing attempt at designing a template at MOL, I suggested to Lisa to find another host. The fact is that you can pay the same amount for an actual web host as you can for these site builders; but receive far better functionality and more flexibility while you’re at it.

At this stage, I want to point out that I felt I was treading a thin line: I didn’t want to push Lisa into moving, since that creates a whole lot of havoc, plus doing things you’re not necessarily comfortable with if you’re not as good at using the net. But at the same time, I was fully aware of MOL being so crappy, even other website builders would be far better.

During this time, I scouted the free programs that are on offer as installations on my own web host. There are quite a number that you can install directly, and I thought if nothing else, one of those would be appropriate. b2evo was deemed too complicated to use by Lisa (fair enough, it does look crazy in the backend, even though it’s extremely simple to run), and many of the other blog platforms out there looked just as confusing.

Finally I found Pixie. It is the ultimate in simple blog platforms. (I started off looking at blogs, just because it’s the letter ‘B’ and ‘CMS’ comes after ‘B’) The backend is so uncluttered it’s not hard to do anything within a few minutes. In fact, after about 15 minutes, I was confident enough that this would work for Lisa’s needs. I could design my own template; the program itself was easy to use; and it would allow the flexibility needed to do some nice design… stuff you couldn’t do on MOL.

Lisa agreed, and it was decided that I would set Pixie up on my site so I could work on the design, while Lisa investigated new web hosts.

Pixie itself, in hindsight, may be incredibly simple to use from an administrative perspective, but from a design perspective it’s not the best thing in the world. In fact, it’s quite stupid. The developers decided that a single template should be used across the entire website. This may be common practice, but the way they did it was frustrating.

Basically, the whole template is designed using CSS only. If you want function A showing on page A, then you must also have function A coded into page B, page C and so on. Then you must use CSS to hide function A from page B’s view. A real world example: the home page actually has the comments from the blog page loaded… but you can’t see it because I’ve had to hide it from view.

Coming from b2evo, where you can do a template per page, that was very very annoying.

The other thing was that Pixie is both underused - and therefore not having much user support in their forums or from their developers - and underdocumented. Discovering many small bugs, I gave up on requesting help from the developers (who only recently announced they sold the program anyway) and attempted to solve things on my own. Basic things that should have worked didn’t, or were buggy. The comments system for the blog didn’t work: I gave up and implemented Disqus. The contact form didn’t work: I gave up trying to debug it and made my own from scratch. All in all, I don’t think I’d work with Pixie again unless it was absolutely necessary. … Although having said that, it’s still a billion kajillion times better than using Joomla - the program I used for UNIMA Australia.

… In the next post, I’ll talk about how I designed the individual pages, and my thoughts behind some of the ways I present Lisa’s content. UPDATE: The next post is here.

‘Pockets full of fun’ is a great name for something. Actually, it’s a great name for a puppetry company. Actually, it’s a great name for an American puppetry. … Hmm, can you guess where this is heading?

Normally I don’t really write about American puppetry, given that I like to stick with talking about puppetry a bit closer to home. But on occasion I will because they’re up to something awesome. In this case: I redesigned their website!

I think I can officially call myself a web designer. Lisa Laird and I had been in discussion about a puppetry ebook I’ve been working on, she being kind enough to be one of a group who are proofing it, and in passing mentioned that her site could do with a makeover. She had recently had some new graphics/photos done, and I suggested her website was woefully in need of an upgrade so that the graphics fit in. Yep, I did an unusual thing for me, and put myself forward for some web design work… for a complete stranger. On the other side of the world.  … On a side note, it’s amazing how many puppeteers out there have bad websites. I know it’s expensive to do and all, but there as so many of them that simply need an overhaul into the 21st century. Or at least past the 1980’s/1990’s “let’s just put all our shit on the web without any thought of how it looks or how people navigate” convention. (Lisa’s site not included, hers was actually one of the better ones I’ve seen)

Actually Lisa agreed with me, and about two days after starting the conversation I sent her a draft design (the home page, see image above) of what I thought could work; with no commitment to use it of course. She loved it, and I started work at the start of December. – That’s where I’ve been all this time. Technically in between I was supposed to be doing some puppet building videos too, but a combination of flash flooding (remember, I needed good weather!), spiders (don’t ask) and distraction on the design, made it hard to get any of that done.

Anywho, I’m going to write up a series of posts explaining the design process, mainly for my own archival purposes. There was a lot going into the design that was created by winging it, and it’s useful to me, especially on my first official design, to write down what I did and why.

There are a number of things that I did for the first time too: in testing out my graphics and working on layout for the draft design, I also officially hand-coded, start to finish, everything. My first actual time I created a site from scratch. The html, the CSS, and made a nice little .html file to send to Lisa for approval. Of course, the site had to be extra simple for updating, so the actual site isn’t from scratch but uses a blog platform instead. But at least I coded a whole page from scratch!

The process of building the site has been interesting. The draft design was only for the home page, so the other pages I’ve had to design based on some vague ideas in my head, the overall layout, and the content structure. More than that, the process was incredibly good - especially in comparison with previous half-hearted customers for puppet commissions. Lisa was a pleasure to deal with, and it just goes to show that puppeteers really are the friendliest bunch. Lisa and I had in-depth discussions on a number of design issues, which I’ll go into in other posts. I have to admit to feeling guilty about one issue: although Lisa and I had frank and detailed discussions on some aspects, I’m afraid I don’t feel I was giving her enough information about how I was designing the whole of the site - hard to do when I  had very little idea myself, but still, something I could have done better.

… But to the actual design:

The initial idea for the site was based on three aspects: Lisa’s new logo design (incidentally by the same person who made both of mine); Lisa’s company colours, blue and yellow; and the name for the company, ‘Pockets Full of Fun’. As soon as I thought about tying in the name with the design it was obvious I was going to go for a “what’s in the pocket?” kind of thing. I really like the idea of using the concept of being surprised by whatever is in your pocket (er, not in that way! ). From there it was a quick hop to figure out that the colour blue would work perfectly for a denim background, and the yellow for highlights. In this case, stitching along the bottom of the page for an additional suggestion of denim and clothing. And even quicker from there to figure out that the logo would be perfect for menu navigation, with little pop-up secrets on the mouse rollover. (My fav. is the ‘news and FAQs’. A complete coincidence that I happen to use a graphic that makes the menu look like it has a question mark over it) The white circles on the page, in my head, represent the lining of the pocket. But really, I just wanted to use some white space so I could present the text clearly.

Second to this was my aim: to create a design that was functional, easy to use (for visitors and for Lisa, who is a web novice) and well laid out. The biggest problem with Lisa’s original design was that there was no rhyme or reason for where things were placed on the page. This made it hard to find the important information: I wanted to strip away all the unecessary stuff and leave the visitor with no confusion as to how to find what they wanted to know. For the most part, this mainly meant ensuring the design itself was clean, the eye drawn to important areas of the page, and the text clearly delineated. Lisa’s original site suffered from not following the “less is more” maxim; or rather, following the “add everything at random” maxim. I wanted to make sure everything was being added for a purpose, and in a way that seemed purposeful in terms of placement, colouring, etc. (On a side note, and whilst I remember: I distinctly wanted to use Lisa’s images too. Not just the cartoon ones, but the photos of her working. There were plenty of wonderful pictures of kids with grins, and Lisa working with children, and it was very hard not to use everything she was providing. Seriously, she has some great shots for promotional use)

The good news is that already, many people have commented how much they like the new design (particularly the menu icons), and Lisa’s extremely happy with it… which of course, makes me very very happy too.

In future posts, I’ll discuss a bit more about the design, and how I came up with everything. In the meantime, I have uploaded some ‘before and after’ shots of the site: browse through them and see how the new design is an improvement over the old. And go check out www.pocketsfulloffun.com to see the real thing! UPDATE: The next post on the design is here.