Still Standing

Ben Marcin's free standing rowhouse photo

Cruise down any avenue in Baltimore and you will inevitably run across a scene like the one above. These solitary townhomes are sometimes all that remain of formerly vibrant neighborhoods. According to the Census Bureau, in 2010 one in nine housing units in Baltimore lay vacant. The city has aggressively razed abandoned properties to remove fire and health hazards, but the result is a street that looks empty and forgotten.

The row house is an unlikely Baltimore icon. It’s been depicted on everything from local beer labels to crafty painted window screens, and even abstracted into the background of indie band stage shows. Every house I lived in over the past 11 years was a row home. The icon is engrained into the psyche of nearly every Baltimorean, so it’s no wonder that Ben Marcin began photographing the city’s stand-alone buildings. What sets his photo series apart is his ability to speak about the idiosyncrasies of our city and its social and political climate. Every photograph in the series shares the same composition: one row house, front and center. In a recent interview with The Atlantic, Marcin discusses what compelled him to photograph these scenes. For me, the series is a reminder that you can use one very small thing to describe one very big problem.

What goes around comes around

What goes around comes around. 

The launch of Nike’s Better World website in 2011 marked a turning point in the way we see and use the web. The site used parallax scrolling, single page navigation, and eye-catching visuals in a fresh and exciting way. The single page layout engaged the viewer with rich, interactive storytelling and encouraged deeper exploration. Soon, a number of look-alike websites appeared on the scene, all trying to cash in on this cool, new online experience.

You may not be familiar with the term parallax, as it’s fairly new to the web, but it’s actually a technique that has been around since the early days of cartoon animation. Simply put, the illusion of depth is created by having one layer move faster or slower than another layer above it. Walt Disney’s Steamboat Willie is an early example. Later, side scrolling video games, like Nintendo’s Megaman, used the technique. 

Like all things web 2.0, there are some pitfalls to look out for, such as cross-browser compatibility issues and in some cases slower load times. Before using any technique, consider your audience and the purpose of your site. For example, single page navigation would be a nightmare on an entire college website, but an admissions page or fundraising microsite could use the technique amazingly well. This Bay State College online admission’s viewbook is one good example.

The parallax trend shows no sign of fading away. With the rise of tablets and other touch screens, it’s no wonder these techniques have been embraced by so many designers.

Here are a few more examples of some stunning and effective single page websites:

Access Granted

Tommy Edison was born blind, but he hasn’t let that interfere with his ability to socialize with the world online, or for that matter, review movies. The following video demonstrates how Tommy uses Instagram to shoot and post photos for his followers. 

It’s amazing to see how the web has become more accessible to visually impaired users. Special browsers and screen readers have enabled blind people to navigate the web via audio cues that explain what the webpage or app is displaying. But not all screen readers are user-friendly. Watching this video it’s painfully obvious that not all web developers have caught on.

Semantic coding is one way to ensure that content is accessible to everyone because it allows screen readers to correctly dictate the contents of a web page. In this type of coding, HTML mark up is used not for styling, but only for its intended purpose. For example, an <h1> header tag is only used for the most important page headline, and an <em> emphasis tag is only used to provide needed emphasis. In addition to semantic coding, alt properties that describe an image enable users to have a richer, more interactive experience. The American Foundation for the Blind also provides a set of guidelines for the designer/developer concerned with accessibility. 

A Child’s Perspective

The Mexican studio Y&R was tasked with developing a series of public service announcements about child abuse for the Spanish organization ANAR. The problem they faced: how do you reach out to abused children without alerting the adult abuser as well? Their solution seamlessly integrates two messages into one poster, each tailored to the intended viewer.

