Transcript Forms and tables

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.
Forms and tables
• NOTE! Design and test form and table to be fit, userfriendly, 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.
2.
3.
4.
2
Mobile (width <= 767 px)
Tablet (width > 767px and width <= 960 px)
Desktop (width > 960 px and <= 1279 px)
Wide desktop (width >= 1280 px)
Forms
3
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
Form styles 2
• Fields with missing or incomplete 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
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
Fortum data tables
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!
7