This is the title of the page header
Project requirements
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 a text block
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:
- Justo Dapibus Magna Tellus Fusce
- Justo Dapibus Magna Tellus Fusce
- Justo Dapibus Magna Tellus Fusce
- 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.
This is a call to action
This is a call to action
This is a call to action with image
This is a Media block
You can upload here image or Youtube / Vimeo links for video. There is a content width or full width chioce: based on the design, this will show the media item in different sizes.
This is an example for grid block
This is the introduction field that is a simple text field. The block allows you to add: Title - Introduction - Button; it also needs to contain one grid item. The field in the items are: Title - Introduction - Label and Link. The amount of columns depends on the device size (generally for mobile we have 1, on tablet 2) and depends on the design (on desktop could be 3 or 4).
Grid item title
Grid item introduction cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Label Grid item title
Grid item introduction cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Label Grid item title
Grid item introduction cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Grid item title
Grid item introduction cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Label Grid item title
Grid item introduction cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Label Grid item title
Grid item introduction cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Label Grid item title
Grid item introduction cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
This is a Grid with images
This block has the same elements as the one above with extra images added to the items. It can be used in different ways:
Label Grid w image title
Grid w image introduction orbi leo risus, porta ac consectetur ac, vestibulum at eros.
Only title & link
Or you can use it like this
This is Link & Download list block
The difference in the two block is usually the icon we display. The block allows you to add: Title - Introduction - Button; it also needs to contain at least one item. The field in the items are: text and link / document.