I love the rapid delivery you can get from utilizing the concept of responsive design. Being able to quickly deliver a consistent user experience across many different devices, including mobile, is invaluable. However, when I updated an existing IBM WebSphere Portal theme to use responsive design, I unexpectedly found user experience issues hiding in plain sight. All of a sudden, some of the existing content on the site didn’t make sense. In this post I want to share my lesson in the field so that you can be aware of one of the challenges of adapting a site for mobile.
How did the content become unclear? I didn’t change the content itself. I simply resized and repositioned some of the site’s elements, optimizing them to be viewed on mobile devices and displayed in browsers with lower resolutions.
The user might be pleased that the site now fits well on their mobile screen, but what happens when the user starts reading the content in its new and improved format? The text between the two paragraphs on the home page, “please use the menu on the right,” seems like a request that’s straightforward enough, but what about when you read this in the new format on a mobile device?
“Where’s the menu?” asked our tester.
By implementing a responsive and clean wrapping design, I had opted to stack the <div> for the content element and the <div> for the menu element on top of each other in the HTML document. No longer could we say “use the menu on the right” (because it’s not there for mobile users). But we also couldn’t replace the text with “use the menu below,” as the same content is always used regardless of width or device.
The solution was to reference the menu by its heading and add an anchored link, “Please use the Partner Sites menu.” This means that at desktop width a user instantly recognizes the menu, and clicking the link for any user will take them to the menu if it is currently off-screen.
It didn’t stop there. There were elements in the original design that relied on the mouse cursor hovering over elements to convey information. I had identified these elements and re-implemented them accordingly, since there is no concept of hovering on a touch-based mobile device (at least not in current wide use). Unfortunately, what we had overlooked is the multiple references in the site’s content asking users to “hover over the links to learn more.”
The time spent combing the site for these language-based changes almost took more time and effort than the addition of the responsive CSS and HTML itself.
What did I learn from this? The content is the most important part of any site. This often presents that largest challenge as it is generally managed by a completely separate process from projects like redesigns and will continue to change long after a design implementation is complete. After delivering the design for this project, I trained the content authors on the importance and use of language in the site going forward, to help them provide the best user experience.
Most important, I learned to never overlook the language in existing content again.
What unexpected challenges have you found with usability or design when adapting for mobile? Let me know by connecting with me on Twitter.
How did the content become unclear? I didn’t change the content itself. I simply resized and repositioned some of the site’s elements, optimizing them to be viewed on mobile devices and displayed in browsers with lower resolutions.
The user might be pleased that the site now fits well on their mobile screen, but what happens when the user starts reading the content in its new and improved format? The text between the two paragraphs on the home page, “please use the menu on the right,” seems like a request that’s straightforward enough, but what about when you read this in the new format on a mobile device?
“Where’s the menu?” asked our tester.
By implementing a responsive and clean wrapping design, I had opted to stack the <div> for the content element and the <div> for the menu element on top of each other in the HTML document. No longer could we say “use the menu on the right” (because it’s not there for mobile users). But we also couldn’t replace the text with “use the menu below,” as the same content is always used regardless of width or device.
The solution was to reference the menu by its heading and add an anchored link, “Please use the Partner Sites menu.” This means that at desktop width a user instantly recognizes the menu, and clicking the link for any user will take them to the menu if it is currently off-screen.
It didn’t stop there. There were elements in the original design that relied on the mouse cursor hovering over elements to convey information. I had identified these elements and re-implemented them accordingly, since there is no concept of hovering on a touch-based mobile device (at least not in current wide use). Unfortunately, what we had overlooked is the multiple references in the site’s content asking users to “hover over the links to learn more.”
The time spent combing the site for these language-based changes almost took more time and effort than the addition of the responsive CSS and HTML itself.
What did I learn from this? The content is the most important part of any site. This often presents that largest challenge as it is generally managed by a completely separate process from projects like redesigns and will continue to change long after a design implementation is complete. After delivering the design for this project, I trained the content authors on the importance and use of language in the site going forward, to help them provide the best user experience.
Most important, I learned to never overlook the language in existing content again.
What unexpected challenges have you found with usability or design when adapting for mobile? Let me know by connecting with me on Twitter.
Matt Bearup, in addition to being a consultant at eBlueprint Pty. Ltd. AU, is proud to be an IBM Redbooks Thought Leader.
