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.

Should you use responsive design? It depends.

Responsive design allows you modify the layout, navigation, content, and appearance of a website or application based on the width of the user’s browser.

Example: This website uses responsive design — if you’re viewing it on a resizable browser (laptop/desktop), see what happens when you narrow the width of your browser. If you’re using a tablet browser or smartphone, try changing its orientation, e.g., from landscape to portrait. At the smallest screen sizes, the top navigation turns into a dropdown and multicolumn layouts become one column, all done through the magic of media queries and flexible layouts.

Some people think responsive design is the one-and-only answer to sites and applications for mobile users. Others believe it’s best to have separate websites or apps for different devices, e.g., iPad, smartphones, and laptops/desktops.

I’ll go with the classic usability answer: it depends.

Continue reading