Preview Your Google Site on Desktop and Mobile

Learning Objectives

By the end of this chapter, you'll be able to:

• Preview your Google Site on both desktop and mobile devices
• Switch between preview modes to check your site's appearance
• Spot and fix common display issues before publishing
• Use preview mode to ensure your site works well across different screen sizes

Introduction

Before your Google Site goes live, you need to see exactly what your visitors will experience. Preview mode shows you how your site appears on desktop computers and mobile devices, helping you catch problems before anyone else sees them.

This chapter covers everything you need to know about using Google Sites' preview feature. You'll learn how to switch between desktop and mobile views, what to look for when checking your site, and how to fix common issues that crop up.

Lessons

Lesson 1: Opening Preview Mode

Here's how to preview your Google Site:

Step 1: Open your Google Sites project in edit mode.

Step 2: Look for the "Preview" button in the top right corner of the screen.

Step 3: Click the Preview button. Your site will open in a new tab showing the desktop version.

Step 4: To switch to mobile view, click the phone icon in the preview toolbar at the top of the screen.

The preview opens in desktop mode by default. You can switch back and forth between desktop and mobile views as many times as you need.

Lesson 2: What to Check in Desktop Preview

When viewing your site in desktop mode, focus on these key areas:

Navigation: Check that your menu items are clearly visible and clickable. Make sure dropdown menus (if you have them) work properly.

Layout: Look for text that runs too wide or images that seem too small. Your content should fill the screen nicely without looking cramped or stretched.

Images and videos: Ensure media files display at the right size and don't appear pixelated or distorted.

Text readability: Check that your fonts are large enough and there's good contrast between text and background colours.

Lesson 3: What to Check in Mobile Preview

Mobile preview shows you how your site looks on phones and tablets. Pay attention to:

Touch targets: Buttons and links should be large enough to tap easily with a finger.

Text size: Make sure text is readable without zooming in. If it looks too small, you might need to adjust your font sizes.

Image scaling: Check that images resize properly and don't get cut off or appear too small.

Menu behaviour: See how your navigation menu appears on mobile. Google Sites typically converts desktop menus to mobile-friendly versions automatically.

Lesson 4: Common Issues and Quick Fixes

Here are problems you might spot in preview mode and how to fix them:

Text overlapping images: Go back to edit mode and adjust the text box size or image placement.

Images too large on mobile: Resize images in edit mode or choose a different layout option.

Menu items hard to read: Change your colour scheme or adjust the header settings.

Content feels cramped: Add more spacing between sections or choose a different page layout.

Lesson 5: Exiting Preview Mode

When you're done checking your site:

Step 1: Click the X button in the preview toolbar to close the preview.

Step 2: You'll return to edit mode where you can make any necessary changes.

Step 3: After making changes, preview again to check your fixes worked.

Always preview your site after making significant changes. This habit helps you catch issues early when they're easier to fix.

Practice

Open your current Google Sites project and follow these steps:

1. Click the Preview button to open desktop preview mode
2. Scroll through your entire site, checking each page
3. Switch to mobile preview and scroll through again
4. Make a note of any issues you spot
5. Exit preview mode and fix one issue you found
6. Preview again to confirm your fix worked

If you don't have a Google Sites project yet, create a simple test site with a few pages to practice with.

FAQs

How accurate are the preview modes?
The preview modes give you a good idea of how your site will look, but they're not perfect. For the most accurate view, test your published site on real devices when possible.

Can I edit my site while in preview mode?
No, you can't make changes in preview mode. You need to exit preview, make your edits, then preview again to see the results.

Why does my site look different in preview than in edit mode?
Edit mode shows you the building blocks of your site, while preview shows the finished result. Some elements like navigation menus change appearance between edit and preview modes.

Do I need to preview every time I make a change?
You don't need to preview minor changes like fixing typos, but it's good practice to preview after adding new content, changing layouts, or adjusting design elements.

Jargon Buster

Desktop Preview: Shows how your site appears on computer screens with standard web browsers

Mobile Preview: Displays your site as it would look on smartphones and tablets

Responsive Design: A website design approach that makes sites work well on different screen sizes automatically

Touch Targets: Buttons, links, and other clickable elements sized appropriately for finger tapping on mobile devices

Wrap-up

Preview mode is your safety net before publishing. Get into the habit of checking both desktop and mobile views regularly as you build your site. This simple step prevents most display problems and ensures your visitors have a smooth experience regardless of how they access your site.

Next, you'll learn how to publish your Google Site and make it live for the world to see.

Ready to take your Google Sites skills further? Join thousands of students mastering web design at https://www.pixelhaze.academy/membership