Props to a Few Favorite Special Purpose Apps

Some apps I live in, some I use as needed. Here are a few special-purpose tools that have saved me time and angst on my current projects.

  • ExamDiff Pro (Windows). The freeware version does a great visual file comparison; the pro version ($35) lets you edit files inside the comparison panes, easily moving chunks of text back and forth. On my current job, the developers are working in their environment and I have my own space. When our files meet, ExamDiff Pro helps make sure the code (developers) and layout and style work (me) all come together with no muss or fuss. Learn more, download, and purchase at prestosoft.com.
  • TopStyle 5 (Windows; $80). Most of my CSS work gets done in whatever HTML tool I’m using, be it Eclipse, Dreamweaver, Visual Studio, or SharePoint Designer. But when I need industrial-strength help, TopStyle 5 comes through. I use it to organize and format CSS (version 5 lets you collapse the CSS into sections) and to figure out why my CSS suddenly stopped working (thank you, style check). Learn more, download, and purchase at topstyle4.com.
  • Trying to figure out what’s really going on with your styles and HTML? I use all the browser developer tools (Firefox’s Developer Toolbar is my favorite) but the Web Developer Extension for Firefox is the Swiss Army knife of browser forensics. Working on responsive design? Check out Resize > View Responsive Layouts. Disable your cache, display, outline, and hide page elements on the fly, run validations, view generated source, and so much more.
  • The Ultimate CSS Gradient Generator. Got a button or a background that needs a gradient? Get your cross-browser CSS at www.colorzilla.com/gradient-editor.

Supporting high-res devices

I’m participating in Aquent’s Summer of Learning, taught by Jim Webb. The latest class, Looking Sharp on High-Res Displays, was a winner.

What I learned

Basically, you don’t have to worry about anything but images for high res: fonts, CSS elements, and layout all work without any changes.

  • For high res background images, you want two images: one will be the size of your display area (e.g., 175px high and 100px wide for a display area of 175px by 100px); the second will be twice the pixel height and width of your display area, e.g., 350px by 200px. Best practice: add @2x to the end of the file name for the second image, e.g., my_image.png and my_image@2x.png. Then add some media savvy CSS (see my class notes) to serve up the right image to the right device.
  • For foreground images, you can take one of two routes:
    1. Provide one high-res image for all displays. (The image should be twice the pixel height and width of your display area but you should specify that it’s the height and width of the area, e.g., an image that’s 350px by 200px should have a style=”height: 175px; width: 100px;”.) You may be able to compensate for the added dimensions by using a lower quality compression setting.
    2. Create a a normal image and a high res image and use JavaScript, e.g., retina.js, to serve up the right image to the right device.

Continue reading