News Flash

Great article by @NeutronUK on how to create a print stylesheet using Firebug and the Web Developer Toolbar - http://cot.ag/bOQiVM

Tagged: Mac

16 September 2008

A New Type of Gorilla is Born

Clearleft is comprised of skilled professionals who have a passion for the processes used to create usable websites. It was that passion that led to the birth of Silverback, a usability testing application for the Mac. Usability testing is something that is often overlooked for an array of different reasons:

  • The cost and time is perceived as too high, and therefore left out of the scope of projects.
  • Not enough staff to administer and process the tests.
  • Lack of the proper equipment or tools.

So, assuming you don’t have thousands of dollars, usability experts, and testing labs at your disposal, what are you to do? Enter Silverback.

What is Silverback?

Simply put, Silverback is beautifully simple usability testing software that utilizes your Mac’s built-in iSight webcam and microphone. With its simplicity and its affordable price point ($49.95), Silverback allows anyone to perform usability testing with little or no budget. The best part about Silverback is that it comes ready-to-use right out of the box. There are no large configuration files or settings, it just works. Jonathan Christopher of Monday by Noon says it best when he states:

My favorite applications do one thing and do it well. Silverback will be one of those applications.

Clearleft are known for their elegant interfaces, and it is immediately apparent that they paid close attention to the interface of the application itself. The interface eliminates the cruft and gets out of the way, allowing you to run the tests and parse the results without sifting through an intense interface. It is this attention to the little details that allow you to keep your usability tests simple and focus on the user interaction, versus setting up the application and learning the interface.

How Does it Work?

Setting up projects is a quick and painless process, and setting up the profiles is just as easy. Silverback utilizes the iSight camera of your Mac, which can turn your laptop into a portable usability lab. Once you create a project and a profile, you can start recording the session. While the test is in progress, Silverback is completely transparent to the user. It records the video and audio of the user, as well as highlighting the clicks of the user. You can control the recording process via the Apple remote, setting chapter markers while the test is in progress. The participants of the test only see what they need to see, and nothing more.

Siverback Project Creation Screen

Silverback Project Screen

Once the session is completed, you can make notes on the session and then export the test. Once you are ready to export the test, there are options that allow you to place the video in any corner of the screen. Along with the placement of the video you can change its transparency. I see this as one of the greatest features, as you can see the video and watch the user interacting with the interface or website, and make it semi-transparent so that you can still easily see all possible clickable areas. Depending on the time of the session and your exporting options, you may want to go make yourself a cup of coffee while you wait for the test to finish exporting as it can take some time. The final exported video can then be stored for later review, and you can use the interface to make notes about the test.

Silverback Export Preferences

Is it For Me?

In the beginning we looked at some of the different reasons that developers overlook usability testing. Silverback addresses those barriers with:

  • Cost. The cost of the application is $49.95, with 10% of the profits made on the software going to save the gorillas. This makes the application affordable no matter what the size of your organization.
  • Staff. The simplicity of the application makes it easy for anyone to use. While it may take a more skilled individual to process the results, it is very simple for anyone to setup and administer.
  • Equipment. The only hardware you need is an Apple computer equipped with an internal or external iSight camera and a microphone (if you choose to record the audio and video).

Many developers are familiar with the different analytics tools available to them. Analytics are a vital part to understanding a website. They allow you to see the quantitative data associated with your website. However, analytics fail to show you some of the qualitative data associated with your website. Performing usability tests give you a glimpse of that qualitative aspect, as you can setup and execute tests and see how a user responds. You are seeing first-hand how a user navigates and performs different tasks on your website.

It is important to note that, just as with anything else, it takes professionals to analyze the results and then plan for a proper course of action. This does not replace usability experts. Silverback is just another tool in a web developer’s toolbox. When used properly, it is a very powerful and lightweight application. Silverback comes with a free 30 day trial, but I will admit that it only took minutes for me to realize that this is a must-have tool. If you are looking for a tool to help you perform usability tests on a smaller budget and minimal staff, then look no further than Silverback.

