<JeffYam />

Just took home a brand new iPad as part of Team Michaelangelo that won first place at the 2013 LinkedIn Hackathon sponsored by Citi. Big shout out to my talented hack team members, Jeff Chew, Alison Skodol, Jibi Scaria and Michelle Hardy. We were the ONLY team that stuck it through all 24 hours with no sleep and it showed. We presented with gusto doing it all starting with a shnazzy Prezi presentation, a live demo and ending it with a feel-good movie clip that put it all together (and even managed to jerk some tears out of a few in the audience). Great job everyone!

Nice job to our first place team and big thanks to @linkedin and @citibank for their involvement in today's hackathon! #profwomen

— Razorfish (@Razorfish) May 10, 2013

Here's a quick trailer of the hack that won it all!

 In my opinion, RWD is a means to an end. It's the solution (at the moment) for addressing a world that's becoming more agnostic to screen real-estate. Like many digital design capabilities, it was enabled by new technology, but becamepopular after it (media queries) became a standard in CSS. It's an industry shaker and we've seen many like this before (remember that thing called Flash?). It's not perfect and it can be horribly misused – like an animated gif as a page background. With great power comes great responsibility. So it is our responsibility to design and advise according to business goals and user needs. In other words, "different strokes for different folks". If that balance of client and user requirements all point to the need for a RWD implementation, it will become obvious. And to do it in terms of mobile-first or desktop-first (what have you), that should also be dictated by this same balance. Where are the users and where do we want them to be? Design is not dogma. It is like water. It can flow or it can crash. Be water my UX friends.

Designing a website or web app for iOS can be confusing. Case in point, I just spent an hour explaining to my designer buddy the difference between the various possible settings that could affect how he ultimately designs for the UI elements.

It is easy, for the non-accustomed, to assume that the lofty resolution that Apple touts on their device's display specs is the one to design for. If one goes to research this on Apple.com, they will see that the display is set to 1136-by-640-pixel resolution at 326 ppi. And it would be understandable for a designer to set up their PSD file with those specs in their canvas size and resolution settings.

However, it is necessary to understand how Safari works and displays HTML. To do so, we need to understand what the meta attribute for viewport does. Here are some facts and rules about viewport settings:

1. The definition of viewport is: the viewable area for page loaded.

2. By default, Safari will render a page with 980px max width for the viewport

3. If you add a viewport setting to a page to use "device-width" and an initial scale of "1.0" using the following meta tag and attributes, iOS Safari will load a page with max width 320px:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Most web apps today uses this setting as it is optimized for most mobile devices 1-2 generations behind

4. However, if you want to take advantage of the newer devices with the higher contrast ratios, you might want to bump up or double the size of the graphics you can display in the browser. To do so, you can tweak the initial scale in the viewport settings to 0.5:

<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1">

To demonstrate this very confusing issue, I've set up 3 different pages that have 3 jpgs embedded with sizes 320px, 640px and 980px widths. The first uses the default device-width viewport settings. The second doesn't use any viewport settings. And The third uses device-width and initial scale of 0.5 for its viewport settings.

Try loading each page in your iOS Safari browser to see the difference!