Style Guide LMU Klinikum - Appearances in Fiona
The Web Style Guide deals with the responsibilities in the WebContentManagementSystem (WCMS) Fiona project at LMU Klinikum and provides information about the desired separation of:
- Content
- Layout/structure
In addition, this style guide shows the use of standardized templates, texts, headings, tables, bullet points and links.
The individual institutions of the LMU Klinikum and various project and congress pages have their own websites, which are located behind the domain of the LMU Klinikum www.klinikum.uni-muenchen.de/<institution, project or congress name> or are forwarded there with various options for accessing them.
General information
What is the purpose of this style guide?
This style guide for the websites of the LMU Klinikum is intended to define technical and layout-related framework conditions. These are intended to create websites with a high recognition value for all LMU Klinikum institutions and their portal pages.
In addition, a high degree of usability is to be ensured in this way, which not least serves to design the LMU Klinikum's websites in accordance with the Ordinance on the Creation of Barrier-Free Information Technology (BITV).
Completeness and further development
This style guide does not claim to be absolutely complete. There will be individual cases that are not shown here. This style guide is intended to promote the responsible use of web content.
Please remember to check your knowledge online from time to time, as the project is constantly evolving. The Internet and the way in which websites are developed are also evolving very quickly, which is why there will certainly be adjustments and additions to the style guide in the future.
Central system
The LMU Klinikum's central Web Content Management System (WCMS) Fiona is available to all LMU Klinikum facilities free of charge for the creation and maintenance of their websites (intranet).
It can be accessed via a web browser. This means that no special software needs to be installed on your own computer. All security-critical data connections are also encrypted.
The strict separation of content, layout and structure in the basic website framework (core package) not only means that the corporate design is consistently adhered to, but also ensures compliance with legal requirements (e.g. the Accessible Information Technology Ordinance).
This makes it very easy to create websites that automatically comply with the LMU Klinikum's corporate design.
Necessary knowledge
The editors and content managers responsible for the institution, project and congress pages create and maintain the respective content.
No programming or markup knowledge is required to create websites for your own institution or project in the LMU Klinikum's WCMS Fiona. Only the participation in a 4-hour basic training course is a prerequisite for working in the authoring systems Internet or Intranet.
Advanced training, layout & design training and, in particular, the new training courses on accessibility increase the quality of your websites.
Note:
Before the Fiona --> SCRIVITO system changeover, we recommended attending further training courses on the "WCMS Fiona training concept at LMU Klinikum". However, these have been suspended and we would like to encourage you to visit the handouts/websites we offer for self-study.
The task of a content management system is to separate content, layout and structure. The content should not be mixed with the rest, which is why the responsibilities are separated. This is summarized again in the Web Style guide.
Content
As an editor, you can therefore concentrate on the most important aspect of websites: the content.
Only regularly updated and constantly changing websites are highly valued by website visitors. They will then return to your website more often.
We support you with the content and offer you training to prevent barriers to your website visitors. Text, menu items, images, PDFs and videos can all contain barriers.
Layout/structure
The design (layout and structure) is controlled centrally and relieves you as the editor of the task of designing the content beyond the intended possibilities.
You can influence the design at the following points:
- Header image: You can determine and integrate the header images of your website yourself. You can even do this anywhere on your website.
- Background color: Let us know if you want to switch between the permitted background colors (standard gray and white)
- Markup color: Let us know if you would like to have a different markup color than the standard green in your website.
The following institutions were jointly responsible for the further development and operation of the entire LMU Klinikum website in the Fiona authoring system:
- Department of Medical Technology and IT (MIT)
- Communications and Media Unit
Hint
All further developments in the project and thus also of the website framework (core package) have been discontinued due to the system changeover Fiona --> SCRIVITO!
Legal notice
Section 5 of the German Telemedia Act obliges website operators to provide an imprint. The Executive Board of the LMU Klinikum is responsible for all web presences of the LMU Klinikum, more precisely for all pages that can be assigned to it in terms of content or technology.
For this reason, the basic website structure (core package) of the LMU Klinikum contains a standardized and legally binding imprint with a fixed place at the bottom of the website. Only the name and address of the institution, the head of the institution and the content responsibility must be added to the prepared template before the website goes live.
Furthermore, it is not permitted within the LMU Klinikum to create an independent imprint.
Copyright
Works of literature, science and art:
- Texts
- images
- Audio material
- video material
are protected in Germany in accordance with § 1 of the Copyright Act.
If you are not the author of the work, you do not have the right to publish and use it (§ 12 and 15 UrhG). You must always have the permission of the author, publisher or institution to electronically reproduce and distribute the work in question on your website.
This provision also applies in particular to images that are found "freely" on the web or to digitized articles, e.g. from newspapers. The unauthorized use of copyrighted works can have consequences under criminal law pursuant to Section 106 of the German Copyright Act (UrhG) and gives rise to substantial claims for damages.
Rights to own image
The right to one's own image or likeness is a special form of the general right of personality. In principle, every person may decide for themselves whether and in what context images of them are published (Section 22 sentence 1 of the German Art Copyright Act (KUG/KunstUrhG)).
You must therefore observe this portrait right when taking pictures yourself. You should therefore obtain the permission of the person photographed to publish the photo on the website. We provide you with the attached Word templates for this purpose.
downloads
Structure and layout
The LMU Klinikum website is based on a quickly comprehensible page structure. In particular, the needs of the user were taken into account in the design. This includes
- Recognition of LMU Klinikum websites is ensured by the header area, among other things
- The integration of the individual facilities is optimally supported, as they can individually design their own website by exchanging the background images and names in the 3rd box
- Search, quick links and language selection are located in the function bar, which is located between the header and content area
- The service area, which is located to the right of the content area, is optional. It can be individually adapted to the content of a page. Links, important information, dates etc. can be displayed there
- A layout that is open at the bottom was chosen so that the content can easily grow with the length of the page
Hint
The structure and layout of the previous websites in the hospital's WCMS Fiona do not correspond to the new LMU Klinikum brand. However, due to the upcoming migration of the websites, the previous websites will no longer be adapted, but represent the status prior to the introduction of the new brand!
Page structure
Hint
The page structure of the previous websites in the hospital's WCMS Fiona does not correspond to the new LMU Klinikum brand. However, due to the upcoming migration of the websites, the previous websites will no longer be adapted, but represent the status prior to the introduction of the new brand!
The page structure is automatically predefined by the delivery and use of the basic website structure (core package) at the LMU Klinikum. The right margin (service area) can optionally be hidden.
This ensures that the corporate design of the LMU Klinikum is largely guaranteed. Dimensions, measurements and functionalities are defined. You can choose between 3-column and 2-column display.
Illustration 1: Page layout 3-column
- Header (top)
- Search (between header and navigation area)
- Navigation area (left)
- Quick links (between header area and navigation path)
- Navigation path (between quick links and content area)
- Content area (center)
- Toolbar (between header and content area)
- Language bar (between header and service area)
- Service area (right)
- Footer (bottom)
Illustration 2: 2-column page layout
- Header (top)
- Search (between header and navigation area)
- Navigation area (left)
- Quick links (between header area and navigation path)
- Navigation path (between quick links and content area)
- Content area (center)
- Toolbar (between header and content area)
- Language bar (between header and service area)
- Footer (bottom)
The header is a central element of the website and ensures a uniform appearance of the LMU Klinikum's websites.
The dimensions in the header area are prescribed by the hospital's corporate design. By using the templates provided by us (Photoshop and GIMP), you can easily comply with them.
Basic dimensions
- Width 955 pixels
- Height 155 pixels
- Background image 955 x 117 (width x height)
In order to find the content you are looking for quickly, the advanced search we have integrated allows you to restrict the search criteria or link search terms.
You can access the advanced search settings by clicking on the black button with the white arrow. However, you can also simply enter your search term in the text field and the advanced search will start with the default settings we have selected. You can refine these as required after receiving the search results.
The navigation area provides an overview of the content listed on the website.
It provides orientation and is an integral part of every page. It is possible to build the navigation up to the fourth level.
For very large websites, you can also link further levels without displaying them in the navigation area. The right-hand service area can also be used for further links.
The quick links are displayed on every page of the website. They are linked by default:
- Sitemap
- Homepage of the clinic
- RSS (optional, i.e. as soon as the first newsfeed has been set, this link appears automatically)
You can also have specific important links included there.
The navigation path, also known as the breadcrumb line, is located between the function bar and the content area.
It starts at the home page and shows the progression up to the page currently being viewed. The navigation path provides the user with orientation on the website. In addition to the navigation bar, it is an additional option for navigating through the website.
Information on the respective menu items is displayed in detail in the content area.
Text, images, videos, graphics, tables, bullet points and links can be integrated here.
The content area is 535 pixels wide when the service area is shown and 735 pixels wide when the service area is hidden.
The horizontal distance between navigation and content area as well as content area and service area is 20 pixels in each case.
The function bar displays the two icons Print and Top (back to top).
The current page can be printed by clicking on the Print icon. If the main content of a page is longer and you are at the end, you can jump to the top of the page by clicking on the Top button (up to the top).
In addition, the person responsible for the content is displayed between the Print and Top icons (provided the "Person responsible for content" field in the Content field group has been filled in).
The abbreviations (links) of the existing language versions of the website are displayed in the language bar.
As far as there is enough space, the language bar can be provided with any number of abbreviations. If there is no website in another language, the language bar remains empty.
The service area has a width of 180 pixels and adjoins the content area on the right.
It contains additional functionalities such as
- Link lists
- Expandable link lists
- Text blocks
- Image links
- Image zoom
- Calendar of events
- etc.
In most cases, the service area refers directly to the content of the page currently displayed. The service area can also be set up individually for each page but can also be hidden.
The footer is 18 pixels high and is located below the navigation, content and service area. It is an integral part of every LMU Klinikum website.
The footer contains links to the imprint, data protection and contact by default.
Font - Typography
, while the original corporate font LMU Compatil will continue to be used, but only in the Regular section and for the institution name below the logo or the claim.
hint
The font of the previous websites in the hospital's WCMS Fiona does not correspond to the new LMU Klinikum brand. However, due to the upcoming migration of the websites, the previous websites will no longer be adapted, but represent the status prior to the introduction of the new brand!
Markup styles / font colors
Since the use of color in fonts is only reserved for links, only the bold and italic font styles may be used.
The font sizes for headings, navigation etc. are also preset.
Note
The font colors of the previous websites in the WCMS Fiona of the clinic do not correspond to the new brand of the LMU Klinikum. However, due to the upcoming migration of the websites, the previous websites will no longer be adapted, but represent the status prior to the introduction of the new brand!
Colors
Hint
The colors of the previous websites in the WCMS Fiona of the clinic do not correspond to the new brand of the LMU Klinikum. However, due to the upcoming migration of the websites, the previous websites will no longer be adapted, but represent the status prior to the introduction of the new brand!
Colors play a central role and promote the recognition of websites. When the website framework is delivered, the default markup color is green. An alternative markup color (for links) is permitted for each website, i.e. you can freely select this for your website.
However, the change can only be made by the project team, as it must be checked when selecting the color that, for example, the contrast is high enough. Texts must also be easily recognizable by people with visual impairments, for example.
Background colors
Standard gray
#efefe9
Standard white
#ffffff
Text colors
Headings H1 / H2, navigation, content texts
#333333
Heading H3
#555555
Headings H4 / H5
#666666
Markup color
Standard LMU green
#007e36
Navigation colors
with "mouse over"
#e5e5e4
for "active"
#cccccc
Other colors
Frame line
#999999
Iconography
Hint
The iconography of the previous websites in the hospital's WCMS Fiona does not correspond to the new LMU Klinikum brand. However, due to the upcoming migration of the websites, the previous websites will no longer be adapted, but represent the status prior to the introduction of the new brand!
Symbols, also known as icons, facilitate and support the visual representation of some functions. The icons on the hospital's websites are 10 x 12 pixels in size and are easily recognizable thanks to their clear design language and color.
Icons are part of the hospital's corporate design and therefore cannot be changed on the individual websites.
How can I insert icons in the main content?
Icons are no longer available via the images folder. You can still use them in the main content if required.
To do this, insert an image in the main content using the HTML editor and enter the address of the desired icon in the "Target" field.
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/audio.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/ausgeklappt.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/ausklappen.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/download.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/drucken.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/edit.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/excel.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/externlink.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/fax.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/funk.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/go.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/handy.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/lupe.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/mail.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/next.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/pdf.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/powerpoint.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/previous.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/square.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/square_border.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/square_small.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/telefon.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/toplink.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/uhr.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/video.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/word.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/www-intranet.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/www.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/zimmernummer.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/zip.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/zoom_in.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/zoom_out.gif
http://www.klinikum.uni-muenchen.de/oneforall/images/icons/zurueck.gif
Hospital logo
Note
The logo of the previous websites in the hospital's WCMS Fiona does not always correspond to the new LMU Klinikum brand. However, due to the upcoming migration of the websites, the previous websites will no longer be adapted, but represent the status prior to the introduction of the new brand!
The logo shown here already corresponds to the logo of the new LMU Klinikum brand and can be used by the web editors at any time.
The LMU Klinikum logo consists of the LMU Munich logo and the Klinikum lettering. The distance between the two elements is fixed and may not be changed under any circumstances.
Facilities of the clinic
At the top of the hierarchy is the location Munich, below this is the name of the clinic, department or ward. If required, Munich can also be omitted and only the clinic, department or ward named.
Images
The use of images and graphics on a website is permitted and enlivens it at the same time. However, care should be taken to ensure that the effect and message of images and graphics are serious and appropriate.
Make sure that images and graphics that do not belong to the hospital are provided with a source reference.
Images should also relate to the text and support the statements made in the text. Further information can be found under the menu item "Content" in this Web Style Guide.
The latest empirical findings using eye-tracking tests have shown that website visitors do not pay attention to purely "decorative images", i.e. images without reference to the text.
Note
The use of images from the previous websites in the hospital's WCMS Fiona does not correspond to the new LMU Klinikum brand. However, due to the upcoming migration of the websites, the previous websites will no longer be adapted, but represent the status before the introduction of the new brand!
Normal illustrations, 3 image sizes possible
Width: 130 pixels
Height: 98 pixels
Width: 198 pixels
Height: 134 pixels
Width: 260 pixels
Height: 195 pixels
Images for news items in the media library
Width: 233 pixels
Height: 155 pixels
Automatic reduction of the image size when setting layout 4 in the news container
Images in the text block (below the template collection box)
Image width for display in the text flow
Selection, possible values: 130 pixels, 198 pixels, 260 pixels
Images in the service area (right)
Width: maximum 186 pixels
Images in the service area (right)
Image is automatically displayed in the width of 194 pixels.
Slideshow images
Width with service area: 530 pixels
Width without service area: 735 pixels
Selection of height, possible values: 200 pixels, 300 pixels, 400 pixels, 500 pixels, 600 pixels
Slideshow images with text
Image width for display in the text flow
Selection, possible values: 130 pixels, 198 pixels, 260 pixels and
Width with service area: 530 pixels (no text flow possible, text is below the image)
Width without service area: 735 pixels (no text flow possible, text is below the image)
Height: up to max. square
Image galleries
max. 530 pixel width (both portrait and landscape format display possible)
Other sizes
In addition, different formats are also possible in the text, but images should always be used in landscape format (corresponds to normal viewing habits) and no different image sizes should appear on an HTML page. For purely technical reasons, the width of the image cannot exceed 530 pixels
Formats suitable for the web
Raster graphics (also known as bitmap graphics or pixel graphics) are always used on the web. The following overview shows our recommendation of the most common file formats for the web and their area of application.
- Graphics, line drawings: Use of gif, svg
- Images and gradients: Use of jpeg, jpg
Things to know about resolution
A distinction is made between absolute and relative resolution.
Relative resolution
This is important for display on screens and is usually specified as follows:
- Dot density in dpi (dots per inch),
- Pixel density in ppi (pixels per inch),
- Line density in lpi (lines per inch)
The relative resolution plays a major role on the web, as computer screens generally have a resolution of 300 dpi and only so many pixels per inch "fit" on the screen. The display size can therefore be easily defined without the need for automatic scaling down by the browser.
Absolute resolution
Plays a role in digital camera specifications and therefore plays no role on the web.
Example: 6 mega pixels = 6 million pixels = 2000 x 3000 pixels
GIF format
Limited to 256 colors, smaller animations are possible
JPG format
The file is compressed with lossy compression, i.e. the smaller the file (byte), the greater the compression. The quality of the image may suffer as a result. Animations are not possible in this format.
PNG format
Images are compressed without loss and the quality of the image is retained. However, the file is significantly larger than if the same image is saved in JPG format.
SVG format
SVG is the file format recommended by the WWW for displaying two-dimensional vector graphics and is based on XML. The preferred application is the logo.
A distinction is made between the color mixing models or color spaces in RGB and CMYK. CMYK is more relevant for the print sector, while RGB is particularly important for screen display. It is therefore important to ensure that images are created, edited and saved for the web using an RGB profile. Operating systems, programs, printers and screens all have a color profile.
Image copyright
Exploitation rights
The term exploitation right originates from copyright law. It describes the exclusive and absolute rights of the author of a work:
- reproduction
- distribution
- publication
Personal rights
The right of personality is a fundamental right that regulates the protection of a person's personality.
This includes
- Recognition of authorship
- Prohibition of distortion
Rights to your own image
The right to one's own image, also known as the right to a portrait, is a manifestation of the general right of personality. It states that every person is generally entitled to decide for themselves whether and in what context images of them are published. Exceptions:
- Likenesses may only be distributed or publicly displayed with the consent of the person depicted
- In the case of remuneration
- After death, after 10 years without the consent of the next of kin
content
Content is the most important asset for websites. Regular updating of content and regular announcements about news and activities mean that the website is not just a static figurehead, but that website visitors regularly visit the website and create a bond with it.
How content
- are displayed (when using templates)
- should be displayed (when using the standard templates with free design options)
is explained in this section of the Web Style Guide.
Most of the style specifications were controlled centrally so that the recognition of websites in the old WCMS Fiona system in the corporate design of the LMU Klinikum was guaranteed and could be easily adhered to by the editors of the Klinikum.
reference
Even if it is possible at one point or another to circumvent the corporate design (CD) specifications with technical expertise, we would like to point out that you should avoid doing so.
Nevertheless, there may be cases that are not yet covered in the current status of the project progress. Please help us in these cases and give us feedback (email to WAD.support@med.uni-muenchen.de). The project is still very much under development and the needs are not yet fully known or recorded.
As far as possible, use templates to ensure a visually uniform presentation of certain content such as news, events, link lists etc.. This promotes the recognition of LMU Klinikum websites and is part of the corporate design.
The templates are available to every editor of the authoring system. Editors can use them to enter content in fields or input windows. The presentation of this content is then automatically controlled by the system (templates).
For continuous text, a number of rules are required to ensure that the website is designed uniformly and follows empirical findings on the behavior of website visitors. This means
- Continuous text should be left-aligned.
- Justification should be avoided at all costs. Empirical eye-tracking studies have shown that reading on the web is similar to scanning in a stable "F-pattern". In addition, many browsers only display justified text with large gaps, as there is no automatic separation of words.
- Continuous text (such as headings) should be written in normal font (style default "Standard"), i.e. the fonts preset by the system. The editor does not have to set anything in this respect. The "Bold" and "Italic" markups can be used to emphasize individual terms.
- No other color is permitted for highlighting individual terms. Highlighting with color is reserved for links only and is also specified by the system in a uniform color.
- Underlining of individual terms and sentences should be avoided, as this has (become) known on the web as a way of marking links.
- Bullet points should be used for the presentation of lists. This is an important stylistic device when creating web texts (supports scanning in the stable F-pattern).
Headings in the content area can visually break up the continuous text and structure its content. The headings differ in size and color. The spacing before and after the heading is also preset.
The title of your website is automatically inserted by the system as a first-order heading.
As web texts are scanned more than they are read (in the stable F-pattern), you should try to include at least the 2nd order heading on the website as a basic rule. In addition, the 3rd order should usually be sufficient for the presentation of content.
In addition, you have a further 2 headings (i.e. up to the 5th order) at your disposal. However, these should only be used in exceptional cases.
1st order heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Heading 2nd order
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Heading 3rd order
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
4th order heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Heading 5th order
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
6th order heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Permitted use
According to the accessibility guidelines, tables should only be used if data is to be displayed in tabular form.
Unauthorized use
Nowadays, the use of a table for the design of texts and images is no longer common, even frowned upon, and is no longer legally compliant in the above sense and should be avoided.
Possibilities
- table class="classic"
- table class="edit"
- table class="edit_invers"
- table class="person"
- table class="publication"
- table class="linklist"
There are two different ways of structuring bullet points: listing and enumeration.
Bullet points provide a better overview of a page with long content and are good for orientation. In particular, bullet points are well suited to recent empirical studies which show that website visitors scan more than they read.
Lists
- List entry
- List entry
- List entry
- List entry
- List entry
- List entry
- List entry
- List entry
- List entry
- List entry
- List entry
Enumerations
- List entry
- List entry
- List entry
- List entry
- List entry
- List entry
- List entry
- List entry
- List entry
- List entry
- List entry
Links are always displayed in color and underlined on the web. This makes them stand out from the body text as well as from the entire website and is therefore clearly recognizable for the user.
The authoring system carries out these markups automatically. The editors must then add an alternative text to the links. This should indicate where the link goes and, for usability reasons - with a few exceptions - be opened in the same window. However, if you make use of this exception, please use the suffix "(new window)", e.g. "Link to the topic "Accessibility" on the pages of Wikipedia (new window)".
Icons are automatically placed in front of the links in the link list template or for further links. For example, the intended icon is automatically displayed for a PDF. The size of the file is also listed for link lists. Examples (see cheat sheet)!
The use of images or graphics in the content area is a text-supporting design tool.
You should make sure that the message of the image supports the content text. Website visitors do not pay attention to so-called "decorative images".
Notes on integrating images:
- The text may wrap around the image on the right or left.
- Centering images is not permitted.
- In order to meet accessibility requirements, an alternative text should be provided for each image.
- If you link images, please note the prefix suggestions made under the menu item Links
- Please also note the specifications for image sizes and image formats
- Remember the various sources for images (without infringing copyright or personal rights)
Examples
Right-sided flow
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
.Flow on the left
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.