Touts - Gateway
"Gateway" is Marketlive's term for what we customarily call Property Landing Pages. Gateway pages include a 764px wide fill slot.
File Locations (local copies stored on G-drive)
- jQuery plugin directory:
G:\WBSHOP\www\warnerbros-content\text\scripts - Gateway image directory:
G:\WBSHOP\www\warnerbros-content\images\touts\gateway - CSS override file:
G:\WBSHOP\www\warnerbros-content\text\stylesheet\wbshop_override.css - Gateway HTML template files:
G:\WBSHOP\www\warnerbros-content\text\content\fill_slots\gateway\template_v1.html
G:\WBSHOP\www\warnerbros-content\text\content\fill_slots\gateway\template_v2.html
G:\WBSHOP\www\warnerbros-content\text\content\fill_slots\gateway\template_v3.html
G:\WBSHOP\www\warnerbros-content\text\content\fill_slots\gateway\template_carousels.html
G:\WBSHOP\www\warnerbros-content\text\content\fill_slots\gateway\template_sliders.html
Example One: touts & product links (click to enlarge)
For the Gateway pages of popular properties like Harry Potter. Sample mockup and wireframe example below:
 |
 |
General guidelines for the above:
- Reserve fully graphical touts for major promotions or messages. In those cases only, use fonts and colors and graphics appropriate to the property. If more than one graphical tout, then ensure they use the similar or compatible property fonts/graphics/etc. 10 pixels of padding between each discrete tout.
- Additional touts are generic WBshop-branded. Clean and simple, on white backgrounds. Minimal text.
- Buttons or calls-to-action not required for each tout.
Example Two: links to categories (click to enlarge)
For the Gateway pages of less-populated properties. Sample mockup and wireframe below:
 |
 |
General guidelines for the above:
- Links to categories are differentiated by a graphic with a small representative sampling of items, plus a button below labeled with the category name.
- The buttons below each graphic are fully HTML, so no additional graphics are required.
Example Three: single tout with item and/or category links (click to enlarge)
More flexible gateway template with rows of 1-4 columns each. Sample wireframe below:
 |
General guidelines for the above:
- The optional buttons below each graphic are fully HTML, so no additional graphics are required.
Example: Sliders (click to enlarge)
Sample mockup and wireframe below:
 |
 |
General guidelines for the above:
- The sliders utlize the jQuery plugin Slides.
- The first slider example uses touts the full width of the Gateway fill slot (764px). The second, third, and fourth slider examples use the same dimensions as those in the current homepage slider.
Example: Carousels (click to enlarge)
Sample mockup and wireframe below:
 |
 |
General guidelines for the above:
- The carousels utilize the jQuery plugin jCarousel Lite.
- The first carousel example requires custom-made graphics (transparent GIF or PNG). The second and third use standard WBshop item images.
Fireworks format
Photoshop format