This 1 Neat Trick For Pixel Perfect Web Pages
semantic, responsive, yes
I have hired many developers over Twitter, paid them about $40 an hour, and later discovered that the majority of them do not understand the importance of pixel perfect development. Now, listen, I get it; one of the hardest parts of being a developer is dealing with design. We write code to bring a design to life, but sometimes designs are tough.
Designs. They are tough sometimes.
Regardless of how tough a design is, though, it is our duty as developers to make sure our product perfectly matches the vision that was created for it. Just like how a single data entry error into a radiation machine could kill a cancer treatment patient, being off by a single pixel or font size can ruin the entire user experience. Not one to let that happen, I let go all of my developers and instituted a new process for pixel perfection: Image-first Development
Image-first Development
Let’s say your creative director sends you a P.S.D. (PhotoShop for Developers) file and it has a lot of text and images and colors. You can try to write code for all of it, load a bunch of California Style Sheets, and hope that what you built matches the P.S.D., but that’s most likely not going to happen. Stop wasting time and file space, and just save the P.S.D. as an image and use that as your web page.
There are two schools of thought when it comes to Image-first Development:
1. Use a programming language like H.T.M.L. to embed the image into a page (index.html) for example.
You saved your page comp as myWebsite.jpg, and you want index.html to show that content. Here is your code:
<img src="myWebsite.jpg" />You just saved yourself hundreds of lines of code and files with this format, also your web page looks exactly how the designer intended it.
2. Just direct your users directly to the image file.
No need for code, just send your users to /myWebsite.jpg. With image extensions, there is one less character to type, saving bandwidth and most likely improving the computational complexity of the packets sent through routers in the network.
“But Jann, this isn’t semantic, using images is a terrible idea because there is no accessibility!”
The W3C added the alt attribute to img tags for this exact reason. And for extra accessibility, you should include all of the text in your image’s file name.
In the left image, we have a weblog that we are using the Image-first Development process. In order to make the page still accessible, we are going to change the alt tag of the image and the file name so screen readers can let blind users know what is going on.
<img src="treehouse-blog-pixel-perfect-front-end-development-matters-spencer-fry-business-design-41-comments-stay-updated-jan-15-2014-previous-next-facebook-icon-twitter-icon-google-plus-icon-rss-is-dead.png" alt="The biggest way to prevent mistakes as a front-end developer is to keep learning and continuing to practice. You can keep learning by taking advantage of Treehouse lessons and staying abreast with the latest conventions through following Hacker News, browsing Stackoverflow, reading Reddit and other notes on the craft." />It may seem like a lot of code, but it’s a lot less than if we were to actually build the page. The one caveat is that you need to update the file name whenever the number of comments change or when the page is updated, but you can use .htaccess redirects to make sure there are no broken links.
But is it responsive? Where are the links?
That’s where the classic Ask-A-Cop method comes in. Read that article for more information. It works out perfectly for Image-first Development because you only need to deal with one image. As for links, everything should be single-page nowadays. Learn Ember.
Through the thick of it all, Image-first Development leads to less time to build, less developers needed, and absolute pixel perfection. I hope you learn — and others do too — that pixel perfect front-end development matters as well as great code.
Jenn Schiffer is a Business Guy™ and net Award winner for her Dart fanfiction collection, A List ADart.
