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.
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.
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.
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.
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.