Tips for Designing and Checking Responsive Websites

The Current Issue

Not to state the obvious but long gone are the days of web visitors using only computer screens to browse the web. We’re pretty much all using tablets, smart phones, as well as our computer monitors. That last part of the sentence is key because I see a lot of web designers forgetting that computer monitors are still important.

It started with the ‘mobile first’ movement of designing for mobile initially and then extending for desktop afterwards. Right from the beginning, I’ve always maintained this was a completely backwards approach, especially seeing as at the time there were still statistically more people browsing on desktop than mobile. Regardless, to me it’s more logical to design the most complex layout first and then simplify as needed.

Now, as I write this in 2021, according to GlobalStats, there’s still 41% of people browsing with computer monitors, and yet I keep seeing obviously ‘mobile first’ designs, where they never even bothered trying to expand for desktop.

Many web designers are getting lazy thinking they only need to design for one device size, but there are still some of us that want our client’s customers to have a good time on all devices. If you want to join us in putting in the effort, this article is hopefully going to make your life so much easier.

Solutions

1. How to Switch Menus based on Device Size

It’s sad to see so many websites, and sometimes even big brand websites, forcing desktop users to use a hamburger menu (the classic mobile menu that has the horizontal lines that you click for a drop down). Having all that space on a computer monitor and being forced to click an icon before you can see the menu just isn’t cricket…especially when it’s so easy to switch. Of course that is assuming you have at least basic competency in HTML and CSS which every web designer should have.

I’ll show you how, without giving you a complete cut and paste script, because as a web designer, you need to understand the basic mechanics so you can apply it to any scenario. You start with adding a condition to your stylesheet:

<style>

// normal menu styles go here

@media only screen 
and (max-width: 810px) {
// mobile menu styles go here
}
</style>

In the above code example, you’re wrapping your mobile menu styles in a condition that only kicks in if the device width is smaller than 810px. It doesn’t have to be 810px exactly, but I personally find this to be a good point to switch to a drop down. The desired outcome is that a person using an average tablet in landscape mode will see the menu buttons side by side. If they then tilt their device to portrait orientation, it switches to a drop down.

So there are two ways to achieve the above.

One Menu, Different Styling

The method I use most is to use one HTML menu for both desktop and mobile. the menu structure is basic: It’s a <nav> containing a hamburger button (a standard <a> that I’ve styled) to trigger the drop down , and a list (<ul><li><li><</ul>), with each <li> containing a hyperlink (<a>) for each page.

Each element has a class, and each class is styled differently based on device width (as specified in stylesheet).

So, in short:

The hamburger button is set to “display: none”, except when the device width goes smaller than 810px. Then I style it to display: block.
The <li>’s are floated, except when the device width goes smaller than 810px. Then I clear the float.

If drop downs aren’t your strong suit, start with finding a nice script for a dropdown and paste it in the 810px area that we designated in the stylesheet, and then take all those classes and paste them above in the normal area of the stylesheet and adjust from there. Testing in the browser as you go along will help you see what effect your changes have. By using floats (or float: none), display block or none, position absolute or relative, etc you can manipulate the same menu to look and behave completely differently.

Two Menus, Displays Toggled

The other method I occasionally use is to have two completely different menus, but depending on the device width, one of the menu’s is hidden.

It’s not ideal to have to update multiple menus each time you want to add/edit/delete a button, but in some scenarios it makes sense. For example, you might have two separate menus in the desktop version, but want to combine them into one menu in the mobile version.

In this case, you would set display none to the mobile menu, except when the device goes smaller than 810px. Then you would set the two desktop menus to hidden and display the combined mobile menu.

2. How to Spread / Stack Content

On a website, if there’s enough content, you will want to have different sections on the page for different elements. For example, on a home page, you might want to have 3 blocks of content for your 3 different services.

On mobile, you don’t have a lot of space, so you can basically just stack all elements on top of one another, but on a desktop you’ll want to have them side by side. There’s a few ways to achieve and they all have their place depending on the specific scenario:

Again, we’ll start with this basic situation, where you will be wrapping the styles for mobile in the 810px condition, and your desktop styles go outside of that.

<style>

// normal menu styles go here

@media only screen 
and (max-width: 810px) {
// mobile menu styles go here
}
</style>

If you use float: left, float: right, you’re going to see your elements side by side. Then you can use float: none to stack them for mobile. If you use display: inline, you’re going to see your elements side by side. Then you can use display: block to stack them for mobile.

If there’s a lot of elements you might prefer flex columns or css grids. These are out of the scope of this article, so I’m going to have some links at the end if this section for further reading. The point is having everything side by side doesn’t work for mobile. Have everything one on top of the other doesn’t read well for desktop, so make the effort and use the stylesheet conditions to display the elements differently based on the device width, for whichever method you prefer, float, displays, grids or columns.

3. Easiest Way to Check the Website in Different Devices

There are websites dedicated to checking your site on different browsers. Back in the day, we used BrowserShots.org to generate screenshots of a site in different browsers and resolutions. Then I discovered WebsitePlanet’s Responsive Checker, where you can check a site via emulators. It’s still a great tool, but now days many browsers have built in emulators hidden away in their dev tools. They’re so amazing, you can even trick Instagram into thinking you’re on a mobile phone (allowing you to upload from your computer). Here’s how to access these emulators:

On Firefox

Load up your website and press F12 to bring up the dev tools.
Give the emulators some space by undocking the dev tools (click ellipses on top right corner for options)
Click Ctrl Shift M / or click the Responsive Design Mode toggle (near the top right corner)
At the top of the browser page you can select the device, orientation, and a few other options.

On Chrome / Brave Browser

Load up your website and press F12 to bring up the dev tools.
Give the emulators some space by undocking the dev tools (click ellipses on top right corner for options)
Click Ctrl Shift M / or click the Responsive Design Mode toggle (near the top left corner)
At the top of the browser page you can select the device, orientation, and a few other options.

4. Last Minute Checks

Once you’ve checked your website visually on the emulators, it’s also worth running your site through some mobile friendly checkers, which will analyse your site for potential issues. Here’s two of the most widely used:

Credits

Article by Roxane Lapa of COZA Web Design
Photo by Caspar Camille Rubin on Unsplash, edited by Roxane Lapa

Spread the love