This is the title of the page header

Technical fundament

Digital Styleguide

The styleguide contains all the design elements of the project. It gives an idea of what blocks or pages are available and it allows you to see the elements responsiveness as it is part of the website itself.
The styleguide is divided in sections:

• Design tokens that are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
• Design objects that are the material — specifically, they what comes after. We use them to make the developer’s job easier and to give the designers some extra insight in their work.
• Design components that are there we have the site header, page header, footer and all the blocks that are in the project.
• Design compositions that are example pages: this is valuable especially if certain pages (eg news / blogs) have specific styling compared to other pages.

Sendgrid integration

Sendgrid is used to send emails (like reset password, forgot password etc) from the CMS.

DTF starting point

All the functionalities are included in the initial DTF code. Custom functionalities are to be added from this point on.

DTAP environments

The projects is replicated on 4 different environments reflecting the different stages of development. Development (D) used on developers machines, Testing (T) used by developers to test local changes on the cloud, Acceptance (A) used by the client to verify functionalities, and Production (P) used to show functionalities to the end user.

CMS set up: WordPress

content management system, often abbreviated as CMS, is software that helps users create, manage, and modify content on a website without the need for technical knowledge.

Search set up & functionality

Searching comes out of the box in the DTF. It is based on textual search, so no filters, tags, etc. are used to refine the search. It is based on elastic search, which is continuously populated with data coming from the published content in the CMS.

Caching set up

The entire site is served via a cache, which is built to improve API performance. The cache is updated: on a daily base, and when content is updated in the CMS.

Translation template & Language

We use translation template for the static text content in pages. The content is agreed with the client, and provided during the early phase of development. In presence of a multi langauge setup, we share the translation template with the client asking them to provide the various translations.

Image sizes & Image cropping

The image that you will see in the visual design are the one that we will use as a starting point to define the image sizes. In the Jira board, there will be specific card for Image sizes and we will provide you will all the image dimensions divided per block. About the cropping, WordPress crops the images using as focus points the horizontal and vertical centre of the image itself.

General

The client will provide us with:

• Fixed icons/logos: before the start of the project
• SSL certificates: no later than 4 weeks before go-live
• Web Fonts: should be provided before the start of the development phase

CMS

CMS functionalities

In the CMS, the following options are available and will be enabled / disabled depending on the project needs:

• Media library: it is a directory that catalogs all media files uploaded to your site in one place. It always available and it is connected to a CDN (details are discussed with clients).
• Manage users and users’ roles and rights: WordPress has six pre-defined roles: Super Admin (Development team of Vidda digital), Administrator, Editor, Author, Contributor and Subscriber. The clients will need to provided us with a list of names, email address and desired role of every user they want to add to the CMS.
• Preview Function: is used to preview a page / post . Once you have saved your draft, use this function to see how your page / post will look.
• Yoast SEO: it is a WordPress plugin that improves your website’s rankings on search engines, by helping you optimize your site’s content and keywords.

Non-functional requirements

Browsers check & Responsiveness check

We support browsers with a market share of + 5% in the Netherlands and we check on different devices that the design is responsive (mobile, tablet and desktop).

Security checks

These checks are run constantly by our OPS department and executed accordingly.

Performance

Site Vitality

It is related to the website performance and it is divided in:

• Performance Desktop: Measuring of performance will be benchmarked via the online tool ‘PageSpeed Insights’ ( pagespeed.web.dev ) We can guarantee a successful site’s vitality under the following conditions: - No external large JavaScript files or heavy to execute scripts - No heavy content with (very) high resolution images or videos. In case such conditions can not be met; local testing via Lighthouse will be carried to calculate the impact of these deviations.
• Performance Mobile: Measuring of performance will be benchmarked via the online tool ‘PageSpeed Insights’ ( pagespeed.web.dev ) We can guarantee a successful site’s vitality under the following conditions: - No external large JavaScript files or heavy to execute scripts - No heavy content with (very) high resolution images or videos. In case such conditions can not be met; local testing via Lighthouse will be carried to calculate the impact of these deviations.

Public site

Pages content types

Pages with a custom content type differs from others because of their content and they can be fetch in an overview page; some common o content types are news / blog pages.

