Archive for the ‘Website Design’ Category

Overcome challenges to meeting accessibility standards and your website will be usable to a much larger audience

Friday, March 16th, 2012

Building a website to comply with Section 508 or WCAG accessibility standards can mean meeting a number of specific technical requirements.  To assist in building websites that meet these standards, GORGES has found a number of tools that ease the development process.

Total Validator Tool will validate the markup of a web page against Section 508 and WCAG standards.  Getting the markup to validate to these standards helps prepare the website for visitors using screen reader software. Total Validator Tool generates easy-to-follow reports which detail where the markup of a page does not meet the accessibility standards.  From this report, developers can easily see what changes are necessary.

However, once the website markup meets the appropriate standards, there are other aspects of the standards that are beyond what the Total Validator Tool is designed to detect.  These include considerations for visitors with color blindness and preparing any video used on the website for visitors who may be blind or deaf.

Vischeck is a service that will simulate colorblind vision.  Images or screenshots of a website can be uploaded and processed for free at the Vischeck website.  This can give a general sense of how a website may look to those with a form of color blindness.

To ensure a website is usable by those who are colorblind, checking the contrast between foreground and background colors is essential.  The accessibility standards indicate what contrast ratios are necessary.  The WebAIM Color Contrast Checker will provide a ratio based on provided colors while the service Check My Colours will analyze the colors used on an entire site.

Universal Subtitles is a service for adding captions (and translations) to embedded video.  This service is compatible with many popular video hosting services and video players.

JW Player is good option for embedded video that is self-hosted.  It can meet some of the stricter versions of the accessibility standards using the optional Captions plugin and Audio Description plugin.  This includes not only closed captions but closed audio descriptions.  A closed audio description is an additional audio track that may sometimes be needed to describe the video scene to visitors who are blind.

For an overview of making video accessible, a good document can be found at the JW Player website titled “Making Video Accessible.”

Commonly used screen readers include JAWS and Window-Eyes.  For testing with a screen reader, an article on the Yahoo Developer Network suggests using a free and open source screen reader called NVDA.  The article “Easy Accessibility Testing with the NVDA Screen Reader” states:

“NVDA for Windows is one of several screen reader programs available on the market today. NVDA is free and open source. It is very strict in how it treats web pages and thus can serve as a perfect testing tool.”

By utilizing these tools, many of the challenges of meeting accessibility standards can be more easily overcome, and your website will become usable by a larger audience.

Website Search Strategies

Thursday, February 2nd, 2012

Search strategies should relate to a website’s mission and message. They also need to respond to the anticipated user skills and preferences – optimal search strategies on a website for scientist or engineers would be quite different from those for the general public.

Search is really just part of navigation. In many cases information found by running a search routine can also be found by just browsing through the pages. Which serves the visitor best? … is that also what serves the mission best?

Search needs words (also phrases) for searching. When visitors compose their own phrases, will those phrase be effective in searching the website? If not, then search terms should be offered as items in drop-down lists or some similar selection interface.

Next there is the question of what will be searched. A Google-like search can theoretically see every word in the public space of the website. Will this work OK? … will many irrelevant items be returned? … or should that type of “free word” search be used, but restricted to parts of the space with relevant content?

Another approach uses either “free word” input or “selected word” input to search only prepared fields in the database. This allows the web administrators to help or control the search results, but requires maintaining those fields of search phrases.

Many choices and variations are possible. Least expensive is installing one of the free search routines, one that can be limited to just the one website, as Google can. It has quick setup, little maintenance, is familiar to nearly everyone, but in a small website it can be quite imprecise and may often return empty lists.

I recommend a careful discussion with your website’s Information Designer.

Choosing Web Chart Technologies

Friday, December 9th, 2011

Web-based charting has emerged as another great use of the browser. Traditionally, business analysts were the ones crunching numbers on spreadsheet to build charts. The spreadsheet would be e-mail as a file attachment. This process of compiling numbers and chart building could take hours. There is the saying that once information is on paper, it is already outdated. It will not be long before the saying becomes: Once information is in an office file document, it is already outdated. As a result, the web is quickly becoming the preferred platform for data charting and analysis.

In this article, we will discuss approaches to creating charts on the web. Currently, there are two general approaches to creating charts on the web: Image-based versus Scalable Vector Graphics (SVG)-based. There are also Flash-based solutions but we cannot recommend them because Flash is not available on iPhones and iPads and the future of Flash-based solution is uncertain.

