Custom Page Layouts

The content area of an OhioLottery.com page is able to accommodate a variety of design layouts. The only major limitation is the width of content area. At full size on a desktop screen, the content area is 864px wide, and then it scales responsively as the screen width decreases. A couple design examples are provided below.

Custom Layout Examples

Grid Layout

Desktop
Example Image
Mobile
Example Image

List Layout

Desktop
Example Image
Mobile
Example Image

Header

Grid

Example Image
Specifications
Width
  • 864px
Height
  • 200-500px
File Types
  • .jpg, .png (24 Bit)
Usage

This wide image should relate to the homepage slider image, containing the promotional logo image.

Responsive

This image will scale for responsive layouts. Make sure there is enough height to read the image clearly at 280px wide.

List

Example Image
Specifications
Width
  • 400-600px
Height
  • 200-500px
File Types
  • .png (24 Bit)
Usage

This image should relate to the homepage slider image, containing the promotional logo image.This image must be a .png with transparency as it will sit ontop of a background image.

Responsive

This image will scale for responsive layouts. It should be no less than 200px wide at it's smallest and no wider than 300px.

Video Modal Link

Grid

Closed
Example Image
Specifications
Width
  • 416px
Height
  • 316px
File Types
  • .jpg, .png (24 Bit)
Usage

This image should include the winner number and have a barrier (curtain, closed box, etc) that is closed.

Responsive

This image will scale for responsive layouts. All layouts become a single column as screens collapse. Make sure it reads well at 240px wide.

Open
Example Image
Specifications
Width
  • 416px
Height
  • 316px
File Types
  • .jpg, .png (24 Bit)
Usage

This image should mimic the "closed" image but with the barrier opened somehow (opened curtain, open box, etc). It may also contain the messaging to prompt the user to click to view the winner reveal.

Responsive

This image will scale for responsive layouts. All layouts become a single column as screens collapse. Make sure it reads well at 240px wide.

List

Closed
Example Image
Specifications
Width
  • 500px
Height
  • 427px
File Types
  • .png (24 Bit)
Usage

This image should include the winner number and have a barrier (curtain, closed box, etc) that is closed. This image must be a .png as it will sit ontop of a background image.

Responsive

This image will scale for responsive layouts. All layouts become a single column as screens collapse. Make sure it reads well at 240px wide.

Open
Example Image
Specifications
Width
  • 500px
Height
  • 427px
File Types
  • .png (24 Bit)
Usage

This image should mimic the "closed" image but with the barrier opened somehow (opened curtain, open box, etc). It may also contain the messaging to prompt the user to click to view the winner reveal. This image must be a .png as it will sit ontop of a background image.

Responsive

This image will scale for responsive layouts. All layouts become a single column as screens collapse. Make sure it reads well at 240px wide.

Background

List

Example Image
Specifications
Width
  • 2000px
Height
  • ? as needed (Roughly 330px per winner plus header height)
File Types
  • .jpg, .png (24 Bit)
Usage

This image is the background that the Video Link and Header image for the list view will sit on. It should be a simple background image with no text. Good examples would be simple, low contrast patterns, solid colors or vignettes with slight textures.

Responsive

This image will scale for responsive layouts. It's design should draw the user towards the center of the screen as all layouts become a single column as the screen collapses.

Some things you may be looking for: