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.

Designers & usability testing

Quote from Jakob Nielsen’s September 10, 2012 Alertbox, “Traveling Usability Lab.”

“The key elements in user testing are the facilitator’s skill in drawing out user behavior without biasing the user, and the facilitator’s analytical skills in determining valid and useful design conclusions from observations of this user behavior.”

Both statements are true. In my experience, facilitators tend to be better at drawing out user behavior without biasing the user than at determining valid and useful design conclusions. That makes sense — facilitators are rarely designers and often know less about the why and how of the design than designers.

I think designer participation in tests of their designs is another key element. Too many designers wait for the usability report instead of observing test sessions. Designer participation:

  • Adds another touch point for the designer with users, which makes for a better design
  • Lets the designer communicate information to the testers about why design decisions were made, which helps the testers make informed design conclusions and recommendations
  • Allows designer recommendations for changes in the design to be included in the test deliverables

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

Weighing the value of semantic markup

I’ve been working to sharpen and add to my skill set and am participating in Aquent’s Summer of Learning, which focuses on HTML5.

The book used for self-study is HTML5 & CSS3 Visual QuickStartGuide by Elizabeth Castro and Bruce Hyslop. It really has me thinking about semantic markup, that is, using HTML elements, attributes, and values and ARIA roles to describe the meaning of the content. HTML5 introduces new container elements like header, footer, nav, article, and section that give information about the content based on the element name. ARIA roles (e.g., navigation, main, complementary) provide similar information targeted to assistive technologies like screen readers. Microformats such as hCalendar tell user agents that the strings within the HTML tags represent specific information such as a calendar event.

Of course, site users don’t typically view a page’s source to see the markup. Not one in a thousand will know if you followed best practices and used the element i to place italics around a book title, the element em to indicate that a word or phrase is being emphasized, and the address element for the author’s contact information — all these will appear as italics unless you tweak the CSS to give them a different appearance. Users won’t know if you wrap the publication date in the new time element using the pubdate and datetime attributes. (Browsers are supposed to display text based on datetime‘s value but support for this is lacking.)

So, what’s the payoff?

Continue reading

On web typography

Back in 2009, Jason Santa Maria wrote a great article, “On Web Typography,” for A List Apart. I want to restyle this blog and fonts are one of the first things to think about.

“The system fonts we commonly use such as Georgia, Verdana, and Arial have become so ubiquitous that any associations we might have with them other than “web” are pretty much gone.”
— Jason Santa Maria

Continue reading

Handsontable: an Excel-like table editor for HTML & jQuery

Smashing Magazine turned me on to Handsontable, “a minimalistic approach to Excel-like table editor in HTML & jQuery.”

Handsontable features:

  • Automatic adding of new rows and columns
  • Undo and redo
  • Copy & paste
  • Column and row headers
  • Scrollbars within containers
  • Drag to fill cell values
  • Right-click context menu
  • Custom buttons
  • Conditional formatting
  • Prepopulating new rows from a template

Sounds very cool.

Adventures with WordPress

The blogging portion of this site is based on WordPress. I originally didn’t plan to blog on the site and then changed my mind. The theme I bought included a blog but, once I took a hard look at it I found the blog was extremely manual: there was no interface for managing posts, categories, tags, publishing, etc.

Enter WordPress and the exercise to retrofit this site to use it. My wounds were basically self inflicted: if I’d made an up-front decision to blog, I’d have bought one of the many WordPress themes.

Still, retrofitting WordPress into this site has been an adventure and a good learning experience. I’ve come away with a great admiration for WordPress and the WordPress community. I’m not a true coder (more of a cut, paste, and tweaker), but WordPress does everything I’d expect it a good blogging solution to do and so far I’ve been able to get it to do what I want. The basic documentation is good and, what I can’t figure out from the documentation I can find via Google.

Would I recommend WordPress to my friends? Sure would.

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

Why carolmccue.com

This site came about because:

  • I’m job hunting and need a portfolio site to show my experience and skills.
  • I want a place of my own to write about UX, best practices, and any UX goodies I find.
  • It’s nice to have a playground to sharpen my skills and a chance to do a site my way.

Colophon

  • I selected Go Daddy for site hosting because they offer a lot of features and reasonable pricing, plus they likely won’t go out of business any time soon.
  • The blogging platform is WordPress and I’m also using Twitter.
  • The site is based on the Lemon Responsive Portfolio template available from Theme Forest.
  • The site uses the Droid font family designed by Ascender’s Steve Matteson. For more about the fonts, visit droidfonts.com.