Lenticular printing is not a new technology; it’s been used in an array of products to simulate motion, depth, or animation. What is striking about this campaign piece is the conceptual use of the technology. From the adult’s perspective the child in the ad appears unharmed, juxtaposted with a simple message, “A veces el maltrato infantile solo es visible para el niño que lo sufre” (At times child abuse is only visible to the child receiving the abuse.) This double entendre reinforces one concept and serves as a subtle warning for aggressors. From the child’s point of view an altered photo and message are revealed; the same child is depicted showing signs of abuse with the message “Si alguien te hace daño llámanos y te ayudanermos” (If someone is hurting you call us and we’ll help). Watch the following video for an explanation of how this is done.

QR Codes: Dead or Alive?

Are QR codes dead?

Seen any QR codes lately on higher ed materials? They seemed all the rage for the last few years, but now technology folks are saying the trend is fading. Research shows, however, that people all around the world are actively creating and scanning QR codes.

According to an August 2012 report by Nellymoser Inc., a mobile marketing company in Arlington, Massachusetts, the number of mobile action codes printed in the top 100 U.S. magazines more than doubled from 2011 to 2012. The study was limited to national titles readily available on newsstands that did not require membership, such as AARP. Nellymoser analyzed every page in each issue of the top 100 magazines. The result was a 61% increase in code use from Q1 2012 to Q2 2012. Seventeen’s September 2012 issue contained more than 250 activated images. GQ’s September issue activated every advertising page. Check out the research details here

What if you’re not a magazine editor? How else are QR tags being used in higher ed? At Washington and Lee University, IT Services members donned t-shirts imprinted with QR codes that when scanned led to web pages with helpful information like passwords and how to contact the help desk. Hamilton College in New York used a giant QR tag with the single word “Hamilton” underneath for a recruitment poster. Lebanon Valley College put up banners with QR tags to update students about campus construction progress.

Yes, QR codes have been overused, misused, and abused, and unhappy user experience has tarnished the brand. The technology is a bit clunky since you need to download a code reader to your phone, and not all are reliable. In spite of these negatives, I think QR tags are set for a comeback. The research shows the trends—and smart phone use is on the rise, big time. Perhaps with a new name, better technology, and new branding, we’ll see an increase in use. After all, QR codes are still the best link we have from print to web.

How not to use QR Codes

1. On a website. You wouldn’t think I’d have to mention this, but I’ve actually seen QR tags on college web pages. I won’t embarrass the schools by listing them here.

2. On banners. Ok, so this was mentioned above as a cool idea, but tags are difficult to scan if they are blowing around in the wind. 

3. To lead to complex forms. Think about this one. If you’re on a smart phone, how difficult is it going to be to fill out that college application form with your thumbs? 

4. In places where there is poor reception. Like subway platform ads. In the basement of Old Main. No reception, no link.

5. To lead to useless information. You’ll lose audience trust if you take them to something they already know, or don’t care about knowing. Give them something they can only get from the scan. And, give them an explanation of where the code will take them.

6. To lead to a miniature version of your college homepage. If you’re going to use a tag, also use responsive design. Once again, those big thumbs can’t aim that small. 

7. Tags created in rich black. Designers like to use black made from CMYK. It makes black and white photography look great. But this confuses most tag readers. When printing codes, specify black plate only.



3D touch screens make typing easier

Anyone who owns a touch screen device knows the difficulty of re-learning to type on a flat surface. We’ve resigned ourselves to the belief that tapping tiny buttons you can’t feel is the price we pay for the cool new technology parked in our pockets. The first week with my new phone had me convinced that my fingers were abnormally wide and would never be able to type a text message in less than five minutes.

I am happy to say that help is on the way. Earlier this month at CES 2013 , the Consumer Electronic Association’s international trade show, the folks at Tactus Technology offered a solution to the touch screen problem: a tactile user interface. In the demonstration video above, keys magically pop from the touch screen when the keyboard is needed and again become flat when the keyboard is hidden. The company’s website also offers a number of examples in which this technology can be used such as remote controls, gaming devices, medical displays, automobile interfaces, and more. Expect to see this technology on the market by the end of the year or early 2014.