Woto Template Design

  1. Your design must be responsive for major devices and at least for the following resolutions:
    1. 320px (iPhone Portrait)
    2. 384px
    3. 480px (iPhone 3+4 Landscape)
    4. 568px (iPhone 5 Landscape)
    5. 600px (iPad Portrait)
    6. 768px
    7. 980px
    8. 1024px (iPad Landscape)

To see how the current templates are made responsive, create pages in Woto, open the CSS/JS panel and click on the "your design's CSS" link.

  1. Your design must work on the latest versions of major browsers (Chrome, Safari, Firefox).
  2. Any fonts used in the design must support Latin Extended character set.
  3. Woto requires the following html structure to exist on a page:
       <divid="user-content">    ...    </div>

    Because of this, the above class names ("pagecontainer", "maincontent", and "user-content") should not be used for a purpose not intended by the application. "user-content" div identifies the content that is editable by the user. This div must exist            in order for the Woto editor to work. 
    All three classes are added automatically if not found in the html. 
  4. Woto users can edit the following settings for the "user-content" div using a GUI:
    • Background color
    • Border (incl. color+radius+thickness)
    • Padding/Margin
    • Shadow (incl. color+angle+distance+blur+opacity)

The design should be compatible so that the user can update the above using Woto Page Settings GUI. For example if you want to give a default shadow to your design, give it to the "user-content" class, so it will appear on the page design settings        (and can be overridden by user).

Once you create the template, you must check how your design behaves when the above user customizable properties are modified by the Woto GUI. To do that edit a page in Woto and go to "Page Design->Editable part of the page";        below examples of correct/incorrect templates.

Correct Template Behaviour

The default template - "Woto" is used as example

In "Page Design> Editable part of the page" change background color of user editable area to #ccff00

CORRECT: The color change applied to the editable area only

Incorrect Template Behaviour

"Fun Times" template is used in this example

In Page Design> Editable part of the page change background color of user editable area to #ccff00

INCORRECT A: There's white space as image used in template is not transparent and it was designed for white only

InCORRECT B: Background color covers the rest of the background image

  1. You must define the styles for (at least) the following attributes using HTML5 and CSS3 specifications:
    1. html / body
    2. p (p + p, p + img, etc)
    3. h1-h6 (h + p, p + h, img + h, etc)
    4. table, tr, td, etc.
    5. ol, ul, li, dl, dt, dd (inc first/last child)
    6. a (hover, active, focus, visited)
    7. sub, sup
    8. blockquote
    9. pre, code
  2. Always include html{ min-height: 100%; } as your first CSS instruction
  3. Use for h1-h6 span { display: inline-block; }
  4. You should define font size for body in px and then use em for styling text everywhere else within the html and CSS, e.g. for text sizes, li margins, h1 paddings, etc.
  5. If you want to give padding/margin to "user-content" (i.e. the editable area), do not use auto or em. 
  6. If there's background image(s) that will overflow or merge to the user content, this should be given to the "user-content" class as transparent. Do not define it in the wrapper, otherwise user-content will overwrite it.
  7. Avoid using inline CSS.
  8. Total page size including all images, scripts and CSS should not exceed 1.5MB
  9. You should use only royalty free photos unless otherwise seeking management's permission
  10. Use correct indentation for all your code (HTML5, CSS3 and optionally JS).