Mike and I have worked on several projects together, and making his site was always in the pipeline, however due to him being busy with other projects, his site kept being pushed back. Finally a gap came, and he was able to invest some time into the design of his new site. At first sight of the design, it struck me with an amazing first impression. It was clear this site needed a great attention to detail, and not only that, some great effects. I was so pleased when Mike said "Go crazy" - a showcase for Mikes work, and a true showcase for what GEL Studios can do.
Mike and I have worked on several projects together, and making his site was always in the pipeline, however due to him being busy with other projects, his site kept being pushed back. Finally a gap came, and he was able to invest some time into the design of his new site. At first sight of the design, it struck me with an amazing first impression.
It was clear this site needed a great attention to detail, and not only that, some great effects. I was so pleased when Mike said "Go crazy" - a showcase for Mikes work, and a true showcase for what GEL Studios can do. So, on with the article, or if you want to see the finished site for yourself.
The great thing about being given a free leash with a project, is the availability of technologies that other clients might not want. From the get-go I was able to choose a responsive layout, with lots of HTML5 navigation tricks. This has turned out to be a great approach, and appears to the user that the site is all on just one page. A static header and a small animation is the only indication that the page you are going to is loading. Sure to impress any visitor.
Should your screen resolution support it, there are also left and right sliders to jump from one section to another, with a sliding animation to boot. Meaning you can quickly and easily get to any section on the site, in just a few clicks.
To then further enhance this idea, you can not only navigated to a main section, but you can also navigate to a sections child pages all from the main section, all without leaving or reloading the page. A highly impressive navigation system which is intuitive and easy to use. Regardless of screen size or content structure.
The whole site has been constructed with just three web fonts, and just 7 different font sizes. These were all specified in 'pts' to maximise the way fonts would display on mobile devices.
Each section has a bold colour assigned to it, which leaves the user always knowing what section they are in, great for usability! The colourful background textures where named the same as there hex code counterparts, so that functions and various MODX snippet and chunk calls could easily render based upon the parent section it was in. (Will touch on the MODX specifics later on).
SASS was used to its full potential to create consistent CSS styles, that can inherit parents colours correctly.
Clean and consistent HTML is at the base of this site. With a few divs and a bit of jquery to bring the site to life. There is a main section header on every page, with a toggle state to hide or show it (perfect for screens with smaller resolutions) then easy to follow image thumbnails leading to a small paragraph of text relevant to the project accompanied by a gallery or large image preview of work.
Once inside a sections pages, a simple and easy to use navigation structure is shown, with links to next, previous and parent resources. These adopt the sections given colour scheme.
All of the images on the site are generated server side and then cached, meaning that Mike only has to upload one image to the maximum size that he wants once, letting the site do all the work of cropping and scalling for thumbnails for him.
All of this, coupled with the HTML5 navigation used to navigate around parent items, produces a flawless navigational experience for any user. Any page can be accessed in as few as just three clicks.
Getting in touch has never been so - stylish! Calling upon the wonderful colours used all over the site, the contact form is a pleasure to use. Submitting a form with errors fades in a deep warm red, and when typing in a field, you are greeted with a high contrast navy blue. Watching your email get sent off is another wonder - watch as your fields all fold up, hide away, and give you a notification that your email was sent, along with another teaser of some great showcase pieces of work of course!
The whole site was constructed in MODX with the only external resources being the images, and external libraries required. A blend of template variables, and snippets that executes chunks based on provided parameters is at the heart of this site.
A large amount of the code for this site is available at anytime to its internal resources due to the efficient use of chunks. The whole site has been constructed using only three different page templates, and none of those require Mike to do any raw HTML editing! All can be done with the the inbuilt RTE module without fear of breaking any layouts.
This site was an absolute joy to work on, and the finished product is a highly polished, refined, and an extremely interesting site to view. A pleasure to behold, and a fabulous stage for all of Mike's current and future work. I hope you like the site Mike!
"The service and attention to detail is first class. No job or idea has ever been too big."