What's so special about this website?
The RedesignWhen 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 ElementsThe 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 FeaturesI 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!