Yum Skincare is a skincare product manufacturer that produces various lotions. Drupal 7 was the chosen platform for this website, which is multi-lingual and features two different designs for the same page.

Tags

  • Drupal
  • Multi-lingual
Gender specific content
Yin Yang image generation
Website Translation

Gender specific content

The website has different content for men and women. Changing the gender also changes the color scheme on the website.

Some pages, like the about us page, share the same content on both the men and women side. The client requested different colors but wanted to keep the same textual copy.

I didn't want to create a new page with the same content as it would be difficult to maintain and also count as duplicate content to search engines like Google. JavaScript's sessionStorage is used to save a variable when you enter the respective gender's landing pages and use that variable to add a class to the body element. I set up my SCSS files so that one class change on the body alters all the colors on the page.

Yin Yang image generation

The skin types page has multiple Yin Yang symbols. The symbols all have different colors and a shadow is behind each one so a icon font wouldn't work. I didn't want to use images for each one as it would be very difficult for the client to add or edit in the future.

I created a mixin in SCSS to generate the symbol using CSS borders and backgrounds. I then created a field in Drupal for the color so that the symbol can be generated with code without going into Photoshop.

Website Translation

The content on the website is available in both English and French. Some of the characters has accented characters. To ensure the characters appear properly in as many browsers as possible, we converted all the accented characters into their HTML entities.

Other Web Development Projects

Time The Market
Pokedex
Role Play Gamebooks
Landyachtz
Asia Standard Americas
Bare Bones Slider
The Pacific by Grosvenor
White Spot Restaurants
Galpop Image Gallery
10net Managed Solutions
Calm Air International
Manning Elliott
Yum Skincare
Lava Lamp