Codepal

Posts Tagged ‘Development’

Clarion

Tuesday, March 22nd, 2011

Clarion Consultancy Services are pioneers in offering consultation, and active solutions from corporate research to close protection with support to governments, large multinational corporations and individuals. They wanted a website which could provide these services and training online and allow users to register and pay for the tutorials. Buck Design Ltd. did a great job in designing a user friendly, modern design and now it was our job to deliver an efficient CMS for content and user management.

The Challenge

The main challenge in this website was to implement a hierarchical membership system with three levels of members. Allowing users to register on their own, pay for the membership fee and access premium tutorials. Also to differentiate the kind of content the users can access based on their membership level.

We also had to implement a dashboard where the member can update his profile or upgrade to a higher level of membership. Other important stuffs included proper management of pages, contact forms, Google map integration etc.

The Solution

Our choice for content management system was WordPress. Also the fact that WordPress’ user management system is very efficient, it was our primary choice. Proper management of pages and content was easily implemented. WordPress was highly customized to implement the hierarchical architecture for user membership, facilitate the payment system for membership registration and proper accessibility of content based on the membership level.

Tags: CMS, Development, Membership System, PSD to Wordpress, Wordpress
Posted in Portfolio | No Comments »

Structure Sealant C. Ltd.

Sunday, March 20th, 2011

Structural Sealant Contracts Ltd. are specialist sealant applicators based in London. The company is somewhat related to the Formworks Construction Company. We recently upgraded the Formwork site by implementing a customized WordPress content management solution. As being related to the Formwork Company, they got the chance to experience the internal workings of the website. They were really impressed by it and approached Buck Design Ltd. to re-design their website and we were given the responsibility to implement the content management solution. Along with the CMS implementation, we also provided some advanced features like recruitment system, Google map integration etc.

The Challenge

The site was pretty similar to the Formwork Company site as the two companies are related. But still there were many changes to the site with respect to the design. Even though the site was similar to the Formwork site, it was our job to give it a fresh appeal, user interaction wise.

CMS needed to be very efficient in managing the content and specially the images. There were a lot of images on every page and our task was to make everything dynamic such that the client could even change the images from the backend of the website. The homepage of the side needed a carousel of the featured posts and the featured news integrated as one continuous stream.

Similar to the Formwork site, we had to implement proper custom designed scroll bars as all the pages were of static height. It was necessary such that the content would not be restricted and the design won’t be ruined because of the default scroll bars.

The portfolio page was similar to the Formwork site in the way that the client could upload any number of project images. But it was still different because the project images were of a larger size and occupied most of the area of the page. Hence, it was really important to manage the images in such a way that it does not affect the loading time of the page and give a blank page feel.

Again, similar to the Formwork Site, the news and recruitment pages needed simple methods for posting new entries. The recruitment page required a special recruitment form which was to be linked with the respective recruitment posting. The contact page required a simple contact form and Google Map integration, displaying the location of the office.

The Solution

WordPress was again used as the CMS for the site. WordPress' immense flexibility and features like custom posts and custom taxonomies made the content management very efficient and user friendly. It also made our work easy in implementing the multi type carousel at the homepage.

CSS3 and jQuery were used a lot throughout the site to give its user interactivity a modern feel keeping it simple and user friendly. The scrollbars blended perfectly with the design and helped overcome the content restriction due to static height problem.

The project images were optimized and the customized backend uploading mechanism made the task of uploading heaps of images very easy. They were implemented using a slideshow approach such that one image is displayed at a time. This enabled all the other images to load on time and not destroy the design flow of the site.

Implementing the contact form was easy where as the recruitment form was a bit tricky as we had to link the form to the respective recruitment posting. The Google Map integration was also smooth because of the awesome API provided by Google.

Tags: CMS, CSS 3, Custom Posts, Development, PSD to Wordpress, Wordpress
Posted in Portfolio | No Comments »

Formwork Company v2

Sunday, February 27th, 2011

Formworks Company is a private construction company based in the United Kingdom. We developed their static website sometime back which helped their business a lot. With time, the content of the site increased and so did the need for advanced features which a static website could not provide them. So they again approached Buck Design Ltd. for the solution. The site's design was re-touched a bit and we integrated the content management system using WordPress and also implemented some really advanced features like Feedback with voting system, Recruitment System etc.

The Challenge

The site's modular design structure was very easy to convert to xHTML/CSS3. The main challenge was to integrate the CMS in the most efficient way possible. The homepage of the side needed a carousel of the featured posts and the featured news integrated as one continuous stream.

All the pages in the site are of static height, hence we had to implement proper scroll bars so that the size of the content would not be restricted and the scroll bar could not destroy the look and feel of the website. The same stood for the portfolio page's projects list.

One of the main requirements of the projects was that each project could have any amount of project images and our goal was to display them in a proper user friendly manner such that it does not affect the site's loading time.

