Web: Dixons Retail: Currys & PC World

Currys and PC World

Sites: www.currys.co.uk | www.pcworld.co.uk

Job title: Visual Front End Developer/Designer

Duration: March 2011 – March 2013 (2 years rolling contract)

Overview: Working as part of the e-commerce design team that covers the large retail stores of Currys and PC World.
I managed HTML/CSS3, links, tags and graphics for both homepages for PC World and Currys, on a daily basis including late nights when there was an “As Advertised on TV” promotions being put live.
Designed, created and built new responsive pages and Hub navigation pages for weekly promotions all in HTML5 and CSS3 for desktop views down to mobile and tablet.
Created graphic banners for homepages and internal pages and promotional pages.
The day-to-day maintenance of the sites and meeting tight schedules and deadlines.

  • Web Specialties:
  • Hand coded HTML5, XHTML CSS2, CSS3
  • Responsive 'liquid' layout (Mobile 1st)
  • Browser compatibility & media device checked code
  • HTML responsive page creation
  • Image optimisation
  • Graphic Specialties:
  • Adobe CS5 Suite: Photoshop, Illustrator
Coloured Gifts, Christmas 2011
-Coloured Gifts, Christmas 2011
  • Platforms:
 

Web: Seasons

TOP ^

Tasks:
Create graphic banners for homepages, internal pages and promotional pages during different seasonal promotions.

Click on the seasons to see examples.

  • Specialities:
  • Responsive HTML liquid layout for images
  • Image optimisation
  • Adobe CS5 Suite: Photoshop, Illustrator
 

Web: Templates

TOP ^

Tasks:
Responsible for updating and maintaining the templates used for:
  •  
  • "As Advertised on TV" (As Seen on TV)
  • Product Plus
  • Hub page tabs
Ensuring the templates are responsive/fluid and scale down from large desktop, small desktop, tablet to mobile.

As Seen on TV

Utilising the Grid System on the responsive Currys and PC World websites.

Each deal is inside a grid block, which can be resized to accommodate 2, 3 to 4 blocks ideally.
As Seen on TV - PC World
As Seen on TV - Currys

Tabs

Hub pages on special promotions normally use tabs, but any page that requires multiple sections of products can use these tabs too. These tabs have gone through many improvements and versions:

  • Latest version: Box-shadow gradients
  • This version incorporates a fully responsive nested tab system for desktop to mobile.
  • HTML5 elements used instead of <div> elements.
  • Tabs template 2-10 (2 & 10 are usually redundant)
  • Mark-up remains the same in all versions, only the wrapper class changes.
  • Theme changes done by an CSS ID on the wrapper
  • 2 lines to 3 lines changes done by adding a class to the <nav> element
  • CSS Box-shadow creates the gradient, no images used in this version, no image calls to server
  • Themes for Core, Sale and Clearance are controlled by background colours allowing for hover transition fades
Responsive Sprite version:
This version used a transparent PNG Sprite made up of varying black alpha to full alpha transparency gradients, coupled with CSS box-shadows on the left and right of the tabs. Theme colours are defined with CSS background colours, while retaining hover transition fades.

Sale tabs 2012
PC World Core creative tabs 2013
Demo template:
HTML5: View working example on CodePen
 

Web: Builds

TOP ^

Tasks:
Designed and built promotional pages to assist weekly promotions and supplier funded pages.

  • Specialities:
  • Hand coded HTML5 (Notepad ++),CSS3, XHTML CSS2,
  • Responsive 'liquid' layout (Mobile 1st)
  • Browser compatibility & media device checked code
  • Image optimisation
  • Adobe CS5 Suite: Photoshop, Illustrator