Have you ever used a touch screen device to browse the web? Chances are, you have. iPhones and iPads were the scouts of the army of touch-enabled devices – set out to conquer worlds – and recent iPad sales statistics show that touch is here to stay.

Meanwhile, the keyboard and the mouse will probably stick around for another decade. This has some serious implications for web designers, as they need to come up with designs that work on a myriad of devices.

Responsive web design is a principle that we can use to overcome the problems that varying screen resolutions bring along. But, there is one design conception not all web designers know about: feedback.

The Golden Days

When I was in kindergarten, I was taught how to write with a pencil. At first, the device did not work properly; I could tell by the absence of grey lines on my piece of paper. My mentor explained to me that I was holding the pencil upside down. I turned the device around and began drawing again. Lines appeared, I knew that I was doing something right; I got immediate feedback.

Many pencil training sessions later, my beloved writing tool was replaced by the Personal Computer. I started browsing the web. Sometimes I would click on a link, and nothing would happen. Either the following page was loading slowly, or I had not properly pressed the mouse button. I could usually exclude the latter, as the mouse was designed to provide me with a clicking sound and some friction – immediate feedback.

Looking towards a better future

Recently, I purchased a mobile phone with a touch screen. I regularly surf the web and inevitably click on links and buttons. Sometimes, nothing happens. Is it the slow connection or did my skinny fingers miss the clickable area? There is no way to tell if I have actually clicked on a button or link, because there is no tactile or auditive feedback like I received with a mouse. This problem can be easily fixed by:

1. Setting a proper :active state for links and buttons in the css file. It is often neglected, but important to create visual distinction between a links that have or have not been activated.
2. Providing a clickable area that is large enough so that clicking on a link or button does not become Odysseus’ Journey. Add some padding to your anchors!
3. Adding interaction sounds on touch/click events. Time to dive into jQuery and html5!

Physical devices are built around the same basic principle: users provide input; the device processes the input and returns an expected output. As described by Don Norman in The Psychology of Everyday Things, providing proper feedback between input and output is key to successful user interaction. He writes:

Feedback—sending back to the user information about what action has actually been done, what resulted has been accomplished—is a well-known concept in the science of control and information theory. Imagine trying to talk to someone when you cannot even hear your own voice, or trying to draw a picture with a pencil that leaves no mark: there would be no feedback.

The web is unique in that it is a solely electronic medium. However, web designers would be wise to learn from product design and consider the ways users interact with the web.

With an endlessly updating list of browsers being used on a variety of operating systems, web developers and designers require a tool for compatibility testing. Adobe fills this void in their suite of applications with BrowserLab, a new cross-browser compatibility tester. Released by AdobeLabs as beta in June 2009, it is still being revised through user comments and feedback. Adobe currently provides a free, limited version lasting through the end of 2010, for users to preview the application’s functionality and debugging. Starting in 2011, there will be a $10-20 monthly fee to use the service. For Dreamweaver (CS4) owners, there is a free plug-in available for download on Adobe’s website. This plug-in allows local testing of websites, while the web version requires a site to be live in order to download the code.

Currently, you can test with:

• Firefox 2.0, 3.0 and 3.5 (Windows XP and Mac OS X)
• Internet Explorer 6.X, 7.X, and 8.X (Windows XP)
• Safari 3.X and 4.X (Mac OS X)
• Chrome 3.0 (Windows XP)

Since BrowserLab’s launch last year, developers have added a number of useful features. Onion Skin Registration is one of the most useful tools within the program. It allows you to layer two separate versions (from different browsers) of your site and adjust opacity of the top layer, highlighting the differences. Rulers and Guides have also been added to the toolbox: you can pinpoint exactly where discrepancies are revealing themselves.

A feature I find particularly useful is the two-up mode. It gives you the largest available viewing room for two side-by-side browsers. You can zoom around in one window, while the other follows your movements to see the differences in similar areas.

So, what makes BrowserLab better than its competitors? This is what Adobe says:

BrowserLab offers a unique combination of speed, ease of use, and powerful diagnostic tools, with customizable testing preferences. When used with Dreamweaver CS4® software, web professionals can also test local content and different states of interactive content.

