Pixel Perfect?
A pixel perfect web build, is the process of front end coding a site to look exactly the same as the creative document that a graphic designer has produced as a design for the site. PSD files are normally used to present the creatives to the developer & the build is expected to be identical in look to this file.
Building Websites From PSD’s
Approximately half of the websites I used to build were from PSD’s (Photo Shop Data Files), but time has moved on. Now most of the site I build involve using tools like “Sketch measure” & Adobe XD, which considerably speed up any pixel perfect build. Great care needs to be taken by the graphic designer when making the creatives, especially when choosing the fonts. As many fonts are system specific and are not freely available on the web. Such fonts will need a licence to be used as web fonts which must be taken into account when designing the site. Also load time must be a factor as too many web fonts will slow down the load speed of the web pages, effecting usability & SEO.
Choosing the right implementation
A big part of pixel perfect web build (apart from making the website look exactly like the creatives) is making sure I get the implementation of the graphic designers vision correct. Choosing/creating the right plugins (if WordPress), getting the Java Script to work just right & getting the CSS to match the colours, fonts & font weights used as closely as possible to match the original design.
Cross browser compatibility
Although gone are the days (mostly) that separate style sheets have to be included for browsers such as Internet Explorer, sadly there are still many incidents where HTML, CSS & Java Scripts are not cross browser compatible. With the latter there is usually some easy fix, like altering the syntax slightly, but with CSS things can get out of hand! For example “When a pixel is not a pixel”, sounds crazy, but this is a real problem across browsers and especially when it comes to mobile devices. One simple fix I use for blocks of copy is to set a slightly larger line height: between 1.2 to 1.6, right across the board. This has the effect of normalising the copy and allowing them to be mostly the same across desktop browsers. But there are still many issues like “pixel density” that need to be solved across mobile devices. For an in depth view of this problem and solutions take a look here.
W3C Standards
The W3C (The World Wide Web Consortium) is an organisation which, in their own words:
The W3C mission is to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure the long term growth of the web. W3C is an international community where Member Organisation, a full-time staff and the public work together to develop Web Standards, led by Web inventor Sir Tim Berners-Lee.
Although not a legal or moral requirement, I ensure all my work is W3C compliant (where possible). Feel free to check out this page here.