These sites look like they are doing some complicated magic when really they are just utilizing images as backgrounds in creative ways.

Feel free to share more examples you’ve created or found!

Example using two background images: one in the top header and then another image place to the right of the div below

Example using one background image

]]> http://uitrends.com/2010/08/12/tricky-images/feed/ 3 http://uitrends.com/2010/08/02/visually-impaired-touchscreen-accessibility-2/ http://uitrends.com/2010/08/02/visually-impaired-touchscreen-accessibility-2/#comments Tue, 03 Aug 2010 02:56:26 +0000 Jeff Noble http://uitrends.com/?p=2217

David Reynolds, a visually impaired web developer, provided the following article with additional information by Jeff Noble.

Touch screen user interfaces are a hot trend with some really exciting user interface possibilities, but the range of products from Apple, Android, and HP pose a whole new series of problems for those who are visually impaired.

Apple is the most popular choice and the iPhone (3GS and beyond), iPod Touch, and iPad have the capability to ”enable” speech output, and can be easily “switched on” by a sighted friend. Once switched on, the device will provide speech output, and allow a visually impaired user to navigate around the screen, and gain control of these devices via a series of “gestures.”  David explains “in the simplest example, touching the screen at any point will say the icon that you’ve touched.  If you want to choose that icon, you simply double-tap the screen.”  Note that it doesn’t matter where you double tap, the last spoken icon will be selected. Other gestures allow users to explore the screen in more detail, and while David has not gotten a chance to mess with one of these babies yet, he gathers from various reports from other blind users that many of Apple’s own applications are accessible, and indeed, many third party applications are as well.

HP has had a touch screen system for a while that is very usable by sighted individuals, but for those that can’t see, it is a definite no no. According to David, “HP has done very little” for the visually impaired with their touch screen interface.  Further investigation of HP, did unearth a brochure, a website, as well as a claim of support of the Dolphin Computer Access screen reader.

Unfortunately the Android solution is not yet ready for use on touch phones. Much is promised, and much has indeed been accomplished, but it lacks the comprehensive functionality of the Apple solution.  One positive note is that Android phones have an open source screen reader. David likes the idea of open source, since it allows for anyone with an interest to “chip in” on the development, either by writing code, or providing feedback on improving existing features. David is hoping that this won’t be the case for long, since it is important that visually impaired people get the choice of some good accessible software.

While it appears that Apple is currently the front-runner in touch screen accessibility, the problem hasn’t been fully solved and there are a few more issues to discuss. The Apple screen reader is proprietary and the odds of Apple sharing, much less caring what anyone else is doing is pretty slim. For more information, see the Apple track record here, here, or here. Other companies who adopt touch screen user interfaces may do it poorly  (see HP example above) or consider it the responsibility of a third party to write a screen reader application, which may need to be bought.  The trouble with this is from David’s experience, most screen readers normally cost as much as much (if not more) than the actual computer that you’ve bought to use them on!

Screen orientation is another interesting issue. Most devices with a touch screen are also capable of changing the screen layout depending on how the device is held (vertical or horizontal). For those that can see, it’s pretty cool and comes in handy depending on your preference, but for those without sight it creates a whole new problem – completely changing elements of the UI that the visually impaired can’t see and have trained themselves to use.  David cited the following example “I can’t see my Windows XP screen, but after much practice, and a great deal of getting lost, I’ve a pretty good idea of how the screen is laid out, and what happens when certain keys are pressed, and what events are triggered. But for me, and others like me, it is a learning process. This is an issue that needs to be addressed for many of us.“

While touch screen offers some wonderful new ways to interact with user interfaces, there is still a lot of work that can be done. David politely requests the company’s involved in building these devices, people designing and developing the software and everyone else to “please spare a thought for those who can’t see the screen.” Otherwise there is a whole group of talented people that want to learn, develop, and interact with computers using touch screen interfaces that are being left out.

If you enjoyed this article you might want to check out the previous post from David and Jeff “5 Tips To Immediately Improve Your Website Accessibility From a Visually Impaired Web Developer”

Software can be like wine.  Let’s say, a bottle of red wine. How about, a Cabernet Sauvignon, aged 11 years or so, that you forgot about in your wine cellar.  You’ve tried this one before, when it was still young, and it didn’t do much for you.  Now you give it another shot…

You immediately notice hints of oak, vanilla, and traces of blackberries.  It’s a little much to take in, so you let it breathe.  You then notice rich tannins, and more complex aromas that you can’t place.  You look at the bottle, and read label: “Scalable Vector Graphics ~ 1999″.