There are only a couple of reasonable competitors, each of which stack up pretty well against BrowserLab. The competitors included Litmus and (the tastelessly named) Cross Browser Testing. Both offer a very limited trial; the latter requires a credit card for access. They run significantly slower than the beta version of BrowserLab. Litmus offers features that Adobe doesn’t, including invalid HTML and CSS markups and a slightly more personalized interface.

Regardless of speculation, BrowserLab has proven itself a successful tool with useful features. Sign up for the Beta and compare it with other services for yourself while you can for free. Follow them on Twitter for updates on the project.

Tumblr pages routinely promote plagiaristic activity, not through words, but actions. Don’t get me wrong, Tumblr offers a great service. The only gripe I have is an interface that encourages people to publish images over content. Most Tumblr pages are giant archives of images with a short sentence describing the image, if at all. Which in turn leads to a lack of proper credit.

Some companies go beyond accreditation issues and have outright copied and sold products based on other artists work. Many get away with it, purely out of the vast amount of artwork in existence. Companies such as Urban Outfitters have been constantly in violation of this, yet without any punitive measures taking place. This is of endless frustration to artists around the world. So much so, that there has been a blog dedicated to finding Urban Outfitter design rip offs. Aptly titled Urban Counterfeiters, their goal is to:

Bring American consumers reports from small companies and artists who have been taken advantage of by large corporations. We wish for these corporations to be held accountable for their actions and to change their business practices.

What to do about it

The internet is growing at an exponential rate. The problem is only bound to increase unless some action is taken. What sort of action? I don’t have set-in-stone answer, but I do have some ideas ranging from a idealistic personal level…

• Actually speak up if you see something in question
• If you are creating the artwork, mention that you have permission from the artist
• Treat others artwork as if it were your own

to a more rational, global outlook…

• Improve EXIF or META data through encrypted information and allow images to be traced no matter where they are on the web
• An external service hosting every image you post online, doesn’t allow image downloads and all places that the file is in use can be deleted via user control
• Image based search engine, allows you to upload an file and searches for similar images (FeelImage is a step towards this, although not advanced enough yet for practical use)
• A tool that locks the screen grab feature from your site

I’m not claiming to have the right answers. I find it more worthwhile to spend time finding productive solutions rather than pointing fingers. I’m curious to see other suggestions people have thought of. There are plenty of minds at work at every second of the day circulating at an all-too-ridiculous pace on the Internet. I hope with this wealth of knowledge and sharing that there have been some progression towards solving this problem.

The Brazillian studio, 3bits has re-imagined the history of contemporary electronic with Sync/lost. An installation piece brought to life by two projectors and three subjects armed with Wii-motes and headphones. It guides them through the formation and evolution of prolific electronic genres as well as their sub-genre counterparts.

In developing this installation, their stated intentions:

The project’s objective is to create an interface where users can view all the connections between the main styles of electronic music through visual and audible feedback. The choice is individual and leads to a collective consequence in the spatial visualization of information.

When the user selects a genre it will play a popular song from it and provide expository information regarding the sound under the “Now Playing” yellow bar at the right hand of the projection. This element adds a new dimension to the interface. Instead of just seeing the past and future of specific sounds, the text outlines the pertinent information attributed to each sound.

In the spirit of Sync/lost, a tool for sifting and sorting through the past. 3bits referenced the origins of electronic music through the author Ferruccio Busoni, a pioneer of the genre. In 1911, he published his book Sketch of a New Esthetic of Music where he writes:

…[Dr. Thaddeus Cahill] has constructed a comprehensive apparatus which makes it possible to transform an electric current into a fixed and mathematically exact number of vibrations. As pitch depends on the number of vibrations, and the apparatus may be “set” on any number desired, the infinite gradation of the octave may be accomplished by merely moving a lever corresponding to the pointer of a quadrant. Only a long and careful series of experiments, and a continued training of the ear, can render this unfamiliar material approachable and plastic for the coming generation, and for Art

What Busoni has to say is entirely relevant to the concept of Sync/lost. It allows the user to direct the Wii-mote’s virtual cursor over a genre and displays what it was influenced by and what other movements it influenced through a web of lines. The influencing node is denoted as the “parent” knot and the influenced node is a “child” knot. The installation enables people to observe and easily understand a musical evolution, potentially developing an appreciation for electronic music as a whole.

