Pentland
At a glance
- Site
- www.pentland.com
- Info
- Corporate site of Pentland, an umbrella company owning brands such as Lacoste, Ellesse and Ted Baker
- Role
- Creating accessible & semantic front-end code (XHTML, CSS, jQuery) based on thirteen different site designs.
Snapshots
Details
The original designs for the site were created by a Pentland designer and sent over to DGTL where I was then given copies of how each page should look and function. Due to this site being placed into the Drupal CMS it needed to be built in a modular fashion, allowing chunks of code to be dropped in as and when.
I created all the XHTML & CSS and went to great lengths to ensure it was semantic and accessible to screenreaders and search engines. I also decided to create a seperate CSS file for each section of the site but also maintaining a global stylesheet for the consistent page sections displayed throughout. This allowed easy maintainance of each site section as Pentland were keen on sending feedback at every step of the way.
Originally the drop down menus found along the top of the site were handled by JavaScript but with a little help from the fantastic CSSplay website I was able to modify and build a CSS version that worked just as effectively.
What I did
- Slicing a Photoshop design mock-up into web friendly images
- Creating semantic and valid HTML to convey the site information
- Writing CSS to display the site design
- Ensuring the site is accessible and also renders in older browsers
- Using PHP to create a basic template system
- Writing jQuery to handle DOM manipulation and plug gaps in IE6
- Ensuring the CSS and HTML were as modular as possible for ease of development
