Skip to main content
Brand User

647 Messages

 • 

44K Points

Wed, Sep 26, 2018 10:38 PM

WebsiteBuilder: Editing the Mobile Site

Optimizing your site to be mobile friendly is crucial nowadays. Over 50% of all internet users are browsing on some type of mobile device. These screens are smaller and tend to have more limited functionality, so you need to edit your site to make the easiest possible experience for your site visitors. It is all about making a bigger impact with a smaller space. 

That first section of your site that is visible on a mobile device is the place to put your most important information. This includes company name and logo, a smaller navigation menu, contact information, call to action, or a picture. 

In Website Builder, there is a part of the builder specifically designed to help optimize your mobile site. In the builder, in the bar at the top of the page, there is an icon that looks like a mobile device. Click that to access the mobile editor:




It is suggested to edit the mobile AS YOU GO. Make a few changes in the desktop builder, then switch to mobile and fix it there as well. Our system will create the mobile site based off of what you build for the desktop, but it might not place all elements in your desired order. You will need to check every page and make sure the elements are displaying in the proper order as you go. This will save you a lot of time and headache later. 

There are many things to do in the desktop version to make the content display in the mobile site better. 

  1. Edit your text immediately. Add the textbox element, type or paste your text content, then switch to mobile and turn on "Custom Style in Mobile"



  2. Edit your font, size, color, and alignment under Style > Custom Style.




  3. Remove "Dead Space" in text boxes. This is space at the end of your text taken up with empty lines. Just click on the very end of your text and use the Delete button on your keyboard. 


  4. Don't use "Enter" to create space in text boxes if you want to add a picture or element in the middle. This will not translate properly to mobile. Instead, create two separate text boxes. The same thing applies to Titles and Paragraphs. 


  5. Use settings such as background color with elements whenever possible, instead of layering colored squares under elements. This also does not translate well to mobile. 
    Just click the element, then click More and look for this icon:



    You could, alternately, use a "box" container element if you need to house multiple elements over one background color.
    If you need to edit the background color in mobile only, you can.

  6. Change images to the layout "Fit". This will help them not cut off in mobile, because they will fit the image the best it can in the space provided. 
    Just click on the image, click Advanced > Settings and click on the Drop Down Menu for the layout. Choose "Fit"




  7. Elements in the mobile version are stuck in the section they are placed in. You cannot, for example, move something from the bottom of the page to the top, two sections above.  To move it that much, you will need to change the section it is connected to in the main site.


----------------------------------------------------------------------------


There are some things you will need to change from the desktop version to the mobile:

       1. The navigation menu. If you only have 2-3 pages, you can   get away with having a navigation menu with buttons for each page. More than that, you'll want to have one button that expands your menu. This goes back to utilizing that space on the site the best you can. Navigation menus for a lot of pages will take up too much room.
In the mobile editor, click on the navigation menu, click Advanced, and change the menu type to "Menu Button"





       2. If you add a Photo Gallery, you will want to change the settings for that gallery specifically in the mobile. It will show all images in a single column, which is a lot for your visitors to scroll through. You'll want to click on the gallery, click Advanced, turn off "Show On All Pages", set it to only show one or two images at once, and set Gallery Transitions.




       3. If large text is cut off or not displaying properly on the mobile site, you'll want to follow the instructions in this article.


       4. If the background you place in your desktop site does not work as well in the mobile, you can change that as well, by clicking on the background, clicking on Style, and turn "Mobile Custom Style" on. You can remove images and set the color from here.





----------------------------------------------------------------------------

If some elements don't work in mobile as well as they do on the main site, you can hide them in the mobile view. To do this, simply click the element in question, and click the "Hide In Mobile" icon.
If you decide you want to show that element again, simply click "Settings" on the left, and find it under "Hidden Elements", hover over it with your mouse, and click the icon to un-hide it.



----------------------------------------------------------------------------

To move elements within the mobile editor, click and drag the element. You will see a black cursor indicating where the element will be placed.



----------------------------------------------------------------------------