The iPad, as Apple CEO Steve Jobs explained, is a personal computing device that fills a void between laptops and smart phones. Jobs says the device excels at everyday computing tasks like browsing the internet, reading email and watching movies.

A quick look at the Apple Tablet:

History of Apple’s i

Prior to using the i prefix, Apple had product names like Power Macintosh 7300, PowerBook 4300 and Workgroup Server 9650. Apple first used the prefix on the first iMac, introduced in August of 1998. The original iMacs were very successful, selling 800,000 within five months.

The name iMac was based on the ideas of personal computing and the internet. “iMac comes from the marriage of the excitement of the internet with the simplicity of Macintosh,” Jobs declared at its introduction. “We are targeting this for the number-one use that consumers tell us they want a computer for, which is: to get on the internet.”

The following descriptors, displayed during the press event, better explain Apple’s choice of name:

• internet
• individual
• instruct
• inform
• inspire

Apple’s adopted the prefix in other product names. The iBook, a laptop computer, was released in 1999, followed by the iPod in 2001. Apple software started to follow suite: iTunes; iCal and iChat, and; the iLife and iWork packages. In 2007, Apple released the iPhone.

Then & now

Apple rethought computing with the iMac: it was the first computer to look beautiful. The iPod and iPhone were equally revolutionary. The tablet has the potential to be an innovative, forward-looking technology. But, the name doesn’t live up to it.

The initial concepts behind the i- prefix — while very philosophical — are too abstract and no longer apply. The idea of the ‘individual’ has transitioned. Individual is clinical, singular, isolated and divided; it’s reserved for individually wrapped and individually packaged, or individual rights. The computer as an instructing, informing and inspiring tool is an antiquated way of looking at things.

Personal is personable and custom, the current direction in technology. Computers are now more personal, and the internet has aided in this. Content is based on personal preference. The web is no longer new, as it was twelve years ago: it is the ubiquitous standard.

iPod + iPhone ≠ iPad

When interviewed on the Apple tablet, Steve Jobs explained, “Plus the fonts look great together … iPod, iPhone, iPad.” Firstly, those aren’t fonts: those are names. Secondly, this is poor justification because the relationship between the portable music player and tablet is fanciful. While the Apple tablet can play music, these products serve entirely different purposes.

There is something to be said for unity in product lines. However, the prefix has been around long enough that software and hardware creators, in an attempt to capitalize on Apple’s success, have adopted it. Many of these spin-off products aren’t up to Apple standards. This cheapens the brand.

A marketing team probably spent months searching for an appropriate word to append to the letter ‘i.’ This seems like a terrible waste because the whole concept has lost its originality. Apple’s motto is ‘Think Different,’ for goodness’ sake! The Apple tablet embodies this: the name iPad does not. An original product deserves an original name.

This entry is an opinion piece and may not represent the beliefs of other Inksie staff members. If you have any insight, please leave a comment.

The Font Game for the iPhone and iPod Touch

I Love Typography (ILT) released The Font Game, a new application that tests typeface knowledge, on December 17th for the iPhone and iPod Touch. ILT founder John Boardley designed gameplay along with Kari Pätilä, who also created online support. Justin Stahl developed the game; it is his second application for the iPhone. (His first was the very useful reference tool, The Typographic Manual.)

A quick look at The Font Game:

Gameplay

The Font Game tests typeface knowledge through timed 30-question rounds. The game displays a font and the user must select the typeface from four options. The goal is to correctly identify as many fonts as possible in as little time as possible. There are three difficult levels (from the viewpoint of The Journal’s moderately skilled staff):

• Somewhat Difficult is not much of a challenge. Those who know their way around the standard fonts will be amused.
• Rather Difficult is a major step up, with the inclusion of less common display faces and italics or bolds. Process of elimination is key.
• Exceedingly Difficult is all-out madness. Everything looks alien; font names appear foreign.

Post-game review shows the correct answers. A convenient in-game feature posts scores and times directly to Twitter and an online Hall of Fame. If you were to look here, you find Nancy Wu.

Hall of Fame Times (in seconds):

