Quantcast
Channel: Technology Served » wordpress
Viewing all articles
Browse latest Browse all 2

Eiryukan Aikido: responsive redesign

0
0

Images of the Eiryukan responsive design website.

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.

The design

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.

Wireframe of the front page of the Eiryukan website.

Wireframe of the front page of the Eiryukan website.

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.

A hand-drawn dragon, converted to vector image.

A hand-drawn dragon, converted to vector image.

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.

The development

Like most modern websites, developing the Eiryukan site was not really about the quantity of code, but the mixture and blend of different code and languages. HTML5, CSS, JavaScript and PHP all played a part.

Client-side

I opted to use HTML5 as the base markup language, using the new HTML5 elements where possible, i.e. <header>, <article>, <footer> etc. The latest browsers all support these elements and I have taken care of older browsers by including the Modernizr JavaScript library — a very handy tool!

The CSS is a mixture of CSS2 and CSS3. I used CSS3 media queries to make the design responsive to different screen resolutions and I am really pleased with the result. I think the site looks and behaves as well on an iPhone/Android device as it does on a large desktop monitor. All page elements respond to changes in width, including embedded YouTube videos, which feature heavily in Eiryukan blog posts. Again, the Modernizr JavaScript library helped to ensure compatibility with older browsers, right back to Internet Explorer 7.

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.

Server-side

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.

The conclusion

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!


Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles





Latest Images