The news and recruitment pages needed simple methods for posting new entries. The recruitment page required a special recruitment form which was to be linked with the respective recruitment posting. The contact page required a simple contact form as well contrasting to the previous version of the static site.

The biggest challenge was to implement a feedback suggestion system with threaded commenting and a voting mechanism to vote up the best feedback suggested.

The Solution

We used WordPress as the CMS for the site. WordPress' immense flexibility helped us overcome the challenges easily. We made use of custom posts and custom taxonomies to make the content management very efficient and user friendly. It also made our work easy in implementing the multi type carousel at the homepage.

We used jQuery a lot on the site to achieve the utmost level of efficient interactivity and user friendliness keeping the site's accessibility in mind. The scrollbars became design friendly and served the purpose perfectly.

The project images were implemented in such a manner that the user can view the images as they are or enlarge them and even control the flow of images. All these were implemented in such a manner that the loading time of the images does not give a bad experience to the user.

Implementing the contact form was easy where as the recruitment form was a bit tricky as we had to link the form to the respective recruitment posting.

Finally, the feedback system was implemented by customizing WordPress further and integrating the threaded comment system and the voting sytem within it.

Tags: CMS, CSS 3, Custom Posts, Development, PSD to Wordpress, Wordpress
Posted in Portfolio | No Comments »

Publishing Gurus

Thursday, February 24th, 2011

PublishingGurus.com provides complete solutions for designing, editing, formatting, publishing and promoting books. The website was completely designed by their very own Sunny Kapoor (the Founder and Creative Director), and we were given the task to develop the site making it fully customizable and implementing many complex features in it. We used wordpress to achieve our task and highly customized it to get a high quality product.

The Challenge

The primary objective of the website was to maintain huge amounts of pages. Other than the content management aspect of the whole website, the two important requirements were implementing a book display store where they could display and promote the featured books and the business card gallery. It also required a Gallery where they could display the designed covers for their books.

Other challenges included implementing various types of forms, each different from the other in many aspects. The business card layouts required to be linked with the forms such that the user can customize and order the printing of the respective cards easily. Also linking the orders with the PayPal payment system was a major feature. Other requirements included implementation of different types of posting ability like news and a dedicated blog.

The Solution

WordPress, as we all know, does a great job in managing the content whether it is in pages or in posts. We enabled customization of all the pages via the admin panel and implemented the ability to post news updates or blog posts.

The book display store was again managed properly using various categories and filtering options. Obviously, the user can easily edit the image and the details of the book. The print service of business card was a bit tricky to implement but we succeeded in it with flying colours. We used jQuery to display the various business card templates in an eye soothing manner. Connected each card template to the details posted by the respective forms and connected the ordering system to PayPal. We also used jQuery based galleries to display the portfolio of designed book covers.

The website as a whole was pretty complex and included many carousels and forms but everything was implemented in a light user friendly way. We even added social networking features to share the website and its content easily to promote growth of the site and advertisement for the books displayed on it.

The site was completely optimized for search engines and additional features were installed like the integration of Google Analytics within the dashboard displaying the statistics about each post and page.

Tags: CMS, CSS 3, Development, jQuery, PHP, PSD to Wordpress, Wordpress
Posted in Portfolio | No Comments »

Creating a Neon Blink Effect for your Forms using CSS3 and jQuery

Saturday, July 17th, 2010

Well thanks to the bright new kid on the block, CSS3, spruced up with a bit of jQuery, I will show you how to build a nifty effect to enhance your forms.

Am sure that this cool Neon blink effects in forms are going to be useful for a lot of purposes so don’t miss my tutorial on 1stWebDesigner.com.

In this tutorial, we have made use of @-webkit-keyframes which works only in browsers using the Webkit layout engine like Chrome and Safari. For browsers like Firefox and Opera, where there is no alternative, we will have to gracefully degrade the effect, which in this case will be just a box-shadow on focus. Internet Explorer ( till version 8 ) cannot render most of what we will learn here, but IE 9 does seem to be very promising from what I’ve seen in the recent platform preview.

Tags: CSS 3, Development, forms, how to, jQuery
Posted in Tutorials | 4 Comments »

How to Create a Cool Slide Out Panel with CSS3 only

Monday, July 5th, 2010

I wrote a tutorial for 1stwebdesigner.com It is about how to use CSS3 to achieve goals which were only possible using javascript libraries like jQuery and Mootools. In this tutorial, we create a slide out subscribe panel.

Once the viewer hovers over the subscribe button on the top right hand corner, the whole hidden panel will come sliding down with a very smooth animation effect revealing the subscribing options to the visitor. All of this will be done by just using CSS3.

Don’t miss my tutorial on 1stWebDesigner.com if you want to bypass using javascript to achieve this cool sliding effect.

Tags: coding, CSS 3, Development, how to, tutorial
Posted in Tutorials | 6 Comments »