Lead Product Designer
Go to LinkedIn
Layouts for different form factors
The two dominant mobile operating systems are Google's Android and Apple's iOS.
Starting with Android, there is a bewildering number of form factors and device capabilities. There's also the well-known problem with lagging updates of the operating system.
iOS doesn't have quite the same issues. Still, as of writing this in February 2018, there are 4 iPad and 3 iPhone sizes you can buy in the Apple store. To that you need to add, at a bare minimum, all previous iPad and iPhone generations that are capable of running iOS 11.
It's tempting to only develop for one major iOS version, but I'd consult the statistics for the relevant audience before making that call. People who work in high-tech and/or live in Silicon Valley are likely to have a pretty skewed view of technology adoption in the rest of the US, not to mention the rest of the world.
All this means that native app layouts need to be responsive, just like web sites. You need to know what your audience is using, so you can test with that. Being a native app designer also means that you have to keep on top of new hardware releases and operating system versions and their adoption rates.
The next breakpoint occus at 460px. At this size:
320px width is a common smallest breakpoint for responsive designs because early iPhones were that width.
The Investment Scorecard shown here has the following adaptations at this width:
There are a number of compromises here that I'm not entirely happy with. The one that has the most impact is probably the truncation of the fund name. There are a lot of funds that have identical names, save for the last 2-3 letters. As Kristina Halvorson likes to say, "Truncation is not a content stra..."
If there is no existing policy to lean on, I start with research. This time it's quantitative:
Given the data, the product manager, engineering lead and I come to a decision about the number and placement of breakpoints. I would argue that in most cases fewer breakpoints are better. More important than the number of breakpoints, is that the user is in charge of how they see your content. That means not disabling pinch and zoom, accessibility selections, orientation locks etc.
Seeing that I just brought up responsive design, let's tackle non-desktop form factors next.
Responsive designs are relatively simple. In many cases, Product, UX and Engineering make a decision about breakpoints that apply to all projects. This decision is revisited a couple of times per year. There may also be ad-hoc additions if a new form factor surges onto the market, e.g. the recent iPhone X with its "interesting" notch at the top.
Adapting content to very large screens has its own process. In a previous job I was responsible for creating and adapting content for a large monitor in the company break room.
I tried collecting feedback through formal means but got very poor response rates. So I went informal instead and collected feedback by paying attention to which content:
Based on this, I confirmed what many authors have stressed when it comes to large monitors in casual contexts:
Add contextual information
To that I would add that contextual information is surprisingly important. If I forgot to put the source or date on a feature, I would often be approached by people asking about them. For example if I recorded a video clip of a working prototype, people wanted to know if the functionality shown was available on the live site.
Here are a few examples of content that I created for the cafeteria monitor. The monitor size was 1920 by 1080 px.
MADE IN PIXEL TOGETHER