DEVMIZAN WEBSITE SPECIFICATON
1.1 Plesk
Plesk Subscription
Every website is hosted on a Plesk server subscription. When a subscription is created for the website to be built on, there will be a WordPress installation and a set of Theme & Plugin installations that will have already been run for you before you are given access to the subscription. This will ensure that core required theme & plugin files are installed and available to you before you begin the website build.
You may still need to install & active certain plugins on a site-by-site basis – however, the core required plugins will already be installed for you.
Plesk Access
You will be given log-in details (username and password) to access the Plesk subscription as well as the log-in URL to the subscription in your project document. The log-in details will be formatted as below.
Username: your-username
Password: your-password
Subscription URL: https://(website name).safetech preview.co.uk:8443
SSL Certificate
Once you have logged in to the Plesk subscription you will need to issue an SSL certificate to enable an encrypted connection to the website domain. To issue the SSL certificate you will go to the Dashboard tab, then click the SSL/TLS Certificates link under the Security title. You then need to go to Install a free basic certificate provided by Let’s Encrypt which is at the bottom of the screen and then click Install. Proceed to tick the Secure the wildcard domain (including www and webmail) Box and then click Get it free. This will install the SSL certificate onto the preview domain which will make it secure for people to view and access.1.2 WordPress
WordPress Access
To access the dashboard of your WordPress installation, go to the WordPress tab in your Plesk subscription and click the Log In button. This will take you to your Admin Dashboard where you can begin the initial WordPress set-up tasks outlined below.
Themes & Plugins
Every website is built on the WordPress platform and will utilise pre-existing Themes & Plugins. All core themes & plugin files required for the site build will be supplied to you, and will already be installed on the WordPress installation that you will use to build the site.
When you log-in to the WordPress dashboard for the first time (for each site build) you may still be required to activate certain Theme & Plugins files. You can access the list of installed themes and plugins by following the below paths in the WordPress dashboard, where you can then activate them.
WordPress Dashboard > Appearance > Themes
WordPress Dashboard > Plugins
Themes We Frequently
• Salient
• BeTheme
Plugins We Frequently Use
• Classic Editor (disables Guternberg editor; allows theme page builder)
• Classic Widgets (disables Guternberg block widgets, allows classic widget view)
• Contact Form 7 (building your contact forms)
• WPRocket (caching for website performance) WordFence (security features) Yoast (SEO features; meta data)
• WP Sitemap Page (generating sitemap shortcodes)
• GDPR Cookie Compliance (provides data protection features)
• Salient’s Core Plugins (when activating the Salient theme, you will be presented with a list of the theme’s core plugins that are recommended to install & activate in order to get the most from the theme’s features and functionality)
Permalink Structure
Before you begin the development of the website, please make sure you have set your permalink structure of your website to Post name. Setting your permalink structure to post name makes your page links easy to read and understand, and will help your web pages rank higher in search engines.
WordPress Dashboard > Settings > Permalinks
Site Title & Tagline
Before you begin the development of the website, please make sure you have correctly set the Site Title and Tagline fields in the WordPress Settings section. The Site Title field should be the company name in full, and the tagline should represent the products and/or services that the company provides.
Site Favicon
By default, the favicon of your website for a fresh WordPress installation is the WordPress logo/favicon. The favicon needs to be updated to represent the company of the website that you’re building. You can update the favicon image in the Theme Customizer in your admin dashboard.
WordPress Dashboard > Appearance > Customizer > Site Identity > Site Icon
Here you can upload the 512px x 512px favicon image file.
Front Page Display
By default, WordPress will use the site’s blog/post page as the Front page of the website for all fresh WordPress installations. You will want to update the Your homepage displays setting to A static page and then select your Home page from the drop-down list in order to set your Home page as the front page of your website.
WordPress Dashboard > Settings > Reading > Your homepage displays
Search Engine Visibility
When the website we are building is still in the development phase, we do not want Google or any other search engine to index the website or any of its pages. The website should not be indexed by search engines until it has been migrated to the live domain.
For this reason, you must navigate to the Settings section of your WordPress dashboard and update the Search engine visibility setting by checking the box with the label Discourage search engines from indexing this site
2. Website Build
2.1 Page Builds
Copywriting
Prior to starting the website build, you will be supplied with all of the copywriting (written content) to populate your pages with. The copywriting will be structured in a way that lends itself to your page layouts – meaning you will be able to identify the best way to structure your page sections based on the way the copywriting has been presented.
The copywriting document will be formatted in a way that lends itself to your page sections, rows, columns, and will also help you to indentify which page builder elements to implement into the page (Testimonial Carousels, FAQ Toggles, etc)
Pro Tip: When copy-and-pasting the text content from the copywriting document into the “Text Block” elements of Salient’s page builder, always paste the copy into the “Text” tab and never the “Visual” tab. Pasting copy into the “Text” tab will paste the words in their raw form, allowing you to style the content as you need to. Pasting the copy into the “Visual” tab will carry over styles & formatting from the Word document which will create undesirable formatting on the front-end of the site.
Page Layouts
As mentioned above – it is important to structure your page layouts in a way that allows you to implement the copywriting as it is intended to be presented, making sure that related information is presented together in your page sections (rows & columns), and also making sure that you are using the correct page builder elements to best present the content on your page.
For example: if there are customer testimonials in the copywriting document, you must be sure to properly implement this content into your page builder by utilising Testimonial Carousels or other similar content blocks, rather than simply pasting the raw text into a Text Block element. Make sure that all content types from the copywriting document are properly represented as intended.
Heading Tags
All heading tags on the page should follow a sequential structure from H1 to H6. For example, there must be an H1 tag present before you can utilise an H2 tag. There must be an H2 tag present before you can utilise an H3 tag, and so on. Skipping an H tag in your page’s sequential heading structure will be detrimental to the page’s SEO performance.
Heading tags must not be duplicated. The text within a heading tag must be unique for each tag and relevant to the content that it precedes. Duplicating heading tags will be detrimental to the page’s SEO performance.
Examples of heading duplications we frequently discover are “Our Services”, “Contact Us” and similar generic phrases. These phrases themselves are fine and will be commonly used – however, they must not be repeated on your page within your heading tags.
Generally speaking, if you have used the phrase “Our Services”, for example, in one of your heading tags on a page, you shouldn’t need to repeat this heading anywhere else on your page.
Pro Tip: If you have used a heading phrase such as “Contact Us” in one of your footer widget titles, you cannot then use the phrase “Contact Us” in a heading tag within the page builder of your page, as this will still be considered a duplicate heading. Although your page builder and footer widgets are two separate sections within WordPress – they are still merged together to form the whole page on the front-end of the website, and when crawled by Google.
CSS (Cascading Style Sheets)
When styling & formatting your page content visually, it is imperative that you do not rely on default formatting from heading tags or any other content tags to achieve certain sizes & styles for your content elements.
For example: do not wrap a phrase in a H1 tag simply to increase the text size of your phrase. Heading tags and other content tags should only be used to structure your content, never to style your content.
If you need to visually style a heading tag or any other content tag in a way that differs from the default theme formatting – always use custom CSS code to do so.
Custom CSS can be written as inline CSS on your content tags in the page builder if necessary – however, it is preferable that you implement Class Names on your content tags and write your CSS code in the “Additional CSS” section of the Theme Customizer.
WordPress Dashboard > Appearance > Customize >Additional CSS
Internal Page Links
When implementing content from the copywriting documents into your pages, you will notice that certain words or phrases have been highlighted in yellow. These highlights are suggestions from our copywriter when they spot opportunities for creating internal page links. Internal page links are links on your page that link to-and-from other pages throughout your website.
It is important to have a good internal network of page links throughout your website, as internal links will help Google to find, index and understand all of the pages on your website. Internal linking is key for any site that wants higher rankings with Google.
You must ensure that you are correctly implementing these internal links whenever an opportunity to do so has been flagged by our copywriter in the copy documents.
Call-To-Actions
Each page of the website must utilise one or more call-to-actions. A call-to-action is a section of the page that instructs or encourages the visitor to take some kind of action, for example “Call Us Now”, “Find Out More”, or “Get A Free Quote”.
The way in which you build your call-to-actions into the page will differ depending on the design and layout of your page. Your call-to-action could be as simple as inline text in an anchor tag, or a button at the end of a paragraph, or even a dedicated full-width row which acts as its own stand-out page section.
Your call-to-actions should differ in size and style as described above and shouldn’t be too repetitive – this will ensure the best chance of capturing the attention of the website’s visitors.
2.2 Forms
Field Structure
When building your field structure in any & all forms on the website, you must ensure that all field data is reflected in the Message Body section of the Mail tab within Contact Form 7, so that the mail recipient receives all of the information that is submitted via the form.
By default, the Message Body section of the Mail tab within Contact Form 7 is only configured to deliver the small handful of default fields from the sample “Contact form 1” form (Name, Email, Subject, Message) – if your form contains extra fields (Company Name, Service Required, etc) then you must build these fields into the Message Body section of your form’s Mail tab by embedding the shortcodes for each respective field.
Pro Tip: When building with the Salient theme, there are some handy CSS classes that you can utilise to place your form fields side-by-side, which often creates a much more visually pleasing form on the front-end of the site. See: https://themenectar.com/docs/salient/contact-form-columns/
Mail Header Data
When your form fields have been created and you have updated the Message Body section of the Mail tab to send all of your field values, you then need to also ensure that the Mail Header Data in the “Mail” tab is correctly configured so that the email is delivered successfully and as intended.
“To” field – This needs to be the email address of the company/client that they wish to be the recipient of the email. This information will be confirmed by the project manager and given to you.
“From” field – This needs to be set to wordpress@(domain name), which during the development phase of the website will be the preview domain that you have been given access to. This will be updated by the project manager when the website is migrated to the client’s live domain.
“Subject” field – This needs to be set to a short but descriptive phase that allows the client to recognise that the message in their inbox has been delivered from the website’s contact form. For example: “Website Enquiry”, “Quote Request from Website”, etc – ensuring that the subject line is also relevant to the type of message being sent (Question, Enquiry, Application, etc)
Mail Header Data
In order to satisfy GDPR data protection & privacy law, you must include an opt-in checkbox for all contact forms throughout the website. The checkbox should be the final field in the form and be placed just before the submit button.
The checkbox label must clearly state that the user is consenting to the submission and storage of the personal data they have entered into the form – for example, “I have read and understood the privacy statement”, or “I agree to submit my information above”
2.3 Media
File Sizes & Dimensions
All images uploaded to the WordPress media library (including images uploaded via the page builder) must be uploaded at reasonable image dimensions, as to minimise the file size, so that they do not put weight on page load times. 2000px in width is an ideal width to satisfy larger screen sizes and won’t generally need to be any larger than this.File Names
All images uploaded to the WordPress media library (including images uploaded via the page builder) must be given a descriptive filename that is relevant to the image itself before it is uploaded to the website. User-friendly image filenames are more likely to be recommended by Google. The filename should be descriptive, include applicable keywords, and must use hyphens instead of spaces to separate words. shutterstock2382374_304.jpg X Felt Roofing_Img.jpg X felt-roofing-in-essex.jpg✓Alt Tags
All images uploaded to the WordPress media library must be given Alt tags. You can do this by opening up the individual image in the media library and entering the tag into the “Alternative Text” field. The Alt tag must be descriptive text that is relevant to the image itself. Do not use the same Alt tag multiple times throughout the site’s images – use a unique description for each image.
Theme Demo Media
Any unnecessary demo media that is imported into the WordPress media library via Theme Demo Imports must be deleted from the library. The media library should then only contain media that is relevant and utilised in the website build.
2.4 Branding Consistency
Colour & Typography
When building the website it is important to consider certain aspects of visual design so that the website is suitable to the client’s branding and represents the company in a way that is consistent with all other offline material that the company uses to promote themselves.
The two most important design aspects to consider to achieve branding consistency on the website are Colour and Typography. You must make sure that your choice of fonts and colour palettes in the theme settings – and all other page builder elements – are consistent and suitable.
To set-up your fonts and colours in the theme settings of Salient, follow the below paths in the WordPress dashboard:
WordPress Dashboard > Salient > Typography
WordPress Dashboard > Salient > Accent Colours
Each website project will come with its own specific design requirements – however, it is important to have a solid foundational understanding of design consistency as outlined above.
2.5 Homepage Structure
For the homepage build of your website there are some key elements that we wish to include on each website (unless stated otherwise in the project requirements). You can use your best judgement to include and add new and innovative sections if you feel that these are relevant and bring value to the website.
The general structure for a homepage will include at least:
Hero Section – The hero section is a primary introduction section at the top of the page which generally utilises a high quality video or image in the background, a primary heading/title, a caption and a button that links to either the contact page or the about us page. This can change based on the type of website that is being created or what you think would best fit that industry.
“About Us” Section – This should contain an image or multiple images and also some written content about the company, what they do etc. Also a button that links to the about us page if they have this on the website.
“Call-To-Action” Banner/Section – A section that will display the company’s contact details or will showcase a button leading to the contact page or anchor directly to a telephone call. Use phrases such as ‘Get In Touch Today’ or ‘Get A Free Quote’ depending on the end goal of the call-to-action.
Service Boxes – Styled boxes that will link to the individual service pages on the website (not all websites may need this if the website does not have these). The boxes usually display the title of the service and also a relevant image.
Contact Form – A contact form that has been correctly formatted and has relevant fields for the user to input information. This should also be styled to look appealing and be responsive across all devices.
Testimonials Section – An important part of any website is a section dedicated to social proof, so that visitors landing on the homepage can see a history of satisfied previous customers. This would generally be a testimonial carousel element.
These are the bare minimum sections that should be on every single homepage. Many websites will need additional sections on the homepage such as a project case studies
2.6 Footer Structure
Your website build should have a footer section that utilises the WordPress Widgets functionality to populate it with content. You will find various layout & style options for your footer in the Salient Theme Options panel.
WordPress Dashboard > Salient > Footer
There are some general components and content types that your footer should always be populated with which are outlined below.
Contact Information – All of the company’s contact information should be displayed in one of your footer widgets. This includes the company address, email address and any phone numbers that the company wish to display.
Navigation Links – You should use one of your widgets to display a navigation menu with links to your website’s important pages (Home, About Us, Services, Contact Us, etc) – alternatively, depending on the number of widget columns available for your specific build, you may wish to use this navigation menu to display links to each of the company’s products and/or services.
About Us – It is common to utilise one of your widget columns for brief “About Us” content that summarises who the company are, what they do, and the locations they operate in.
2.7 Mobile Responsive
The entire website, including all posts, pages, and content types, should be made responsive for mobile devices. This can be achieved both via responsive features contained within Salient’s rows & columns in the page builder, as well as via CSS Media Queries that you will write inside the Additional CSS tab of the Theme Customizer as we have previously outlined.
Page Builder Features – Using Salient’s responsive features for your rows & columns, you will be able to specify different values for margin, padding and other factors for “Desktop”, “Tablet”, and “Mobile” views. Every time you enter margin & padding values for your elements, you must always be mindful of entering values for the other view types, if necessary, to achieve full optimisation for mobile devices.
CSS Media Queries – For optimising individual content types, headings, and other specific elements on your pages, you must write all of your custom CSS Media Queries in the WordPress theme customizer.
Pro Tip: When you are writing custom CSS for your Media Queries, the theme customizer allows you to toggle the display of your window between Desktop, Tablet, and Mobile, so that you are able to view the results of your responsive CSS code as you are writing it.
3. SEO Tasks
3.1 Sitemap
All websites should include a link in the footer (either in a footer widget or the copyright section) to a sitemap page. The sitemap page will contain a HTML version of the website’s sitemap that is published on the front-end of the website.
In order to create this page, begin by simple creating a new page in the WordPress dashboard and giving it a page title of Sitemap.
Using the WP Sitemap Page plugin mentioned in the plugin list above, you can simply copy-and-paste a shortcode into a Text Block element of your page builder and Publish your sitemap page.
The shortcode will generate a HTML sitemap on the front-end of your page.
3.2 Meta Data
Each page of the website needs to be given a Meta Title and a Meta Description for the purpose of search engine optimisation. These fields are made available to you on the Edit screen of each of your posts and pages in the WordPress dashboard, when the Yoast SEO plugin is active.
Meta Titles
For the Meta Title of each page, please enter a title into the SEO title field that follows the below structure:
Page Title | Company Name | Phone Number
Meta Descriptions
For the Meta Description of each page, please copy-paste a sentence or two into the Meta description field from the page’s copy that best describes what the page itself is about.
