Drag and drop it like it’s hot! That’s what Dropbox said when they rolled out the drag and drop option for Chrome, Firefox and Safari. The late craze of drag and drop feature makes it hot by no means. Initially linked to the simplicity of user experience, it is acquired by more and more web applications. So let’s take a look at how drag and drop works and makes people’s work on the web easier and fun. This time on the list are these three web applications: Canva, ImpressPages, and Mailerlite.
1. Canva, drag & drop for graphic / web designers
Canva is a start-up from Sydney running an online design platform. Based on drag and drop feature it seeks to make graphic design amazingly simple. To everyone. Last year Canva raised $3 million in seed funding and most lately enlisted Guy Kawasaki as its chief evangelist. Sounds interesting so let’s try it out.
Here you can see the array of designs that Canva proposes by default but there’s also an option no to use custom dimensions. I decided to go with a Facebook cover design since, well, everybody needs one. One click on the icon and it took me to my design dashboard which you can see underneath.
Starting with the background, Canva gives the possibility to choose from plain single color background (which is still quite amazing because you get the full color wheel), to unlisted amount of free and premium backgrounds, to uploading your own file from desktop or linked social accounts like Facebook. There’s also an option to go with pre-made layouts which are easily customizable. I chose to go with this cyanish color background.
One tiny mix up I witnessed was that you can drag and drop layouts and background styles to your design. But drag and dropping colors doesn’t work that way. Moreover, it eliminates the color from your color palette.
Another thing I missed when creating my new Facebook cover was the mark of where my profile pic would go. Since I wanted to make a speech bubble to pop out of my head, I had to go guessing where I should place it. Even without speech bubbles, profile pic should be marked in order to avoid covering your design. With the first graphic element in, I started playing with the provided editing options.
Canva gives you a big amount of graphic elements (free and paid) to choose from and there are two best parts to it. First, adding them is a no brainer – all you have to do is just drag and drop from the panel to your design. Secondly, every bit of the element is easily customizable. No matter if it’s image or text, you can change the color, size, transparency, saturation, order, etc. with just a few clicks.
What I found really thoughtful was that the font size option is kind of intuitive and when just for fun I wanted to choose 64pt font to go into that small text box, it didn’t allow me to do so. I like this limitation because it somehow shields users from creating very bad designs.
I liked the ease of use Canva provides in almost every step that you engage with: from starting to create (23 second tutorial), to publishing your design. As a first time user I felt a bit overwhelmed, though. Their stock of images and other graphic elements seems to be pretty impressive (over 1 million) but it kept me browsing for more and more, and more…thus, making me think that it’s not such a productive tool after all.
Still, company admits they are not aiming at design professionals who need to do precise high quality work. It’s more of an everyday use tool for mainstream users who need to create simple but appealing designs without mastering Photoshop or InDesign. And for them this play-work kind of tool should be above useful.
2. ImpressPages, drag&drop for content managers
ImpressPages started as a CMS but most lately turned to becoming a PHP framework with content editor. The latter is what makes it interesting and appealing. Built with non tech savvy users in mind, ImpressPages provides an easy to use tool for website management. Drag and drop interface is one of their most notable feature so let’s see how it works.
I started out by trying to build a demo website. After logging in, I was instantly greeted by my future website. As far as I had to work with other CMSs, it was always the other way around. First you go through the admin panel and only then you get to see the actual website.
ImpressPages is different as it is based on WYSIWYG model. User is presented with the website as it is and can make changes inline, not from somewhere under the hood (means actually seeing the end result before he publishes anything). Still, I was quite curious with what’s inside that ‘Menu’ button so I went to take a look first.
I headed straight to ‘Pages category’ to edit some page properties. Here you can change the title, URL path of your page, add new pages, manage SEO preferences. Everything’s pretty easy and clear. I didn’t look into other categories precisely as they deal with more complex development issues like plugin configuration, multi-language option, system logs and such. Instead I hit the ‘Edit content’ button and started building my website layout.
The whole experience of inline editing is based on drag and drop feature. There’s a default widget bar at the top with the most commonly used widgets like Heading, Text, Image, Video, etc. To add a new field to your website layout all you need to do is choose a widget and drag and drop it to a desired place.
I decided to insert an image so I picked the Image widget, uploaded my own picture and it was there. What’s really handy is that you can edit your image inline: crop, resize, add hyperlink.
Basically, this drag and drop experience was very catchy as I wanted to add more and more elements to my page. Another useful thing in ImpressPages is that you can drag widgets inside or next to one another, thus creating multiple columns.
In the text area I pasted some info about coffee from Wikipedia and it kept all of its formatting which is nice when you have a some prepared and formatted text. The text editor is simple, I missed more Formats options as there are only three: Quote, Note, Button. And the adjustment of font color would also be nice.
Trying to add a video I experienced some difficulties as the widget couldn’t fetch data from the URL and displayed an error. However, I found my way around it by adding HTML widget to my page and embedding the HTML code of the video. One flaw – I basically had to guess the measurements of the video for it to match the size of images. There should be some guidance for that.
Overall, ImpressPages seems like a legit tool for those who want to easily administer their websites. Even with the default preferences you can build a tidy website with necessary features without dealing with all that plugin madness. However, if you need something more complex, ImpressPages is open source and easily extensible so just find a smart developer and he’ll do the work.
3. Mailerlite, drag&drop for email marketers
Mailerlite is an UK-based company providing email marketing software for small businesses. It is said to have around 20,000 users worldwide. Basic values of Mailerlite are simplicity, flexibility, good price and customer support. Their user experience is based on easy email creation using drag and drop feature so let’s put it into test.
Just recently Mailerlite acquired a new clear and flat design and the UI looks much nicer than it did before. First step (which I’ve skipped describing) takes you through the main starting points like setting your email’s subject, sender name, email and language. Then you go (almost) straight to editing content but before you can choose from three design options: Rich Text; Drag and Drop; HTML upload. Naturally, I went with drag and drop.
Here’s a screenshot of the dashboard with content area on the left and widget bar on the right. If you go to the “Design” section, there are some pre-made themes to choose from with set color palettes and fonts. You can also create a custom design but I left that for later.
I didn’t choose a pre-made design and I didn’t create one of my own. I simply started customizing the default design by Mailerlite. First one was header. Once again I went with that cyanish color. The choice of colors is not very wide as well as the choice of fonts: Arial, Verdana, Helvetica, Times, and Georgia. You can change the color, size and emphasis, as well as add a hyperlink to your title or subtitle.
There is also an option to add an image or text+image. Mailerlite has a moderate image editor inside – you can crop it. Also, you can add border to the image in the header (not other images, though).
After adding Title, Text and Image widgets I started formatting the content and it was pretty easy. Everything’s done inline so you can see how the final email will look like. To add a widget all you need to do is drag and drop it to your desired place.
The text editor is simple but has all the options needed: emphasis, color, size, hyperlinks, etc. Also, by clicking the left/right hand arrows you can change the arrangement of text (header has this option also, it changes the justification).
However, one tiny bug (?) came up as I added Text+Image widget. I was able to add images and subtitles easily but the left mouse click didn’t work for adding the text. After a few clicks I tried the right mouse click and it worked but that’s not the usual case so…
Still, the experience of using Mailerlite was satisfying as it comfortably provides all the tools needed to create a good looking, tidy email/newsletter. From regular sections like text and image, to nicely designed action and social media buttons. It is best suited for small businesses or individuals who want to achieve good results through email marketing on a budget.
True benefits of drag and drop feature are still debatable. While it doesn’t seem to add much value to the productivity (usage errors; loading speed; etc.), it is a neat tweak in the overall user experience.
Drag and drop based interfaces generally come off with more clarity and simplicity which are preferred by non-tech savvy users. Such UIs enable them to engage with more complex tasks (like creating a website layout) without developing deeper knowledge. Moreover, drag and drop relates to real life experience of rearranging things, thus people accept it as more natural and fun.
Something’s not on the list? Please share web applications that you know which use drag and drop among their main features. Do it in the comment section or drop me a personal message on Twitter.