HELP! My Google Site looks AWFUL on mobile

Подписаться 4,6 тыс.

Просмотров 12 тыс.

50% 1

Hey There, I saw this post in a reddit titled, "HELP! My Google Site looks AWFUL on mobile". If you're having an issue with your Google Site layout it's important to under and use wireframes to layout your page design. The key takeaway from this video is that everything to the left in a section is stacked on top of the right side of the section.
__________
UNDERSTANDING WIREFRAMES
1. Unbounce - unbounce.com/landing-page-des...
2. Paypal - developer.paypal.com/home
VIEW MY GOOGLE SITE WIREFRAME
VIEW IT: sites.google.com/view/templat...
___________
☕Please buy me a coffee :)
bit.ly/3kZwf5Y
💖SHOP MY TEMPLATES
MY SHOP - bit.ly/3QEBSUA
MY ETSY STORE: etsy.me/3La6b2I
✨GET THE FREEBIE FONT & COLOR GUIDE
shedesignsthings.thrivecart.c...
💫GOOGLE SITES COURSES
www.shedesignsthings.com/for-...
🌟GET THE GUIDED SEO WORKBOOK
My Shop - bit.ly/3YDs7q2
Etsy Store - etsy.me/3ZRHqwk
🌟ASK A QUESTION - Want to know how it's created? Need advice on a design project? Just want to say hello? Ask your questions anonymously.
forms.gle/kDfXMTcHuQrPZnri9
SUBMIT YOUR SITE
forms.gle/C16BYMugF6CaJ6Gr5
__________
SEGMENTS
00:00 - Intro
00:30 - The Question: My Google Site Looks Awful on mobile
01:23 - What's possibly happening
01:42 - Example of a responsive Google Site
02:01 - Mobile view example
02:37 - Understand Page Layout and Wireframe
06:38 - Using Wireframes
07:56 - The Hierarchy of Page Layouts
11:30 - Page Layout in Google Site
__________
ABOUT ME
Hey! I'm Chelsea! Owner of She Designs Things. I'm a professional photographer, and web and logo designer. If you're ready to learn something cool, or you just want to get started being a little more creative in this digital world, I am happy to help.
__________
RESOURCES & LINKS
Design Stripe: designstripe.com/
Free Google Site SEO Guide: bit.ly/3NR4hDB
Create a Free website: sites.google.com/
Music: from Tunetank.com
__________
SOCIAL MEDIA
Say Hi!
Link-In-Bio: bit.ly/3TJqs1l
Website: shedesignsthings.com
Instagram: / shedesignsthingsco
Photography Website: thebokehlens.com
#responsivewebsite #fixmywebsite #mobilefirstdesign #freewebsitebuilder #GoogleSitesTemplateTutorial #shedesignsthings #googlesites

Наука

Опубликовано:

1 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 31

@EddieQuezada 2 года назад

Great explanation! I'm pretty familiar with the basics of Google Sites and I learned a thing or two from this video

@monikabobcik4590 Год назад

The biggest AHA moment for me! VERY helpful! Thanks!

@andreakinniard1894 Год назад

Hi! I understand what you are saying in this video but it still doesn't help me, my contact me page doesn't show the whole form on a mobile device any suggestions? I am a complete newbie and have been working for weeks on my webpage.

@shedesignsthings Год назад

Usually its a form sizing issue. If you are using a google form - make sure you drag the bottom form handle down to go past the part that says" This form was made using Google Forms"

@andreakinniard1894 Год назад

@@shedesignsthings I want to use an elfsite app contact form it works so much easier. I did get the google form to work.

@robertgregg8313 2 года назад

I never noticed that. Thanks for the info. How are you putting CANVA frames for images in your Google Site Template?

@shedesignsthings 2 года назад

I upload my images into Canva and export them inside the frame with a transparent background. You can also do this in Photoshop.

@lac6482 27 дней назад

Thank you very helpful!

@mf_rat 11 месяцев назад

Where's the wireframe on the google sites? I can't see those words that are on the right.

@mf_rat 11 месяцев назад

I don't see a wireframe thingy in the google sites. I can't even get a header image to scale with the screen size.

@shedesignsthings 10 месяцев назад

Please submit this to my form so that I can see what you mean.

@richabakshi2249 4 месяца назад

Thankyou so much i was struggling on this, but my site is very slow

@alant.richardson8521 Год назад

There’s a workaround to that. I attached a text box under a photo box to ensure that the image:text flows properly…

@shedesignsthings Год назад

Good to know!

@Entering.happiness 6 месяцев назад

Hi! I’m trying to figure out how to make the mobile view look the same as the desktop view. I hate how it stacks on mobile. Is there a way to keep 4 products side by side instead of having every product stacked on top of each other. Example.(I’d love to be able to see 8 or more products at once, then scroll down to see another 8 products.) Thank you

@shedesignsthings 6 месяцев назад

Websites are designed using a grid. Google sites have a grid of 12 columns. This means on mobile you can have either 4 columns or 2 columns. This also means you would need to add all 8 products on one row to force it to resize in mobile. There is no other alternative other than custom code

@Entering.happiness 6 месяцев назад

So I have five columns (rows of 4) with 4 products on each column on my desktop view. But my mobile view only shows me every product on a different column(one product over another product over another product). Are you saying there’s a possibility I could get four products next to each other and then scroll down for another for products? If so, that would be a lot better than this.

@shedesignsthings 6 месяцев назад

@@Entering.happiness yep! You’ll need to to resize the products to be super small (8 on a row). I have a video on flexbox in google sites

@backyardreflectionsofwtn Год назад

I found this video while searching my issue with my website. I'm having issues with the alignment of my words on the mobile side of the website.

@shedesignsthings Год назад

It's likely the spacing might be too small. Feel free to send me an example of your issue. :)

@flaviopessato8072 Год назад

My main problem is playing media in the same page, especially audio, because this is always opened in a different page.

@shedesignsthings Год назад

If you're playing audio - are you using spotify or something else?

@flaviopessato8072 Год назад

@@shedesignsthings I embed audio from Drive using the relevant URL

@flaviopessato8072 Год назад

And problems I have are always when the audio is played on mobile

@shedesignsthings Год назад

@@flaviopessato8072 Can you share the link to the webpage with me so that I can take a look.

@tutomarketing 2 года назад

this video tutorial is very interesting, I never paid attention to the mobile part of google sites when I design it. Thanks to you, I'll be careful now. Thank you 👍

@shedesignsthings 2 года назад

vous êtes les bienvenus 💕