Communicate with certainty
and your Voice will be heard.

Category Archives: web design


The Thinking Mechanism is a series of weekly posts, published on Fridays, covering the ideas The Mechanism is thinking and talking about with our peers and clients.

In the U.S. this weekend is Memorial Day weekend, the official start of summer. Many people travel to visit family and friends or just to take their first trip to the beach. In the spirit of the holiday weekend we are going to do something different. Instead of sharing the items we’ve been talking about we are going to introduce you to two services we love and share items that you could enjoy while commuting to your destination or while taking some deserved time off.

Once you discover Instapaper you wonder how did you manage without it. Created by Marco Arment, co-founder of Tumblr and coffee aficionado, Instapaper is a simple tool to save web pages to read later. The text is stripped out of any web page and becomes available, via apps on most mobile devices, for you to read when you have the time. It is also available online through the Instapaper website. Instapaper is time-shifting for text, TiVo for words.

Longreads is the perfect compliment to Instapaper. Founded by Mark Armstrong, Longreads posts links to new stories every day — they include long-form journalism, magazine stories from your favorite publications (The New Yorker, Esquire, The Atlantic), short stories, interview transcripts, and even historical documents. The site has a brilliant search feature that allows you to filter articles based on length, so you can find the perfect article to read in the amount of time you have available.

In the age of Twitter and Facebook status updates, these two services encourage long-form reading. Here are some of the articles we’ll be reading this weekend, as discovered through Longreads:

Error Message: Google Research Director Peter Norvig on Being Wrong
(Kathryn Schulz, Slate, Aug. 3, 2010)
Time to read: 16 minutes (4,050 words)
Norvig explains what happens when a company (in this case Google) takes an engineering-centric approach to its products and business. First, it means that errors are actually a good thing.

Apple & Design: The Man Who Makes Your iPhone
(Frederik Balfour and Tim Culpan, Businessweek, Sept. 9, 2010)
Time to read: 21 minutes (5,204 words)
Foxconn founder Terry Gou might be regarded as Henry Ford reincarnated if only a dozen of his workers hadn’t killed themselves. An exclusive look inside a postmodern industrial empire.

Later: What Does Procrastination Tell Us About Ourselves?
(James Surowiecki, The New Yorker, Oct. 11, 2010)
Time to read: 14 minutes (3,574 words)
Take comfort in this exploration of the “basic human impulse” of putting work off.

Master of Play: Shigeru Miyamoto, Nintendo’s Man Behind Mario
(Nick Paumgarten, The New Yorker, Dec. 13, 2010)
Time to read: 37 minutes (9366 words)
Jamin Brophy-Warren, who publishes a video-game arts and culture magazine called Kill Screen, told me that there is something in the amplitude and dynamic of Mario’s jumps—just enough supernatural lift yet also just enough gravitational resistance—that makes the act of performing that jump, over and over, deeply satisfying. He also cited the archetypal quality of Mario’s task, that vague feeling of longing and disappointment which undergirds his desperate and recurring quest for the girl. “It’s a story of desire,” Brophy-Warren said.

Twitter Was Act One
(David Kirkpatrick, Vanity Fair, March 3, 2011)
Time to read: 18 minutes (4,543 words)
“The Facebook Effect” author David Kirkpatrick on another Silicon Valley superstar—Twitter and Square founder Jack Dorsey. In submitting to his first in-depth profile, we learn about the events the led to him stepping down as CEO [since then he has returned to Twitter as CEO], his long-term goal (to become mayor of New York City), and his earliest career experiences.

Cranking
(Merlin Mann, 43 Folders, April 22, 2011)
Time to read: 12 minutes (3,068 words)
A disappearing dad with a looming book deadline examines his priorities, and promises changes.

In the future, you will carry your digital footprint with you wherever you go — and whatever type of device that you have will pick that up if you choose to make it available to somebody

I was interviewed about the future of Web design back in October, 2010 at the PRSA International Conference in Washington D.C.. Below is the video from the interview, which can be visually and aurally consumed at the source right here.

Thanks to the kind folks at PRSA for posting this interview on their Website and interviewer Amy Jacques for digitally capturing my ranting and raving for all of eternity.

This month, I presented "Typography for the Web" at the NY Web Standards Meetup. Right now, typography on the web has been receiving lots of attention from both designers and developers alike—designers wanting to know what their constraints are and developers wanting to know the best practices for implementing advanced typography. I covered a wide range of topics so that people can continue to research and learn about this rapidly-changing field.

Slides, photos, video and audio from "Typography for the Web"

Listen to the event:

Watch "Typography for the Web" on Ustream.tv and view photos from it on Flickr!

Here is a list of resources that follow along with the topics covered in the presentation:

Building a foundation

Formatting headings

Noticing the details

And more!

What are some of your favorite typography resources? How do you feel about one type of replacement technique over another? Please continue the conversation in the comments below

Join the New York Web Standards Meetup at Meetup.com, follow us on Twitter and join our LinkedIn group!

Whew! It’s been quite a time at South By Southwest Interactive–lots of panels, parties, and good eating! Since there are a multitude of people who have taken amazing notes during the panels and core conversations, I’ll spare you those details, but just as important as what’s said during the panels is what you can take away from it! Here is a list of the “take-aways:” the twitter usernames, the Web sites and the books. Here are some ideas and resources you can use right away!

Overarching Themes:

  • Collaboration within companies, collaboration between client & web team, collaboration between web teams
  • Openness with coworkers and with clients
  • Don’t do work for the sake of doing work; create deliverables that have applicable value
  • Some clients (and even workers) respond better to many lo-fidelity steps (sketching, collage, mood boards) to buy into the design process before seeing a polished design
  • Agile development! Working in quick phases to roll out a product. Everyone’s talking about it, but it may not be good for every team or every client