Image charts
Here, the server generates a static image (e.g., a JPEG) of the chart from the data and the image gets displayed in the browser. There are a plethora of server-side charting implementations to choose from — a noteworthy one is Google Image Charts: http://code.google.com/apis/chart/image. Since the chart is simply an image, there are no cross-browser issues and the look of the chart is also consistent across browsers. The chart can easily be exported for usage in presentation slides since the chart is just an image file. However, the disadvantage of this approach is that users cannot interact with the chart; they cannot click into a pie chart slice or hover over line graph points to better understand the data being presented. While image-based charts provide a consistent and reliable view of the data, this approach does not give your end users necessary usability needed to make effective use of the information.

SVG charts
Here, the rendering of the chart is strictly on the client browser: There is no server-side rendering of the chart. Data are passed into a JavaScript SVG library which renders the chart as SVG markup (or VML markup if the user is on Internet Explorer 6/7/8). The browser produces a chart from the resulting markup that is mostly consistent across browsers. (We have run into an edge case issue where labels on pie charts get cut-off in Internet Explorer.) Exporting the chart into a file for use in presentation slides is a little trickier — since SVG charts are derived from JavaScript libraries and you cannot create files using JavaScript (at least not easily or consistently across browsers). One possible solution is to post the serialized SVG output back to the server-side and convert into the desired target format (e.g., JPEG, PDF, etc.). These relatively minor issues are offset by the huge gain in chart interactivity. SVG charting libraries allows developers to attach mouse click and hover events to the charts, such that a user can drill down into a pie slice of a chart or hover over line graph points for a more comprehensive view of the data. The SVG charting libraries tend to be relatively easy to use for developers comfortable with JavaScript, relative to the server-side charting tools.

Choosing a solution
When choosing a charting solution, it is necessary to consider the following requirements:

  • Does the chart have to be interactive? If the answer is a resounding yes, then SVG approaches are the only options.
  • How important is exporting chart into other file format? If very important, then it may be worthwhile to look at image-based solutions or possibly dual solutions of both SVG and static images.
  • Are we dealing with tens of thousands of data points? If yes, then it may be neccessary to sacrifice the interactivity of SVG charts for performance of static image charts.

SVG solutions
Below is a brief descriptive of three SVG libraries. This is by no means a comprehensive list.

  • gRaphael: http://g.raphaeljs.com
    • Only completely free solution of the three.
    • Not as mature the others and poorly documented.
    • Programming somewhat easy.
    • Fewer eye candy.
    • Bottom-line: Check back in 6 months; the library is improving rapidly.
  • Google Chart Tools: http://code.google.com/apis/chart
    • Does not cost money but source code is not available and hard dependency on Google’s server.
    • Mature and well-documented.
    • Programming not as easy but powerful.
    • Better eye candy — see Geographic chart.
    • Bottom-line: Good solution but the charts and data security are heavily dependant on Google’s server.
  • Highcharts: http://www.highcharts.com
    • Costs money (couple of hundreds) but open source.
    • Mature; Good documentation.
    • Programming is easy.
    • Best eye candy — charts will “pop” to your users.
    • Bottom-line: Best overall general-purpose charting solution.

Transition operating systems

Monday, May 16th, 2011

Modern mobile operating systems are all the hype, and we’re feeling it here at GORGES – clients are becoming increasingly aware of the importance of mobile technology.

The major contenders when it comes to mobile operating systems are Android, iOS (more commonly known as iPhone, iPad and iPod), and Windows Phone 7 – all fantastic mobile operating systems, it is hard to even begin to compare them to their predecessors.

But why were we suddenly (these past few years) imbued with these brilliant new OS’es?

The answer of course is advances in hardware – lower cost, more computation power, high resolution displays and multi-touch, more storage, faster wireless networks, longer battery life… and on top of all that, advances in nanotechnology has made everything smaller and lighter, too.

My point with this little article, is to share with you an observation that has surfaced in a few of my conversations lately: that these new mobile operating systems are part of a transition towards “real” operating systems running on mobile devices. In fact, I’ve taken to referring to them as “transition operating systems” myself.

The evolution of mobile hardware does not cease. What made these new OS’es possible, is the fact that mobile devices are now almost as fast as “real” computers – and that same progress will put an end to them, too.

Soon, mobile devices will be fast enough to run “real” operating systems – and when that time comes, why would you want a dedicated mobile OS, or even a mobile device dedicated to wireless communications, such as your phone? If you could run a real Windows, OSX or Linux OS on your device, why wouldn’t you? At least two of the major players in mobile hardware, NVidia and QualComm, are currently racing to bring quad-core processors to market this year, so it may be more imminent than you think.

I suspect certain companies, such as Apple, are already having the same realization – it was recently rumored that certain features are being migrated from iOS to OSX. My guess is, they’re getting ready to add support for iOS apps to OSX, with the intent of running OSX on a mobile device in the no-too-distant future.

This is all speculation, of course – and either way, it doesn’t diminish the value of the mobile “transition” operating systems, which paved the way for new advances in user interface / user experience development, and have set new standards for human-machine interfaces overall.

