PSD to HTML5 / CSS3 Conversion

In 2015-2016, Google began taking into account the speed of the site’s load time on different devices in search results, since just a few extra seconds of waiting on page to load can scare the user away and they might go to another site. This is especially important for those who open the site from mobile devices, because the connection speed and power they have is much weaker than a usual PC. In order to minimize page loading speed we use file compression and caching algorithms, use optimal image formats and optimize images, of course, without loss of quality.

Most of the time we are using SCSS preprocessor, which has established itself as the most universal at the moment. But we also have experience working with SASS, LESS, STYLUS in projects. Preprocessors and 7-in-1 pattern allow to speed up development process, provide code flexibility and ease of future support, by other developers included, since most projects continue to advance and scale throughout their entire life cycle and our task is to create a foundation that will be flexible and have ease of change in the future.

We value and respect the designers’ work, therefore, so that the pages we slice won’t differ from the layout design, we use special utilities such as Pixel Perfect, which allows us to compare the layout with sliced page pixel by pixel. And in the layout we will always fix small flaws with text alignment, grid and typography, because accurately calibrated typography always raises the project a level higher.

It is no secret, that the website should be well displayed in all modern browsers on all possible devices, and for this you need to know the subtleties of each OS and browser features. And we know them. We know, for example: on iPhone, in order to prevent whole page zooming in when a text input is focused, it’s enough to set an appropriate font size; on Desktop, to get perfect smoothness of animations with 60fps, only certain css-properties need to be changed; We even remember how to make border-radius work in Internet Explorer 8, although we hope it won’t be necessary.

In order for the search engine to correctly and quickly process the content of the site’s code, it is important to ensure that the code is «understandable» to it and does not contain errors. The W3C standard defines general rules for writing HTML code, that search bots are guided by, and semantic code lets them read not only the page’s text but logical structure of the site as well. For example, when search engine sees the «nav» tag it immediately understands that this is navigation panel and will index the links in it faster and they will gain more SEO weight.

We create responsive layout for all screen sizes from old smartphones with small resolution to modern large monitors with different aspect ratios. If the project’s architecture requires it, we do adaptive layout – different versions of a site, to make site’s usability much more comfortable and avoid unnecessary information being loaded for each version.