Excerpt.
A case about creating a website template from layout for the WordPress platform. Our customers – marketing, advertising, design and SEO agencies – offer their clients marketing support, advertising services and SEO promotion. Their specialists create an individual website design, and we make a programming part for it.
When creating websites, it is important to exactly match the designed layout. To do this, we use the Pixel Perfect approach.
Client story.
Agencies offering a range of services to promote a company on the Internet often turn to third-party developers to create a website. For their clients, they create design layouts, which in the future need to be converted as a valid template for CMS WordPress.
We are provided with image files in Figma / Photoshop / Adobe Illustrator / Adobe XD programs and others for our work.
As a result, we create a template according to WordPress coding standards, as well as an operational WordPress site using this template. We use a testing WordPress website to demonstrate the developed template.
Our solution.
The WordPress platform offers many paid and free website design templates, but they are not suitable for custom development. Especially, when you need to create an original, personalized website using the custom design layout.
The Pixel Perfect is important here. According to this approach, all elements of the website, including margins, font sizes, line heights, image sizes and object placement, shall match the layout to within a few pixels.
We offered the customers the following:
- To make up the visual part of the website with the Pixel Perfect approach
- To develop a programming part based on the WordPress coding standards. And build the installable template for WordPress platform.
Note: It is technically impossible to create a website with a pixel-to-pixel match, since even fonts and line spacing in different browsers can be displayed differently. Sometimes the designer can also make a mistake in the indentation or alignment. Therefore, we always try to keep a balance between the accuracy of the layout and the coded version.
The result.
Here are some examples of how the website layout was created. The compliance and coincidence of the HTML template and layout also was checked.
First, we developed the basic structure of the pages. We thought over and created the home page, pages, posts. Next, we installed the necessary fonts, images, prepared all the texts and made the layout.
In accordance with Pixel Perfect, we acted on the following principle:
- The original layout was saved in
.pngformat - We opened the created website in the browser
- With a special plugin, a copy of the layout was put on the page
- We corrected the location of the elements for an exact match
Headers and margins check:
Text page check:
Checking input fields:
Important! The matching of elements, blocks, fonts and margins is checked relatively to the dimensions the designer created the layout in. If its width is 1920 pixels, the screen is adjusted to the same size.
Designers often provide us with a layout for PC monitors (about 1280 pixels) and for the mobile version. This is enough for us to work, and we are already adapting versions for screens with other resolutions during the development process.
Creating a website on the WordPress platform typically requires additional functionality: online calculators, special animations, specific forms, etc. We create WordPress plugins for this.
Here are a few examples of how we did the WordPress template development.
Website in Finland
Home page
During the work, the customer's designer edited the layout, so the result differs from the prototype.
The prototype:
Developed result:
Cases
In this and other sections, we followed the Pixel Perfect concept and exactly repeated the design layouts.
The prototype:
Developed result:
Contacts
The prototype:
Developed result:
Technologies
On this page, all blocks, fonts and margins correspond to the designer's prototype, and only the content – images and text – differs.
The prototype:
Developed result:
Solution and platform
The prototype:
Developed result:
Financial website
Home page
The prototype:
Developed result:
Calculator
The prototype:
Developed result:
Blog (list)
The prototype:
Developed result:
Blog texts page
The prototype:
Developed result:
Summary.
In these projects, it was important to fully match the layout of the created websites. This allowed not only to get the expected result, but also to simplify the cooperation between the designer and developers.
The Pixel Perfect approach is used to ensure that the finished solution fully corresponds to the layouts created by the designer.
In addition to that, we released / developed all the requested functionality. The websites work correctly on the WordPress platform and can be modified if necessary.
Each of the projects took about 2 weeks. Both were accepted by both the designers and the end customers.
