Styleguide:Berlin.de english

Aus Imperia Support Wiki

GERMAN VERSION

Site Structure

Our layout is provided by our layout server. The procedure is described here:Howto:_Implementation_via_Reverse_Proxy

All sites are generally divided into Header, Mainbar, Sidebar, Footer and Partner (pic general layout). Header, Footer and Partner cannot be changed in anyway. Width of Mainbar and Sidebar can be different on the sites. Government sites are 1036px in width and other sites are 980px.

Welcome pages of Berlin.de and all categories are provided in the new layout (pic new layout). Mainbar contains the Stage (620px wide) and 2 containers below (300px wide each). Sidebar included the Topbox and one container 300px wide each. These sites are no part of the government area.

An example of government sites is shown in the picture. More information in German is available in the Styleguide.

Sub sites outside the government pages are provided in the topic layout (pic). Left navigation has 180px in width, content area is 420px wide and service column has 300px in width. These sites contained advertisement like Superbanner (above site), Skyscraper (on the right site) and Content-Ad (first part in service column).

There are 3 possible versions for a layout of sub sites:

  • Layout with banners, header & footer (without any columns)
  • Layout as above, plus navigation bar
  • Layout as above, plus sidebar.

As creator of a site you have the possibility to customize all as grey marked columns or to get these columns from our layout server. (The ContentAd / MPU / rectangle) is an element of bo_sidebar.)

The area around our content column & service column can be used in two varioations:

  • mainbar (width 420px) & sidebar (width 300px) or
  • the whole container without sidebar (width 730px)

The left navigation bar (Navi) is mandatory and must be delivered except in very rare cases.

All column widths are obligatory due to advertisement.

general layout
new layout
government site
topic site

Colors & Fonts

Generally there is no need to care about colors and fonts of our site. Instead of letting you manually build our site we deliver a stylesheet via our layout server which sets the fitting layout data for all regular HTML tags. Instead of placing a big red headline you just use the <h1> tag. That's it.

For an overview over all possible HTML constructs which can be used without any further layout development please check our demo site.

Font:

  • Font - Arial Helvetica Sans-Serif
  • Font-size - 13px

The following colors are available:

  • #000000 (black) for text
  • #FFFFFF (white) as general background color, for text & links inside countainers
  • #2D509A (dark blue) for all links, borders, Metanavi & Navi
  • #B60033 (darker ruby) h1 headlines, active elements etc.
  • #E50033 (ruby) as color for icons & borders
  • #95ACE7 (light blue) as border color
  • #E6EDFF (light blue) as background color for government content, borders & separators
  • #EEEEEE (light grey) as background color for special elements like quick search fields, commercial teasers etc.
    • #DDDDDD (middle light grey) as background color for non-linked headlines in light grey areas
    • #CCCCCC (darker light grey) frame color in light grey colors

Fonts and font sizes must not be changed!

Picture Sizes

Berlin.de uses generally only two picture sizes in content areas that can be set by others:

  • 170 x 128 forteaser pictures
  • 170 x 96 for smaller teaser pictures

HTML & CSS Integration

To ensure an easy integration of your content / site into our website all sites should be created in XHTML 1.0 Transitional. Please double-check the validity of each of your sites, because non-valid XHTML can and most often will be end with layout problems.

Please make sure that above all sites an XML-Header is placed to get a consitent result in all browsers.

Thus you should start each site with

 <?xml version="1.0" ?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">


We strongly recommend UTF-8.

If you create HTML includes which shall be put into anothter site, you must use ASCII, so all special characters must be build as entities. With this it doesn't matter which character set will be used afterwards.

You can add an additional customized CSS for each side. Please avoid to define global behavior! Instead of doing so, please use the CSS function to put your definition into a subordinate element, i.e. the mainbar / content section.

Example CSS:

 a {color:red} /* WRONG! */
 #bo_content a {color:red} /* better */
 #bo_content a.red {color:red} /* AWESOME AMAZING ASSKICKING */

Head of a Site

In each <head> of a site the following information should be set:

 <title>TITLE - Berlin.de</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="DC.Title" content="TITLE"/>
  <meta name="DC.Date" content="2007-09-27"/>
  <meta name="description" content="SHORT DESCRIPTION" />
  <meta name="keywords" content="OPTIONAL KEYWORDS" />

As TITLE you set a relevant title of your site. Please remember that the title of a site can have strong SEO effects, thus a fitting, relevant and all in all good title should give users and search engines an impression of what they can find here.

As SHORT DESCRIPTION you set a short description of that site. This text will be displayed in search engine results and is pretty important for the decision of any user to visit this site or not.

KEYWORD is optional.

Defining the Print Area

The site area that shall be printed is marked by <!--article--> ... <!--/article--> tags. This area should not include i.e. navigation bars etc. These tags are allowed only once per site.

With <!--noprint--> ... <!--/noprint--> tags you can define non-printable areas within a defined print area. You can exclude avrios parts of a site with these tags. If you do not use any of these defining tags, the print version includes the complete site without our layout.

For a print version Meta Tags like dc.title, bol-subtitle and dc.date are interpreted.

JavaScript

If you use Javascript, please note that some functions are already defined by our prtal layout. You must not use superior definitions, because this will result in errors oder malfunctions of important site functions i.e. the header navigation.

Javascripts should be written with ASCII to implement those in any application without problems.