The Canton of Rimsholt

What's so special about this website?

The Redesign

When we decided that we needed a website redesign, I had a long think about what kinds of things we would need in the design of a Canton Website. Our old website was good as far as content went, but the way it was layed out and its visual attributes made it feel dated, and I felt that it wasn't the best representation of who we are on the web.

The Visual Elements

The embattled border of our Canton heraldry is a strong graphic element that I felt could be used not only as a design motif, but also as way to separate critical, at-a-glance information from the more detailed content. The way it's laid out on the screen makes it appear as if it were a close-up of our device, with the white bordure on the left, and the purple on the right. I decided to make the header a sophisticated yet graphically simple reference to the central charge, a pine tree argent surrounded by purple, but I turned our single pine tree into a hurst, representing the fact that our Canton is many people, and that we, collectively are the Canton of Rimsholt. The small ring used as a tiny graphic element to highlight headers and separate the navigation links at the top of the page is a nod to the Augmentation of Arms that the Canton received and bears on their armory now.

The Hidden Features

I struggled the most with creating some features of this site that do not show at first glance. In a mobile age, it's important that the information on this site is accessible to small-screen device users as well as those on their home computers. Like many SCA webministers, I am a self-taught website maker, with very limited skills for the more complicated aspects of website design. To make this website as adaptive and as uniform across the pages, I taught myself how to make and use Cascading Style Sheets, or CSS. It greatly simplifies the layouts of the pages by almost wholly eliminating tables as a graphic placement tool.

The other great thing about css is that I can make the pages dynamic in reference to the size of the browser window that it's being viewed in. This is what I am most proud of on this webpage - it has different layouts to meet the needs of differently sized browsers! You can see how this works for yourself by resizing your browser to approximately e-reader sized or mobile phone sized - at the e-reader size, the purple sidebar on the right becomes just a right-hand border, and the information inside it relocates to the top of the page. Putting "at a glance" information in that location makes it the first thing you see when you are browsing in smaller windows, and making the layout a single column of information, rather than two, eliminated side-scrolling and zooming on a mobile browser. In the smallest of browser windows, I eliminated the large graphic header in favor of a plain text title, not only to conserve data bandwidth, but also to allow more browser real estate to go to content instead of imagery.

Another consideration that I thought about was how people share our pages to social sites like Facebook. Facebook uses Open-Graph to "read" your website and pick a title, thumbnail image, and short description of the website (as seen below).

Normally, Open Graph "reads" the website code, and harvests the first image from the page, and uses a snippet of the first text on the page as a description. In the case of this website, that would be the title graphic of the grove of pine trees, which is great for a header graphic, but not a good image for sharing on social media. By explicitly defining the image and short description, I have ensured that the Canton of Rimsholt will have a uniform and professional appearance when shared socially.

Thank you for reading this! A lot of work went into this webpage, most of it not visible at all, and I am proud to share my work with you!

-- Estelle


Disclaimer

Updated 10/2013