Red pepper gang productions provides creative communication for its customers, where possible based on storytelling principles. Zoë Cramer, owner of red pepper gang productions, has the vision that a message comes across better and sticks out when it is packaged in a narrative form. Since 2010 she also uses her communication background to produce corporate films and video content for social media.assignment:
gonzodesign has been asked to design and realize a totally new responsive WordPress website for Red pepper gang. The emphasis on the website was on a unique design and a clear layout, so that extensive information about the company, services, completed projects and blog items can be found within a few clicks.implementation:
This responsive WordPress Theme has 2 Custom Post Types (extra timelines for the completed projects and references) and 1 Custom Page Type for the different services that Red pepper gang offers. For the completed projects, extra code has been written so that the customer can also add Vimeo videos as “featured image” to the various projects.
There is also a Theme Options module coded in the back-end to, for example, provide the address data and social media channels in one place that can be dynamically displayed on the different pages. But also to be able to upload images for the various dynamically formatted pages, such as the blog / archive / search index pages and the 404 page. The testimonial part on the homepage can also be (un)checked to be seen for visitors.
Each main page is also provided with a custom meta box in the back-end so that the customer can easily enter a (custom) title and subtitle in the header of these pages. Furthermore, this WordPress website also uses widgets. Widgets allow you to add content, functions and other elements to your WordPress sidebar and other (created) widget areas.
The layout is kept clean but structured, a lot of time went into figuring out how to show the ‘best’ content flow on this website. There are several custom pages made for this theme, e.g. the various projects are shown in a Masonry (jQuery library) layout on the portfolio page.
Some micro-animations are added as well. CSS Transitions and @keyframes are used to make these micro-animations as “smooth” as possible. Furthermore, the IntersectionObserver API is used which can be used to see which elements appear in a viewport in a scrolling document. The InspectorObserver API is built into all modern browsers, so no need for an extra JS library!
My home-brewed gonzocons 2.0 Icon Font (100 Line Icons) is integrated in this website. A lot of attention has also been paid to the search engine friendliness and performance (including loading time) of the new website.