It’s not the 80’s. We don’t live in a world where “the fold” exists any longer. We’re not locked to a 4:3 viewing experience. Our movies are most commonly 16:9 ratio. Our TVs and phones have followed this pattern. In short, we need to pay attention to how our sites look on various screen dimensions. We won’t know what the viewer is using.
What does that mean though?
We need to be flexible in our designs. Most of the time when we design a website or application we do so with a primary orientation. For all devices other than tablets and phones, this is in landscape mode. But for phones and tablets we primarily design for the portrait mode.
There are times when a user may have their device stuck in a position that they are unable to change. When this situation occurs, if our design is locked into the Portrait orientation, we make it very difficult for some users. It would be much more usable in landscape for this moment or by the user. Therefore we should make it work in both ways.
The primary example of this is someone using a mounted iPad on their wheelchair. They could have it in portrait mode, yet not have the strength to turn the device.
Are there any exceptions?
But of course! There are certain tasks that the orientation can’t change. Usually you hear about digitally depositing checks. The thinking here is using the phone in landscape mode is required to get the right photo. This is a crap example. I can just as easily take that photo in landscape as long as I can square it in the view. A better example might be needing you to turn your phone landscape to read and interact with a chart. Another would be watching a video. If shot for mobile device apps like TikTok, it doesn’t work as well in portrait.
Mobile Apps
Mobile platforms have the ability to do dynamic layouts now. These layouts allow the user to change their display orientation without affecting their use of the product. However, using a dynamic layout requires you start coding with that in mind. Trying to fix the layout after the fact is much more difficult.
Have some thoughts you’d like to discuss? Maybe other exception examples? Reach out to me on BlueSky or LinkedIn.
I have a bad habit of saying, “this is easy” or simple. It’ll only take a moment. Like I said, a bad habit that I try hard to break. Why? Just because it is easy to me doesn’t mean it is to you. I was about to start this off with, “This is pretty much straight forward and don’t reference anything requiring senses.”
And I realize, that this isn’t that simple. I’ve been doing this for over two decades as of this writing. Today may be your first day. English may not be your first language. Maybe you can’t relate to the idea of senses.
What do we mean by Sensory Characteristics?
All animals on the planet have the ability to experience their environment. They do this with their senses. Senses are built in detectors to assess our environment. In the accessibility industry, we create solutions. These solutions are for people who may have malfunctioning senses.
When we are little, we are taught about our 5 major senses: Sight, Taste, Touch, Hearing, and Scent. But we also have senses that can detect electrical stimuli, heat, cold, our awareness in space. If you tell someone to find the green button, you’ve violated the success criteria.
So how do we avoid it?
First, we make sure that everything has a proper accessible name. Next, we make sure it unique to the page we are on. It’s super easy to say, “click the submit button” in your instructions if there is only one submit button.
Of course we want to keep the page as simple as possible, so we probably won’t use instructions like that. We wouldn’t say, “click the triangle.” Instead, we should let the construction of the page tell us what to do next.
This looks like first coding the HTML so that if nothing else loads everything is presented and understandable. You can’t position items in a visual order or paint them pretty colors. You also can’t make them do magic. Therefore, we need to rely on the content itself. If your content can’t stand on it’s own, rewrite it.
With the content corrected, we can build out the site. Paint it, position it, then test it. Does it still make senses in the reading order? Focus order?
Lastly, teach the team. Make it an internal standard. Put in monitoring just in case someone makes a mistake.
The order of consumption of media affects its meaning.
As an 80s kid, I learned that the placement of a comma can change a sentence’s meaning. Of course we learned it through dirty jokes:
i helped my uncle jack off a horse
I helped my uncle Jack, off a horse.
I helped my uncle, jack off a horse.
I helped my uncle, Jack, off a horse.
Even the order makes a big difference:
I helped my uncle off a horse, Jack.
I helped Jack, my uncle, off a horse.
When we write and layout our document, we need to consider the rendered HTML and CSS. We also need to consider the HTML on its own. Some of your users will use tools to absorb the content in different manners.
We need to ensure a meaningful sequences when at the word, sentence, paragraph, article, and component level. We want to develop a meaningful order at the document level also. Usually we do this through landmarks or the use of headings to designate areas of the content. Depending on the relationships of the content, areas could dictate the understanding of the document. So does the header, footer, or main have to follow a certain order? Our instinct is to go header, main, footer. What if our HTML was Main, header, footer and we use CSS to visually move the navigation?
But should we?
Stepping in from the document level, there are things to consider within each component – visual presentation and content presentation. Look at these two cards:
Without looking (I saw you look at the HTML tab), you might guess how this is coded. You’d likely think it is Card Title, CTA, image, paragraph, list. And you’d be pretty close. Next you’re thinking, “Ah, image first, that’s how cards are done.”
Both cards have this structure:
<div class="card" id="card1">
<h2>Card Title</h2>
<img src="https://placecats.com/millie_neo/300/200" alt="Millie & Neo resting on the cat tree."/>
<p>Kool kats & kittens at the library!</p>
<ul>
<li>Where: Main Street Library</li>
<li>When: 1pm to 4pm</li>
<li>Day: Saturday 1/23</li>
</ul>
<button type="button">RSVP</button>
</div>
We can move the content around using CSS. Are the details are more important than the image or the tagline? We try Title, Details, CTA, paragraph, and image. When we are at this stage of developing the code, it’s important to just focus on how the page reads. The two versions of the HTML do not effectively change the meaning of any of the content. Nor do they interfere with the visual display.
How do we fix the meaningful sequence?
We start by looking at individual pieces of content. Let’s start with a button. A button will fire an action, so I need to give it an accessible name to reflect that. I can add a pre-icon, and post-icon, and I know I’ll have at least two states. If I have visible text, then the icons don’t need alt text.
Step two, after styling the most basic of elements, we pair them together. We’re going to use our button to make a search component. This means I need a label, an input, and a way to fire the search. We’re keeping this simple to begin. We’ll use a button and a post action so the page refreshes with results. Most developers will code this label, input, button. But they don’t have to be in that order.
An easily recognizable or learnable icon can be used as a label as above. We of course provide the alt text. We can use the alt text of the icon in the button as the label for the form. We can change the order visually and it has no effect on how a non-visual user would understand it.
Break up content into the smallest functional pieces. Make sure each piece is understood fully within itself in a meaningful sequence. Then start layering those into the page document in the order to use them. A sales page would have account information first. Then it would include the client’s dashboard. Next, it provides access to individual child accounts. Finally, it lists leads and sales. There is a sidebar to do some research or note taking. We probably have some account screen for the sales person as well. Within each of those sections they’ll have an order that makes sense.
But at a page level the “main” content will be the what the user wants the most. So we put it first. Don’t run away yet. Initially, the order of the main section doesn’t matter. As this user gets used to it, they may want to show and hide different widgets. They might even want to move them. Let’s put a plan in place for that. We don’t want to forget our sidebar, main nav, or account information. These need to be placed in based on order of importance to the user at the code level. When you turn to CSS to position and decorate, is when we get the visual design.
Its always best to do user research on new products. An application like we describe above will benefit from interviewing the potential users. Then within the design, marketing, executive, and client teams conduct some card sorting exercises. Keep repeating this as you develop and design the application. You may find you need to change your design or users didn’t think like you thought they would.
Have more questions? Let’s discuss it over on LinkedIn or BlueSky!