The Scalable Vector Graphics (SVG) format is nothing new.  Created around 1999, this XML based standard needed to mature a little to really show it’s capabilities.  I’m sure those of you that have been around these interwebs a time or two have come across SVG in the past and were probably unimpressed.  With the web becoming a legitimate platform, and as the underlying technologies (HTML, CSS, and Javascript) and the browser have finally started to mature, the capabilities of SVG can now be realized.  We all know from the mass amount of shiny icons and “web 2.0″ sites out there that vector graphics are really popular these days.  But with SVG, the ability to use and manipulate vector graphics as objects is taking the web past 3.0, all the way to 4.0!!

Here are some examples of pretty compelling uses of the SVG format:

The Raphaël Javascript + SVG Library
http://raphaeljs.com/analytics.html
http://raphaeljs.com/chart.html
http://raphaeljs.com/ball.html

W3C Example w/ Code:
http://www.w3schools.com/svg/tryit.asp?filename=animatemotion_2&type=svg

One of the more famous SVG examples, the cubic spline tiger:
http://www.croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg

“What about HTML5?” you might ask.  ”What about the really cool stuff that the Canvas tag can do?”  Well, there is some overlap, but SVG is much more suited to manipulating objects than the Canvas.   The way to view it is that (out of the box) SVG deals with graphical objects (vector graphics, raster graphics, text) and remembers what is rendered, making it easy to re-render.  The HTML5 Canvas is a lower level protocol that is basically a “drawable” region, which makes it very flexible.  One is not better than the other, they are just different mechanisms.  If SVG is a bottle of fine wine, the Canvas is a Cuban cigar.

The touch screen has changed the way we think of interacting with ui’s (its also changed how we drive – admit it, it is WAY harder to text while driving and I am convinced that it has brought about or at least sped up texting while driving laws). So how will our computer and device interactions change next? Or will they. Here are a few interesting sites. Feel free to share more!

In the spirit of excuses here are the top 10 reasons redesigning your website is like renovating your bathroom.

10. Both require removing rotten frames (if you find any)
9. Both might require hiring a professional
8. Both seem to go on forever
7. Both require the right tools to get the job done
6. Both involve uncovering disturbing things from the past
5. Both should follow industry standards
4. Both require preliminary planning to be successful
3. Both have fantastic online resources
2. Both have designs that at one point were in style but now I can’t stand
1. Both involve meeting objectives or you could really land in hot water

http://montreal.bixi.com/home

Okay, so maybe it’s not that surprising that my 4 year old figured this out. Our kids are so much smarter than us. But still…

The other morning I woke up around 5am with a sense that something was awry. I immediately noticed that the hall light was on so I investigated and also discovered the light to my 2 year old’s bedroom had been turned on. I quickly turned it off hoping she wouldn’t wake up when I heard a faint noise from my 4 year old’s room. There was Kyla, lying on her bed with my iPad propped up in her lap. When she saw me she proudly exclaimed “Dad, look what I found! I’m watching Monster’s Inc.” She was streaming Monsters, Inc. from Netflix!

Now, the interesting part: Kyla had never used my iPad, nor had she ever watched me use my iPad except to read her a book (twice). Retracing Kyla’s steps demonstrates several hurdles she overcame, and some that I may not even be aware of:

1. 1. She found the iPad
2. 2. She opened the cover and turned it on. No big deal here – she regularly uses and plays with an iPhone, so she does have that experience to leverage
3. 3. She selected the Netflix icon
4. 4. She browsed Netflix and somehow found Monster’s, Inc. It was NOT in my Instant queue. I don’t want to consider what she might have seen while browsing Netflix…
5. 5. She figured out how to begin playing Monsters, Inc. Remember – she can’t read.

All in all a fairly arduous task for a 4 year old, yet Kyla seemed completely relaxed and quite proud of herself when I found her. I let her enjoy the rest of the movie and got in bed next to her.

Looks like Apple and Netflix both have passed the 4 year old “ease of use” test! And now I know where various mysterious charges may be coming

What you clicked was not what you expected.  It was the new “improved” banner ad; complete with a new twist – the classic bait and switch.  These colorful page headers usually have an embedded video, and usually expand when the user hovers.  The result is that the main navigation and content is, in most cases, either completely covered or pushed down.  And for those quick-clickers like myself, before you know it, you’ve been thrown into some company’s ad revenue stream… without a paddle.

So is this clever a clever mix of advertising and technology, or simply the new and improved popup: impervious to the “browser block”, and capable of intercepting the clicks of unsuspecting users??