Mobile vs. Desktop
I quite often find myself on the controversial side of a modern UX axiom – the Mobile First manifesto, which basically dictates that design of responsive experiences need to start with mobile layouts.
While I have long considered and fully understand the benefits of this approach from a development perspective, I don’t agree with the Mobile First tenet from a visual design and spatial segmentation perspective. I think it is over-simplifying the process of design at the cost of a universally functional responsive site experience, across all viewports and breakpoints.
Basically, I don’t think sacrificing a functional Desktop experience on behalf of a Mobile experience is necessary or even meaningful. Mobile designs can always benefit from the process of laying out Desktop pages. Desktop designs, however, rarely benefit from Mobile design considerations in my experience.
To do this, you need to see as much of what’s designed in one glance, not view it piecemeal, as if through a keyhole. Otherwise, you will lose context and cohesion.
The complex cannot always be a mere repetition of the simple, or an indefinite combination of many simple elements, but the simple is always by necessity a reduction of the complex.
Mobile can be considered within the whole of a Desktop layout.
The opposite is not true.
Mobile typically contracts to a single column, where spatial structure is linear and vertical.
Desktop introduces another dimension – the horizontal – which adds complexity, and this needs to be accounted for early on in the design process. Focusing only on Mobile, and thereby ignoring possible spatial complexities on Desktop, means you’re designing with one eye closed.
As long as your design will also be rendered on a Desktop device, you will at some point have to account for both the vertical and horizontal dimensions. Leaving that consideration for later, because you’re starting with Mobile, is likely to cause unforeseen difficulties. Just because a Mobile viewport dictates it doesn’t mean that all things can or should be separated vertically – some need to be displayed side by side, or benefit from such an arrangement.
A single Mobile column can be kept as one on Desktop (which is a very common lazy practice these days, leading to swaths of content that are unscannable, and excessive line lengths that are essentially illegible).
But a single Mobile column can also be split up into two, three, four etc on Desktop. Columns may not be identical – one may need a background, a box or a border for horizontal separation and contrast. One may need bullets, one may consist wholly or partially of an image, etc. Multiple columns require the creation of and adherence to a grid (with gutters, indents and ragged vs. justified columns), but this need and these complexities largely disappear on Mobile, where elements simply stack, and you want to avoid anything that restricts usage of the full column width.
This creates an illusory simplicity which is often deceiving.
Furthermore, text alignment matters on Desktop. Not as much on Mobile. You can center a column on Mobile and it will still not be perceived all that differently, since the column width is restricted.
A single centered column across the full Desktop width, however, will make for a very tiring reading experience, with line lengths that may vary greatly. This also holds true for very wide, single column left justified text, where the eye will need to travel much too far from the end of one line to the next.
The considerations of line length can and often do get lost when basing an entire layout on a Mobile single column visual structure.
3. As a designer, you always seek to reduce, never add.
All design is largely a process of reduction, to arrive at an ideal level of necessary detail. Never more than what is needed. In the process of reduction, it is easier to determine when you have gone too far, and you have lost cohesion. In the process of addition, however, you are always tempted to add more, even when that is unnecessary. It is generally easier to determine what is not enough as opposed to what is too much.
Designs generally need to avoid clutter. Composition and overall visual cohesion requires that shapes and visual structures are shaped and whittled down from a greater whole, not by adding multiple smaller components together and build outward.
You don’t build a house brick by brick – you need a blueprint first, to ensure that all spatial considerations and proportions are weighed before they’re locked in, and create possible dependencies. If you don’t resolve such dependencies on the planning stage, when you lay out the entirety of your design, you may find that you’ve painted yourself into a proverbial and sometimes quite literal corner, when you’re exposed to the actual, full size and proportions of that which you’re designing.
4. As a designer, you always consider visual patterns, repetitions and rhythm, in order to assess if elements are given sufficient contrast to guide the eye, or if the content is rendered too repetitious.
On Desktop, this is a necessity, to ensure you’re creating both cohesion/adherence and contrast across a larger space of which elements are a part.
On Mobile, you don’t see enough of the design in one glance to achieve that overarching balance: a section can be over- or under-emphasized compared to another, but because you don’t see them together, you can’t make that holistic assessment.
5. As a designer, you always want to spend the majority of your design time upfront, to ensure that you’re not hit with any unforeseen delays later on.
What needs the most time to design is what you should start with, so that finishing the design is less time consuming, and can be given an accurate commitment date with increasing precision.
Given the added horizontal dimension, Desktop layouts are almost unequivocally more complex than Mobile ones.
The more complex issues you leave for later, the harder it is going to be for you to accurately predict when you will be done, and you may even find at the very end that complexities have compounded to such a degree that you need to start over, to rework the layout.
Delaying all these critical design decisions, if you hold off on fleshing out the Desktop view until last, only kicks the can down the road.