Software Name: Silverback

Maker: Clearleft

URL: http://silverbackapp.com/

Price: $49.95

Rating out of 5: 4

Continue reading 19
Future of Web Apps Dublin May 14 2010

9 April 2006

TextMate

TextMate is not just a text editor for Mac OS X, it’s ‘the’ text editor for Mac OS X. Or at least if you believe the hype. Created by self-confessed UNIX geek, Allan Odgaard, TextMate has quickly risen to the top spot when it comes to Mac editors and now enjoys a somewhat charmed life in the glow of developers the world over. So the question is, what makes TextMate so special? Let’s have a look.

Generally speaking there are two reasons why TextMate has been able to push so many people’s buttons. Firstly, common conventions are elegantly handled by TextMate’s intuitive interface. In short, the software does a lot of things for you without getting in the way. Secondly, when you open TextMate you’ll notice it consists of a window and a standard Mac OS menu. The UI is certainly simple to look at. There are barely any icons or visible features at all. Yet underneath this there are so many features packed in that it is comparable to any other fully-featured text editor. You could say that its simplicity embodies David Heinemeier Hansson’s mantra, ‘convention over configuration’.

There are quite a few features TextMate that undoubtedly increase your productivity but yet are easily missed. Column Selections is one of them.

Column Selections

Columnar editing example

If you press alt, the mouse pointer turns into a cross. You can use this to select rectangular regions. This particular feature is very useful when editing HTML. For example, you may wish to add a <div> around a group of elements. To keep your indentation, hold alt, click, and drag down in a straight line. At this point, whatever you do will be multiplied on each selected line.

Quick access from the terminal: mate .

This is a great feature for those who came to Mac OS from a UNIX background. And it certainly makes your life easier. To use it, navigate to where your code’s directory is in the terminal, then type:

mate .

This opens a TextMate instance with a project containing all the files in the directory you specified, and its subdirectories.

To set up the command line tool, go to Help → Terminal Usage… from within TextMate.

Find in Project (cmd-shift-f)

This feature will come into its own during an intense re-factoring session. ‘Find in Project’ enables you to search through every file in the project for a pattern. You can enter regular expressions and replace text from the same dialog.

Search for a file faster using cmd-t

We think this feature will single-handedly be responsible for the most significant increase in your productivity once you start using TextMate. Press cmd-t to open a window that enables you to search, in real time, for any file in the project. Any letter you enter is matched, so you don’t need to enter ’controller’ to find every controller in your Rails project. Like the others this feature is simple but immensely useful.

The file search window when using cmd-t

Bundles: ctrl-escape

The bundle list

Bundles are basically collections of macros (these are called bundle items). Press ctrl-escape to bring up the bundle menu. Your current language (if applicable) will be selected from the list, and then you can easily use the keyboard to select the macro you want to use. For example, when writing PHP code you may often use this to type the names of the predefined variables, such as $_REQUEST['variable']. With this example, TextMate will automatically select ‘variable’ for you, so you can enter the variable you wanted with little effort.

Another way to access bundles is to use tab triggers. With tab triggers just type the trigger and then press tab (as in the example below). The trigger is replaced with the bundle item text. Using the previous example, you can type $_ and then press tab to bring up a list of PHP’s predefined variables.

A list of matches for a tab trigger

Even if you’re the type of person who would normally shy away from creating bundles and adding snippets, don’t worry, TextMate makes it easy. Go to Window → Show Bundle Editor. If you open up a bundle from the list, you’ll notice several icons next to the names of the bundle items. These icons represent the types of bundle items you can add:

  • Commands – use scripts to do various things in TextMate, including: replacing text, inserting text and showing tooltips
  • Drag Commands – helps TextMate handle you dragging something into the editor
  • Languages – helps TextMate work with a given language or document type
  • Snippets – pieces of text to include into your document, including: code to run at the insertion time and TextMate variables (such as selected text)
  • Templates – use shell commands to generate new files based on a template
  • Preferences – helps the editor adapt when different settings are required for the current file type

