In the age of mobile, mistakes and shortcuts still happen with agencies and freelancers. Here’s a list of mobile responsive design mistakes we’ve seen, been forced to deal with and correct, and mistakes that just make any designer scratch their heads.
Not Designing for Mobile First Instead Of Desktop
By designing for mobile first you focus on what is important, the content. However, for designers this is a complete departure from what feels natural because you feel like you are forced to cram content in that is a part of the design (e.g. images and icons).
By not focusing on mobile first it becomes a major challenge to layout a website using any CMS so that all elements have proper negative space in desktop and mobile. Without the negative space, thing will get crowded on a phone or tablet, as much as a desktop and content becomes difficult to read.
Designing around specific device widths
Before the Kindle, Android and various other devices, there was prominently the iPhone and then the iPad. Most other devices fit within the range of 1024, 768 and 480 pixels. Not any longer after 2007-ish.
Hiding Content
Don’t hide content just because you can’t fit it into a smaller screen. But we understand if you have to.
display: none;
This is not always your friend in CSS. Assume your mobile users will want to do everything (and sometimes more) than your desktop users. Again, design mobile first then desktop. If you are still thinking designing sites is like laying out a print piece, you’re in danger of going extinct in the industry.
Forgetting about Touch vs Hover
Tiny links and touch point are horrible UX on anything, so image them on your iPhone or Android device. Anything that’s clickable (such as buttons or other calls to action) should be created to the size of a thumb. Apple themselves recommend the minimum acceptable size for mobile controls to be 44 pixels. Therefore, don’t put links too close together, or big-thumbed users will never forgive you.
Terrible Navigation Naming
“About” is pretty clear on any device to tell the user that this is a link in the navigation that will take you to the “about us” page. “Who We Are” might get a little wordy and wrap on smaller devices. Simply making the text smaller or larger is lazy UX and can make users angry.
If you like this post please let us know by sharing it and letting us know in the comments below if there are any other point to share about responsive design mistakes.
