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.
Desktop Slider Example
Desktop Background Image
Specifications
- 1680px
- 400px
- .jpg, .png (8 Bit)
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
Desktop Foreground Image
Specifications
- 450px
- 400px
- .png (24 Bit)
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.
Desktop Foreground Text
Specifications - Desktop Slider Title
- 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)
Used to grab the user and engage them. Must be short, snappy, marketing speak.
Suggested Word Count- 5-10 Words
- 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.
Specifications - Desktop Slider Paragraph
- Roboto – Light (300)
- Font-Size: 24px
- Hex Color: #FFFFFF
- RGB Color: R:255 G:255 B:255
- Line Height: 27px
Must explain the promotion quickly, but expand upon the title.
Suggested Word Count- 20-35 Words
- 100-160
Optional. Additional web safe fonts may be used for text. This list provides a list of the most common system fonts.
Specifications - Desktop Slider CTA Text
- Roboto Slab – Bold (700)
- Font-Size: 24px
- Hex Color: #FFFFFF
- RGB Color: R:255 G:255 B:255
- Line Height: 27px
Should be text that entices a click or action.
Suggested Word Count- 1-8 Words
- 2-40
Optional. Additional web safe fonts may be used for text. This list provides a list of the most common system fonts.
Mobile Slider Example
Mobile Background Image
Specifications
- 550px
- 550px
- .jpg, .png (8 Bit)
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.
Mobile Foreground HTML Text
Specifications - Mobile Slider Title
HTML Text- Roboto Slab – Bold (700)
- Font-Size: 42px
- Hex Color: #FFFFFF
- RGB Color: R:255 G:255 B:255
- Line Height: 45px
Same content and treatment as desktop version, with the optional customizations.
Specifications - 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
Same content and treatment as desktop version.
Specifications - Mobile Slider CTA Text
HTML Text- Roboto Slab – Bold (700)
- Font-Size: 23px
- Hex Color: #FFFFFF
- RGB Color: R:255 G:255 B:255
- Line Height: 27px
Same content and treatment as desktop version.