Overview page, Detail page & Pagination, Tags & Filters

The overview pages are related to a specific content type and they contain all the elements of simple pages (page header, building blocks and footer). In addition, the page has the list of pages that are added to that specific content type, a pagination (that will be added after a certain amount of items) and, depending on the design, tags and filters; the tags are used to filter the items in the overview page.
The items in list of pages link to the detail pages: the content of these pages is page header, building blocks and footer.

Menu (or site header)

The site header is the part on top of a website that usually contains logo and main navigation.
The main navigation can be one level or two level. If there are two levels, the second one will be showed either when hovering the first level items or clicking on them.
The secondary level can also contain a title, introduction and link that are mostly used to highlight the category the menu falls under. Here is an example of site header with a two level navigation:

Headers (or page headers)

In the page layout, the header is the upper (top) part. It is a strategic part of the page as the area which people see before scrolling the page in the first seconds of introduction to the website. Being somehow a sign of invitation, the header should provide the core information about the digital product so that users could scan it in split seconds. It contains the page title and, optionally, introduction, two button and image. Here is an example of page headers with and without image:

Breadcrumbs

Breadcrumbs are a secondary navigation aid that helps users easily understand the relation between their location on a page and higher level pages; depending on the design, they may be omitted from the project and they are always hidden on mobile.

Footer

A website’s footer is an area located at the bottom of every page on a website, below the main body content. It usually contains logo, footer menu, copyrights and social media menu (LinkedIn, YouTube, Instagram, Facebook).

Not found page / 404

A 404 page is the webpage served to a user who tries to access a page that cannot be located at the URL provided; it contain a page header and a text block where it is possible to give instruction to the user on how to go back to a specific page (usually the homepage).

Forms styling

The form styling depends on the technology that will be use to render the forms.

Responsive design & responsiveness check

During the development, Vidda Digital ensures that design adapts to the screen size used by the visitor when viewing the website. For your project, we make sure that the website is optimized for use on desktop / laptop, tablet and smartphone.

Cookie

Cookies are files used to track site activity and most websites use them. Site owners need to make the use of cookies very obvious to visitors and they obtain users’ cookie consent to collect and manage users’ private data before the use of cookies or similar tracking technologies. Vidda digital has a standard cookiebar; however we also can integrate website scanner as Cookiebot or Cookiepro. Here below there is an example of our standard cookiebar:

Building blocks

We are developing building blocks for your new website. In the budget for the project, we assume that we use our standard and proven set of building blocks. These building blocks are best-practice elements for branding and lead-oriented websites and enable you to build and optimize your own pages.
From the design phase, specific wishes for which custom building blocks need to be developed can be identified. For these building blocks, our developers will assess the impact and together we will determine what priority these building blocks will receive on the backlog. Depending on the time and budget available, they can be included in the scope of this project or kept for further development after completion of the initial website.

Below, you can find example of which blocks are available. You can see how their responsiveness works and which default fields are added to each of them.

Here is a list of all the the blocks added to our website:

• Text
• Media (Image - youtube / vimeo video)
• Quote (with / without images)
• Grid (with / without images - with icons)
• CTA (with / without images)
• Featured content
• Link / Download list
• Expandable
• Logo wall
• Hubspot

These are the remaining available blocks (there is no example of these on our website):

• Facts & figure
• iFrame
• Table
• Contact grid
• Contact
• Text with image
• Text with Read more button
• Image gallery

This is an example of H3

In the block you can add:

• Title of the block
• Paragraph
• titles (h3, h4, h5)
• bullet list
• numbered list
• inline links
• buttons of block (2)

This is an example of H4

This is instead a paragraph with some lorem ipsum text. . This is an anchor link that open in this page, this one instead opens in a new tab. There we have some bold text and here the text is italic instead.

This is an H5 instead

This below is a number list:

1. Justo Dapibus Magna Tellus Fusce
2. Justo Dapibus Magna Tellus Fusce
3. Justo Dapibus Magna Tellus Fusce
4. Justo Dapibus Magna Tellus Fusce

As last, the 2 buttons below are the primary and secondary button. Based on the design, sometimes the buttons look like links (this is our case) or like button.