Pixel perfection. Every designer worth its salt strives to make its designs pixel perfect. Unless they're designing for the web. The web is diverse, fluid, overwhelming, even chaotic. You can browse the web from a tablet, a mobile, on Apple iOS 4 or Android Ice Cream Sandwich, a retina device, an old monitor, using Google Chrome, or Internet Explorer, and so on.
- Tcel 1 5 1 – Make Your Webpages Pixel Perfect Website
- Tcel 1 5 1 – Make Your Webpages Pixel Perfect Free
If you made down to this section we know your interested in growing your business, contact us for your free quote. Make the change you need to unlock more business, take your business to the next level and grow And THRIVE! Hollywood, CA 90038 Phone: (818) 455-9768. If you made down to this section we know your interested in growing your business, contact us for your free quote. Make the change you need to unlock more business, take your business to the next level and grow And THRIVE! Hollywood, CA 90038 Phone: (818) 455-9768.
TL;DR: Pixel perfection on the web is nearly impossible.
Yet I challenged myself to try and do it, by redesigning this website. Battery health 6 0.
Pick a grid
I chose to work on a 32px grid. If you're using Photoshop, go to Preferences [Cmd + K] > Guides, Grids & Slices, and add a Gridline every 32 pixels with Subdivision of 1. To view the grid, go to View > Show > Grid [Cmd + ‘].
Stick to the grid. Every vector icon, image, text, container, needs to adhere to the 32 pixels. To help you out, Photoshop can snap your elements to the grid. To enable it go to View > Snap To, make sure Grid is checked, and enable by going to View > Snap [Shift + Cmd + ;].
When it's time to code your pixel-perfect website, you can create a 32px x 32px transparent PNG pattern that you can use as a background, to help you out. Create two 1px lines and place them on top and left side of the pattern (example).
A grid of 32px until it isn't
If you clicked to study this website on the grid, and your browser screen is wider than 1280px, you might have observed that the text doesn't fit vertically the 32px lines. That's because the font size of the text is bigger, meaning that the line height is bigger than 32px. Resize your browser a bit to see text fall into place. The same applies to mobile devices (font size is smaller).
Compose to a vertical rhythm
The web consists mostly of text and cat pictures. Leaving cat pictures aside, text needs to be readable. Vertical rhythm refers to the spacing and arrangement of text as the reader descends the page. It is contributed to by three factors: font size, line height and margin or padding.
To improve readability, keep your text length between 50 and 75 characters per line. For body text, the line height should be 1.6x the font size. So for a 20px font size, the line height would be 32px (our grid). Read more on how to compose to a vertical rhythm.
When you measure vertical height with text, always exclude ascenders and descenders, because each type is different. Measure everything from the X-height, which is the height of the body, minus ascenders and descenders. This is equal to the height of the lowercase ‘x', hence its name.
Retina revolution
Tcel 1 5 1 – Make Your Webpages Pixel Perfect Website
I don't own a retina device. I almost bought one in September 2012, when on the lookout for a new laptop (went for a 13' Air). Retina is the future, and in order to future-proof your pixel-perfect website you need to use SVG (Scalable Vector Graphics) when exporting your graphics. By using SVG, you can scale the image infinitely without losing quality and pixelating/blurring the graphic. I wrote in a previous post how to make your website pretty for retina devices.
There is a rule when exporting assets. You use JPG for photographs, and PNG for graphics. By doing that you reduce the file size of the asset. That is because graphics usually consist of large blocks of colour that are displayed more efficiently with PNGs. I say scratch that; use SVG instead of PNG. SVG can reduce the file size even more than PNG.
To demonstrate, see the image before the image above? When exporting a:
- JPG at quality at 60, file size is: 126KB.
- PNG-8 with 16 colours, file size is: 30.43KB.
- SVG with embedded glyphs, file size is: 29KB.
- SVG with system fonts, file size is: 14KB.
In contrast, the image above is 12KB in PNG-8 and 20KB in SVG (embedded glyphs). But for 8KB more, I get to scale the image infinitely.
Tcel 1 5 1 – Make Your Webpages Pixel Perfect Free
Did you know: Most images of this blog (and of this post) are SVGs.
Pixel-perfect icons
Creating pixel-perfect icons is not an automated process. In your Photoshop preferences, if you have Snap Vector tools to pixel grid enabled, you might need to disable it in some cases. By disabling this feature, you can move Vector shapes in increments smaller than 1px, the so-called 'pixel hinting'. Net monitor 4 9 2. More on pixel hinting.
For production, you can export the icons as SVG and format them into a typeface (for easier scaling and embedding). There's a cool app that helps you with that, called IcoMoon. That's the app I used for all the icons you see on this site.
Developing the pixel perfect website
All is well inside Photoshop (or Sketch), but once you switch to the browser, all Hell breaks loose. Some prefer to design purely in the browser. I prefer to use a hybrid method.
It's easier/faster for me to move elements inside Photoshop. Once I have a rough pixel-perfect layout, I switch to the browser and start coding it. In the browser, it's not uncommon to change things around, especially if I'm doing responsive layouts. Oh, and I hate bootstraps and ready-made grids. I'm paranoid about my code and I want to know what every bit of code does what. I can make changes faster this way. Also, using a bootstrap doesn't allow you to learn how to properly code CSS.
In order to develop a pixel perfect website, you need to know your CSS. I mean really know it. Perfect your CSS coding skills with Treehouse. Accept the fact that your code might get ugly for the sake of pixel perfection. Because you need that super fine control, it's not uncommon to find code like:
And that's ugly. But it works.
Another important tip is: do not round decimal places. Let the browser do the calculations. If we have a line height of 48px / 36px don't do this:
Failure in doing so, will result in a not so pixel-perfect website.
Test on actual devices
Forget simulators. Ask your friend if you can borrow his Samsung Galaxy S4 to test your website. Go to your local Apple store and try out your website. Dust your old devices from the attic and test your website. Build a device lab. The more devices you test, the more pixel-perfect your website will be.
Pick your battles
Accept that you website won't be pixel-perfect. I made this website pixel-perfect for Google Chrome, iPad, and iPhone, but I decided to not support IE 8. Unless you have an unlimited budget, you cannot make your website pixel-perfect in all browsers. Like I said in the beginning: the web is too diverse. Pick your battles and move on.
The meta tag alone did NOT fix my site from being a clunky mess on mobile vs web browsers. HOWEVER, something ELSE did work for me: I used the CSS property max-width: 100%. I threw it on every section of my CSS page that needed refining aaaand..it worked! So if any of you are still struggling like I was, banging your heads on your keyboard, etc., and the meta tag isn't enough, try max-width: 100% and see if that helps. You might want to try one area at a time before copying and pasting down the line like I did. Hope this helps. Cheers!
