In this tutorial you’re going to learn how to use our website builder and Dudamobile make your site mobile-friendly. This helps visitors who are coming from devices such as the iPad, Kindle and even mobile phones to read your content in a nice and portable way.
So we’re going to walk you through the process by working with Dudamobile. And, we’ll show you how you can implement this feature to your free web site using the IconoSites easy website maker, where anyone can build a website in minutes.
First, Create a Mobile Website for your IconoSite
1) Go to DudaMobile and on the main page, insert your Iconosites website URL. Then click on the ‘Make My Website Mobile’ button.
2) While Duda is working on converting your site into a mobile theme, a 4 step process is presented to you: Examining your website, Extracting navigation, colors and content, Building HTML and CSS and finally Testing your mobile site. See screenshot below.
3) When Duda is done you will then see a plain template in which a preview of it can be seen on the right. At this point, you’ll also be asked for your input. So click on ‘Start editing my site’ to see what other choices you have.
4) From this screen you can see that there’s a lot more theme options to choose from. Make sure you pick one that aligns with your business website. That’s because having the mobile version and the original site a bit offbeat might not engage your readers who are already familiar with your brand.
Overall, there’s a few options that you can use to help you narrow down this process: by color or by design. Take a moment to explore your choices. When you’re done choosing, click on Next to continue.
5) In this next screen you can click on one of the numbered points or the mobile preview itself to edit it’s elements.
From there, you’ll see that an element you’ve clicked on will be presented with more options. Change or add on the information you need. Click Done when you’re finished editing. Do this for the other elements you want to also edit as well. When you’re done, click on Next.
6) For this tutorial, we’re going to choose the Free plan version. By clicking on Choose Plan, it will display a bar of ad on top of your mobile site. Don’t worry, it is not intrusive and is tolerable.
After that, you’ll now see what your mobile site will look like.
7) The last thing you need to do on this site is sign up for the service by inserting your email address, a password and confirming it. After that, click on ‘Go Live Now’.
8 ) On the next page, you’ll see your mobile URL. You’re also one step away from redirecting your site to visitors on their mobile devices to Duda. To do that, click on ‘Next’.
9) Scroll down the page and look for the script code. Highlight everything inside that script box and click ‘Copy Code‘.
Go Back to Our Website Builder
10) Now log-in in your IconoSites website builder software and click on the left side tab that says Logo/Header/Footer.
11) Scroll to the section where it says Other Header Content and click on the HTML button.
12) From this screen paste the script code you got from DudaMobile after your content. Then click on Update to save your editing.
13) Lastly, click on Save to have your script saved.
You Now Have a Free Mobile Website
14) Now check your site through your phone or mobile device such as an iPad or Kindle. A great shortcut is to just head on over to GoMo which lets you see right away what your mobile viewers see. Here’s what this tutorial was able to produced below:
You can do much more with your DudaMobile account to tweak your mobile site to work for you. You already know how to tweak your iconosite using our site builder. Play around with it’s other settings to see how you can better make your visitor’s experience memorable!