1. Forms and tables NOTE THAT FOR THE FORMS AND IFRAMED CONTENT TO BE RESPONSIVE THE CONTENT OWNER NEEDS TO MAKE THEM RESPONSIVE ACCORDING TO INTERNET RESPONSIVE DESIGN GUIDELINES AT HIS/HER DEPARTMENT'S OWN COST.

2. Forms and tables NOTE! Design and test form and table to be fit, user- friendly, usable and readable in mobile, tablet, normal and wide desktop view! –This means that in mobile view make sure that the order does not go funny e.g. like this: Name: Address: Last name: Post code: … The forms and tables must be responsive and follow the defined breakpoints. The minimum proper expected width of layout is 320 px. 1.Mobile (width <= 767 px) 2.Tablet (width > 767px and width <= 960 px) 3.Desktop (width > 960 px and <= 1279 px) 4.Wide desktop (width >= 1280 px) 2

3. Forms 3

4. Form styles Simple forms are done with the Sharepoint tool. Forms are used both in global and country sites. The background colour of form is XXX grey and its style is set automatically. Subheading font: 6 px, Arial, #529900 Forms by external vendor: (see the customised form materials) –Forms should preferably be implemented through the form container. –If the form consists of several steps this should be visualized through the numbers at the top right of the form module. If it is important to disclose exactly what each step contains, it is possible to spread out the step icons and add a description. –The field name can be placed to the left of or above the field. –Information text that explains how to fill out a field is as a general rule placed under the field*. Specially designed forms can deviate from this rule if it is more appropriate to put the text to the right of the field. –Compulsory fields are marked with a red star. –*) As an alternative to putting the information text under the field, it is possible to use the information icon - - and show the information when the user makes a mouse-over. 4

5. Form styles 2 Fields with missing or in­complete information is highlighted using a bright red frame and a field name. Information about what the user needs to correct is displayed at the top of the form together with a RED exclamation mark. Each field column should be right aligned. Single fields and information texts can break the columns. 5

6. Custom made forms This is a glimpse of customised forms that have been made by an external vendor. This kind of forms are too complicated to be made by the simple SharePoint form tool. 6

7. Fortum data tables 7 Fortum data table: Light green # E4F4D2 Fortum coloured data table: Light green # E4F4D2 Light grey # F2F1F1 NOTE! Design and test table to be fit and readable in mobile, tablet, normal and wide desktop view!