🔥Get Awesome Google Sites Templates!
Google Sites is designed to look great on all screen sizes, including mobile, tablet, laptop and desktop. Learn about the principles of responsive design for your Google website. Create an amazing view for mobile to boost conversions.
Google Sites websites operate on a series of common breakpoints for desktop, tablet and mobile. Let's focus on how to design your website mobile first according to this behavior.
The Google Sites responsive system is comprised of these 12 columns with gutters and margins. There are 3 modes in the custom theme spacing which modify these settings:
Default
Wide
Full
There are also 3 modifications for the gutters and margins minimum dimensions:
Compact
Cozy
Comfortable
Therefore site creators have some freedom to play with.
Your standard 12 grid will be reduced to 4 when minimized to mobile view. Therefore content will be broken and stacked to account for this. The biggest impact of this adjustment is to webpage spacing or whitespace. Here are some tips for improving your Google Site for viewing on a smartphone:
Consider readable font sizes: There is some automatic adjustment for font size depending on browser viewer width, also called minimum width, but that won't cover extremes. This is especially important when designing for accessibility standards.
Preview constantly for accuracy: It's really easy to jump into preview mode on your site, so take advantage of that. You can confirm page layout when toggling between the different views.
Study how content blocks realign: When you develop a site for desktop, you might not realize the order that content will stack when switched to a cell phone or iPad. Pictures will appear above or below text boxes in a way that doesn't flow as your anticipate.
Be balanced when dealing with white space: The responsive engine of Google websites might misinterpret the gravity of your spacing blocks. You might need to compromise on your ideal design due to the simplicity with the platform.
Consider how images will be minimized: Your large panoramic images will look quite different on mobile. Crop and align your images appropriately.
The smaller screen sizes also change a few elements of the user experience:
Navigation will change to an hamburger menu. This slides out into view when clicked on.
You can only have a maximum of two elements side-by-side, like two small text boxes or small images.
Gadgets which are inserting into the page using embed code will scale by a percentage and this may cause scrollbars to appear. Plan for how content wraps to display in this smaller form factor. Make your embed code widget larger that you need for desktop viewing. You can hide scrollbars or not display hidden overflowed content with CSS.
There are two ways to make sure your website is set up correctly and ensures a seamless user experience. One way is to use a professionally designed responsive template which is already developed for consistency across screen sizes. The other way is to contact a Google Sites developer who specializes in responsive websites.