As a designer and developer, I get to enjoy both sides of the spectrum — starting out with designing a website as a static design in a program like Adobe XD, and then carrying out my design in developing it online using WordPress.
Because I do get to see it from start to finish, I also have a lot of control over the layouts to ensure they’re going to work responsively. This means building the site to look good on your desktop computer, laptop, tablet, and phone.
Traditionally, the developer might get handed a design that’s just unreasonable and won’t work for responsiveness.
In my case, I get to design how I want, but knowing the limits in what’s possible, and what makes the most sense. In the end, I’m the one that’s going to be building it, so I know firsthand if I’m going to present a challenge.
In learning more about web accessibility this year, I’ve also come to realize that as you implement best practices, you’re also creating a pleasant experience overall. It helps you think more simplistically, but in the end it is aiding in creating a website design that’s aesthetically pleasing.
So when it comes to designing with responsiveness in mind, here are my top tips to ensure you’re not creating a headache for the developer.
Design with a grid
When you’re first designing a site, and setting up your artboards or frames in XD or Figma, you want to also setup a grid.
In order to create your grid, you’ll need to know the container width of the site — traditionally it’s somewhere between 1140 and 1280 pixels.
Once you know that container width, you’ll want to split that container into equal columns — such as 4, 6, 8 or 12, etc.
How many columns you choose is up to you, however this may be something the developer would provide their preferences on.
Establishing this grid is going to help you align your content, as well as aide the developer in understanding how wide certain elements should be.
You can then translate this same grid to a mobile phone size, albeit with a much smaller width and columns as a result.
Design with mobile in mind
Depending on your design style and background, you might find yourself designing “with no limits” — throwing random patterns, elements and lines wherever you like.
Not only is this just poor design for web in general, but it’s certainly not going to translate well to mobile.
So when you’re approaching a certain section, be thinking about how it’s going to appear on mobile — will the text and graphic stack? Will the background gradient translate well? Will it be readable?
I am not implying that you can’t add any “flair” to your designs. I have seen websites before having some really interesting layouts on desktop, and then when viewed on mobile, certain elements just disappeared and were hidden to ensure that the mobile experience wasn’t disturbed.
It’s not best practices to hide/show content everywhere, but I personally think it’s acceptable if it’s done on a very limited basis. In the end, you do not want the mobile version of your website to be unrecognizable from the desktop version.
Lastly, depending on what your developer uses to build the site, you should have control over sizing and layouts on mobile specifically. For example, altering text size or a button so that it is more proportionate to the screen.
Design a user-friendly mobile menu
Now, this one really varies on the developer’s site builder of choice, however it’s very important (and I mean very) to ensure that the navigation menu on mobile is easy to use.
Make sure all elements and links are clickable, not too close together for a finger to touch, and highlight active pages so it’s easy to navigate to where you want to go.
Always put emphasis on contact info, too — I don’t care what industry it is, so many people visit a website to find a way to contact them. Hiding this information will only frustrate your users, so implement your Contact page in your mobile menu or place your phone number in a top bar.
By not putting any attention on the mobile menu, you can virtually make your site unusable — and with so many browsing the web from their phones, this could be a drastic loss.
Check your site’s mobile version
Now that you’ve learned a few things about responsiveness and designing for mobile, go visit your own website on a mobile device.
How does it look? Are elements overlapping or out of the viewport? Is your navigation menu easily navigable?
If you need help to improve your mobile site, feel free to book a call with me — I’d love to see if I can help!
See you next time,
