Use THIS Workflow When Making Your Duda Website Responsive

Do you feel like making your Duda website responsive is a bit like solving a Rubik's Cube? You're not alone.

I've come up with the best workflow for making your Duda website responsive and avoiding headaches.

This process will make your Duda website look good on desktop, tablet, and mobile!

But first, let's talk about how Duda's responsive system works so we know how to navigate it.

The Inner Workings of Responsive Duda

Remember this: desktop and tablet are essentially one site and mobile is another.

This differs from what you are used to. If you go to most websites and reduce the width by making your browser window smaller, then the websites neatly collapse from desktop to tablet to mobile.

On Duda, the website will neatly collapse from desktop to tablet, but not to mobile.

Why? You might ask. Because this allows Duda to serve up a highly optimized website for mobile which is necessary to improve performance scores. On Duda, if you hide a widget on mobile, that widget will not load on mobile devices (duh). But on just about any other website builder, that widget will load on mobile but it's hidden. So the browser still has to download the widget even though it's hidden.

The responsive process goes like this on Duda:

• A visitor goes to the website
• Anytime a device goes to a URL there is something called "Headers" that are sent behind the scene
• In the Headers is the type of device (technically called the User-Agent). So the device basically says "Hey server, I'm mobile Chrome, can you give me the homepage?"
• Most websites don't directly give AF about the device as the website is designed to respond on screen size, not device type.
• Duda says, "Hey mobile device, I'm going to give you only what you need"
• The people rejoice

Note: If you're curious about what your User-Agent looks like you can view it here.

Alright, enough background info, let's dive into how to navigate designing responsive websites on Duda so they look great on all devices.

Start on Desktop (Then Clean Up Mobile)

Duda is meant to be designed from desktop down (that's how most if not all website builders work).

So first start by getting your website built on desktop. Once you are satisfied, do mobile. Notice I skipped tablet. More on that later.

Pro Tip: You can still do mobile-first design, but the designs have to happen in another app such as Adobe XD. When it comes to implementing the designs, you must start with desktop.

The reason for this is because the designs cascade down. If you set a font size on desktop then go to mobile and set a smaller font size then your desktop font size will remain. But, if you start on mobile then go to desktop and make a bigger font size, you'll notice your mobile styles will be overridden. Headaches ensue.

The Tablet Conundrum

At the time of writing this (January 2022), tablet is a pain in the butt to work with on Duda. That's because all desktop and tablet styles are the same. There is no differentiation between font size on tablet and desktop. You change one and it changes both.

Beginner Tip: Look out for icons in the Duda designer which will indicate if the style you are adjusting impacts a certain device. Desktop and tablet are one icon and mobile is another.

Also at the time of writing this, Duda is working on making tablet have its own styles (this feature request is on their Idea Board and in progress). Once complete, that will enable you to make unique adjustments for desktop, tablet, and mobile - a necessary requirement for making good-looking websites on every device that are easy to maintain.

The Tablet Workaround

There are two things you can do: custom media queries and using the "hide on device" feature.

Custom media queries require you to write custom CSS and they are harder to maintain, especially if you have other people working on the website who don't know CSS. I typically avoid these on Duda.

The second option is my go-to, although it's still prone to being hard to maintain.

Let's use the following for a crude example:

Notice how the title and paragraph don't work well on mobile and tablet (sure you can reduce the width so it's just in the white space but it's just an example). Ideally, we can reduce the font size on tablet, but that's not an option. So instead, we use the "hide on device" feature.

It works like this:

• Duplicate the section, one for each device you want to customize it on.
• Next, we're going to make each section show up on only the device we want.
• So one section we'll hide on tablet and mobile (this will be our desktop widget) section
• The next we'll hide one on desktop and mobile (our tablet section)
• Lastly, we'll hide the last one on desktop and tablet (our mobile section)

You can already see this has a major implication - any change we want to make will require three changes and it's very easy to forget to change all three sections when only one is visible.

But, this also enables us to have three independent sections which will achieve unique styles per section.

Now, this is what we can achieve:

And if we toggle the visibility button on the left, we can see the other hidden sections:

One More Tip

When designing your website, try to create designs that will be friendly across all devices. Pay specific attention to your headers as that's a problematic area. That way we can avoid creating duplicate sections.

Video Tutorial

Happy responsive website building!