Some quick math: 30 questions in 47 seconds equates to 1.6 seconds per question. Thirty questions in 35 seconds is about 1.2 seconds per question. Average human reaction time is about 0.7 seconds. This is fast – so fast that fonts must be recognized before realized and decisions made nearly subconsciously.

Nancy Wu Spills the Beans

So, how did Wu attain this legendary status?

“I was home … with a bad head cold and was taking care of my young son while getting addicted to this really fun game,” she told The Journal in December. “I now have a bunch of fonts I really want to buy.”

Nancy Wu has been involved in the communication arts for seventeen years as a designer and art director. She recently taught a typography class at Emily Carr University of Art and Design in Vancouver, BC. “While I was in design school I used to memorize my Letraset and Mecanorma type catalogs,” she explained.

How long did it take Wu to master the game?

She estimates only eight hours – with two hour-long marathon sessions – over a single weekend. “Once I was better and Monday rolled around I wasn’t playing as much.”

Wu has held her ground for four solid weeks. Only time will tell if she remains at the top of the charts.

The Journal staff would like to thank Nancy Wu for answering our questions. However, we are still baffled by her speed. A full transcription of the email interview can be viewed here.

Color Add is a visual system for the color blind developed by Portuguese designer Miguel Neiva. It uses simple symbols to represent colors. The system is based on the additive color system. The primary colors, blue, red and yellow are the primary symbols. Secondary colors are represented by adding the primary color’s symbols together. (For example, orange is represented by adding the yellow symbol to the red symbol.)

Color is an important aspect in design systems. Public transit routes, for example, are often color-coded. The system has clear  applications here. Transit maps can have a color symbol alongside the colored route. Shirt tags or colored pencils can be color-coded, as well.

This is a great example of design’s capacity for problem-solving. Color Add is a revolutionary concept because it  removes a handicap and provides new ways for color-blind individuals to see and interact with the world around them.

Be sure to check out Color Add’s website for some great facts and examples for the project.

The emergence of the eBook has been quite elusive over the past few years. It’s one of those things that seems like it’s becoming quite popular, but neither you nor your friends actually know how popular. The only instance that I’ve ever seen someone reading one has been on a plane trip back from Hawaii. Nonetheless, companies continue to create, produce, and market these now seemingly mainstream items.

For those of you that don’t recall, the eBook was first made popular with Amazon’s Kindle that was first released just before the holiday season in 2007 for an ungodly price of $399. It offered a neat new type of screen that they referred to as E Ink. A revolutionary feature that I believe ultimately led to its success. The screen replicates the feeling of reading actual paper. E Ink allows eyes to read for extended periods of time without giving them a headache from reading on a “screen”. Another feature that was bundled with the Kindle was the connection to Amazon’s WhisperNet which allows readers to wirelessly download books they purchase over the Kindle Store in mere seconds (now operating in over 100 countries, was originally just in US).

Heavy marketing on the front page of their website, and releasing around Christmas-time garnered a decent amount of success and attention with this strange new device. Many companies decided to follow Amazon in its wake. Now there are six devices:

• Amazon – Kindle
• Barnes & Noble – nook
• Sony – Reader
• iRex – iLiad
• Jinke – Hanlin eReader
• Bookeen – Cybook
• Side note: These names are atrocious

As of Christmas 2009, I am sad to say that eBook sales on Amazon finally surpassed print sales. After having a discussion with Cory here, I can’t really see why anyone would want to give someone a Kindle, much less an eBook, for Christmas. It seems so impersonal, and who doesn’t love a fantastic hardcover book with a beautiful, well-designed book jacket. Maybe that’s because we’re of a different generation than those that are using the device. I found a fantastic poll on a blog called Kindle Culture showing the most popular age groups that are using the Kindle.

I originally thought that people older than my generation would hate the idea of “killing” books with a device that conglomerates their entire library into a thin little electronic box. It seemed as if I would see a ton of yuppies walking around armed with their eBook reader, Starbucks cup, poodle, and baby stroller. But apparently not… People over the age of 40 account for two thirds of Kindle owners.

So…why does this bother me. Am I just another person to decry the electronic age and say ‘print is dying!’ for the thousandth time? Maybe a little, but in the end; I am really left with just a simple, yet giant question. Why? Why do we need an electronic device to download books wherever we are in the world? Is a physical copy of a book that burdensome that you can’t take it with you on a trip or even around your house?

