08/12/2010
Setting the Scene
Web Designer: Just send me your layered Photoshop file.
Print Designer: Ok, I'll just export it from InDesign, what DpI do you need it at?
Web Designer: Gulp.
Print Designer: I hate the web.
In our experience, print designers fall into two categories:
- Those who don't understand DPI doesn't matter on the web and every monitor has different PPI.
- Those that understand it and still don't like it.
Well, it's about to get worse... and this time web designers might be on board as well.
First there was the iPhone
For a while we all just accepted that when a user visits your site with their iPhone, the iPhone shrinks your screen and it looks "OK, but smaller."
Over the past year and a half, savvy marketing teams around the world have been creating iPhone specific versions of their website with, not only a custom look, but also custom content and navigation, because - let's face it - the information you need about a business or college while you're on the road is completely different then when you're goofing off in front of your computer at 4PM on a Friday.
In the past 3 months two things have changed the game:
- iPhone 4 came out at a different resolution
- Android started to gain some traction
Suddenly that mobile site that you made has a couple of problems.
iPhone 4
Your graphics that were perfectly sized for the iPhone last month are now looking a bit jaggy and dated. Internally, we've started to refer to this issue as "Pixels Per Pixel." Instead of trying to figure out how many Pixels per Inch we have to display, we look at how many Pixels per Pixel will show up on your screen.
It's also started an internal discussion of what we should *assume* the future holds. Will Apple have a screen half the size of the current iPhone any time soon? Will the iPad go to the same "super-high" resolution any time soon? What about the extra data that gets streamed by always having high resolution images?
Future proofing is for academics.
No programmer worth his salt will program for what they "think" the future might hold. Anyone who's been around the block a few times knows that any crystal ball that predicts future technology trends simply doesn't work, and anyone who thinks they know what Apple or Google will pull out of their hat in the next few years is hopelessly naive or is trolling for web traffic.
So what does the "present" hold for us?
- Don't worry about the iPad, it works just like your notebook computer.
- iPhone 4 is a success and your 320x480 graphics are starting to look dated
Therefore designers and developers should:
- Get yourself an iPhone 4 to see what I'm talking about if you haven't already (admit it, you were looking for an excuse anyway!)
- Design your graphics at 960x640
- Zoom in twice to look at them "actual size" on your screen while you're working in Photoshop
- Export your graphics at 960x640
- Be sure to test on the actual iPhone, not just a simulator
- See notes below about Android.
Android
Your functionality is mostly working on Android but, there are things that just don't work quite right. It's like developing a cutting edge website and then having to retrofit it for Internet Explorer 6. Take a deep breath. Get yourself a cheap Android phone to test things on.
Treat it like IE6, which means:
- Design and build your site the way you want
- Get it working on the iPhone (still the market leader)
- Test it on Android
- Decide what's shippable
- Turn off features until nothing breaks and/or looks too ugly
- Don't cry. People who have an Android phone won't notice the difference any more than IE6 users will realize that most of the internet has font smoothing.
Agree or disagree with anything here?
Have anything to add? Ideas on how to make this easier for print designers who design websites in InDesign? Drop me a line and let me know what you think:
jason@gravityswitch.com
P.S. The good news is that statistically no-one is trying to use their Blackberries to browse the web... or things could get really ugly.