Website Building Freedom With Duda’s New Tablet Editor

By Maayan Mor

Check out the new tablet editor. The world is a busy place these days, and people are often working on-the-go. This is especially true of website builders, who aren’t always sitting at their desks when they want to edit and build their customers’ websites. We’ve noticed that more of our customers do more of their work on the go. 

That’s why we made some serious improvements to our tablet editor, so that customers could easily build and edit sites, everywhere. Here are some highlights of what we did – the challenges we faced and the ways we overcame them.

With the new tablet editor, you can edit your websites anywhere

From desktop to tablet – a natural progression

Duda has a great editor for desktop, and we knew that the tablet editor would use the same code. For this reason, we didn’t want to reinvent the wheel when we built it; instead, we wanted to adapt the desktop editor to make it slicker, more flexible, and more suited for touch devices. We wanted to build it so that it would be as similar to the desktop editor as possible, so your learning curve would be minimal. You know one editor, you know them all.

Challenge 1: Two Clicks in One

One of the first challenges we faced was how to present the full range of editing options on tablet. On desktop, there are two ways to open menus: right-click opens the context menu, left-click opens the widget editor. In tablet, since there is no right-click, we needed a single solution for presenting both of these menus.

Introducing: The tablet menu bar.

This handy menu bar, which opens on a single tap, enables all relevant navigation and editing options. It’s a combined functionality that puts everything together, saving valuable space on the viewport.

Tablet Menu Bar

The tablet menu bar enables all editing options in a single bar.

Challenge 2: The Immediacy of Touch

On tablet, every time you touch the screen, something happens. To accommodate this, we changed some desktop behaviors so that you would need to take a deliberate action to make things happen. Here are some examples:

Widget editing – easy as pie

Editing widgets is easy. Just tap any widget and the tablet menu bar appears. Tap Edit and the widget editor opens, behaving exactly as it does on desktop. If you tap a paragraph, the text editor opens, so you can edit the text as you like. If you want to resize the widget, just use the widget handles that appear when you tap.   

Move mode – Preventing accidental movement

Another thing we wanted to avoid was having widgets move accidentally on the page. The solution we developed, which enables you to drag & drop widgets deliberately, is the Move mode. Activated by tapping Move in the tablet menu bar, this mode enables you to drag and drop selected items to any location on the page, and ensures that you don’t accidentally move things when you don’t want to.

In Move mode, the widget you want to move is marked with a dashed line.

Adding widgets inline

Space is limited on tablet, so we made things easier by adding the widget inline instead of dragging and scrolling. The widget is added immediately below the point where you made the initial selection, so that the addition is immediate, comfortable and logical.

When you click + Widget, you already know you want to add a widget. Instead of having to drag it into the viewport, we bring it to you.

Deliberate navigation – Go where you want to go

When you click on a widget that’s linked to something else (a page, external link, etc.) the tablet menu bar appears. From here, you can edit the widget directly or navigate to the linked element by clicking Go to Link. We’ve added this step so that you don’t navigate away from a widget unless you want to.

Go to Link brings you to the page you’ve selected in the navigation.

Deliberate delete

In the desktop editor, you can delete a widget from the small red x in the corner of the widget’s container, and from the context menu. We didn’t recreate the small red x in the tablet editor, as accidentally tapping it would be much too easy. Instead, we left the delete in the context menu only, accessible through the cog icon on the tablet menu bar.

No hover, no problem

A lot of things on desktop depend on hover. For example, tooltips on top bar menu items and editing menus are revealed on hover. In tablet, if we left the hover, one tap would reveal the hover and a second tap would enable the action. This would be inconvenient and unnecessary.

In some places, we removed the hover altogether. For example, in the text bar: Everyone already knows what the icons stand for, so we simply omitted the tooltips.   

In other places, we made it so that the effect shows immediately on a single tap. For example, when you tap the screen, the row and section labels appear close to where you tap. It’s the same rationale as on desktop, but the implementation is different because on desktop, these labels appear on hover. In tablet, we anticipate what you’re interested in and show it.

Challenge 3: Size

Tablet devices are significantly smaller than desktops, creating visual and functional challenges. Elements designed for desktop require different designs on tablet. For example, platform popups designed for desktop must be made smaller for tablets. Windows that open from the left bar need to break at the right places. Also, all of these adaptations need to take into consideration that tablet devices can be viewed in both portrait and landscape orientation.

At the same time, while the amount of space we have to work with on a tablet device is smaller than on desktop, the UI needs to be bigger to accommodate fingertips, which are larger than mouse cursors. So widget handles, for example, need to be larger on the tablet version so they are easy to control by touch.

Top bar – adjusted to suit your fingertips

There are many types of editor top bars, and the tablet editor needs to accommodate all of them, in several languages. (The tablet editor, by the way, is available in the same nine languages as Duda’s desktop editor.) Consideration of the different languages is particularly important in the top bar, where space is so limited.  

The first thing we did was make the top bar higher and wider, so it would be easier to tap accurately with your fingers. We placed three of the less-frequently used tabs (Dev Mode, Support and Dashboard) behind a More icon. This left us with more room for making the tabs wider. We also removed the word Preview, leaving just the preview icon.

Slider component – behind the scenes adjustments

This component appears in many elements of the platform, and is used to control spacing, dimensions, borders, and more. We knew that if we changed its UI, there would be many repercussions. Also, we would create a difference between the desktop and tablet editors that would appear over and over again.

To minimize the differences between the desktop and tablet editors, we adjusted the sensitivity of the component rather than redesigning it altogether. So, while the slider looks the same in both the desktop and tablet editors, the span of the area affected by touching it is larger on tablet than it looks. The result? The component looks the same on tablet as it does on desktop, but is more sensitive to touch.

Native dropdowns – For optimal functionality

In contrast to the Slider Component, where we strived to keep the same UI on desktop and tablet, we opted for native drop-down menus in most cases.

We made this decision because the native drop-down menus are carefully designed to handle the port view. If something is located at the edge or bottom of a page, the native dropdown opens where it should, pushing other things away so that the drop-down can be viewed.

You may notice that dropdowns in the desktop platform have an automatic search, whereas those in the tablet version don’t. This adjustment was made in order to optimize the viewport and enable you to work conveniently, without a keyboard popping up and blocking your view.

Freedom to edit sites – anywhere you go

The new tablet editor isn’t just a smaller version of the desktop version. It’s a thoughtfully designed adaptation that gives you and your customers the freedom to build and edit sites anywhere, easily and quickly. From your customer’s place of business. On a train. At a coffee shop. At the beach. Wherever you go, you can load images, move widgets, tweak content, check analytics, publish sites, and more.

Duda’s new tablet editor makes editing sites on tablet easy, intuitive, and fast, and includes design and functionality changes that go beyond adapting the interface to a smaller viewport. It’s just one more way in which we are making Duda faster, simpler and more convenient to use.  

 

 

, ,

About Maayan Mor

Maayan Mor is a Product Manager at Duda. Maayan studied Motion Graphics but loved the UX world even more, and spent several years as a UX designer.
Blog Comment Policy