Text & image

component preview#

XS-SMMDLG
preview-xspreview-smpreview-xs

1 Image#

2 Headline#

3 Copy text#

4 Text-link#

Recommendations of Use – Do's and Don'ts#

  • Ensure the user is able to clearly see the image and the image is representing the style of the content of the page. Avoid text in images as it reduces the visual information the image should transfer.
  • The text is the primary content of the section and video/image should be used as supplementary content.
  • Make sure the headline gives the user a first impression about what to expect from this section. Avoid headlines that only contain one word or are to vague to understand the content of this section.

Differences between small / medium / large Images and responsive behavior#

XSSMMDLG
preview-xspreview-smpreview-xspreview-xs
All variants (small / medium / large) are displayed identically on mobile devices. Visually there are no differences.------Only on large displays you can really see the differences between the settings small, medium and large.

SEO-Requirements#

Title = H2; 500 characters (Optional)
Claim = H2; 255 characters (Optional)
Subclaim = H1 – H6 possible; 10.000 characters

Text#

To increase organic traffic and search engine rankings, the image related text needs to be SEO optimized with page relevant keywords that have a high search volume. Also, consider an integration of internal text links to important and all-time available subcategories (Level 3 and below) if possible. This is important to keep the user in the Lidl cosmos and to direct the link juice to important subcategories.

Headings#

When setting the heading structure for the entire page, it should be taken into account that on the entire page there should be only one H1. Subheadings should be used as logically as possible. An H2 could be used in the text image section via Title, Claim or H2 Text Heading. Please make sure to just use one H2 (Title OR claim OR Text heading) in the setup of the section.

Image#

  • To optimize page speed, keep the image size small
  • Do not put relevant text on images, this could not be crawled by search engines
  • Use an alt tag to describe the content of the image (not available at the moment)

Accessability, WCAG#

All elements of the component should fulfill the guidelines of the WCAG

Source references#

  • baymard.com/blog/avoid-these-ecommerce-graphics
  • Evaluation of customer survey - Hero Teaser