I won’t be confused by such devices if I understood why these were necessary or even that useful to the common reader. If you’re a happy eBook reader owner and would like to punch me in the face after reading my opinions, let me know why; I would love to hear you rant about the innumerable joys and oh-so-fuzzy feeling that your eBook reader has provided you.

The WordPress theme Basic Maths, created by Khoi Vinh and Allan Cole, features an underlying grid system.

Khoi Vinh and Allan Cole released Basic Maths, a  theme for the popular blogging platform WordPress, back in November. Vinh is the Design Director for the New York Times’ online edition; he also runs the popular blog Subtraction.com. Vinh gets a lot of attention because of Subtraction.com’s custom design: it is clean and accessible. So, to fill a hole in the market, he designed Basic Maths in the spirit of his blog. Basic Maths is on sale ($30 instead of $45) until December 31.

Writer’s Note: I haven’t purchased or installed Basic Maths, so I haven’t used it. It runs on WordPress, which is what we use here at The Journal. WordPress is a powerful publishing tool, has a beautiful back end and is very user friendly. Vinh and Cole have a demo of Basic Maths to show it off.

In A Nutshell

Basic Maths has a few major selling points: microformat friendliness, well-commented code, clean widget integration, generous tag and category display, customizable color scheming and grid-based layout. The fully functional demo displays every imaginable type of content (images, headers, lists, block quotes, etc). You can view the documentation, and there is a very extensive explanation on how to integrate images.

Cleanliness and usability are central to Basic Maths. That grid-based layout makes for a clean, functional design. In Vinh’s words:

This theme is all about displaying your content in the most stunning way possible, and the core of that is a flexible layout grid that informs the layout of every element.

He even walks readers through the design process, showing the evolution of the theme and explaining each design decision along the way.

A Closer Look

Basic Maths is reminiscent of a newspaper layout. It is very accessible – transparent, even. The underlying grid provides great unity to the theme. Placement within the grid is thought out, so readers can easily find where everything is.

A set of tabs across the top provide a place for Contact Information, an About page or anything else a blogger would need. The blog title really stands out due to its size and location, but it works in that it doesn’t distract from content.

There is clear access to tags and archives on the front page, and the archives page is clean and successful. This, combined with the search field, makes finding anything easy.

Great attention is given to title and text size. Everything is just right, nothing is overbearing. The line length for body copy is ideal, making reading a breeze instead of a chore.

All of the design decisions have really been made to generously support the content. The white space on the left works to the content’s advantage, and visuals are given a leading role.

The theme works well with multiple browsers. It looks virtually the same on Mozilla Firefox, Apple’s Safari, and Internet Explorer 7.

As with anything, Basic Maths has its downfalls. One of the main selling points, the grid toggling, doesn’t seem to work. There are issues with text baselines and horizontal rules not lining up perfectly. Hovering over links in the Top Tags area is a bit screwy. The set width is also rather narrow for increasingly higher resolution screens.

General Impressions

Basic Maths is everything a good blog template should be without all that additional design fluff so common in many themes. It may look empty, but this is good. Consider it a spacious sedan for words and images. Attention is directed to the content instead of oppressive, gimmickey backgrounds, headers, sidebars and widgets. The downfalls should certainly be considered, but these are minor issues considering Basic Math’s many merits.

The theme was designed with the reader and user in mind, and this shows. Vinh and Cole created something of great utility. Basic Maths is suitable for, basically, any blogging need.

Take a look at a couple of free WordPress themes, like the popular Mystique or LightWord, and compare them to Basic Maths: the difference is clear.

This is why I am surprised that nobody seems to be using Basic Maths.

Mystique, a free theme for WordPress.

LightWord, another free theme offered by WordPress.

Theme in Action

Basic Maths received a lot of attention and praise on Subtraction.com, a couple design blogs, and Twitter. However, I had to search hard to find people using Basic Maths. Here are the only four I found:

1. Rob’s notebook, the personal blog of journalism student Rob Wells,
2. Nonformality, a European education and learning blog,
3. Last Straw, the political and personal blog of Christiaan Briggs, and
4. Bert’s Blog, Bert Vanderveen’s blog (in Dutch).

