It’s official: How your content looks on mobile is even more important than how it looks on desktop these days. Almost three quarters of internet users are expected to access the web (and your content) solely via their smartphones by 2025. So, if you’re not paying attention to that tiny little screen, three out of four people who land on your site could have a bad experience and leave without a positive opinion of your brand.
Setka Editor uses responsive design to make sure your content automatically looks great on every screen people may view it on. But we also wanted to give you a little extra control to fine tune your designs and make sure your information is presented exactly as you’d like it.
That’s why we’re excited to launch a new option for how columns show up on mobile devices, allowing you to keep some of the design benefits of columns without making your text too small or squished to read. To make sure you’re up to speed, we’re going to walk you through all the options you now have—old and new—for column design on mobile.
By default, any columns in your desktop design will show up one after the other on mobile devices, so users will see the information as they scroll down the page instead of side by side as they would on desktop. This automatically optimizes the width for mobile devices and usually keeps the flow of the content logical for the reader, without any extra work on your part.
Columns show up one after the other.
Columns that logically read left to right.
Sometimes, the default order can cause important information to get lost. That’s why we give you the option of flipping the order that your columns show up when they’re stacked on top of each other for mobile. Let’s say you’ve put some especially juicy piece of information in the right column on desktop. This allows you to have this show up first on mobile to make sure the reader doesn’t overlook it.
Columns show up one after the other, but with the right column first.
Columns with especially important information in the right column.
Sometimes columns make sense, even on mobile, especially when it’s helpful to see the information side by side (and it’s not so long that the text will be awkward to read). The 50/50 option (formerly called Matrix), keeps the information in two columns of equal width (but, if you have more than two columns, will push the additional ones below the first two).
Allows for two columns on mobile that split the screen equally.
Short text that’s helpful to read side by side.
Finally, our newest setting allows you to keep your columns almost identical to how they look on desktop. The Columns setting will keep the ratio exactly the same as it is on larger screens, so you can keep the integrity of your design and ensure small tidbits of information (like author names and photos, data points, or icons) don’t take more than their fair share of the screen.
Keeps all columns with the same proportion they have on desktop.
When you have small additional info in one of the columns that doesn’t need half or all of the screen.
You can try out all of these options under Mobile Settings → Mobile View → Columns. Feel free to play around with them in your mobile design and use the easy mobile preview to figure out which will give your user the best experience in every case.