How to Make an Adaptive Design in Zoho Sites

10.03.21 09:38 AM Comment(s) By Desarae Veit

Sometimes you want to have your desktop site look different from your mobile website. In the case of Heartland Nanny Agency, The desktop font size on the homepage was too big for mobile. However, it looked GREAT on a computer. This is a good example of when to use adaptive design techniques to make two different views. In the tutorial below, I will show you how to do this in Zoho Sites. 

Tutorial of How to Make TWO Different Site Views

Overview

Step 1. Identify how and why you want to have a different design. 

Step 2. Create a design for your desktop computer. 

Step 3. Copy/Duplicate the design.

Step 4. Change the view settings.

Case Study: Heartland Nanny Agency


Challenge: We identified that the secondary header inside the homepage 

banner of HeartlandNannyAgency.com had a font-size that looked too big 

when viewing the website on a mobile phone. 


Solution: Create two designs. One for mobile and one for desktop.


Mobile screenshot of Heartland Nanny Agency's Homepage
Mobile Screenshot

Step 1. Identify how and why you want to have a different design. 

Write down your problem or send it to your IT people. 

Determine if the problem appears in only one place or multiple.


Our problem only occurred on the homepage.

Read More
Heartland Nanny Agency Desktop Screenshot of Homepage
Desktop Screenshot

Step 2. Create a design for your desktop computer. 

The site already had a nice design for desktop, so we kept it. 

That design is viewable in the screenshot.

View Website

Step 3. Copy the design

When editing text or images in Zoho Site a WYSIWYG editor appears (see the screenshot). Above and below any text is the option to copy and paste the element. The copy icon looks like two pages.

Paste

After copying the design. Click paste. This is located below in gray.

Edit

Make edits to improve the design for mobile. 

Step 4. Update the Visibility

WYSIWYG and Editor Options

To edit which designs are visible on mobile, tablet or desktop click the options icon located to the left of the trash icon. This is directly beneath the WYSIWYG editor in the dark gray section. 

Editor Options Overlay

Navigating to Visibility Settings

After selecting the option icon, a secondary floating editor tray will appear if it's not already present. The menu for this tray is icons on the left. Choose the eye icon. 

Choosing Visibility

Then you will see "Show on Device" and underneath that are three options as icons. The first option is a computer, the second is a table, the third is a phone. Select which one you would like the selected element to be visible on. 

Before / After

To the right you see screenshots of the visibility editor followed by the website. 


The first screenshot of the website is what the website looked like on mobile before hiding the desktop sized fonts.


The second screenshot of the website shows that we hid the subtitle "We are professionals" and made the H2 "We do Pre-Screening & Background Checks"  much smaller so that it takes up less space and is easier to read on a phone.

Paula Glancy Massages & Retreats
Paula Glancy Massages & Retreats
Paula Glancy Massages & Retreats
Share -