Nonformality as of Tuesday, December 29th. Note the use of align-right images.

These are really poor examples of the Basic Maths framework. Rob’s notebook and Nonformality include pictures right below the blog title. This looks bad because it is out of place and distracts from the main content. The image use on Nonformality isn’t effective, which is dissappointing after so much effort was made in explaining how to use images. Date stamps and text are all over the place on Last Straw, ruining the precision and cleanliness of Basic Maths. Berg’s Blog actually isn’t that bad, but the light green isn’t the best color choice.

Most of these blogs deactivated the calendar and archiving widgets that make the theme initially intuitive. Basic Maths is set up to handle images with care and grace; none of these examples take advantage of this. (Would you read a newspaper or magazine without pictures? Probably not.)

Speculations On Bloggers

This comes back to the public’s appreciation of design. A blogger may look at Basic Maths and ask themselves: why spend extra when I can get a free theme that looks way cooler? Blame it on advertising, DIY home publishing or what-will-you: people want flashy over functional, multi-colored over modest, and free over forty-five.

Cost & Considerations

It is expected that designers will want to come up with something especially suited for their uses.

For everyone else that doesn’t design or code, Basic Maths is a fantastic option to consider. The cost of Basic Maths is negligible, especially considering the amount of effort and design that went into it. The cost of presenting content in a legible manner is definitely worth it for blog readers. Blog design also has a major role in attracting and retaining readers.

So, bloggers: don’t just look at it, consider it. Look at the documentation and demo; make your blog shine.

And, designers: don’t just admire it, suggest it.

This entry is an opinion piece and may not represent the beliefs of other Inksie staff members. If you have any insight, please leave a comment. Also, if you or somebody you know uses the WordPress theme Basic Maths, please leave us a link.

After this flood of top 10 of 2009 lists over the past week, it was really refreshing to see Wolff Olins post a list of ten things they believe are to come in the year of 2010. Its always interesting to read future predictions others have for technology. Some are realistic, and some seem like they will take a bit of time to be comfortably implemented. Designers and artists alike need to be thinking with this mindset, of the future in relation to inventions of the past.

Here are the ideas:

• Augmented reality - The world expanded
• Better place – Making green cars work
• Crossbreed - A wheel that folds
• Dime – Magic sand
• Enhanced editions - Reinventing reading
• Gapminder - Truth made visual
• Nokia money - Pay by mobile
• PICO Projectors - Small screen to big
• RockCorps - Volunteering made cool
• Worldwide telescope - Experience the universe

I really like the title they gave to the first one. It makes the idea sound ultra-futuristic, like “augmented reality”, what is that? It just makes me think of some new kind of drug, I can already picture people saying ‘Hey man, let’s go get totally augmented’.

A lot of these have already been created, like the folding wheel, but it hasn’t been effectively combined with a product as of yet. Wolff Olins mentions on the page that it’s been placed on wheelchairs. who is in a wheelchair that can get up to fold it’s wheels, and why would they need to?

The second idea is fantastic, making green cars work. It goes back to the very origins that hybrid cars and asks why they were made in the first place (which no one seems interested in anymore for some reason). Yeah, you own a Prius, but what does that mean to me? Do you know how your car has directly effected the environment? What is to become of your car when it’s worn out? There are so many questions that need to be asked and solutions to be found to truly attain sustainable transportation. Hybrid cars are barely even scratching the surface of our earth’s environmental issues.

I really liked the summing up of the post with the three points they outlined, I heartily agree with these statements.

• Richer online experiences, normally small and flat, are becoming big and multi-dimensional
• East to West, people are bringing inventions or information from the developing world to the West
• Do the impossible, and all over the world, inventors are once again setting out to do the impossible

I want to reiterate how important, aware, and open we need to be of these developing trends. It’s difficult to embrace these positive changes that are open to us if we aren’t aware of their coming. Designers won’t know to think outside of the “small and flat” if they don’t know we’re headed for “big and multi-dimensional”.

I really hope 2010 is a 2nd Industrial Revolution (more like the 3rd, and this time without the child labor) for the whole world. Because, hey, I miss the early 1800’s. So tell us, what’s your favorite out of these ten new and exciting things to come of 2010, or which do you feel is unrealistic? We want to hear your thoughts.