Back to WebStarts Blog

How To Create A Responsive Design Using WebStarts

responsive design
A responsive website is one that changes layout depending on the device where the site is being viewed. The purpose of responsive design is to give your site visitors the best possible viewing experience regardless of the amount of screen space they have.

With more people viewing websites on the smaller screens of a mobile phone having a responsive website has become even more popular than ever. Many people opt for responsive design on a mobile device because it let's you put the most important parts of your website directly in front of your site visitor. For example, if your call to action is a button in the middle of the screen on a desktop, that may not seem so large on a mobile device. In that case you could use a responsive design to create a view on a mobile phone, that focuses on making that button easy to see and click.

To create a responsive design with WebStarts first log in to your account and choose to edit a page. This will bring you to the page editor view. While in the page editor view you'll notice two icons in the top right. One is an icon that represents your desktop view and the other represents the mobile device view.

When you click on the mobile view the page editor will change to display your working space in the format of a mobile device. Your left sidebar will be updated to reflect the tools you'll need to create a mobile version of your website. Keep in mind when creating a responsive design you're not creating a second website but rather a version of your original website recalculated and optimized to be displayed on mobile. For that reason if you'd like to add content and other elements to your site, you must do so in the desktop view.

After adding elements to your page in the desktop view they will be available under the "Hidden" icon on the left sidebar. When you click on that icon you'll see a list of elements that belong to your desktop view but are not displayed in your mobile view. To display those elements in your mobile view click on the "Eye" icon. Now that the element is available in the editor you can drag and drop it where you'd like it to appear.

When you're happy with your layout and ready to go live with your responsive design be sure to click on the settings icon and toggle the switch to "Display Mobile View". Lastly, be sure to look at your responsive design on your mobile device. This will give you a sense for what your site visitors will experience.

0