Design & Development Portfolio

One of my previous clients approached me when they wanted to bring their site up to date with an upgrade from Drupal 6 to Drupal 7. It was not deemed necessary to redesign the site as the branding was pretty much spot on with the current design although I did introduce a few additional CSS3 tweaks and attributes that where not so widely adopted across the main-stream browsers when the site was initially created.

When their site was first created, Drupal 7 was still very much in flux with many contributed modules still not ported over to the latest version, it was for this reason that we chose to use Drupal 6 with its many stable modules that would give us many options for including additional site functionality.

In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical. For this rework of the site design I have employed a technique of responsive web design to take into account this ever changing landscape in browser and device differences to allow us to serve the same content to each device but in a format that makes its consumption easier for the site visitor.

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to a mobile or tablet device, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the ability to automatically respond to the user’s preferences; or rather, the devices capabilities. This would eliminate the need for a different design and development phase for each new gadget on the market.

View the final re-design at www.azlawpartner.com.

One of my long term clients for whom I have carried out a number of small projects across their various domains; wanted to create a bridge site to encompass all of their groups various domains into a single group domain.

I remembered reading about a design pattern recently on CSS tricks where a HTML definition list was used in a grid accordion setup using jQuery for all the heavy lifting. This was a perfect solution for their bridge site to give each domain featured an equal place within the design and would also introduce a touch of dynamism into the design giving the user lots of interaction even though the site is simply a single page. Using a pre-built scripted solution like this helps to save on time and costs for a project. Once the script was adapted for use it was easily implemented and provided some ability for user navigation and interaction.

See the final design on the Liberty Automotive Group website.

I was asked by a previous client to help him out on his latest venture where he was setting up his own chiropractic surgery and needed a clean, authoritative website that he could use to display client testimonials.

It was decided to use dual language domains on this project so that the domain main English language domain www.barcelonachiropractic.com would echo the Spanish version www.barcelonaquiropractico.com would actually redirect to the main domain at www.barcelonachiropractic.com/es where the Spanish language versions would be served.

We decided to use the Latest version of Drupal 7 for this project and to base the design templates on the excellent Zen Theme where we can create a child theme and still have access to all the responsive design options available. This would enable the site to inherit most of the functionality from the parent theme so that the site would flow and change according to the device width whether it was viewed on a desktop, tablet or mobile phone.

The site was also to feature dual language content as he is based in Barcelona but has many English and Spanish speaking customers. This was quite a challenge even with the use of the excellent Internationalization module combined with many translation tools and custom views, we encountered a few bugs along the way but everything seemed to come together nicely in the end.

The video delivery platform Vimeo was to be used for actually serving the client testimonials which were short videos featuring the previous patients talking about their problems and how he had helped them or alleviated their pain. The Embedded Media Field and Vimeo Media modules where a great fit for the site as they allow him to simply paste in the web address of the clip and the system would automatically take care of all sizing of elements depending upon where it was displayed.