Lastly, people browsing on mobile tend to be less patient, so they want things faster. It is recommended to create links your visitors can click on that will make calling you, emailing you, or finding you as easy as possible. To do this:

1. Create a link to your phone number. You can either use an icon (like a phone icon) or your phone number. Attach link and choose the Phone option. Type in your phone number and click OK. When people click on this, it will bring the number up, already dialed on their phone. They just have to click call!

2. Similarly, create a link for your email.


3. If you have a map on your site, please follow these instructions:
Type your address into Google Maps (separate from the builder) and click Share. Copy the link they provide. Attach the link to the map on your site. That way, people can click on the map and it will offer directions.
----------------------------------------------------------------------------
One last tip: On the desktop site, build within the two vertical guidelines. This area is the most commonly visible space, regardless of what device is being used, so for people using tablets, this will allow them to see all of your content.
(Thank you Les6064 for bringing this up)
----------------------------------------------------------------------------

These are all tips and suggestions for improving the look and functionality of your mobile site. Use what works for your site and your business!

Youtube Tutorials:

Moving Elements in Mobile:



Editing Text in Mobile:



Editing Images for Mobile:



Editing Header in Mobile:

 

Responses

3 Messages

 • 

262 Points

2 years ago

I am almost understanding this, it is clearer than any other description I have yet seen, but I had to peruse (it is late) so I will study this in the morning when I get back.
Thank you So Much!
Jeff
(PS I feel like I won a lotto or something, I am starting to understand)

16 Messages

 • 

982 Points

2 years ago

So many great tips here ... thank you!

43 Messages

 • 

2.8K Points

2 years ago

Really great “mini-manual” for mobile editing! I had to find out most of these points by trial and error but it is wonderful reading here that I am actually on the right track!
Thanks for the clear and concise lesson!

5 Messages

 • 

430 Points

2 years ago

If i hide an element in mobile view, how do I add something else in the spot?
Brand User

634 Messages

 • 

50.3K Points

Hello Lyndsey,

You cannot just add an element into a spot in mobile. You would need to add the element in the desktop site for it to show in mobile.

34 Messages

 • 

8.9K Points

Elyzabeth:

The Youtube tutorials are what everyone has been waiting for. If you are making more
to do with other aspects of the new sitebuilder that would be great. I think we are all right now finding out for our selves all about sitebuilder. Thank you.
Brand User

634 Messages

 • 

50.3K Points

Hello Les6064

Yes, we are very excited to be able to offer videos and we are definitely working on making more.
You can see all videos on our Youtube channel:

https://www.youtube.com/user/homesteadwebsites/videos

5 Messages

 • 

392 Points

a year ago

It appears that there is no way to edit my mobile site except by creating it all over again at Duda.  Seriously?  I must be missing something.
Brand User

2.2K Messages

 • 

54.3K Points

a year ago

Hello Susan,

The instructions in thes article is in relation to WebsiteBuilder. Sitebuilder plus website will need to be edited through Duda, I do see the websites on your account are connected to duda already so log in here to edit them. 

5 Messages

 • 

392 Points

a year ago

I didn't worry about my "mobile site" until now.  I have changed my website significantly since 2013 so the adjustments needed at Duda are significant and I'm not sure if they're even realistic.  What is Website Builder?  It seems like Homestead is way behind the times.  Might be time to move on. 

Brand User

2.2K Messages

 • 

54.3K Points

a year ago

Website Builder is our newest software that Homestead offers. It has modern templates, a mobile friendly aspect and an automatic SSL! I would definitely recommend checking it out as it will provide many benefits for your online presence. Here's some instructions to get started with a WebsiteBuilder site https://community.homestead.com/homestead/topics/how-do-i-create-a-new-site.

40 Messages

 • 

2.4K Points

a year ago

Hi not sure if this is right place to post but I'm commencing to do the new builder for making a mobile site. Can I point my domain for hearth-at-home.net to it when it's finished. Just want to be sure before I put too much work into it. Thanks
Brand User

2.2K Messages

 • 

54.3K Points

Hello OnlineLifestyle,