We found it was best to start adding snippets for your common coding tasks. This helps you get used to working with bundles. TextMate’s help section has all the information you need to create bundle items, including the syntax for snippets. Just click on the question mark after you’ve created a new snippet to find out more (see the example below)

Finding help for snippets is easy

Handy bundles

You may want to use TextMate to write weblog entries. Many weblogs and content management systems generally use Textile, so it’s nice to be able to
preview Textile before inserting the text. To do this, select Textile
from the bundles menu. There’s also a shortcut key set up for this bundle: ctrl-alt-cmd-p. However, you must have Textile selected as your language to use the shortcut.

TextMate also has bundles that help with version control. Many people use
Subversion, so the TextMate Subversion bundles menu is obviously very useful. You can commit changes and view diffs with very easy to read syntax highlighting. All of which will add to your productivity.

Macros

The software also has support for traditional macros and in true TextMate fashion they are extremely easy to use. You can activate and save a macro by pressing alt-cmd-m. Then, to replace the macro you just created, press cmd-shift-m. You can save the macro to the Bundle Editor by pressing ctrl-cmd-m and to view the available options for macros, look under the Automation menu.

What’s the downside?

We’ve talked a lot about what’s great with TextMate, but in which areas does it fall down and where can it be improved upon? There’s a few interface issues: it doesn’t handle lots of tabs very well and the distinction between macros and bundles confuses new users. Undo behaves differently to many popular editors — when you press undo it reverts changes letter by letter, rather than a set of changes. Many editors for Windows and Mac OS support FTP and SFTP, but TextMate only does through another FTP client (Personally, I use Panic’s Transmit.) This could make using TextMate awkward for you if you’re used to having this feature.

If you’re using TextMate to access files on a remote filesystem, there’s a few glitches that occur: TextMate can stick as it polls the remove files when you bring it into focus. This can unexpectedly change the position of the files in the project draw. Finally, there’s no way to search for text within a directory, you can only search an open file or across the entire project. Project searching works 90% of the time, but can produce too many results for a large project.

Community, support and themes

Certainly one of the ways in which TextMate has captured the community’s imagination is through its support of plugins and themes. You can easily change the software’s behavior or color-scheme which is if you want to personalise your prefered working environment and workflow quirks. Another boon is the TextMate community and wiki which are good places to find plugins and themes, as well as the User Submitted Themes list.

TextMate also works with many popular Mac OS X applications.
For example often you may need to login quickly to a server and change a script. In this case you would open Transmit, ctrl-click a file and select ‘Edit with TextMate.’ This opens the file in TextMate and automatically uploads the changes when your save it.

Another thing that sets TextMate apart from its rivals is its promptness in replying to support e-mails. When writing this review we emailed the support team with a query about how TextMate handles Mac OS X’s remote volumes, and they promptly responded. Generally, it’s rare to encounter this level of support with online software.

In conclusion it’s clear thatTextMate does deserve the applause it has been getting from certain camps. And once it has perfected the handling of tabs and working with remote files, it will be nigh-on perfect.

Rating

  • Software name: TexMate
  • Maker: Alan Odgaard
  • Price: 39 Euros ($47, or £27)
  • Rating: 4 out of 5
Continue reading 65

9 April 2006

Xyle Scope is a CSS analysis tool that takes an innovative approach to exposing how a web page is put together. It enables you to interactively explore and analyze (X)HTML and CSS by simply clicking on an element of a web page and displaying the underlying code. And what’s more, it’s based on the WebKit framework, the same rendering engine Safari uses. Of course, you can explore and debug (X)HTML and CSS with the Firefox WebDeveloper extension or Safari’s Web Inspector. But they are a different and less fulfilling experience, even if they are free.

The user interface is composed of three primary areas:

  • Web View – displays the web page just like a browser,
  • HTML View – outlines the web page’s structure and the (X)HTML markup
  • CSS View – reveals the CSS rules and the cascade.

