Microsoft has been in the news this week. While any publicity is better than none, the headlines and statements have been particularly scathing:

• Windows 8 is Microsoft’s “New Coke” fiasco
• Windows 8 sales slump is killing the PC industry
• users are confused by Windows 8

Windows 8 was an ambitious project. The OS attempted to merge smart phone, tablet and desktop concepts into a cohesive experience. Microsoft should be applauded for trying something new but, in reality, Windows 8 is two OSs bundled as one.

Tami Reller, head of Windows Marketing and Finance, admitted:

the learning curve is definitely real

Few would disagree. I’ve been using the OS for seven months and, while it feels comfortable now, those initial weeks without a Start button were disorientating. Metro can be — and still is — quirky on a standard desktop PC, but I rarely use Metro apps other than the media player.

If you’re in the industry, you’re paid to use technology for its own sake; learning something new is part of the course. However, for most companies, technology is a tool which helps them achieve business objectives. Unless there are clear commercial benefits, the costs associated with changing that tool and retraining staff are prohibitive.

I suspect people new to PCs actually grasp Windows 8 concepts better than older versions of the OS (clicking Start to shut down was an obvious metaphoric breakdown). Unfortunately, most people have used Windows before; they can understand evolution but revolution is a different matter. Besides, if you absolutely must learn something new, why not try Mac OS or Linux?

Windows Blue

It’s impossible to determine figures but I’d be amazed if Windows 8 sales matched those of Windows 7. Fortunately, Microsoft has listened to user criticism.

Pre-release versions of the next version of the OS, codenamed Windows Blue, were leaked on to the web recently. Microsoft won’t make any public comments, but hinted a preview release could appear in June. Version 8.1 is the most likely name but many of us old hands will think of it as Service Pack 1.

The interface looks much the same, but the leaked OS offers a number of revised features…

An optional Start button
In my Windows 8 review I speculated:

I would not be surprised to see the Start button make a triumphant return

I rarely miss the Start button now I’ve created appropriate taskbar shortcuts and use the keyboard Windows key to access the Start screen. The new logo-shaped Start button will probably do the same as the lower-left screen gesture, but having a button present will reassure many people.

Boot to desktop
Microsoft was criticized for showing the Start screen rather than the more familiar desktop after login. It’s a minor point since launching any standard application will instantly switch. That said, a new “boot to desktop” option will bring joy to many.

Configurable tile sizes
Start screen tiles are currently either “larger” or “smaller”. Even the small size doesn’t permit many icons on a desktop display so a new icon-sized tile will use a quarter of the space. Interestingly, a new super-sized option may also appear which could provide some interesting possibilities for live tiles.

New apps
Many of the existing Metro apps will be updated and a new video editing application could appear.

The OS should also include better SkyDrive integration. I’ve been impressed with Microsoft’s DropBox-like online file storage system and I suspect an increased number of applications will be SkyDrive-aware.

Internet Explorer 11
IE11 is a more exciting prospect although there’s no guarantee it’ll reach the final build. If expectations are correct, the new browser will fill the final missing gaps in IE10 — namely a few minor HTML5 features and WebGL (it’ll be interesting to hear how Microsoft engineers overcame the WebGL “security issues” they identified).

A long-overdue update to the F12 Developer Tools could also appear…

The current tools are adequate but clunky and ugly when compared with Firebug, the Webkit Inspector, Dragonfly or any other Microsoft development software. The company is enticing users back to IE but projects such as modern.IE a solid set of development tools will get developers on-side.

In summary, Windows 8 is changing but don’t expect it to revert back to Windows 7. Time will tell if the updates are enough to convince buyers.

Are you using Windows 8? Do you prefer it? Do you detest it? Do you want your Start button back? Will Windows 8.1 address your concerns?

As a person with a disability I find navigating most websites fairly straightforward. I can use the keyboard or a mouse to scroll up and down to view content. With just the space bar I can scroll the page a frame at a time.

Until my browser is hijacked by elements on the page. Then I have to use my mouse to get control of the experience.

Here are four frustrating ways websites hijack my browser.

Search Bar

Hey Google (and now Yahoo!), I’m talking to you!

I get that you want to make it easy for someone to get going on that search, but does my cursor really have to jump to the search box as soon as the page loads?!

You can set up the tab order using tabindex to take the cursor to the box on the tab click.

<input type="text" id="search" tabindex="1">

I get that Google has built this into their system and it’s the expected behavior, but it is a nuisance for people like myself who navigate with our keyboards.

First, it interrupts the browsing flow because I am unable to follow my keyboard shortcut (just backspace on most browsers) to go back a page.

Second, when I start pressing the space bar and want to scroll the page I’m just filling in the search bar. It just doesn’t work.

Confirmation Alert Box

Every now and then I’m surfing the Web and end up on a site with a confirmation box. Sometimes the box pops up on arrival, other times it pops up when I try to leave the page.

I know enough about programming to recognize an opportunity to insert malware. So I never click the confirmation. I don’t know if pressing okay will close the tab or take me to russianhotties.xxx.

My remedy is shutting down my browser then reopening it and tromping through history to the sites I had open.

Popup Ads

This one drives me crazy and I’ll wager most developers are guilty of this one.

Attractive popup ads are no longer an annoyance, but part of the business model of many websites. I’m left to watch the popup obscure my content. I get it. The company has to generate revenue. But the ad should get out of my way.

The standard was to timeout the popup years ago. Some ads creatively move to the sidebar in a static ad. Regardless of the technology, this is available functionality. Another former standard was to tie a keyboard shortcut like esc or x to a close function on the popup. But rarely do I see a popup that I don’t have to click an action item or a tiny close link in the top corner with the mouse.

Static Navbar

Finally, there’s the static navigation bar across the top of the page. Sometimes these are three or four lines tall. They are convenient, giving users easy access to site information.

But go back to scrolling.

When I tap space bar on a typical webpage the window scrolls down one frame. This is such a convenient way to quickly browse a page. As I pointed out above, hijacking my cursor gets in the way. But so do those fancy navigation bars.

Some websites account for the navbar adding padding to accommodate the bar across the top. However, plenty of popular websites are oblivious. As the content scrolls, several lines are obscured by the handy bar.

Am I Just a Curmudgeon?

Our lives as developers are already full of UX demands.

Another accommodation now from this guy who just wants to click his spacebar to scroll is not floating to the top of my list.

I get it. But imagine how all of the little tweaks you build into your workflow save you steps and then having to do away with them because somebody else just changed the way things are done. Look at recent decisions by Adobe and Google to shut down services, for example.

For people with mobility impairments, added obstacles to the content are a real barrier. Just getting a mouse cursor in the precise spot can be a chore.

But thoughtful design and graceful transitions can give the browser back to users like myself to enjoy our convenient web experience.

I tend to opt for <button> tags rather than <input type="submit" /> but, whichever you prefer, the standard style follows your OS conventions. It can be a little uninspiring…

Let’s build a better button using CSS3 styles, animations and transformations:

View the button demonstration…

The HTML

No surprises here — we only require a single button tag:

<button>Click me!</button>

We’re going to apply our styles to every button but, if you’d prefer not to do that, add a class and target it in the CSS accordingly.

The CSS

Our button should work well in the latest browsers but also degrade gracefully in older applications. That said, I’m only going to add CSS prefixes when they’re absolutely necessary. Firefox, Opera and IE10 support transitions, transformations and animations without prefixes — but we still require -webkit- for Chrome and Safari.

