Important update: In February 2015, the Mobile Editor has been turned off and replaced with the Responsive Studio. It is no longer supported for new websites. For users who have activated this feature in the past, you’ll be able to continue using it without any interruption. Your websites won’t be affected.
Web designers, bloggers and webmasters-to-be rejoice! Creating a responsive website has never been easier. You may have noticed that our favorite website builders are engaged in a real arms race in terms of mobile offerings: Jimdo releases a free app for iOS, uCoz adds responsive templates, Squarespace introduces the Mobile Information Bar, Wix acquires Appixia and so on. It’s a mobile world.
Today we’re inviting you to test-drive an innovative Mobile Editor offered by Webydo website builder which also jumps on the mobile bandwagon. Webydo is no stranger to introducing top-notch features and guarantees that your website will look exactly as planned across different devices and browsers. Let’s avail all the promised advantages of the Mobile Editor ourselves ;).
Welcome to Mobile View
Once you have finished designing your desktop website, switch to the inbuilt Mobile Editor in your DMS (design management system). It will automatically gather the content from your website, reorganize it and create a preparatory mobile-friendly version of your site. This version can be fine tuned manually with pixel accuracy thanks to the various customization options. Making changes to the optimized version of your site won’t affect your desktop design.
To make general changes in the design and functionality use the options menu on the left. To work on the specific elements, use the What-You-Is-What-You-Get editor made in the form of a mobile phone mock-up.
In the ‘Select Layout’ section you can choose between a variety of customizable user interfaces. Once you have chosen the desired layout, go to the ‘Add Mobile Features’ section to provide your site visitors with a faster contact experience thanks to the handy shortcut buttons: Click-to-Call, Address, Email and Online Scheduling. These features will be added to the header of your mobile site.
To change the menu order open the ‘Edit Your Site’s Menu’ section and use dragging gestures to move categories to the desired new location. You can replace the default icons, rename the titles as well as reset your recent changes.
To upload a logotype or any other piece of content for your mobile view, go to the ‘Add Content’ section. It took me about 30 seconds to replace the default logo with my own image (see the screenshot).
Now let’s explore the ‘Link to Social Networks’ section. Simply enter your links into the related boxes. The social media buttons will appear in your footer.
To change the overall design settings of your mobile version go to the ‘Modify Design Colors’ section, while the ‘Manage Your Site Settings’ section will allow you to set font family and size as well as add a link to the desktop version of your site.
If you have coding knowledge and want to customize your mobile version beyond the basic adjustments offered in the WYSIWYG editor, you may want to add CSS code using the CSS editor.
It took me around 30 minutes to create a test website and optimize it for mobile viewing using the Webydo Mobile Editor. I’ve checked the site performance and look using my smartphone (see screenshot below).
To postpone publishing your site’s mobile version simply disable the respective checkbox. In this case your mobile version will be cancelled and your visitors will see the desktop version of your site when viewing it on mobile devices.