What is the Grey School of Wizardry?
The Grey School of Wizardry (GSW) is a highly interactive online school specializing in occult magick, metaphysical arcana, and the “Wisdom of the Ages.” The GSW is incorporated in the State of California as a non-profit Federally tax-exempt 501(c)(3) educational institution.
The school is a progeny of the Grey Council, an alliance of several dozen renowned mages and sages. Members of the Grey Council follow many different paths, with differing orientations and perspectives, but they all hope to spark the imagination, beauty, and power of the minds of seekers everywhere.
– Oberon Zell-Ravenheart, Founder & Headmaster
The old GSW website served the students, faculty / teachers and staff as the portal through which all studies and communication were handled. While this was fine for a while, it was eventually found to be lacking any kind of real public “face” and didn’t serve to help conversions between visitors and enrollees.
What does the school need in a front page?
In mid 2009 I had the thought that the school really needed a dedicated front page that had the sole purpose of being the first port-of-call for all incoming traffic into the school.
Given that the school had been operating for five years last August, it was imperative that the site be completed as soon as possible. It was also a case that I was getting married in November and I needed to get the site at least functional before I left for my honeymoon.
I had a flash of inspiration and set about working in Photoshop to mock up my design, ready for the all-important pitch to the school’s administration…
What did I have to work with?
The school site is built using PostNuke and operates within a fairly standard-looking “forum” design. It utilises the forum-like areas to host the social discussions and the permissions system to allocate user access to specific areas like Houses and clubs, etc.
There’s static sections for the serving of information that rarely changes, as well as allowing the storage and download of documents like the student handbook and the school paper, Whispering Grey Matters.
With the fact that the site is run using a forum software, you could naturally expect that there are several “themes” employed in the delivery of the site, and this creates an incredibly unstable and non-consistent view of the school proper. (The image above is that of the “Old School” theme, and is the default GSW colours when students/staff aren’t logged in.)
Why should the site change?
As I mentioned earlier, the main site url (http://www.greyschool.com) was serving up a page that had the general left sidebar, a middle section that displayed announcements from the administration and faculty, and the right sidebar that showed the login dialogue for students and various other controls.
This isn’t exactly what you want people to see when they happen to find their way to your site. It doesn’t explain what the school is, what it’s about, who they’re targeting and most importantly, it doesn’t confirm to the skeptics that the GSW is a serious wizarding and magick school, and not just an online role-playing Hogwarts-wannabe school.
The new site design was meant to take over being hosted on the main site url, while the school site took its place on “registered.greyschool.com”, which is the url for students, faculty and new people signing up to the school.
With this in mind, I was on to the first step of realising my ideas: designing.
The Design
The “Penkhaduce” symbol, designed by Oberon Zell-Ravenheart using three common symbols – The Pentagram, the Ankh and the Caduceus. This is the symbol of Wizardry employed by the GSW and is what I used to base my design on.
Taking into account the fact that the Penkhaduce is the symbol for Wizardry and is instantly recognizable that knows (about) the Grey School, I wanted to combine this with the other most common feature of the school – the Grimoire for the Apprentice Wizard.
“The Grimoire” (for short) is the core textbook for the school, written by Oberon and contributed to by many notables among the neo-Pagan and magickal communities in the world today. It sports a snazzy faux-leather design on its cover, behind the Penkhaduce symbol, and I felt it was the perfect tie-in that I could emulate for the new site.
My idea for the site came together quickly, and was the perfect opportunity for me to unveil the new Grey School Crest that I’d designed and had approved by the Administration for use on the school site and some other promo material I’d been working on.
Using semi-transparent background images for the content container DIVs, I spent a lot of time measuring my images and making them fit and line up on the page as I mocked it up. It wasn’t an easy task, and one which I won’t be too keen to repeat again anytime soon.
Turns out I learnt a lot of lessons working on this site in Photoshop – mainly being techniques, shortcuts and the fact that “saving for web” has many different configurations and doesn’t necessarily mean that each image saved is going to be a decent filesize for the web…a lesson in optimizing for the web was learned throughout this process.
Problems with the design
As soon as I’d finished the various elements in the design phase, and cut them out into separate images for use on the page, I got the sneaking sensation that it was going to cause me all manner of issues when it got to the code stage.
The biggest issue I was set to face was the lack of changeability to the site – it wasn’t a dynamic site, but it wasn’t likely to stay static indefinitely either, so using background images in the container DIVs that were not scalable was my first mistake.
From there, I would be dealing with (and I didn’t know about this at the time) different rendering engines in the different browsers – the alpha transparency of some of the PNGs I was using ended up displaying information below them that I simply didn’t want to happen, but couldn’t really change due to the way the browser chooses to render the images.
Transparency aside, I had designed a site that would require about a 60 : 40 split between images and text. Again, something in my design infancy I didn’t realize would cause the page to be unusable to anyone without a decent speed on their internet connection.
Time to step into the code…
What was I thinking!? These images just don’t want to work!!
So, I followed the usual process of creating all my markup for the first page and styling the CSS. As soon as I went to preview it all in my browser, my stomach sank.
Nothing lined up, there was hierarchy issues with z-indexing, margins and padding were all up the creek, despite my best attempts at measuring / estimating the required values…and all this just in Firefox.
So, n00by here decided it’d be the best idea to use Firebug and keep working at it until I got it all to heel. Took me ages, mainly because I work full time outside the design industry and just don’t have hours to dedicate to projects like this each day.
Eventually I got it all working in Firefox, Safari and Chrome. Opera was just being a whiny little pooh, as usual, but Internet Explorer – don’t get me started!
I use IETester to view my designs (both locally and live) in IE 5.5, 6, 7 and 8 and none of them worked. Worse still, none of them shared the same issues! IE6 lacked alpha transparency, so I had to do the transparency hack on it. IE7 wouldn’t recognise my DIV setup and allow overflow: visible to work on positioned list items. IE8 is just a piece of crap that I cannot stand developing for, even though it’s meant to be more compliant than its predecessors…
So, by now you’d have guessed that I’m a proponent of the campaign to kill off IE6. It’s just something that needs to happen to let us all keep whatever hair we have left…
Eventually I got some small IE conditional CSS variables included, but not enough for the site to be satisfactorily served into an IE browser window – essentially, IE sucked and I didn’t really care. My wedding had loomed ever closer and I simply had no time left to make the site squeeze into IE’s tight pants, so I left it with the “muffin top” of bugs and went away on my honeymoon…
Decision making time!
When I got back home from my honeymoon in December 2009, I decided that I simply didn’t have the time or knowledge to continue on as webmaster for another client of mine (that story later) and so cleared my plate of any design-related engagements.
As the new year approached, I began picking up jobs again – (I have to learn to say no, esp. since none of these were paying jobs…I just try to do too much all the time…) One was for my mother, and the other for my father-in-law.
The third was an idea that hit me when I was visiting my ‘finished’ GSW site. On a fairly decent broadband connection, the site took almost a full fifteen seconds to completely load. “Not good enough,” I said to myself, and set about thinking of ways that I could redesign the site without changing the look and feel that I’d only just established and had approved by the school administration.
It was then I realised that I could do almost everything I’d done in images with HTML and CSS – something I should have known before I started. Transparent backgrounds on DIVs, round corners on container boxes and links – techniques that have been increasingly featured on the design blog circuit over the past six months – were all things I’d been teaching myself how to do during my down-time in December.
I closely followed the launch of HTML5 and CSS3 and made sure I was up-to-date on the latest tricks and tips that were flying out of the screen at my by some of the most accomplished designers out there. There were so many different ways that we could use the same few selectors, and it was so inspiring.
The code of the GSW site therefore, was completely scrapped – I started from the absolute start. The only difference between then and now was that I was 100% faster at coding and designing that I was in mid-2009, and I was working with a pre-existing layout and code-set that I had designed and so knew fairly intimately.
I cut close to 85 – 90% of the images I had used previously, which mainly consisted of the container backgrounds and header-tag background images – I figured we could live without overly fancy font headers with gradient fills; it only distracted the user from actually reading the content of the site.
It took me only three weeks to get the site built from start-to-finish, with all content marked up, edited and launched on 4th February in line with the launch of the school’s new study program.
To some, three weeks might be a long time, but remember that I’m only counting 2-3 (max) hours after work during the week and only maybe two full days on the three weekends that I had available. All-in-all, I say three weeks but it probably only took a solid 48 hours. (This is encouraging to me as I can now see around-about how quickly I work and how fast I can turn around a site – I’ll be experimenting on my next job using a time logging application to accurately see how long I take.)
Browser test & run down
Testing the GSW site in different browsers revealed to me that I had several issues that really couldn’t be resolved easily. So, as best I could, I dropped them – they were aesthetic embellishments that didn’t really have anything to do with the site, and only served to make the GSW site look too similar to another extremely popular one.
Click here to browse my browser screenshots for this job.
Launch report
Feedback has been positive for the site. The biggest indicator that the site had a successful lunch is the fact that the site had been active since around October 2009 and we didn’t have a single enquiry email come through from the contact form.
However, since the launch on Feb 4. this year, we’ve had over four thousand visitors to the site and around fifty unique contacts from the form on the site. I don’t know how this stacks up to other sites, and I’m not really at liberty to share all the analytics data here, but the response has been quite good and consistent.
How much is a Penkhaduce?
Hello to all those visitors searching for prices for the Penkhaduce. While I’m not directly linked to the Grey School at this time, I am still maintaining the portal site I created.
As for the Penkhaduce, you can buy all sorts of items from the official Grey School store – Magick Alley.
- Penkhaduce Earrings (Sterling Silver) – $24
- Penkhaduce Earrings (Gold & Silver) – $34
- Penkhaduce Tie Tack (Gold & Silver) – $17
- Grey School T-Shirt w/Penkhaduce – $20
- Penkhaduce Pendant (Sterling Silver) – $35
- Penkhaduce Patch – $4
All costs are in US$ and carry relevant postage costs.
Please have patience with the school and their store – it is completely volunteer run and they currently do not have anyone able to maintain the store and process orders. I’ll update this when they do get someone back in.
