One Size Fits All Approach Towards Multiple Platforms

15 May 2015 / By leslie

I’m a huge fan of building apps and websites matching the design pixel per pixel. This stems from the fact that I got into development being a designer first. When I first started designing websites we worried about all the different browsers and making sure the designed looked closely the same throughout all of them. Today we have to worry about multiple devices, varying screen sizes and orientation (portrait/landscape). Specific devices even have their own views such in the case of Microsoft with their snap, fill and full screen views. In the TV realm, in addition to resolution you need to be aware of overscan and video safe colors.

One Ring Design to Rule them All!

Clients often try to cut cost by having a one size fits all approach. As I am sure you know, this rarely works. Some platforms offer different specification in regards to the content safe area. Often times when I receive a psd file with specifications for a different device or one in general, the design ends up having to be adjusted to fit the platform specifications.  This usually means shifting elements in a view which hinder the intended user experience cues and make poor use of space with elements either being to small or to large. I’m therefore unable to match the design pixel per pixel.  The initial idea of continuity is lost and importantly the user experience. This inevitably gives your customers a bad experience.

I realize designing multiple sizes is daunting but Photoshop at least offers some assistance with smart objects (linked objects). There are even templates that offer this kind of set up already for you as seen in this free responsive psd template by Blazrobar.com.

As a designer/developer, I don’t require a high resolution mockup. I can take direction from a wireframe even a sketch. Regardless, this should be something a designer should put thought into, give direction in and never give up the fight on teaching clients its importance and value.