I am pleased to announce the launch of a newly redesigned website for the Lincoln based Eiryukan Aikido School. The redesign is the first work I have produced since starting Technology Served and going freelance. With this mind, I wanted to set a high standard and use the opportunity as a benchmark for future projects.
For the new design, I have tried to achieve a classical, yet contemporary look. I started, as always, by sketching some wireframes of the layout — detailing the different content areas.
Once I was happy with the wireframes, I drew a new logo, in ink, on paper. I thought that Eiryukan, which translates as “English Dragon School”, deserved something special and I am really pleased with the end result.
For the typography, I settled on Georgia for the main typeface. This might seem a little strange to some, what with @font-face kits becoming more popular by the day, but I believe that Georgia is an elegant and timeless font, a real modern classic (despite being named after a tabloid headline titled “Alien heads found in Georgia.”) It also has the advantage of rendering well on the majority of systems, due to it being a part of Microsoft’s core fonts for the Web collection.
The remainder of the design is minimal. I tiled the pages with a subtle background image, designed to represent the texture of a dogi, and I used a few 1-2 pixel borders to define the different content areas of the page.
I also included the jQuery library, which I used for all other client-side scripting, including the custom AJAX enabled contact form. I also used it for various other little hacks, such as fixing support for certain CSS pseudo classes, which are missing in Internet Explorer. Boo.
On the server, WordPress performs the majority of the work. I created the WordPress theme using a new prototype base theme which I have been developing. This is the first theme I have created from the prototype theme and I am happy with how it has turned out. At some point in the future, I am planning on making the base theme available as a free download.
With regards to the theme’s structure, I created custom page templates for all top-level menu items. I also created a custom page for the site’s home page, so that the introductory copy can be edited from within WordPress. I also created some custom WordPress dashboard widgets and shortcodes. The dashboard widgets are specific to Eiryukan and provide helpful information and links, while the shortcodes help with publishing videos in the correct format.
Finally, I also installed the CodeIgniter PHP framework and coded some custom controllers for handling contact form submissions and mail handling.
Responsive web design and the techniques used to achieve it are where web design is at right now, and where it is going in the future. With smart phones, tablet devices and other small screen devices becoming more popular by the day, it is important to make sure that a website delivers the best possible viewing experience for whichever device it is being rendered on. Hopefully, the new Eiryukan website design does just that!