Friday, March 29, 2024

Review Duda Mobile

7/9/13

Today we look at Duda Mobile, which allows you to create custom mobile websites. When you visit the site, you’ll see a field where you can enter an existing site which Duda Mobile will convert into a mobile site.

I used my portfolio site: http://NathanSegal.org for this process. This site was created using OptimizePress, which I’ve written about in other articles.

When I entered my site onto the main Duda webpage, this is what was created. One of the first things I noticed about this layout is while there were a number of configuration options, I didn’t see anything in the way of instructions, to show me what to do.

A couple of days later, I launched the Duda Mobile website and was presented with the screen above. I chose to use the new site builder and it took me to a screen similar to the one I’d seen the first time around. And here, I encountered the same problem. Very little text to show me what to do.

As a case in point, I tried to move the block of text below the photo in the section above, but no matter what  I did, it didn’t work.

I decided to choose another approach. Since I’d created a free account, I opened it to see if I could get a better result. Unfortunately when I did so, I found the same interface as far as I could tell and the same lack of instructions on what to do.

Eventually, when I clicked within the box, it brought up the popup menu above.

Clicking on the Edit heading brought up the dialog box above. With the tabs on the left, you can control the look and feel of the text boxes, along with control over the font, size, design, etc.

Clicking on the More tab brings up the section above, with options for editing the Spacing, CSS and HTML. Note the warning about how to use the HTML. In the instructions, there’s a warning that you should only edit the HTML if you’re an advanced user.

Also note, Duda has their own system of working with markup, which will take time to get used to. According to the documentation: “When making changes to the HTML markup it is mandatory to make use of the DMLE (Duda Markup Language Entry) attributes. Not inserting the DMLE attributes or incorrect use of the DMLE attributes could lead to inconsistencies, so please use with caution.”

A Look At the Interface

Now, we’ll take a look at the interface, which seems to be pretty straightforward to use. Duda Mobile peformed a pretty impressive conversion of my site into the mobile interface. The only major criticism is the small lettering on the logo, but that was to be expected. As with other mobile designs, I’d have to build a new logo, designed for the mobile interface.

Here’s the interface as it is right now.

On the left side of the interface are the controls for the layout. These are Design: Layout, Style and Header. Below that is a heading for Pages and below that, a heading with the words: Go Live.

At the moment, the interface is in the defualt position, with List under Navigation Layout and Edge to Edge Tab Style, under the Navigation Style heading.

Under Navigation Layout, your options are: List, Matrix, Expanding, Bottom and Top. Under Navigation Style, your choices are: Edge to Edge Tab Style, Edge to Edge Button Style, Floating with Dividers and Floating.

Here’s what the layout looks like with Top and Floating selected. Note that the text in the menu bar doesn’t fit and will need to be customized.

Click on Customize under the Floating Navigation Style as in the screen shot above.

This brings up the Navigation dialog box. One quick way to fix the problem is to shorten the header. Instead of Testimonials, I could use the word “Talk.”

Here’s the result, but this might not be satisfactory.

Other options are to change the navigation style, font size, font or spacing between the words on the layout. In this case, I chose the word: “Feedback,” instead.

Editing the Header

The next thing we’ll look at is the logo, known as the header in this layout. To do so, hover your mouse over the header in the mobile layout and click on it. This brings up a popup menu with only one option: Edit.

Clicking on that brings up the Edit dialog box. On the default is the ability to change the logo, resize it, crop it, center it, change the padding and more. With this step, I’d recommend creating a JPEG, PNG-8 or GIF file. The latter two are preferred, partly because the file sizes are likely to be smaller and will load faster, which is important on a mobile device.

Pages

After you’ve finished your design, it’s time to work on Pages. To do so, click on the Pages tab. As you can see, you’re presented with a large list of options. All the pages you’ve created so far will be available on the left pane so you can edit them or add pages, if you wish.  

To add a feature to the mobile site, simply drag it onto the interface. A dialog box will appear and you can adjust the settings.

Note: Some of these options, such as Click to Call, Mobile Map, Google Adsense and others are marked with the Premium banner, which means they are are an option available with the premium version of Duda Mobile. For more information, see the pricing section below.

Go Live

The last step is to take yours site live. To do so, click on the Go Live button, which brings up the following options, a free site or the premium plan.

I chose the free site and Duda Mobile built a site for me. This last step gives you the URL of the mobile site and some redirect code that you’ll need to use for your desktop site, so when a mobile user arrives, they will be redirected to the mobile interface. This is provided to you as a plugin that you’ll need to install and activate within WordPress.

Note that your finished site will display Duda Mobile advertising right below your navigation. Such is the price of free. To remove the advertising, you’ll have to purchase the premium package.

When I published the site, I noticed that some of my pages didn’t display correctly on my phone (a Samsung Galaxay Nexus), so it was clear I’d have to go back and do additional editing, especially to the image files. Overall, the text worked out quite well.

Pricing Plans

There are two ways of using a Duda Mobile site. One option is for free, but you’re limited to only ten pages, 500 monthly page views, basic plug-ins, a URL they assign you and community support only.

If you upgrade to the Premium plan, this only costs $9.00/month. This gives you unlimited pages, unlimited page views, premium features and access to unlimited technical support.

Another option is to hire someone at Duda Mobile to build the mobile site for you.

Conclusion

Overall, I liked the Duda Mobile interface and the job it did on translating my WordPress site into a mobile interface. What I didn’t like was the lack of instructions. There’s too much reliance on graphics. The other thing I wasn’t fond of was the need to learn proprietary code, which adds to the learning curve. Still, despite the drawbacks, I liked the interface, the ease of use and the options. I recommend you take Duda Mobile for a test drive and see what it can do for you.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured