Referring to the position of an element in modern (responsive) design

Question

This is such a common and basic issue that there must be an answer somewhere already, but I can't see it, so I'm wondering if I'm missing something. Should we avoid referring to the position of an element when we are not 100% sure that the layout is completely fixed (which is never the case nowadays)? What should we do instead?

Example: "Please fill out the form on the left", or "You can add a new block from the panel on the left". But how do you know if it's on the left? It might be on the left on a desktop device, but it might be above or below on mobile devices, for example, as it commonly happens because of responsive layouts.

I can think of at least two possible approaches:

• Don't mention the position, and let the user figure out where the element is. This might be obvious in some cases, while in others the users might have to look around a bit.
• Provide different messages in different layouts, so on desktop you would have a paragraph saying "on the left", and on mobile that paragraph would be replaced (dynamically or with media queries) with one saying "above (or below)". This sounds like a pain to implement and maintain though, a lot of work for nothing.

However I'm not sure if there's a standard or a best practice to solve this basic issue.

Answer 1

If you are including these messages in the application itself, then no, don't reference the position of elements unless you know for sure they are fixed (e.g. they use static/absolute positioning). Responsive design isn't the only thing that can effect positions. There could be many other compatibility, accessibility or even localisation conflicts that cause your design to move about. Although it must be noted that these are not likely to be common.

Generally, you should refer to each element you talk about with a clear and well understood name. Ideally, the sections you refer to would have a visible label so you can use that label for referencing. For example, "Check out the 'hot network questions' feed for a list of trending topics across the platform".

Where labels are not available you should stick with well understood terms/words. Unfortunately this very much depends on your specific situation/content, so it is difficult to give an example of these. But as a very basic example, I could refer to the "header bar" of this site and you would likely know what I mean even though it doesn't have an explicit label. If if you have never heard the term "header bar" before, you could take an educated guess just by the choice of words.

---

The only instance when using positioning such as "left" would be acceptable is when you are describing something you know for sure won't change. For example, with user documentation where you might include a screen shot:

"You can ask a new question but clicking button X. This can be seen in the top-right application as per screenshot 1".

The reason this works is because you are certain of the layout of what you are describing.

---

In Short: Don't reference the position of anything unless you can be certain that it won't change.

Answer 2

That's why Graphic Design exist, among other utilities to avoid literal information in text and act visually on the receiver.

In this example, the visual contrast give enough information in any screen size to use just the "fill the form" message, either by placing the form to the left, right, center, top or bottom.