April 11th, 2024, posted in learning
by Adelina
Designers love to make pretty things - it’s a given. And UI/UX designers, in particular, know they need to find a balance between pretty and functional. But there is one element that tends to slip away: making designs scalable, ready to go responsive.
Isn’t that the developer’s job? You might ask. Yes, mostly, it is. It’s also a source of their pain. And so, UI/UX designers should keep in mind that not everything they design can be responsive, and to be mindful of what code can do. Otherwise, the things they design won’t be able to be coded for mobile, which means putting in extra hours to make a separate mobile version.
In this article, we’ll talk about some of the things we learned (the hard way, sometimes) about making our designs ready to go responsive. Plus, tips and tricks about turning a desktop design into a mobile design without spending too much extra time and effort.
Start by getting some inspo. But no Pinterest.
One simple way you can go about it is: imagine your design is divided into a series of columns. If you’re using a wide screen, picture 5 columns. If you’re using a 4:3 screen, go for 3 columns. And then, imagine your design is restrained to one column only. How can you make all the content fit into that one column?
A good way to get some inspiration is going on CMS platforms like Wordpress or Squarespace and look at their templates. They all include desktop, tablet and mobile versions. And a good way to see some responsive design standards is by looking at these templates and switching back and forth between the desktop and mobile versions.
While looking through these templates, you might notice that most of them divide content into 3 columns, tops. Usually, a title in the middle and 2 bits of content on the right and on the left. And so, when the screen real estate minimizes, content squishes to fit into just one column - groups of content go one below the other, instead of next to each other, as they would on desktop.
Map it out: Grids and columns
The column example we gave earlier is a very simplistic way to put it. There is actually a more specific, technical way to approach this. In fact, it’s one of the most standard ways you can ensure your design can be responsive.
All it takes is using some grid standards: most design tools, like Figma or Adobe XD, have a built-in grid spacing tool. So apply the settings below, and keep your design elements in line with the created grid. Having both a vertical and a horizontal guide can help you keep spacing consistent, which will then be very helpful when switching the design to mobile.
Grid spacing settings
For a screen with a width of 1440px:
Vertical (columns)
12 columns | Margin: 70 | Gutter: 20
Horizontal (grid)
Count: 1000 | Type: Top | Height: 8 | Gutter: 0
For a screen with a width of 768px (tablet):
Same numbers, but switch to 8 columns
For mobile screens:
Vertical (columns)
4 columns | Margin: 35 | Gutter: 20
When it comes to layout grids, seeing it get done is much more helpful than reading about it. So here are some video resources that go more in depth:
- Responsive Website/Web Design and Prototype with Figma
- Responsive Website Design in Adobe XD
- Figma Tutorial: Setup a Responsive Grid Layout for UI & Web Design (IN 11 MINUTES)
Headers and heroes are the first things users see. So make a good impression.
Headers have a pretty standard look on mobile devices: most times, the logo is on one side, and a hamburger icon goes on the other. Alternatively, you could have a menu - logo - search icon set-up. As the UI/UX designer in charge, you’ll have to decide what works best for your project. The hamburger menu is pretty standard, and works best for a complex navigation system. You can nest submenus, have it open from one side, or downwards.
Another common navigation standard, especially with mobile apps, is the tab bar. This works best when you don’t have more than 5 menu items, and no submenus. All you need is an icon for every menu item, and to decide the best position for the bar - top or bottom.
Now, keep in mind: screen sizes have changed a lot of recent years, and phones keep getting bigger. Nowadays, stretching your fingers to the top of the screen isn’t the easiest, which means opting for a bottom navigation bar could be more inclusive. In fact, a lot of popular apps, like Instagram, use this system.
Source: Smashing Magazine
When it comes to menu navigation, there are a lot of great resources on this topic that go a lot more in depth. So here’s what we recommend, for further reading:
When it comes to hero images (if you use any), you have to be extra careful. Using abstract images, illustrations, and overall anything that can’t be combined into one column, is not ideal. Unless you’re 100% sure all your users go to your website on desktop - which is unlikely - you need to make a hero that can adapt to smaller screens.
What does this mean? Go for content that looks good when shortened to a more narrow space: a solid background, a pattern or a stock photo where the focal point is in the middle. This applies to any zoomed-in full-width images you put throughout your desktop design.
In other words, if you want to use a hero photo that highlights 5 key employees of a company, mobile users might only see the employee in the middle. Alternatively, if you must use a wider photo but you want the entire thing to be visible, make the width fit into the size of the screen (instead of zooming in like the example above)
Search bars - hidden or out there?
A study by A. Dawn Shaikh and Keisi Lenz says a search box should go on the top left or top right of a mobile device’s screen. This ensures that users can find it easily, especially on a website focused on content. Usually, it’s just an icon that opens up a search bar when clicked.
If searching for something is a key feature of your website, something everyone always uses, you can put more emphasis on it. Don’t make it an icon only, like our header example - make IT the header, or put it in the center, on the first half of the page.
Keep in mind: don’t make it too short. Make sure the search box wouldn’t make user experience a drag if they want to look up a longer phrase.
Getting more specific: Pop-ups and other things you bother users with.
When people visit your website for the first time, they’ll most likely get a pop-up about cookies, or whatever else you set up. Except, that’s the key: don’t set up too many things to show up on a user’s first visit. Or if you really must, make them tasteful. Be mindful of the fact that mobile users don’t have a 15 inch screen in front of their face - but rather, 6 inch. The screen real estate is significantly smaller, and pop-up elements shouldn’t make browsing a painful experience.
If you really need two to three pop-up elements, make sure they leave enough room on the screen for users to see what they’re doing. As you can see above, the main problem is that the pop-ups and alerts cover the website content. And it’s multiple pop-ups, all at once. If you can’t make these elements smaller on mobile, try to find a better place for them in the user experience. If it’s something that requires immediate attention (like those cookie notices), let it come up first. If it can wait, let it go at the end, or appear at least a minute after the user entered the page. Otherwise, they’ll leave the page as quickly as they opened it.
The main takeaway from this? When you make such pop-ups for a desktop website, create a smaller, more compact version of it as well. Or better yet - reconsider whether you really need them or not.
Overall, making your designs responsive is not as difficult as it seems, and a lot of it depends on keeping up with some common standards. And most of all, have good communication with the dev team that will code your designs - just so they don’t go rogue and turn into designers themselves.
If you’re looking for a responsive app, taken from prototype to app store, don’t hesitate to contact us.
