2410 CASE STUDY

Pixel perfect WordPress template development

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.

Let’s discuss your project

Let’s discuss your project to find out how we can help you. Schedule a free 15-min meeting

Share this article

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:

  1. The original layout was saved in .png format
  2. We opened the created website in the browser
  3. With a special plugin, a copy of the layout was put on the page
  4. We corrected the location of the elements for an exact match

Headers and margins check:

Checking headers and margins using the Pixel Perfect plugin
Checking headers and margins using the Pixel Perfect plugin

Text page check:

Checking text pages using the Pixel Perfect plugin
Checking text pages using the Pixel Perfect plugin

Checking input fields:

Checking input fields using the Pixel Perfect plugin
Checking input fields using the Pixel Perfect plugin

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:
The prototype of the homepage / Retail security company
The prototype of the homepage / Retail security company
Developed result:
A new homepage for retail security company
A new homepage for retail security company

Cases

In this and other sections, we followed the Pixel Perfect concept and exactly repeated the design layouts.

The prototype:
The prototype of the Cases page / Retail security company website
The prototype of the Cases page / Retail security company website
Developed result:
A new cases page of the retail security company's website
A new cases page of the retail security company's website

Contacts

The prototype:
The prototype of the Contacts page / Retail security company's website
The prototype of the Contacts page / Retail security company's website
Developed result:
A new Contacts page of the retail security company's website
A new Contacts page of the retail security company's website

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:
The prototype of the Technologies page / Retail security company's website
The prototype of the Technologies page / Retail security company's website
Developed result:
A new Technologies page of the retail security company's website
A new Technologies page of the retail security company's website

Solution and platform

The prototype:
The prototype of the Solutions page / Retail security company's website
The prototype of the Solutions page / Retail security company's website
Developed result:
A new Solutions page of the retail security company's website
A new Solutions page of the retail security company's website

Financial website

Home page

The prototype:
The prototype of the homepage / credit institution website
The prototype of the homepage / credit institution website
Developed result:
The new homepage of the credit institution's website
The new homepage of the credit institution's website

Calculator

The prototype:
The prototype of the Calculator page / Credit institution website
The prototype of the Calculator page / Credit institution website
Developed result:
A new Calculator page of the credit institution's website
A new Calculator page of the credit institution's website

Blog (list)

The prototype:
The prototype of the Blog page / Credit institution website
The prototype of the Blog page / Credit institution website
Developed result:
A new Blog page of the credit institution's website
A new Blog page of the credit institution's website

Blog texts page

The prototype:
The prototype of the Text page / Credit institution website
The prototype of the Text page / Credit institution website
Developed result:
A new Text page of the credit institution's website
A new Text page of the credit institution's website

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.

Pixel perfect WordPress template development | Case by 2410

Web development agency.

Explore project - based services. Fixed price, fixed delivery time, fixed delivery terms. WordPress, B2B system development and custom scripts.

WordPress

Template development, plugins, automation, e-commerce on WooCommerce, full-stack website development

Learn more

B2B Solutions

CRM, ERP, internal business applications, automation, calculators, SaaS and custom products

Learn more

Custom Coding

Custom script programming, API and integrations, Zapier and Integromat scenarios, automation

Learn more

Subscription

On-demand graphic design & web development services. One flat monthly fee. Scalable, fast and affordable.

Learn more