BOMAVI

Perfect-pixel and cross-browser

About:

  • front-end
  • design
Image - Perfect-pixel and cross-browser

Perfect-pixel and cross-browser11 Apr 2015 - 02:59

What does perfect-pixel means

"Perfect" means that every element of every design comp is exactly as you intend them to be in the final programmed product.

With margins & padding, this means that they are consistent across the entire site design. If each sidebar block in a design is intended to have a 10px margin, then design it that way each and everyt time there is a sidebar block.

With font & color, it means consistent use across the site. Design each piece of font as if it were a linked to an HTML element (ie: all H1’s are always 18px, bold, Georgia using black color). Don’t deviate - as one of my favorite project manager’s once told me, there really shouldn’t be more than 3 or 4 font styles on any single page unless you have a damned good reason to do it. If you are using a specific color of red as a highlight color on the site, make sure that it’s that exact color of red in every single place (unless you’ve got a reason for it to be different).

Borders, HR rules, & backgrounds should also be consistent - I’ve seen some comps where every border & HR are different shades of the same color - this ultimately leads to comps looks sloppy and unprofessional. To an untrained eye, it’s easy to see when a design feels half-baked... even if that person can’t put their finger on exactly what’s wrong.

Finally, use icons, images, titles, and text that are as near to the real thing as possible. If you’re redesigning a website, use the content that they already have published instead of Lorem Ipsum. If the client says that they have new icons or images that they’ll use in the redesign, ask for them and include them in the design.

Remember, we’re striving to create design comps that are so precise that they look like screenshots of the actual, live, coded implementation.

What does cross-browser means

Cross-browser refers to the ability of a website, web application, HTML construct or client-side script to function in environments that provide its required features and to bow out or degrade gracefully when features are absent or lacking.