Yes, you will be able to use any existing domain that you already own with the new site. Once the site is complete you can connect the domain with these steps. 

4 Messages

 • 

210 Points

8 months ago

So, my search inquiry was "How do I delete my mobile app?" and that information isn't provided.  The app is virtually non-functional.  It does not update properly, quite frequently the edits I make directly on the duda app fail and need to be reentered, and I have people calling to order food that I haven't had on my menu for almost a full year because of weird archiving.

So how can I just delete the connection to the mobile app and not worry about optimizing?  I couldn't care less if it isn't optimized at this point since it is always optimized with incorrect information anyways and can't be edited quite frequently.  At least the desktop version has correct info.
Brand User

634 Messages

 • 

50.3K Points

Hello naterocketman,

I definitely understand. Unfortunately, Dudamobile as a company no longer offers mobile responsive sites, which is likely why it has stopped updating properly. I can absolutely disconnect Dudamobile from your account, but I do want to recommend that you still work on having a mobile friendly site. The builder you are using is our older builder, which unfortunately doesn't have a mobile builder itself. We do have a newer builder though, called Website Builder, that does offer a mobile friendly site in addition to your desktop. The mobile content is pulled directly from the desktop content and can be edited within the same builder.
If you want to use this builder, you can create a new site and rebuild it on your own. Otherwise, we can rebuild it for you. It would be a one-time fee of $150 and it would take 3-5 business days. Let me know if this is an option you would like to take.

4 Messages

 • 

210 Points

Yes, please disconnect the Duda app from my website.  I am transitioning to a new website.  No need to explore a new builder.
Brand User

2.2K Messages

 • 

54.3K Points

Hello naterocketman,

The website is disconnected from Duda. When you visit the site on a mobile device it looks just like the desktop version. 

25 Messages

 • 

784 Points

5 months ago

Websitebuilder. Is it possible to have the e-commerce store products in two column on the mobile site? On the desktop I have products in three columns which looks nice. In mobile it seems I only have the option to transition the products or have them all in one long column that customers might get tired of scrolling through. What other options do I have to display products in mobile? Thank you. https://www.foelberpottery.com/ 
Brand User

634 Messages

 • 

50.3K Points

Hello,

No there is not a way to have the products display any differently in mobile. The reason it is like this is to provide the customer the best user experience. On mobile screens, everything is smaller. If there was the ability to have multiple products next to each other, then it would be difficult to read, see pictures, or click on buttons for a specific product. I do understand that scrolling through products in one line is not ideal, but for mobile, it is the best option. Please just make sure you organize your products well with categories and your customers should not have many issues.

25 Messages

 • 

784 Points

Thank you.

54 Messages

 • 

1.1K Points

4 months ago

How do I get the mobile version of www.benefitssitedemo.com to display all pages?   It currently only displays the Main page.   
Brand User

2.2K Messages

 • 

54.3K Points

Hello,

The reason the site navigation menu does not show on the mobile site is because the one that is currently there is set to scroll with the page. If you disable this setting you will see the navigation menu appear on mobile. In order to have this menu show on the mobile site, you can either add a second navigation menu to the desktop site that does not have the scroll with page option turned on or turn off this setting on the current menu. If you do add a second menu you can have this disabled on the desktop site from being seen by turning off the option starts visible under size and position. 

54 Messages

 • 

1.1K Points

4 months ago

Ok, thanks.   How do you get the drop down menus to work in mobile?  
Brand User

2.2K Messages

 • 

54.3K Points

In mobile drop down menus will have a plus sign next to the parent page to expand the menu. 

54 Messages

 • 

1.1K Points

4 months ago

I saw that, but it wouldn't execute.  Is there any way to increase the sensitivity?   Also, the menu button on mobile is not sensitive enough, I have to touch it five or six times to get it to react.   Any solution to that?
Brand User

2.2K Messages

 • 

54.3K Points

I would need to take a closer look. What website is this on? 

54 Messages

 • 

1.1K Points

4 months ago

It's on www.benefitssitedemo.com.    I guess you can't increase the font size, I tried that.   It's very difficult to execute the drop down menu in the mobile.