Feb 242014

I previously referenced an article in this blog on CSS regions which are a way of controlling the flow of content in a specified order via   containing block elements a.k.a. CSS regions. This allows for artificially (if you will) controlling content flow vs a more organic approach using native CSS3 multi-column layouts.  The purpose of CSS regions is to more precisely control content flow in responsive designs.

I suggest reading both articles for an excellent point counterpoint perspective. The implications impact semantic markup and responsive design. The author of this article is sympathetic to the concept of CSS regions while pointing out real problems with implementation.

CSS Regions Considered Harmful ∙ An A List Apart Blog Post.

Feb 112014

Here’s a handy set of references on using the style panel in Dreamweaver from version 8 through CS6. Functionality across versions is similar. This is a CSS tutorial using Dreamweaver as the development tool.

Feb 052014

I’ve been having fun putting up screencast tutorials for the courses I teach using responsive video that resizes with the viewport. The only problem is distortion on resize: quality not aspect ratio. The trick with this type of screencast is that viewers are usually working on tasks while viewing so screen space is limited. Not everyone has the benefit of multiple monitors, therefore, you really need flexible media that retains quality on resize. Chris Coyer offers up some creative solutions in his post that should address the problem. I’ll do an update as soon as I give them a try.

Rundown of Handling Flexible Media | CSS-Tricks.

Jan 162014

Content editing is critical to the online success of any business. It’s responsible in large part for clarity in branding and task completion as well as usability and SEO. That’s because when looking at editing in the big picture it covers five broad areas according to the author.

  1. Substantive Editing
  2. Copyediting
  3. Fact-Checking
  4. SEO
  5. Proofreading

Effective editing has implications for all aspects of your content. It’s more than just proofreading for corrections and minor tweaks. In terms of SEO here’s what Google has to say about content in it’s quality guidelines.

  • Make pages primarily for users, not for search engines.
  • Don’t deceive your users.
  • Avoid tricks intended to improve search engine rankings. A good rule of thumb is whether you’d feel comfortable explaining what you’ve done to a website that competes with you, or to a Google employee. Another useful test is to ask, “Does this help my users? Would I do this if search engines didn’t exist?
  • Think about what makes your website unique, valuable, or engaging. Make your website stand out from others in your field.

Read the complete article for detailed information and be sure to check out the one on Confused Business Words and Phrases which is referenced and also linked below so you won’t miss it.

Editing Tips For Business Web Content | Smashing Magazine.

Commonly Confused Business Words and Phrases.

Jan 132014

We’ve all arrived at search results pages where no results are found. If handled poorly these pages can harm your website’s goodwill, and if handled well they can increase site use by offering your visitors alternative suggestions and options. The author provides good examples and tips on best practices.

3 Guidelines for Search Engine "No Results" Pages.

Jan 132014

Nielsen distinguishes between intrinsic and extraneous cognitive load, and as implied by the label, the latter should be reduced on your pages so your visitors focus on the tasks and information at hand. Tips are offered on how this can be achieved. The article is a very short but important reminder on obvious ways to increase your website usability.

Minimize Cognitive Load to Maximize Usability | Nielsen Norman Group.

Jan 092014

Here’s an excerpt that lists the lean UX manifesto. The article does a nice job of explaining these points and how they make for a more efficient and effective design process.

We are developing a way to create digital experiences that are valued by our end users. Through this work, we hold in high regard the following:

  • Early customer validation over releasing products with unknown end-user value
  • Collaborative design over designing on an island
  • Solving user problems over designing the next “cool” feature
  • Measuring KPIs over undefined success metrics
  • Applying appropriate tools over following a rigid plan
  • Nimble design over heavy wireframes, comps or specs

As stated in the Agile Manifesto, “While there is value in the items on the right, we value the items on the left more.”

The Lean UX Manifesto: Principle-Driven Design | Smashing UX Design.

Dec 312013

This is a good resource for Dreamweaver alternatives. The author compares features so you can quickly see what’s missing and compare that to features you may need. If you’re on Windows, Microsoft Expression Web 4 is a good alternative.

10 Best Alternatives To Adobe Dreamweaver.

Dec 212013

If you are interested in Information Architecture and creating effective website taxonomies then read this article. It really is a definitive “how to” guide on card sorting. There are excellent resources for further reading as well.


Card sorting is a great, reliable, inexpensive method for finding patterns in how users would expect to find content or functionality. Those patterns are often referred to as the users’ mental model. By understanding the users’ mental model, we can increase findability, which in turn makes the product easier to use.


Does not consider users’ tasks – Card sorting is an inherently content-centric technique. If used without considering users’ tasks, it may lead to an information structure that is not usable when users are attempting real tasks. An information needs analysis or task analysis is necessary to ensure that the content being sorted meets user needs and that the resulting information structure allows users to achieve tasks.


Dec 192013

This article was prompted by Adobe’s announcement that they will no longer continue development of Fireworks. Many UI designers use the Illustrator Photoshop combination which begs the question for some – Why Fireworks?

If you read this excellent article you’ll get the answer in detail with a mouth watering list of features that make obvious the reasons Fireworks is an excellent UI development tool.

Here’s a brief excerpt on Photoshop/Fireworks differences.

Photoshop is the (elephant in the room) most obvious example. It was created for photo editing and print design tasks. A few UI design features were later added to it, yet Photoshop still lacks many features that would make it really useful (and easy to use) for screen design. Still, thousands (if not millions) of users worldwide have been working with this imperfect tool for more than a decade and use it successfully for UI design tasks.

Fireworks, on the other hand, was built from the ground up for UI and screen design, and every single feature in it is intended specifically to help the UI designer. Even though Fireworks isn’t the perfect tool, in my opinion it best meets the needs of UI designers.