Let’s start with some basic styles to format the button:

button
{
	display: block;
	font-size: 1.1em;
	font-weight: bold;
	text-transform: uppercase;
	padding: 10px 15px;
	margin: 20px auto;
	color: #ccc;
	background-color: #555;
	background: -webkit-linear-gradient(#888, #555);
	background: linear-gradient(#888, #555);
	border: 0 none;
	border-radius: 3px;
	text-shadow: 0 -1px 0 #000;
	box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
	cursor: pointer;

Nothing too complicated. I’ve used a fairly generic gray color throughout, but you can apply whatever colors you need. Note also that a background-color has been defined for browsers which do not support linear-gradients. I’ve also set the cursor to pointer — I’ve never understood why browsers don’t do that by default?

The box-shadow is the most interesting property: box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6). This defines the edge of the button, a 5px “depth” and a light shadow around it.

We complete the block by stating we want transition effects applied to every style when a hover or focus event occurs. Prefixless and -webkit alternatives are required:

	-webkit-transition: all 150ms ease;
	transition: all 150ms ease;
}

In the next block, we’ll define the hover and focus styles. This defines a pulsate animation which makes the text glow:

button:hover, button:focus
{
	-webkit-animation: pulsate 1.2s linear infinite;
	animation: pulsate 1.2s linear infinite;
}
@-webkit-keyframes pulsate
{
	0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
	50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
	100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}
@keyframes pulsate
{
	0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
	50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
	100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

Firefox, Chrome and Safari do not require the 0% and 100% definitions but IE10 fails to animate text-shadows if we don’t use them. Sounds like a browser bug to me — make a mental note of that one.

Finally, we set the button active state:

button:active
{
	color: #fff;
	text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
	box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
	-webkit-transform: translateY(3px);
	transform: translateY(3px);
	-webkit-animation: none;
	animation: none;
}

This performs a number of actions:

• the animation is switched off and the text is set to it’s ‘fully glowed’ state
• the button is moved down 3 pixels using translateY
• the box-shadow which defines the button depth is changed to 0 2px 0 #444. It’s therefore been reduced from 5px to 2px, but the 3px translation makes it appear that the button has sunk into the page.
• the outer shadow is also reduced to give the impression the button is lower.

Our button is now complete:

View the button demonstration…

The code works as expected in all modern browsers. The only issue I discovered was in Opera — it plays the pulsate animation just once? But they’re switching to WebKit soon, so let’s not worry too much…

Please use the code however you like!

You probably pay little attention to game console browsers. While many households own a Wii, Xbox or Playstation, few use the devices to access the web. It’s not surprising:

• Console controls are clunky. Using a Wii remote or joypad to type URLs and navigate pages is not easy.
• Console browsers can be woeful. They’re slow, buggy, and rarely support modern standards or Flash.
• For quick browsing, it’s more convenient to use a smartphone or tablet.

According to StatCounter, the Sony PS3 accounts for just 0.1% of all web activity. Wii and Xbox browsers don’t even appear in the chart, although that’s possibly because they’re intermingled with Opera and IE9 statistics. But even the most optimistic console user would not expect heavy web usage. Unless you’re designing a console-specific website, there’s usually little reason to consider console browsers.

Could that situation be about to change?

Console manufacturers have been losing ground to mobile gaming. While they are different contexts, Microsoft, Sony and Nintendo have realized that the days of dedicated household gaming machines are numbered. The companies are rapidly moving toward multi-use entertainment devices which feature games, on-demand video (NetFlix, BBC iPlayer etc.), apps, social media and mobile phone integration. New machines will include increased web connectivity; Sony’s recent PS4 announcement stated that gamers can share the last few minutes of play as an online video (just what we need — more awful gaming clips!)

The next generation devices are powerful enough to run multiple functions at a time; it’s inevitable that better web browsers are coming. And don’t forget the web is device agnostic; we should not be restricting access just because someone chooses to use a console.

Console Challenges

Coding for consoles is likely to be more difficult than mobile:

• Screens may have a high resolution (or even ultra-high definition), but users sit further away and controls are less precise. Typical media queries may not offer a robust solution especially when the browsers rarely support CSS features such as “tv” media.
• There will be additional challenges to support features such as touchscreen and 3D.
• Text may need to be more concise than even that displayed on mobile devices.
• Browsing could become a more collaborative, family-orientated pursuit.

The the Wii U, Playstation 4, Xbox 360 successor and the Android-based Ouya may all be available by the end of 2013. Some households will choose to replace their aging PC with a more consumer-friendly console and tablet.

There won’t be an overnight migration but the current low level of console browsing is almost certain to rise.

What Should we do?

If you’re interested in the current state of console browsers, head over to console.maban.co.uk — a brilliant resource by UK developer Anna Debenham. The site provides descriptions, controller details, screen resolutions, user agents, JavaScript support, Flash versions, (dreadful) HTML5 test scores and a wealth of useful information.

For the moment, however, there’s little we can do but wait until we have further clarification of next generation console capabilities. But keep a close eye on the gaming market, especially if you’re operating a site aimed at home users.

What’s a CAPTCHA?

CAPTCHA stands for Completely Automated Public Turing test to tell Computers and Humans Apart.

On the webpage, a CAPTCHA is a security measure designed to keep out robots by asking the user to key in characters displayed in a box.

Yes, that’s the one: where you have to decipher some squiggly words and enter them in a field before you can submit an online form.And often do it three or four times before you’re successful.

For example:

For more information on definitions, see the comprehensive Wikipedia article on CAPTCHAs.

As far as the real world goes, there are some real doozies out there, like the moving CAPTCHA we found recently in an audit (we’re rebuilding the site so it won’t be there long!)

John Foliot found some inexpressibly confusing CAPTCHAs, an article which is worth a read – please note there is a lot of movement in the article (and no it doesn’t fail the flickering accessibility requirements even if it looks like it)!

Why are there so many CAPTCHAs?

Really, the world would be a much easier place without CAPTCHAs. They are confusing and difficult and we are all time-poor. And surely people want us to use their web site / submit their form / sign up to their newsletter?

The reason that there are so many CAPTCHAs is that there is so much spam in the world. They are perceived as an effective way to prevent robots from, for example, posting comment spam on blogs.

Another common use is to prevent robots with more criminal intent from logging into online bank accounts and the like.

The CAPTCHA is, in reality, a reverse Turing test – performed by a machine to make sure the person filling out the form is, well, a person.

This is also why they are often difficult to interpret. If they were easy to read, then machines could read them, and that would defeat the point.

What about accessibility?

Not only are CAPTCHAs difficult for anyone to use, they are notoriously inaccessible to people with some types of disabilities.

In fulfilling their designated brief of keeping out machines, they keep out people using assistive technologies such as screen readers, thereby closing the door on millions of blind people. So, if you’re blind, use a screen reader and want to log into your CAPTCHA-protected bank account, well … bad luck. Isn’t there a law against that? There ought to be.

There is even a specific section in the Web Content Accessibility Guidelines, Version 2.0 about CAPTCHA, in which their inaccessibility is acknowledged, but the WCAG Working Group feel they can’t be too hard-line about it:

CAPTCHAs are a controversial topic in the accessibility community. As is described in the paper Inaccessibility of CAPTCHA, CAPTCHAs intrinsically push the edges of human abilities in an attempt to defeat automated processes. Every type of CAPTCHA will be unsolvable by users with certain disabilities. However, they are widely used, and the Web Content Accessibility Guidelines Working Group believes that if CAPTCHAs were forbidden outright, Web sites would choose not to conform to WCAG rather than abandon CAPTCHA. This would create barriers for a great many more users with disabilities. For this reason the Working Group has chosen to structure the requirement about CAPTCHA in a way that meets the needs of most people with disabilities, yet is also considered adoptable by sites. Requiring two different forms of CAPTCHA on a given site ensures that most people with disabilities will find a form they can use.

Because some users with disabilities will still not be able to access sites that meet the minimum requirements, the Working Group provides recommendations for additional steps. Organizations motivated to conform to WCAG should be aware of the importance of this topic and should go as far beyond the minimum requirements of the guidelines as possible. Additional recommended steps include:

1. Providing more than two modalities of CAPTCHAs
2. Providing access to a human customer service representative who can bypass CAPTCHA
3. Not requiring CAPTCHAs for authorized users”

http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html

The emphasis in the above quote is mine. When they talk about “two different forms of CAPTCHA”, they mean one that requires sight to complete plus one that relies on audio and should therefore be accessible to people with impaired vision. They then acknowledge that still won’t make it accessible to everyone.

In reality, the ones that rely on vision are so difficult to use for fully sighted people, while the audio versions use sounds so distorted that no-one can make them out.

So basically they are inaccessible, but the Working Group decided that if people had to choose between CAPTCHAs and WCAG2 they would choose CAPTCHAs, so they allowed for it anyway.

I believe there are some effective unique and most importantly, accessible, alternatives to CAPTCHA, but I’ll talk about that in a later article.

What about reCAPTCHA – it’s accessible isn’t it?

In a word, no.

I’m always asked about reCAPTCHA, or what about Accessible CAPTCHA? I have tested numerous CAPTCHAs and I have never come across an accessible CAPTCHA. Feel free to prove me wrong.

But I am also yet to find a CAPTCHA that complies to WCAG2 either.

There is a fundamental disconnect in intent that means it is highly unlikely that a universally accessible CAPTCHA, or even a set of different CAPTCHAs will ever be devised.

CAPTCHAs are, by definition, exclusive: they are are there to keep baddies out. Their way of testing “badness” does not allow for the legitimate use of machines. So they will tend to be inaccessible.

To understand how this becomes a negative spiral, you only have to look at the Google Account Sign Up process. In order to make it “accessible”, Google provide an audio version. A group of hackers was able to prove that it could pass the audio test robotically (read more about it in the article Google recaptcha brought to its knees).

Did Google concede the CAPTCHA was a failure and should be replaced by something more accessible? Not a bit of it. Instead, they made the audio more distorted so that a machione couldn’t possibly interpret it correctly – and nor could any human. Seriously. Try the Google CAPTCHA yourself.

One of the hackers pinpointed out the problem:

While the changes stymied the Stiltwalker attack, Adam said his own experience using the new audio tests leaves him unconvinced that they are a true improvement over the old system.

“I could only get about one of three right,” he said. “Their Turing test isn’t all that effective if it thinks I’m a robot.”

Couldn’t have said it better myself.

In my next article, I’ll explore how to replace CAPTCHAs with accessible options, while maintaining security and preventing spam.

An interesting article has been posted on Chris Coyer’s CSS-Tricks: Navigation in Lists: To Be or Not To Be. The article provoked a plethora of comments and debate. Here’s a summary…

When faced with creating a navigation menu, most web developers will implement code such as:

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Products</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
</nav>

Those who haven’t emigrated from HTML4 land will omit the <nav> and use <ul id="nav"> or similar.

The question: are list elements necessary?
Naked links are leaner and cleaner…

<nav>
	<a href="#">Home</a>
	<a href="#">Products</a>
	<a href="#">Services</a>
	<a href="#">About Us</a>
	<a href="#">Contact Us</a>
</nav>

Prior to HTML5, lists were required:

• older browsers could struggle styling inline elements
• adjacent links could cause accessibility issues in screen readers, and
• you had to place navigation in something — lists were a good option.

These issues mostly disappear with the introduction of the HTML5 <nav> element. Superfluous list elements are unnecessary because the browser/screen readers understands that it’s a navigation block and can process links accordingly.

That said, there are a number of good reasons to retain lists:

1. Hierarchical menus and sub-menus can be defined. There’s no reason why other elements couldn’t be used, although there are few benefits, e.g.

   <nav>
   	<h1>Main Menu</h1>
   	<a href="#">Home</a>
   	<a href="#">Products</a>
   	<section>
   		<h2>Product Menu</h2>
   		<a href="#">Product One</a>
   		<a href="#">Product Two</a>
   	</section>
   	<a href="#">Services</a>
   </nav>
   

2. Lists provide additional elements for CSS hooks and styling.
3. Lists are a widely adopted technique which developers know and expect.

Navigation lists have become ingrained as the definitive technique. Few of us consider listless navigation; it feels wrong — but is it? It will depend on the circumstances and it’s easy to get bogged down in semantic squabbles, but I suspect Chris is correct: lists are often unnecessary.

I’m going to attempt naked link navigation in my next project. Will you?

Have you ever tried testing your Responsive Website with real users? If not, it is definitely worth considering. You may be surprised by the results.

User Testing vs Technical Testing

Before we begin, some clarification about different types of testing.

This article will not focus on technical testing, where the aim is to determine how the site performs on a wide range of devices, or in different circumstances such as with different bandwidths.

Instead, we are going to focus on user testing. The aim of this type of testing is to determine whether real users are able to successfully use the product as required. In this case, the product is your website or web application.

You can conduct user-testing to determine if users are able to navigate around your site, search for content, fill in a form, purchase a product or perform any other site-related tasks.

Why test your site with real users?

All of us have our own opinions about how products should work. When we test them ourselves, no matter how experienced we are, our views are always biased to some degree.

Only actual users can really tell you whether your product meets their needs.

For this reason, it is important to test any product as early as possible in the process and as frequently as possible throughout the process.

Task-based Testing

Task-based testing is a very powerful user testing process. Users are asked to perform a series of tasks while interacting with the actual product. Each task is monitored and scored to determine if the user is able to successfully complete the task or not.

If users are not able to complete a task, the product may have a potential problem that needs to be addressed.

The actual tasks are determined by the required outcomes. If you want to test the purchasing process within an online shopping website, then tasks could include finding a specific product, adding the product to a cart, and completing the purchase process.

The best results come from testing a small set of users (around 5 users) and running as many small tests as you can afford.

Controlled Testing or Free Exploration

The testing process can be conducted in a variety of ways.

At one end of the spectrum, the entire process is tightly controlled. Users are not allowed to interact with the product until they are given instructions by the tester. This means that you are able to receive detailed feedback from the users at each point in the process before moving on. Users can be asked about their expectations before they click to a new “screen” or a new function.

At the other end of the spectrum, users can be allowed to explore the product as they wish. They are prompted to provide feedback as they interact with the product.

Each method has strengths and weaknesses. The “controlled testing” method allows you to closely observe each interaction. The “free exploration” method allows you to observe users performing in a more natural manner.

Using Different Media

User testing can be undertaken at any stage in the planning, design or development phases, and can employ different media:

• paper-based wireframes
• onscreen wireframes
• onscreen prototypes
• fully functional website

Before Testing Responsive Websites

Before jumping into user testing with responsive websites, it’s important to know who your current and potential future users may be, and how they are likely to access the website. For example, are they likely to visit the site on desktop and mobile? Mobile only? Mobile and tablet?

Each of these options can affect how you choose to conduct the user testing. For example, if users frequently use both dektop and mobile, it may be worth conducting user testing on wide screen and mobile as part of the process. If users frequently use desktop only or mobile only, you may want to run user testing with two separate groups.

Responsive Website user-testing challenges

Responsive websites present challenges that are quite different to those faced by traditional wide screen user testing. For example:

• Users may be disconcerted that the mobile version of the site looks different to the wide screen version
• Users may not be familiar with small screen interactions such as scrolling, swiping etc
• Users may be familiar with specific mobile apps and expect your website to operate in a similar way.
• Users may be familiar with specific platforms (iPhone or Android) and this may affect their expectations.
• Users may not be familiar with linearized content, which is common for responsive websites when displayed on small screens.

Some Lessons Learned

1. Make the user feel “at home”

When conducting responsive website user testing, it is important to provide devices that are familiar to the user. We try to provide a range of different devices, such as iPhone, Android and a small set of tablet devices. In some cases, we also allow users to perform the testing process on their own device, if they prefer. This ensures they aren’t struggling with the device at the same time that they are trying to “learn” your product.

2. Users want to “play” on mobile devices

When conducting user testing on mobile devices, we have found that users immediately want to “play” – they want to grab the device and click around the website or web application.

The very first mobile user testing session we ever did was a disaster. We had intended to follow a “tightly controlled” process where the user was only able to look at one screen at a time. Instead, the user picked up the device and immediately began jumping around the site.

This can be solved by using the “free exploration” method, or giving the user clear guidelines before commencing.

3. Observing detailed interactions

Small screen devices mean smaller and more intimate interactions. This means that you have to closely observe the user at all times. Videoing them and replaying it later for analysis may help with this.

There is actually a range of different methods that can be used to capture the testing process.

You can record iPhone and iPad devices using a combination of Air Flow and screencast software such as Camtasia or Screenflow.

You may also want to record “over the shoulder” or “head-cam” video of the user as they move through the site. This allows you to see the users’ interaction experience from their point of view on top of the screen, rather than just recording the data from the screen itself.

You can also hook up the device to a Data Projector. We have found this useful when we have other people observing the testing process. These observers can view the process live, but from a different room.

Conclusion

It’ s very important to test your responsive websites with users – just as you would any other product.

This is the only way you will be able to see how real users interact with your site. It takes some planning and effort, but it is definitely worthwhile.

Need more?

If you are based in Australia, you can come to the Max Design series of workshops touring capital cities during March 2013, where we address key aspects of Building Responsive Websites. 

Apologies for the geeky article, but it solves a problem experienced by many web developers who use Windows as their primary OS. Thumbs.db is an image cache which makes thumbnail viewing faster. The file is automatically created in Windows Vista, 7 and 8 whenever images are encountered in a folder. It’s usually hidden but can appear, disappear and is often impossible to delete.

I understand the point of Thumbs.db, but that doesn’t prevent several irritations:

• It affects version control. If you’re using a system such as TortoiseGit or TortoiseSVN, Thumbs.db will cause “changed” icon overlays to appear when you’ve not modified any files.
• They often get uploaded to live servers where they’re pointless.
• Unless you’ve got a slow PC, you probably won’t notice any speed improvement.
• I don’t want auto-generated files cluttering my system, thank you!

Fortunately, there’s an easy way to prevent further Thumbs.db hassle:

1. Ensure you’re logged in using an administrator account.
2. Hit Win+R, type gpedit.msc in the Run window and click OK. The Local Group Policy Editor will be launched.
3. Navigate through the tree to User Configuration > Administrative Templates > Windows Components > then either Windows Explorer (Windows Vista/7) or File Explorer (Windows 8).

   

4. In the right-hand pane, double-click “Turn off the caching of thumbnails in hidden thumbs.db files”.
5. Select Enabled (don’t make my mistake of choosing “Disabled” — you’re enabling the switching off of Thumbs.db. Not particularly intuitive, Microsoft!)

   

OK your way out and it’s job done — you’ll never be troubled by Thumbs.db files ever again!

Windows 8 may initially frustrate and confuse you but many familiar features are lurking beneath the glossy Metro/whatever-you-want-to-call-it surface. Fortunately, Microsoft has provided a number of keyboard shortcuts so you can avoid all that swiping nonsense on your desktop PC.

Starting Up

There’s no need to perform any complex gestures — just click the mouse or tap a key and the login password or image will float into view. Hit Win+L to lock the computer again.

Launch Applications

Hit your keyboard Window key to reveal the Metro Start screen. If the application’s not there, use Win+Q to view and search through all applications.

If all else fails, navigate to the old Start menu folders using File Explorer (Win+E):

• C:\ProgramData\Microsoft\Windows\Start Menu
• C:\Users\<your-name>\AppData\Roaming\Microsoft\Windows\Start Menu

Locate the shortcut, right-click and select either Pin to Start, Pin to Taskbar, or Send to > Desktop.

Alternatively, the old Run dialog can still be launched with Win+R. Alt+Tab switches between applications.

Finally, the Windows key plus a number from 1 to 0 launches the corresponding pinned application on the task bar. Use Win+Alt+a number key to open that application’s jumplist.

Window Hotkeys

Need to close a desktop program or Metro app? Alt+F4 has been supported for as long as I can remember.

Application windows can maximized and minimized using the Windows key in conjunction with the up and down cursor keys. You can dock windows to the left or right-half of the screen using Win+left and Win+right respectively.

Peek at the desktop using Win+D and tap it again to re-view your active applications. Alternatively, Win+M minimizes all windows and Win+Shift+M restores them.

Finally, if you’re using a tablet device, Win+O locks the screen orientation.

Power User Hotkeys

If you only remember one hotkey, make it Win+X. It displays a menu of useful options such as regularly-used Control Panel settings, Disk Management, Computer Management and the Command Prompt.

Other hotkeys:

• Win+C — display the Charms menu
• Win+I — the Settings charm
• Win+H — the Share charm
• Win+K — the Devices charm
• Win+W — settings search
• Win+P — the second screen bar
• Win+Z — displays the Metro App bar
• Win+PrtScn — saves a screenshot to the Pictures folder
• Win+Break/Pause — display the Control Panel System dialog

Shutting Down

Navigating to the shut down option is slightly ludicrous — move the mouse to the lower or upper right-hand side of the screen (which is awkward on dual monitors), then click Settings followed by Power then Shut down. Ugh.

Here’s an easier option: shut the laptop lid or press your PC’s power button.

Who knew? You can change whether Windows shuts down, sleeps or hibernates in the Control Panel Power Options. Click “Choose what the power buttons do” link in the left-hand pane.

Have I missed your favorite Windows 8 hotkey or tip? Useful ones please … switching to another OS or downgrading to Windows 7/XP isn’t necessarily practical!

Most of the time, my writing focuses on search engine optimization techniques. So, why would I write about accessibility in WordPress?

Because, to a large extent, optimizing a site for search engines and optimizing a site for disability access amount to much the same thing. The same techniques that allow search robots to index a site properly allow screenreaders to correctly describe the content to users with visual disabilities.

Similarly, structuring a page properly makes it machine-friendly, whatever that machine is. Add the kind of common sense techniques that allow users (including users with disabilities) and machines to get straight to meaningful content, and you are moving towards making your site both accessible and search engine friendly.

We all know WordPress is a phenomenal tool that allows people to build blogs and websites with very little programming or coding knowledge. This platform is simple to set up, and provides a solid framework for the themes and plugins that will determine how your content and functionality is presented.

If you want your site to be accessible to individuals with disabilities, you’ll find that basic WordPress has much that is needed to facilitate the development of an accessible website, and it is not hard to take that further through the addition of plugins and good technique.

Before we get started, there are two important caveats to be aware of. First, implementing these four technqiues alone will not make any website totally accessible to the extent of complying with all requirements of WCAG or Section 508, but it will address the most common barriers to web access and deliver much greater accessibility.

Second, it’s important to understand that accessibility can only be achieved through the co-operation of design, development and content authoring practices. A designer may design an accessible theme, a developer might add accessible functionality, but if a content author inserts a meaningful image without an alt tag, the full meaning of the web page will be inaccessible.

With that in mind, here are my four tips for making WordPress sites more accessible.

Label Your Images With Alt Text

It is well documented that the single greatest barrier to web accessibility is using alt text properly to describe images on a web page. If this single point was addressed by everyone who builds websites, it would eradicate the largest number of accessibility complaints.

The fundamental point to understand is that if you are going to put images on your site, it is essential that you label them correctly with alt text. To put that another way, every meaningful image on a web page must have an alt tag.

The information in the alt tag allows users of screen readers (which read web pages aloud to users with visual disabilities), text only browsers and slow connections that won’t load images to understand the information conveyed by images.

If an image does not have meaning, for example it is used purely for decoration, there are two ways to deal with it. If you load it as a background image using CSS, screen readers will ignore it and the image does not require an alt tag (be careful, becuase this also applies to meaningful images: if you load it in background, the screen reader will ignore it). If an image is displayed using HTML but is purely decorative, then use the alt tag but leave it empty. That tells the screen reader that an image is present but has no meaning for the user and can be ignored.

When you do label your images, use descriptive text that will allow people who cannot see to understand what the meaning of the image is. This requires judgement: what meaning is the image meant to convey, and what words will best convey that same meaning. Don’t get caught up in literal descriptions of every visual detail, convey the meaning.

A classic example is an image of a magnifying glass used as a button to start a search. The image has a meaning, so it should be described. Describing it as “a magnifying glass” does not help the user. What they need to know is that clicking on this button will start a search, so alt text of “click here to search” or even just “search” may be most appropriate.

Only images that serve a purpose must be labeled. Examples of these are as follows:

• Images that are used as buttons
• Images that are used as links
• Images that are used for any other controls
• Images that directly relate to the content

This technique applies to all websites, of course, not just WordPress sites. WordPress, however, makes it easier than most, firstly by allowing the content author to switch between Visual and HTML views, and secondly by providing a field for alt text whenever an image is inserted using Add Media functionality.

Use Plugins to Enhance Accessibility

WordPress accessibility can be enhanced by using a variety of plugins. These plugins are easy to set up, and they will enable users with a wide range of disabilities to access the site. Here are some plugins I’ve found useful.

Access Keys

The Access Keys plugin allows access keys to be assigned to links and controls on your website. For instance, the home link may be assigned the access key combination alt+h and the search button may be assigned the alt+s key combination. Access keys, such as the examples provided, enable visually impaired users as well as those with mobility issues, to easily access what they want.

Easy Retweet

Easy Retweet is a plugin that will allow you to add accessible buttons to your page that facilitate sharing your content on Twitter. This way, if individuals with disabilities wish to share your pages with their friends, they can do so without any difficulty.

AStickyPostOrderER

AstickyPostOrderER lets you choose the order in which your content is displayed. You can choose to display content from oldest to newest or in the reverse order.

Hackadelic SEO Table of Contents

The Hackadelic SEO Table of Contents plugin enables you to provide a table of contents for either your posts or your pages. This will make your content easy to find.

WP-Polls

WP-Polls permits individuals with disabilities to participate in any polls you may have on your site

New plugins are being developed all the time. Use the WordPress dashboard functionality to search for more. Try different plugins and ask your users with disabilities to give you feedback

When using any plugins, make sure the plugins use are compatible with your chosen theme, as well as with one another. If your plugins are not compatible with your theme, they will either not work or will cause more problems for disabled users who try to browse your site. If your plugins are not compatible with one another, your site can be rendered unusable or content may be displayed incorrectly.

Use Headings Properly

When you design pages, it is vital to structure the content using headings in the correct order: <h1>, <h2>, <h3> and so on. When you structure the content using headings, people using screen readers can get a summary of what the pages are about and navigate them more easily. Screen reader users can access the sections of content that they want by pressing the letter “H” to go forward and “shift+H” to go backwards.

You can label your content using headings one through six. Check how your theme uses headings (for example, your theme may or may not apply <h1> to the site title and that site title may or may not appear on every webpage. Either way, make sure the first heading used is <h1> and the following headings (page title, page sub-sections, paragraph headings) descend in order through to <h6>, where appropriate.

There is some flexibility about the ordering, but the most sensible option is to keep headings in numerical order and don’t mix them up (<h1>, <h4>, <h2>, etc).

<html>
<head>
    <title>Must See Horror Movies</title>
</head>  
 
<body>
    <h1>Horror Movies of the Decade </h1>
    (This is the title of the page that will be assigned a header by default in most WordPress themes.
    This header is always assigned to h1. Structure the rest of the content to follow what has been started)  
 
    <h2>Horror Movies for 2012</h2>
    (The list of 2012 horror movies will go here)  
 
    <h3>2012 Cult Movies</h3>
    (a sub-list of 2012 movies)  
 
    <h3>2012 Sci Fi Horror Movies</h3>
    (another sub-list of 2012 movies)  
 
    <h2>Horror Movies for 2011</h2>
    (The list of 2011 horror movies goes here)  
 
    <h2>Horror Movies for 2010</h2>
    (The list of 2010 horror movies goes here)  
 
    <h2>Horror Movies for 2009</h2>
    (The list of 2009 horror movies goes here)
 
    <h2>Horror Movies for 2008</h2>
    (The list of 2008 horror movies goes here)  
 
    <h4>Why Use Our Horror Movies Reference </h4>
    (This gets a new, lower header level due to the fact that this section of the page comes after those
    listing the movies, and it is not as important as the movie listings)
</body>
</html>

Use Navigation Links

Finally, you need to have navigation links in your site design. These navigation links will allow users with disabilities to skip past the navigation bar or other menus and search boxes and jump to certain places on the page by clicking these links. Or, the user can quickly jump to desired sections on the site. These links need to appear wherever it is necessary for users to skip to meaningful content. Examples of what these links may say are:

• Skip to Main Content
• Jump to Navigation Bar
• Jump to Search

Some WordPress themes may already provide such links. If this is the case, you will need to check to these links to see if you have to add any of your own. Other themes, however, will not provide navigation links. Thus, you will need to add these links yourself.

Conclusion

I will emphasize again that none of this will guarantee that your website will be 100% accessible.

However, if you employ these four techniques, then you can count on your WordPress site being more accessible than 90% of WordPress sites out there, and that you have addressed the issues that are raised by 90% of people who point out web inaccessibility.

People with disabilities will be able to better access your site, along with all of your other visitors. Since these visitors also include search robots, you can be assured that making your site accessible will also benefit your business model and help maximize your profit making potential.

In part one of this Windows 8 review we discussed pricing, installation and the new interface. Part two examined the software provided in the new OS. In this final part, we look at productivity and performance before asking whether Windows 8 is right for you…

Windows 8 Productivity

Windows 8 retains the best productivity features including taskbar pinning, application rearranging, jumplists, libraries, peek, home groups, etc.

That said, Microsoft has made radical changes so be prepared for a few frustrating days learning how to navigate the new OS without a Start button. Fortunately, there are a number of keyboard shortcuts which make life easier (look out for an article coming soon).

Where’s XP Mode?

One of the primary reasons I upgraded to Windows 7 Pro was XP Mode; a fully-licensed copy of XP SP3 which allowed you to run virtualized legacy software as if it were a native application. The bonus for web developers was that you could run real versions of IE6, IE7, IE8 and IE9 at the same time on the same desktop.

Windows 8 does not include XP Mode. The Pro and Enterprise editions support Hyper-V hardware-assisted virtual machines, but you’ll require an additional XP/Vista/7 license to use it. A shame, but it’s not as though many of us are bothering to test IE6 and 7 any longer.

Windows 8 Performance

I was a little disappointed with Windows 7 performance; it was not noticeably faster than a service-packed Vista. A cold boot took around a minute to reach the login screen followed by ten minutes of sluggish performance while applications were pre-cached.

Windows 8 blasts its predecessors out of the water. Booting takes a matter of seconds and the system is usable immediately after login. The OS seems less resource-hungry than before; CPU, memory and battery consumption have been reduced. Perhaps that will change as I install further applications but, for the moment, I’m more than happy.

The Windows Task Manager has been vastly improved and it will help you discover performance issues:

• applications and background processes are separated.
• app history can be monitored
• start-up processes can be viewed and disabled (goodbye Adobe and Java updaters!)
• services can be started, stopped and restarted.

To increase speed further, Windows 8 hibernates rather than fully shuts down. This has a number of consequences, e.g. services which are set to start manually will still be running between subsequent shut downs. Only a system restart will stop them.

Should You Upgrade to Windows 8?

Consider the pros:

• reasonable upgrade price for the next couple of months
• boots and runs faster than previous editions
• lightweight desktop application windows (no Aero)
• simplified configuration
• excellent security and built-in anti-virus
• installs a clean system without any junk
• refresh feature to restore Windows back to a pristine condition
• Hyper-V virtual machines
• improved task manager
• the best features from Windows 7
• Internet Explorer 10

and the cons:

• initially confusing, e.g. no Start button
• switching between Metro and desktop modes can be jarring
• Metro apps have usability issues on PCs
• some bizarre configuration locations
• fewer customization options
• you’re forced to start on the Metro screen
• no XP Mode
• Internet Explorer 10 (yes, it’s also a pro point, but the browser is far from perfect!)

Microsoft has attempted to create a unified system but the Metro and desktop modes are simply different interfaces in one OS. It’s apparent the developers favored touchscreen devices at the expense of PCs where Metro can be clunky and confusing. Admittedly, the tablet market is ascending as fast as the PC market declines, but Microsoft’s core market is desktop business users. Windows 8 could be a little ahead of its time.

Perhaps Metro will feel natural to IT novices but, in reality, how many people have never used Windows before? Windows 8 is initially disorientating and I suspect businesses will be put off by the training costs and lost productivity. I’m not convinced the improvements justify that expense; many people will skip Windows 8 and wait for version 9. (Is Microsoft suffering from classic Star Trek movie syndrome where a ‘good’ release arrives every other version?!)

On the plus side, no one can accuse Microsoft of playing it safe. The company’s biggest competitor is itself and many people are happy to use decade-old editions of XP. Windows 8 tries a new approach and, while it may not convince long-term IT users, it it possible to return to the more familiar desktop and methods.

Windows 8 has one other benefit: Microsoft usually listens to criticism. I expect the OS will evolve rapidly — especially if sales are slow. Most business users wait for Service Pack 1 and the company has a good track record of supplying fundamental improvements. I would not be surprised to see the Start button make a triumphant return.

The first few days are frustrating, but I encourage you to persevere. I cannot claim undying love for Windows 8 — and thoroughly detest some features — but I’m glad I upgraded. For performance alone, it would be difficult to return to Windows 7. Unfortunately, it took several weeks to reach that conclusion and many people will give up before then.

Upgrade to Windows 8 Pro at Windows.com or windowsupgradeoffer.com. Alternatively, buy the 32 and 64-bit boxed retail version at:

• Amazon.com — $66.99
• Amazon.co.uk — £43.19
• Amazon.de — 52,00€
• Amazon.fr — 53,80€

All prices are discounted until February 2013.

In the first part of this Windows 8 review we discussed pricing, installation and the new interface. In this post I examine the software and applications provided with the new OS.

Windows 8 Software

A fresh Windows 8 installation has surprisingly few applications. Of course, that doesn’t prevent OEMs installing several hundred megabytes of crapware, but even that can be solved by opening the charms menu (Win+C) > Settings > Change PC Settings > General > Refresh your PC without affecting your files.

Windows 8 provides Metro apps (see my opinion of them) such as Mail, Messaging, People, Calendar, News, Finance, Sport, Maps, Music, Photos, Video, Travel, Weather, SkyDrive and Bing Search. Microsoft has implemented account synchronization options to simplify your online life. For example, the People app can import contact details from your Microsoft, Skype, Hotmail, Outlook, Google, Facebook, Twitter and LinkedIn accounts.

However, most of these applications are very simple. For example, Mail is considerably less sophisticated than Outlook Express or Windows Mail. Novices and tablet users may prefer it. I didn’t, but it’s not as though you’re forced to use them…

As you’d expect, compatibility with existing desktop software is excellent. Microsoft work hard to support applications and it’s a safe bet to assume something which works in Windows 7 will probably operate in Windows 8. That said, I did experience a few weird issues which were mostly caused by tightened security. In most cases, temporarily running as an Administrator solved the problem.

To keep costs down, Windows 8 Pro comes without Media Center or many essential codecs for playing DVDs. Fortunately, you can obtain the Windows 8 Media Center Pack for free until January 31, 2013. Grab it while you can.

Windows 8 is the first edition of the OS to provide an App Store — and I suspect it’s another reason why upgrades are so reasonable. Admittedly, it’s a little clunky and doesn’t have a huge selection of titles compared to the Apple and Google offerings, but that’s likely to change. Microsoft provide a range of free apps similar to those installed in previous versions of Windows. It includes Minesweeper but, seriously, how has the game bulked into into a 106MB download?!

Windows 8 also provides Internet Explorer 10 which remains a beta on Windows 7 and will never be available for XP or Vista. My recent review was generally positive; the new browser offers strong standards support, good OS integration and automated updates. It no longer has a speed advantage and offers fewer features than competitors, but it’s a fine browser and there’s no reason to ridicule those who prefer it. European users will see the browser ballot screen but, if IE10′s your default, you can use it in either Metro or desktop mode.

Finally, uninstalling desktop apps is the same as always: Control Panel > Programs and Features. However, Metro apps are different — you need to right-click their tile and choose Uninstall. Another contributor to the general confusion.

Windows 8 Security

Historically, Microsoft caused more security scares than any other vendor. The company has turned the situation around and, despite Windows remaining the top target for crackers, it’s rare to hear of exploits. The key points:

• Microsoft Security Essentials anti-virus application is installed by default and is combined with Windows Defender. It’s lightweight and effective — although anti-virus companies will try to convince you that it’s not enough.
• The OS features Secure Boot Architecture to combat malware as Windows loads.
• Metro apps run in a sandboxed environment and cannot interact with each other.

Windows 8 won’t prevent users installing rubbish, but virus and malware developers have a tougher task ahead of them.

Windows 8 Stability

Unless you were unlucky or installed every dodgy application you encountered, Windows 7 was rock-solid. I don’t recall a major OS crash or blue screen of death in three years. Windows 8 builds on that success.

So far I’ve experienced just one instability issue: my keyboard went screwy and a process failed to shut down during reboot. While I suspect it was a quirky driver issue, Windows remained steady and I didn’t lose work.

In summary, there are few software faults in Windows 8. But the same could be said for most other editions of the OS. Even XP is solid and fairly secure following a decade of security updates. There’s little to get excited about but, similarly, there are no major irritations.

In part three we’ll discuss Windows 8 productivity, performance and whether you should upgrade…

If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like A Beginner’s Guide to Video Editing Using Windows Movie Maker.

Three years have passed since I reviewed Windows 7. The OS was well received but, after the Vista debacle, Microsoft’s flagship OS could only get better. Can Windows 8 improve user perceptions further? Microsoft sold four million copies of Windows 8 in first four days and 40 million in the first month. Depending on who you believe, sales are either sluggish or out-pacing previous editions.

While you’ve probably seen many Windows 8 reviews, I wanted to impart my impressions after using it daily since its launch on October 26. I’m using Windows 8 Professional on a standard PC with dual monitors (not touch-screens), keyboard and mouse. For the record, I’ve been using Windows since version 2 and MS-DOS prior to that; I like to consider myself reasonably competent at navigating Microsoft’s Operating Systems.

This is a long review split into three parts. In part one we’ll look at pricing, installation and the new interface. Part two discusses software, security and stability. The final summary covers productivity and performance.

Windows 8 Pricing

Windows 8 pricing is competitive compared to its predecessors and discounted until February 2013. If you’re happy to download a 2.6GB ISO and burn your own disks, head over to Windows.com where you can upgrade from any version of XP, Vista or 7 to Windows 8 Pro for $39.99 / £24.99 / 29,99€. Those who bought a PC recently can save a little more money at windowsupgradeoffer.com.

If you’d prefer the boxed retail version containing the 32 and 64-bit versions:

• Windows 8 Pro upgrade at Amazon.com — $66.99
• Windows 8 Pro upgrade at Amazon.co.uk — £43.19
• Windows 8 Pro upgrade at Amazon.de — 52,00€
• Windows 8 Pro upgrade at Amazon.fr — 53,80€

Windows 8 Installation

As you’d expect, Windows 8 installation is relatively pain-free. You can select to upgrade from XP, Vista or 7 but I’d always recommend a clean install to de-clutter your hard disk. Answer a few options and Windows 8 will be booting 30 minutes later.

Windows 8 is based on Windows 7; you’re unlikely to suffer from driver compatibility issues and the installation recognizes most hardware. In theory. I was initially missing sound until a BIOS update arrived but, admittedly, this was on a new PC. Most devices were recognized without issues.

Finally, Windows 8 may be a new OS, but Microsoft has already issued a plethora of updates. Be prepared to download a gigabyte of patches following your first boot.

Windows 8 Interface

The interface is the primary reason you’ll either love or hate Windows 8. From here on, I’ll be referring to the tiled Start screen and apps as “Metro”. Microsoft cannot name it that for legal reasons, but I life’s too short to refer to it as “Windows 8 UI style”.

You’ve probably seen the new Windows Metro start screen featuring app tiles but here’s a reminder:

Tiles are either shortcuts to standard applications or Metro Apps which can feature live, automatically-updating information such as weather reports or stock prices. You can rearrange tiles by dragging or right-click to resize, remove or uninstall.

Lurking behind Metro is the standard Windows desktop. You can switch to it using the ‘Desktop’ link, the Windows key on your keyboard or launching any standard (non-Metro) application.

While Windows 7 features such as taskbar pinning, jumplists and (Aero) peek are available, Microsoft has de-cluttered Windows to remove features no one used. Like the Start button. Start has been a core part of the OS for 17 years but it can rapidly become a jumbled mess of random application links. That said, I’m one of those people who actively organized shortcuts into a logical hierarchy and I missed the Start button initially. However, you’ll find yourself pinning essential shortcuts to the taskbar and desktop — it soon becomes a distant memory.

The Windows 8 Metro Start screen is the new Start button. You can return to Metro by clicking your keyboard’s Windows key, moving the mouse to the bottom-left of the screen and clicking the popup, or opening the Charms menu and clicking the Start icon (Win+C or move the mouse to the top or bottom-right corner of the screen).

When I first opened a standard desktop application I thought there was a problem with my graphics card; windows are plain rectangles without Aero transparency. While I liked the attractive Vista/7 view, I always considered it to be an unnecessary resource hog. It seems Microsoft agreed:

It reminds me of Windows Home Basic or — dare I say it — Windows 3.1. It’s reasonably attractive and you can make basic changes to the color scheme but, as the screenshot above illustrates, it can be a little difficult to determine window edges. I often find myself changing the dimensions of the wrong window.

Desktop gadgets have also been consigned to the Windows graveyard. They were never particularly popular although I had a few useful ones which I’ll miss. Microsoft wants you to use Metro apps instead…

So what is a Metro app? In essence, it’s an application with a simplified interface which runs full-screen. Several are provided, such as Mail, Calendar, Weather and Bing search:

The Windows Store offers many more. Apps can also be docked to the left or right of the screen so you can use two at once.

While Metro apps may be useful for smartphones and tablets, I dislike them on a PC. The first problem: other than games, how many apps do you want to run full-screen? A typical example is Skype — the standard desktop interface isn’t great but the Metro edition is shocking. Even on a 24″ monitor, you can only view around six contacts at a time and it’s impossible to chat, send an instant message or upload a file at the same time. This isn’t necessarily an issue on smaller devices where you’re performing a single task, but is fundamentally flawed on a multi-tasking desktop PC.

Another irritating problem: all Metro apps show a splash screen. Why do I need to see a full-screen calendar icon immediately after I’ve clicked it? It may only appear for a second or two, but it’s impossible to switch it off.

Next issue: Metro apps scroll horizontally. Again, this possibly feels more natural on a tablet where you can swipe, but it’s bizarre on a PC. For example, your mouse’s vertical scroll wheel moves the screen left and right.

Discover-ability is another flaw. I’m all for simplifying interfaces, but Metro apps often favor simplicity over practicality. Consider the Windows 8 Reader app. Microsoft has finally realized the world is using PDF documents and provided a built-in reader. It’s fast and reasonably slick. However, once you’ve viewed a PDF, there’s a strong possibility you’ll want to print it. But there’s no menu. Right-clicking displays viewing options, but no print icon. I thought there must be a licensing issue until a Google search revealed that I needed to open the Charms menu, click the Devices icon, choose a printer and hit ‘Print’. That’s right — a single toolbar icon has been replaced by a mouse gesture followed by four clicks. The bloated Adobe Reader is back on my system.

Finally, how do you close Metro apps? You need to move your mouse to the top of the screen, click to grab the app, then drag/swipe off the bottom. Is that really better than a single click on an ‘X’ icon? I’ve started using Alt+F4 for the first time ever.

Despite my negativity, there’s no need to use Metro apps. I rarely do and spend 99% of my time on the standard Windows desktop.

Microsoft has attempted to create a unified operating system which works on PCs and small-screen devices. In reality, Metro and desktop mode are distinctly different interfaces and it can be jarring to switch between the two. While the tablet market is growing as quickly as the PC market falls, the new interface is disorientating for existing Windows users. It becomes easier over time but, for the first time in many years, Windows 8 made me feel like an IT novice.

In part two we’ll discuss Windows 8 software, security and stability…

If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Microsoft Access and VBA.

Note: This article is OSX specific.

The Plight

The Finder application is often one of the main points of ridicule in comparisons of OSX vs Windows or Linux. It doesn’t have tabbed browsing (something every Linux Window Server has had for years) and provides no painless way of cut-pasting files. At times, it’s painfully slow and navigating through its eleventy billion open windows when finding your way around complex projects and subfolders can confuse even the most hardcore users. Add to that the fact that it spawns .DS_Store files everywhere and pollutes every single folder you open with them, there’s little reason to consider it a good application. But there’s no replacing a native app, right? Or is there?

The Cure

TotalFinder is a better Finder. It installs on top of your existing Finder app without replacing it, which means you can easily remove it later on should you choose to do so, or should your license expire and you decide not to purchase one. We’ll be covering all of its features in more detail a bit later on, but the TL;DR version is:

• it has tabbed browsing
• it offers actual cut/copy/paste context menu buttons
• it features a dual view where two open folders are side by side
• it has the Visor, a sliding, always accessible Finder window

Before we begin, however, it is important to note that TotalFinder is not free — and with good reason. TotalFinder’s commercial support ($18) helps its developer stay on top of new OSX versions and makes sure the bugs are ironed out almost as soon as they appear. TotalFinder does, of course, offer a trial period, but more on that later. For now, just download it.

Installation

Installing the application is as simple as downloading the DMG image, mounting it and running the .pkg file inside the mounted image. This package file will install TotalFinder and make sure everything works like it should.

You will need to authenticate to finish the installation, but once finished your Finder will restart and TotalFinder will take over. A mere couple of seconds later, your TotalFinder installation will be ready to use. If you had a Finder window open before you started the installation procedure, another will open in its place. If you did not, feel free to start TotalFinder by clicking the Finder icon in the dock — it stays exactly the same as before.

Tabbed Navigation

A feature many operating systems already offer and one that’s found in every modern browser these days, but still lacking in the original Finder is Tabs. TotalFinder enables you to open folders in tabs instead of overlapping windows, which means that when you open a new folder, a new tab gets opened in the existing window instead. This makes for quicker navigation, easier drag-and-drop functionality between folders, and a cleaner desktop. Tabs are automatically on as soon as you first run TotalFinder, and are not a feature you can turn off.

You can open a new tab with the keyboard shortcut Command+T and close one with Command+W, which is identical to how tabs work in the Chrome browser. If you want, you can still open an entirely new TotalFinder window with Command+N as usual.

Now let’s take a look at the preferences and everything they offer. Please go to TotalFinder->Preferences, or to Finder->Preferences and into the TotalFinder tab.

Visor

The Visor is a docked TotalFinder window that resides at the bottom of your screen and only appears when you need it. For instance, if Visor is on when you open a folder, instead of opening a new TotalFinder window the Visor pops up and displays the folder contents in a new tab. Once you’re done, clicking away instantly makes it slide back down. The Visor can also be called via a hotkey which you can define in the TotalFinder Preferences, so it’s always there when you need it. In time, you’ll get so used to the Visor you won’t ever even open an actual TotalFinder window any more.

To tweak how it looks, feels and acts, see the Visor tab of the TotalFinder preferences pane:

Side-by-side View (Dual Mode)

While in a tab, hitting Command+U or double clicking the tab’s head will activate Dual mode. This will spawn another tab, halfway merged with the original tab, and will display them side by side, each with its own sidebar on each side. This is extremely useful when syncing up folders and moving loads of files around.

This mode is manually triggered via double clicking or pressing Command+U, and is not an option that has to be enabled.

Folders on Top, Always Maximise, Show System Files

TotalFinder also offers some other goodies, as you can see by the Preferences pane.

The Folders on Top option makes sure folders get on top of a stack in a given folder — this simulates other operating systems and people coming from an OS like Windows might find this feature a welcome addition.

vs

By default, the Maximise button on OSX windows only resizes a window enough for it to get rid of the scrollbars. If you’re coming from a different OS background, you might be used to maximise actually doing what it says it does — maximising the application to full screen. Turning Always Maximize on does exactly that — it changes the behaviour of the maximise (green +) button.

Show system files is a super simple shortcut to showing hidden files. This option should not be touched if you don’t know what you’re doing or if you’re not familiar with system files, but for developers and the like, it’s a very useful shortcut.

Experimental

The Experimental section offers some semi-beta features that have been production-worthy for a while now.

Freelance Windows forces all new folders you open to open in separate windows. Instead of the default behaviour in which a window is opened as the tab of the last used TotalFinder window, Freelance windows makes sure new opens happen in a window of their own.

Use Narrow Tabs bar decreases the margin and padding of the tabs so that more of them fit into one TotalFinder window. This is purely aesthetic and has no effect on the functionality of the application.

Show Cut and Paste buttons in Context Menus adds these buttons to the menu you get when you right click over a file. This absolutely essential functionality has been missing in the Finder app since day one, and activating it will completely turn around your filesystem navigation experience.

Allow Path Copying from Context Menus allows you to do exactly what it says it does, with an added perk. Not only does it let you copy the original Unix path to the file, it also re-parses the file path into the format required for other media. For example, copying the path of the file ~/test.txt will give me these results for each of the available five options:

POSIX Path: /Users/swader/test.txt
URL: file:///Users/swader/test.txt
Windows Path: \Users\swader\test.txt
HFS Path: Main:Users:swader:test.txt
Terminal Path: /Users/swader/test.txt

While the benefits of this feature are not immediately obvious to most, some more hardcore users will most definitely benefit from them.

Asepsis

Up until a recent version, TotalFinder came with another brilliant feature — Asepsis. This option was the ability to completely and permanently prevent the creation of .DS_Store files inside your folders. No more trash on your USB sticks, no more polluted network drives, no more problems when adding to your Git or SVN repository. This feature has since been removed from TotalFinder, but fear not — it was added onto BinaryAge’s site as a standalone application. Download this immensely helpful application here.

Conclusion

We all have our love-hate relationships with our working environments — there’s always something we notice that could have been done better. I hope this review of TotalFinder’s features convinced you there’s room for more love than hate in OSX’s approach to filesystem navigation. Remember, this excellent application wears only an $18 price tag, and even if that’s not affordable for you, keep reading — there’s a treat coming up.

Giveaway

BinaryAge and SitePoint have teamed up and are giving away three licenses to TotalFinder. To participate in the giveaway, tweet this article with the hashtags #sitepoint and #totalfinder; OR try out the TotalFinder demo (14 days free) and comment back here with your favourite feature. A fortnight after this article’s publication date, three winners will be drawn and notified via tweet or email (if you use the comment approach to participate, make sure you leave a valid email).

If, after the draw, you still don’t win — don’t fret. The TotalFinder developer often gives out free licenses, so see if you can apply for one here.

Good luck!