And it certainly doesn’t mean that you should hold out on your business ideas – waiting for real operating systems to hit your cell phones – the new mobile platforms are already embedded in our lives, and they are inevitably here to stay, in some form or another.

Rasmus Schultz has worked for web development companies, advertising agencies and a music software company during his extensive development career. His main strengths are software development and database design. Rasmus has more than a decade of experience with many development platforms, languages and standards.

Our Favorite Wireframing Tools

Monday, May 16th, 2011

Experience shows us that taking the time to plan a software project well, even if it is a small website, is time worth spending. Chaos and miscommunication are the expensive parts of projects. Planning reduces them radically.

There are several steps in planning.

  • Needs Assessment
  • Platform Analysis
  • Information Analysis
  • Wireframing
  • Prototyping
  • Work and Phase Planning
  • Budget Planning

All of these save money and improve the quality of the product. As consultants we also know that involvement and review with the client is a critical part of each planning step.

One of my favorite steps is wireframing because this is where the idea first takes graphic form. There are many small apps for making wireframes.

The wireframing tools that we have used within our office, here are some we like:

Eclipse with a Wireframe Sketcher plug-in ($75 or $37.50 for students). We have a GORGES license, and there is a downloadable standalone version available (http://wireframesketcher.com). You can probably try before buying.

Omnigraffle Pro (Mac-only application). We have an office license, but since it is Mac-only only a few developers use it here.

Pencil (free Firefox Browser plug-in, http://pencil.evolus.vn). Feature-limited and sometimes awkward, but the price is right.

Balsamiq – online version; useful for working remotely. We used this a few years back when it was in free beta stage. http://www.balsamiq.com.

Microsoft Visio – my least-favorite tool because of cost and clunkiness, but perhaps the leading prototyping tool thanks to Microsoft’s influence.  http://office.microsoft.com/en-us/visio/.

Why You Should Use CoffeeScript

Monday, May 16th, 2011

JavaScript (JS) is the programming language that allows web developers to make web pages interactive. Each browser has a slightly different implementation, which developers iron out by using cross-browser frameworks such as JQuery. It doesn’t matter if the server side component is written in PHP or Ruby – the front end is always JavaScript. Thanks to Google’s V8 JavaScript engine and Node.js, JS is also becoming the goto language for realtime interactive web applications such as chat, live blogs. JS is the language behind most everything the end user perceives as cool in the UI.

JS has been around since the late 1990s. Like a house with several owners with different tastes, it’s been added on to over the years. It’s really easy to write ugly JS, chock full of bugs, that no other developer will ever want to or be able to read. You can accidentally open memory leaks that crash the browser. You can accidentally put a variable in the global namespace and cause the rest of the program to come to a crashing halt, or behave mysteriously.

At the same time, the core of JS is a beautiful language that, if you stick to the “good parts,” can support the richest of rich client apps with grace and aplomb. That is where CoffeeScript comes in.

CoffeeScript (CS) is a language that compiles into JavaScript. It makes it easier and less tedious to do good things with JS, and harder to do bad things. Because CS only turns into JS when the i’s are dotted and the t’s are crossed, it is harder to write buggy JS.

Line Noise Reduction

Programming languages based on C or Java, such as JS and PHP, are filled with parentheses and semicolons to tell the computer where each block of code starts and ends. Keywords such as “var” and “function” tell the computer which are variables and which are functions. The programmer’s eye gets used to them, and may even come to rely on them to interpret code on the screen.

Oftentimes before I write a paper I begin with an outline. Top level items are on the left, and each layer of sub-item gets one level of indentation. My word processor responds when I press the TAB key, and has an indent button. There is no facility to write an outline like the following, nor is there a word processing facility for doing so outside of a code editor:

I. The Industrial Revolution {
    A. Origins {
        i. deforestation in 17th century England
        ii. proximity of coal and iron deposits
        iii. accumulation of capital from overseas trade
    }
}

Therefore if you want to make code more human readable, replace the braces with indentation, and let the compiler put them back in for you to make the computer happy. CS does this, calling it “syntactic white-space”:

class App
  ...
  initUI: ->
    if $('#controls').size() is 0
      $('#title').append render('searchControls')
      JKT.earth.addControls() if (JKT.earth)
    ...

becomes:

App = (function() {
  function App() {
    ...
  }
  App.prototype.initUI = function() {
    if ($('#controls').size() === 0) {
      $('#title').append(render('searchControls'));
      if (JKT.earth) {
        JKT.earth.addControls();
      }
    }
  }
  return App;
});

I personally find the CS more meaningful, and the compiled code to be cleaner than the code I would have written to do the same thing (although it’s not fashionable to admit that your code isn’t always the cleanest and most awesome code anyone has ever written).

Notice that the -> stands for “function”, and function name colon: means “add this function to the object prototype.” Please read the CS documentation a few times before you try CS – this is just the beginning of the stuff you can do.

The bottom line is that “line noise reduction” removes as much computer-oriented meaning as possible from the code, while leaving the human-oriented meaning. The principle is that while programmers write code for computers to run, unless it’s one-time only throwaway code, they’re also writing code for other programmers (including themselves when they come back to it three months later to add a new feature). The less time it takes a programmer to figure out what is going on, the higher the business value.

Meaningful Code is Cleaner Code

The code snippet above isn’t necessarily fair, because it doesn’t show JS “before I started writing CS.” I see that it has benefited from the other thing I most like about CS: to make it easier to debug, you have to break it down into smaller parts. Smaller parts that do one thing only are cleaner parts.

That’s right. In the old regime, I might have a JS file with several hundred lines. When a error pops up, Firebug will tell me what line it’s on, and I can jump to it in the code editor and fix it. Maybe right there I will add some more code, and pretty soon I’ll have a large JS file that is hard to edit without Firebug, with lots of interconnected parts and mixed behaviors.

Since CS makes working with the JS object model so easy, I find myself using it. I would take that 500 line JS file and break it into a half dozen or more constituent parts. I have development mode set to deliver these to the browser individually, so if an error crops up, it’s easier for me to find it in the CS. Production mode combines and minifies the JS into one file for speed of delivery to the user.

If you’re coming from Ruby or Python, you’ll recognize the philosophy of human oriented code. You’ll also recognize that CS is 2/3 Python and 1/3 Ruby. Therefore CS will be easier for you if you know one of those; likewise if you hate Ruby, stay away from CS. (And if you don’t know JS yet, don’t try CS…)

Gotchas

I must admit that CS came with some pounding of my head on the table, especially when I started. Here’s where I got stuck, and what I did to get unstuck:

  1. I started by opening a JS file and “saving as” a coffee file. DON’T DO THAT! Create a new coffee file, copy the JS from the JS file, and paste it into the coffee file. The paste action will get the indentation right.
  2. Your code may look indented to you, but it may not be so for coffee. You may have SPACES mixed in with your TABS.

When you make changes to coffee but nothing seems to happen in the browser:

  1. First check that you are running the compiler. I have a shell script that starts coffee’s compile-on-edit mode. Sometimes I forget to run it. By the third alert statement, I check for that.
  2. Second, check the compiler output. You may have a syntax error in CS. It won’t compile at all if there’s a problem with the CS. If you see “cannot use a pure statement in an expression”, it usually means there’s a rogue space in your tab indentation. Redo the indentation and try again.
  3. Third, if the CS compiled but weird things are happening such as it says a function doesn’t exist when you know it does, check the compiled JS. Sometimes there is an indentation issue that doesn’t break the compiler, but causes it to misinterpret where classes end and begin.

In a perfect world

CS is new. Therefore it is not integrated into most IDEs yet. Since Rails 3.1 uses CoffeeScript, it shouldn’t be long before you see CS support in Aptana. There is an IntelliJ plugin for RubyMine and PHPStorm. I use the TextMate bundle. My colleague Jim uses Eclipse and edits it with plain text, as he finds it still easier to read than JS.

Getting started

I recommend going to the CS website (http://jashkenas.github.com/coffee-script/). Read it a few times before you do anything. Bookmark it. Then install node, npm, and coffee.

When I started on CS, I had a few thousand lines of JS already written. Most of it was for a prototype, and I dreaded having to whip it into production grade and add the rest of the features to it. I started learning CS by porting some of the easier JS files. When I was comfortable, I took on the hairy part. It emerged as a piece of code I’m proud of and like to work with.

In a nutshell, CoffeeScript makes it fun for me to write clean JavaScript, and delivers business value by helping me to write maintainable JavaScript faster that it otherwise would. If you’re not using it yet, it’s time to start.

References/Additional Resources

  1. The CoffeeScript web page: http://jashkenas.github.com/coffee-script/
  2. My presentation to the Ithaca Web Group: http://www.slideshare.net/davidfurber/real-lifecoffeescript
  3. Tongue in cheek presentation of why you’ll hate CS: http://www.slideshare.net/tim.lossen.de/coffeescript-7-reasons-you-are-gonna-hate-it
  4. The PeepCode screencast, “Meet CoffeeScript”
  5. The PragProg book (written by yours truly), “CoffeeScript: Accelerated JavaScript Development”
  6. The CoffeeScript Cookbook wiki (new, but promising)
David has a passion for both web site design and development, both front end visual design and back end programming work. He loves the endless variety of projects and tasks that go into launching a successful Web site.
©2013 GORGES - All rights reserved
where programming meets design and lives happily ever after