Web Typography: Quit Bitchin’ and Get Your Glyph On

See the slides at SXSW Typography

Links:


Being a UX Team of One

  • Leah Buley – Adaptive Path – @ugleah

Highlights:

  • Ditch the concept of the “singular genius designer.” The designer is the person who takes everyone’s ideas and creates a cohesive solution to the problem
  • Always sketch out at least six layout ideas!
  • Get as many people (developers, clients, shareholders) involved as early as possible

Links:

Books:


How to Create a Great Company Culture

Highlights:

  • A good fit is achieved by every team member having the same core values
  • Always remain passionate about what you’re doing. Even if you find yourself in a situation you don’t like, find a small thing to focus on and remain passionate

Books:


How MacGyver Would Do Design Research

  • M Jackson Wilkinson – Viget Labs – @whafro

Highlights:

  • Do as much dual-work as possible (creating wireframes in CSS/HTML, reusing documentation, etc)
  • Know what not to research; pay attention to what’s already been done
  • Do user testing with fewer people, have them each do more tasks

Links:


Wireframes for the Wicked

  • Nick Finck – Blue Flavor – @nickf
  • Donna Spencer – Maadmob – @maadonna
  • Michael Angeles – Traction Software – @jibbajabba

Highlights:

  • Choose your wireframe type based on the audience; you may do different wireframes for the client vs the developer
  • Feel free to mix hi- and lo-fidelity methods to achieve the appropriate type of wireframe
  • Sketching-style wireframes may make clients feel more comfortable with sharing ideas and adding input
  • Michael Angeles has the coolest notebooks! Sketching the User Experience

Links:


Designers and Developers: Why Can’t We All Just Get Along?

  • Chris Lea – Media Temple/Virb – @chrislea
  • Liz Danzico – The School of Visual Arts – @bobulate
  • Ryan Sims – Virb – @simmy
  • Joe Stump – Digg – @joestump
  • Daniel Burka – Digg/Pownce – @dburka
  • Andy Beaumont – Flutter + Wow – @drcongo
  • Rob Corradi – NeonState – @ribrob

Highlights:

  • Speak in terms of problem/solution instead of specific features–the developer may have a better way to solve the problem
  • Include a developer in early meetings to avoid promises of unrealistic features and to help brainstorming
  • Designers should make the effort to learn as much as they can

Links:


Collaboration or Collision: Achieving Design Studio Bliss

Highlights:

  • Bring your clients into the brainstorming session
  • Show your clients a variety of mood board concepts; This is the stage for back-and-forth conversations and for feedback. Take this knowledge and deliver one cohesive design mock-up. Delivering several designs diminishes your expertise in finding the right solution.
  • Educate your clients on the value of your product; don’t work to meet unreasonable deadlines
  • Don’t let a single designer get too involved in the “ownership” of his/her design. Take it away and let someone else work on it.
  • Don’t design behind closed doors, open up the conversation!

Books:

For we non-designers out there, ajaxload.info offers a very cool service: automated creation of animated loading .gifs in three easy steps. Simply choose your indicator type (35 options!), set the background and foreground color, and generate it. View the preview and then download your .gif, ready to use.

Loading…

Very simple and useful. Thanks for designing this, Kath

Jeffrey Barke is senior developer and information architect at theMechanism, a maxi-media firm in New York City and London.

In March 2007, I wrote about a Safari CSS hack called the "Pound Safari Post Semicolon" hack (coined by Tony at Simian Design). As of Safari 3.0, this hack no longer works. However, there is a way to target Safari 3.0:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Chrome rules here */
}

As always, the disclaimer: nobody condones the use of hacks, but we all (well, most of us) have to make use of them at least once in a while. The above code targets both Safari 3.0 and Google's Chrome. Hopefully, it will be a future-proof hack, since the -webkit part of the selector will probably not be adopted by other browsers.

Example: The following code set the background color of the <body> element red in all browsers and then resets it to blue in Safari 3.0 and Chrome.

1
2
3
4
body { background-color: red; }<br />
@media screen and (-webkit-min-device-pixel-ratio:0) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;body { background-color: blue; }<br />
}

[demo]

Tested on Mac OS X version 10.5.1 with Safari version 3.0.4 (5523.10.6) and Mozilla Firefox version 2.0.0.11. Tested on Windows XP Professional Version 2002 SP 2 with Mozilla Firefox version 2.0.0.11, Opera 9.10, and Microsoft Internet Explorer 6. Hack from CSS, JavaScript and XHTML Explained.

Update 2008-11-26: Since this hack targets Webkit-based browsers, Chrome is also affected. At the original time of writing, it also affected Opera (9.10); it hasn't since 9.50. The post copy has been updated to reflect these developments.

The New York Web Standards Meetup Group will be meeting at theMechanism on 26 July 2007 at 6:30 pm to discuss Ajax and forms.

Did you miss Ajax and Forms a few months ago? Here is an opportunity to catch up and see what we’ve been cooking up. Jeffrey Barke will review cool features, scripts and general visual goodness at theMechanism's office.

After the talk, we will open the floor to a monthly design critique. We encourage attendees to bring current or past projects they feel comfortable showing to get collective input from the group, as well as discuss topics and desired presenters for future Web Standards meetings.

There is no fee—and beverages as usual—will be provided. RSVP now!

26 July 2007 . 6:30 pm
theMechanism|eEmerge
440 9th Avenue 8th Floor
New York, NY 10001 [map]

Please contact us if you’d like to present at the August or September meetup.