Homepage Slider Specifications

Homepage Slider banners are responsive, with flexible widths and independent layers of content. The banner content elements scale and shift to provide the best possible display across the spectrum of devices used to access OhioLottery.com. Rather than a single static image, these banners are comprised of background images, foreground images and HTML text. The fluid nature of these banners make them more challenging to design than traditional static imagery. We have broken down the banner anatomy, as well as provided Photoshop templates to make designing these banners easier.

Download PSD Templates

Click the numbered tab on the left to see a particular asset’s specifications

Desktop Slider Example

1

Desktop Background Image

2

Desktop Foreground Image

Desktop Foreground HTML Text

Mobile Slider Example

Home Page Example
6

Mobile Background Image

Mobile Foreground HTML Text

1

Desktop Background Image

Width

1680px

Height

400px

File Types

.jpg, .png (8 Bit)

Usage

This image should be simple and clear, without much clutter or busy contrast areas. The middle-right area should be the cleanest, so that the text overlay is fully legible. The default text will be white*, so this area should be dark enough that one can read it against the background.

* text color may be customized

2

Desktop Foreground Image

Width

450px

Height

400px

File Types

.png (24 Bit)

Usage

This will be a 24-bit PNG with a transparent background that will float on top of the background image. It will float and scale with the responsive design, so it will be on screen for screens 640px and wider.

3

Desktop Slider Title

HTML Text
Roboto Slab – Bold (700)
Font-Size: 42px
Hex Color: #FFFFFF
RGB Color: R:255  G:255  B:255
Line Height: 46px
Text-shadow: 0 5px 7px black (90° 7px)

Usage

Used to grab the user and engage them. Must be short, snappy, marketing speak.

Suggested Word Count

5-10 Words

Suggested Character Count

Under 40

Custom variations may be created which use different text colors, font sizes, or even include additional imagery. Additional web safe fonts may be used for text. This list provides a list of the most common system fonts.

4

Desktop Slider Paragraph

Roboto – Light (300)
Font-Size: 24px
Hex Color: #FFFFFF
RGB Color: R:255  G:255  B:255
Line Height: 27px

Usage

Must explain the promotion quickly, but expand upon the title.

Suggested Word Count

20-35 Words

Suggested Character Count

100-160

Optional. Additional web safe fonts may be used for text. This list provides a list of the most common system fonts.

5

Desktop Slider CTA Text

HTML Text
Roboto Slab – Bold (700)
Font-Size: 24px
Hex Color: #FFFFFF
RGB Color: R:255  G:255  B:255
Line Height: 27px

Usage

Should be text that entices a click or action.

Suggested Word Count

1-8 Words

Suggested Character Count

2-40

Optional. Additional web safe fonts may be used for text. This list provides a list of the most common system fonts.

6

Mobile Background Image

Width

550px

Height

550px

File Types

.jpg, .png (8 Bit)

Usage

This image should be simple and clear, without much clutter or busy contrast areas. The middle-right area should be the cleanest, so that the text overlay is fully legible. The text will be white, so this area should be dark enough that one can read it against the background. The Desktop foreground and background images should combined in to one image for this part. You are free to put overlay panels on this to fade out the background a bit, so the text reads better with it.

7

Mobile Slider Title

HTML Text
Roboto – Bold (700)
Font-Size: 42px
Hex Color: #FFFFFF
RGB Color: R:255  G:255  B:255
Line Height: 45px

Usage

Same content and treatment as desktop version, with the optional customizations.

8

Mobile Slider Paragraph

HTML Text
Roboto – Light (300)
Font-Size: 23px
Hex Color: #FFFFFF
RGB Color: R:255  G:255  B:255
Line Height: 27px

Usage

Same content and treatment as desktop version.

9

Mobile Slider CTA Text

Roboto Slab – Bold (700)
Font-Size: 23px
Hex Color: #FFFFFF
RGB Color: R:255  G:255  B:255
Line Height: 27px

Usage

Same content and treatment as desktop version.