The Interactions Are What Matter

Alexis and her iPadThere’s something about the pulpit that the Internet gives us that makes us want to offer our opinions about everything. The latest source of drama is the release of iOS7, Apple’s extremely different-looking version of it’s popular mobile operating system. My Twitter feed is pretty evenly split, with (what I estimate is) about 60% of people disliking the change overall. I was unsure what I thought about it until this morning. Read More…

Redesigning the Save Icon and Rethinking Interaction Metaphors

Different save icons

Over at Branch.com, there’s a great discussion going on about Redesigning the Save Icon. A few interaction design experts are all weighing in on the topic. Some ideas are awesome, and some aren’t much better than what we have now. The reason for the discussion? My daughter is now two years old. She’ll never see a floppy disk in real life. Kids that were born in the late 90’s have probably never seen one either (or at least used one). Apple released an iMac in 1998 without a floppy disk. By 2007, only 2% of computers sold still contained a floppy drive.

Sure, even kids who’ve never seen a floppy disk know what the save icon is for. They understand that when you click it (or touch it… from now one, I’m just saying press it), your computer will save your work. But as we get further from the days when floppy disks were actually a thing, the association becomes weaker. That’s the issue with skeuomorphic icons, no matter what their purpose. Eventually those items are no longer relevant. That means boxes, folders, vices, zippers or file cabinets are not really viable alternatives to the floppy disk.

The other issue arises when it’s no longer your computer saving your work, or the entire save paradigm changes as we move more toward local AND cloud storage of all documents. Today, the idea of saving a static copy of a document is almost foreign. New versions of Word, Google Apps, and other productivity packages do a great job of offering a versioning environment much like git or other VCS. So the question is, does “save” still work when describing what that icon does? In my opinion, no, it doesn’t. Read More…

My ‘An Evening of Web Development’ Sessions

Given at MJG International in Savage, MN
A shot of me giving my Rocking Responsive Web Development talk at an Evening of Web Development
Thank you to everyone who came out to see Marc and I last Thursday night. I met a lot of really great people and learned so much. I’ve included my slide decks from my presentations below. Please, give me your honest feedback in the comments. I’m already scheduled to give these talks again multiple times, so I need your advice to improve them.

Embrace Your Inner Designer (slides) – Whether you want to admit it or not, the decisions that you make as a developer greatly influence the final design of your application’s user interface. It doesn’t matter if you’re working with a designer, or you’re a one-man A-Team, there are some very easy and powerful things that you can do to ensure that the final product is intuitive, usable and (gasp!) beautiful. Come embrace that designer inside of you that wants to get out (and wear hipster glasses).

Rocking Responsive Web Development (slides) – Up until the last few years, it was completely acceptable to design/develop a new website for one size of monitor. But with the release of the iPhone, iPad and other mobile devices, we’ve witnessed the beginning of a mobile revolution. By the end of this year, over 50% of Americans will use their phone or tablet as their primary web browsing device. The question is, are the sites that you are creating ready? In this talk, I discuss reasons why responsive is the best way to develop new websites, as well as the best techniques I’ve discovered after a year of full time development of responsive websites.

And this is my responsive site demo I use in the presentation.

Read More…

Differences in jQuery and Media Queries Are Fixed With window.matchMedia()

Browsers rendering the page differently at the same resolution.
Recently, I discovered that the mobile menu solution that we use for our responsive designs (Matt Kersley’s Responsive Menu) is switching the menu to mobile earlier than anticipated in Firefox and IE10 (you can see the differences in the graphic above). After digging, I found it’s because the plugin is using the jQuery API’s .width() function to find $(window).width(). In Firefox and IE10, it follows the spec and includes the vertical scrollbar in that calculation. Webkit (Chrome and Safari) and IE8 don’t include the scrollbar width.The real problem is that no browser includes the scrollbar width when calculating width for use in media queries such as

@media only screen and (min-width:768px) {}

The repercussion of that is the JavaScript spec and the CSS spec calculate width differently. Yikes. Even worse, the different browsers calculate $(window).width() differently. Luckily there’s a solution for that very problem. Read More…

My Twin Cities Code Camp Sessions

A huge thank you goes out from me to everyone that attended my sessions this weekend at Twin Cities Code Camp 13. The questions and conversation was great… exactly what I expect from a code camp crowd. Here are my sessions. I use reveal.js to do my slides, so they are all HTML. Read More…

Connect An XBOX 360 to a Windows 8 PC to Stream Audio & Video

Windows 8 is fantastic. The user interface is beautiful, it’s ridiculously fast, and it’s very stable. But if you don’t know your way around, things can get frustrating. They changed Windows 8 just enough to confuse their users. After I installed the RTM last week, I went to set up streaming video between my XBOX 360 and my Windows 8 desktop.

Since Windows Media Center is no longer an option for many users (not included and a separate download for Pro users only), the best way to stream between an XBOX and Windows 8 is to allow streaming through the Video Player app on the XBOX 360. This app uses your media library to directly stream many types of video from your Videos Library on your Windows 8 PC. Read More…