Screengrab of Views

You switch between Browser Mode and Selection Mode using the Selection Mode menu item (from the View menu). While the Browser Mode is handy, you’ll spend most of your time in Selection Mode. And that’s what makes Xyle Scope such a powerful inspector. In Selection Mode, clicking a web page element in the Web View visually highlights the element with a Formatting Box and displays only the corresponding (X)HTML markup and applicable CSS rules in the other views. This Formatting Box exposes the margin and padding rules applied to the element.

Screengrab of the Formatting box

In the HTML View, you can navigate the document’s (X)HTML tree structure just as you would navigate in a Finder window displayed as columns. Selecting an element in the hierarchy displays only the (X)HTML markup corresponding to that element and highlights that element in the Web View, enabling you to focus on a specific piece of code. The code can be displayed in several styles, including a Block Filter style highlighting the structure of the page without letting the details be a distraction.

Screengrab of Block Filter style highlighting

In the CSS View, Xyle Scope exposes the CSS cascade even for complex sites where the CSS rules can come from multiple files and/or the style element or attribute. It gracefully handles @import stylesheets and highlights well-known filter hacks too.

Screengrab of the Cascade menu

Xyle Scope aggregates all the rules and determines the cascade, just like a browser. Applicable CSS rules are displayed in order of specificity and overridden CSS properties are dimmed to improve clarity. You don’t need to parse and visualize the cascade in your mind any more. You can even tweak existing CSS values in the CSS View and see the impact.

Screengrab of the CSS View

But wait, there’s more

If the basics aren’t enough, Xyle Scope has some more, less obvious features tucked away:

  • Working through a monster web page? Use Selector Matching or Smart Groups in the Selector List to filter the (X)HTML and CSS. Selector Matching reveals the paths to all (X)HTML elements matching that selector. Smart Groups filter CSS rules into predefined groupings such as Layout or Typography.
  • Want to jump from your browser to Xyle Scope quickly? Create a handy bookmarklet to send URLs directly to Xyle Scope.
  • Don’t like the default formats for displaying (X)HTML or CSS? Edit the formatting templates directly since CSS is baked into Xyle Scope’s core and is used for formatting.
  • Want to snag an (X)HTML or CSS snippet? Use the Copy menu item in the HTML pane or Control-click the CSS pane to grab just what you’re looking at.
  • Impatient with a mouse? Drive Xyle Scope from the (X)HTML tree in the HTML View with your keyboard.
  • Have a spanking new Intel Mac? Run native. Xyle Scope is a Universal application.

Can it be improved?

Though you can easily alter CSS values and immediately see the effect in the Web View, Xyle Scope is not a CSS editor. You can’t directly add or delete selectors or rules. While it integrates with your (X)HTML and CSS editor of choice, adding an integrated feature or providing a companion application to do just that would be an excellent improvement to an already solid application.

So what are you waiting for?

No matter your level of mastery of (X)HTML and CSS, Xyle Scope is a gem that should be in every web developer’s tool kit. If you’re still skeptical then download the 10-day free trial version and test drive it yourself. But after our test drive we think Xyle Scope can make you a happier and more productive web developer.

Rating

Continue reading 11

Sign Up to our Newsletter

Enter your e-mail address below to receive regular updates on web design, web development and web business. Subscribe today and receive a free 44 page PDF "Designing Web User Interfaces" by Ryan Singer of 37signals.

Subscribe to the Think Vitamin articles RSS feed

HTML5 Online Conference April 12 2010

News

Twitter

Follow us on Twitter

Subscribe

Article Subscribers

Feedburner blog subscriber indicator

News Subscribers

Feedburner blog subscriber indicator

Subscribe by Email

You can receive Think Vitamin updates via email. Just pop your email address in the box below and click the arrows.

Subscribe by RSS

You can also receive new Think Vitamin posts via your RSS feed reader

Subscribe RSS Think Vitamin is a proud member of the Smashing Network

Ads Via The Deck