responsive-design - Googleサイト内でレスポンシブデザインを使用する

Question

Googleサイトでレスポンシブデザインの原則を使用する方法はありますか。誰かがそれを試しましたか。サンプルサイトに案内していただけませんか。私はこのグーグルヘルプトピックを見ました、しかしそれからそれはおそらくもっぱらモバイルサイトについてです。

私の主な焦点は、主にモバイルサイトではなく、Web用に最適化された通常のWebサイトです。

あるいは、CSSを変更できるので、この場合はBloggerの方が適しています。

Answer 1

あなたのネガティブな印象は正しいと思います。レスポンシブデザインに期待する機能は実装されていません。

あなたの質問の鍵は、Googleサイトがビューポート宣言（head要素のメタビューポート）を使用しないということです。それがない場合、デバイスブラウザはあなたをレガシーデスクトップのみのウェブサイトとして扱います。彼らはあなたが完全に〜830pxを下回ると想定し、それに応じてページの最小幅を設定します。それは私にはレスポンシブデザインのようには聞こえません。

Googleサイトでは、独自のCSSまたはHTML HEADを作成できないため、よりレスポンシブなデザインを自分で実装することはできません。

公平を期すために、固定ページ幅を設定しないことを選択できます。また、「水平ナビゲーション」機能を使用している場合、ナビゲーションボタンは比較的狭いウィンドウでリフローします。後者は素晴らしいデザインではありませんが、少なくともそれは優雅に劣化しています。

[サイトの管理]->[一般]の下に[サイトを携帯電話に自動的に調整する]オプションがあります。しかし、多くの人はそれを使わない方が良いと提案しています:)。古いサイトで有効にして、ページをプレビューし、「モバイルでプレビュー」を選択してみました。少なくとも私の元のネットブック（幅800px）のFirefoxでは、応答しませんでした。800pxの画面を正しく使用するために拡張されませんでした。

余談ですが、行の折り返し（または行の欠如）は、私のサイトの既存の問題です。あなたはそれをテストしなかったために私にこれを非難することができます:)。ただし、これはGoogleサイトのWYSIWYGエディターの制限を示しています。この問題の原因となるフォーマットは表示、チェック、または除外されません。

Answer 2

モバイルはい、レスポンシブいいえ。

今日は Google サイトをいじっていましたが、サイトをモバイル フレンドリーにすることができます (私はここに来て始めなければなりませんでした!)。「空白のテンプレート」をいじってみました。

アクティブ化する必要があります（他の人が言及したように）：

オプション (歯車アイコン) > サイトの管理 > (モバイルまで下にスクロール) チェック.. 携帯電話用に自動的に調整します。 ええ、そのオプションを一番下に埋めましょう！

Google が 2015 年春に実装したモバイル「プッシュ」全体を考慮すると、新しく作成された Google サイトではデフォルトでオンになっているはずです。

そのオプションを選択するだけで、OK (基本) のモバイル サイトが作成されます。レスポンシブサイトではありません。私のiPhoneでは、デバイスに合わせて写真を正しく拡大縮小し、メインの水平メニューを「ハンバーガー」アイコン/メニューに切り替えます。ただし、デスクトップ ブラウザー ウィンドウを折りたたむと、応答性の高い結果が得られません。 https://sites.google.com/site/rwstws51/

テストとして、大きすぎる写真 (2.5 MB) をアップロードして、どうなるか確認してみました。Google PageSpeed Insights を介してサイトを実行すると、「写真の最適化」の警告が表示されなかったため、携帯電話とデスクトップ用に最適化された写真が提供されているようです。

基本的なテーマは、実際には「スキー」と呼ばれていると思います。「Legal Pad」テーマを試してみましたが、モバイルでは完全に機能しませんでした。ヘッダーとコンテンツ領域の背景画像が原因だと思います。

ドライブ、ドキュメント、Google+、webmastertools、分析など、Google の他の製品にすでに慣れている場合は、Google サイトが理想的です。編集時にこれらのタイプのアイテムを追加するためのリンクがあるためです。または、YouTube、ドライブ アイテムなどのサイト アクセスを簡単に設定できるため、コラボレーションのためのクイック サイトが必要です。

また、追加できる html は非常に限られています。スクリプト タグを追加しようとすると、保存しようとすると取り除かれます。繰り返しになりますが、用途に応じて、間違いなく他のオプションがあります。

Answer 3

レスポンシブな Google サイトを作成できるようになりました。これは、Google がこの機能を拡張してから、[サイトを管理] オプション ボタンの [サイトを携帯電話に合わせて自動的に調整する] オプションです。

オプションを見つけるには、[サイトの管理] > [一般] に移動します。一般設定ページの下部に、[サイトを携帯電話に自動的に調整する] というラジオ ボタンがあります。ラジオボタンにチェックを入れるだけで、機能が強化されました。

レスポンシブ Google サイトで作成したサンプル サイトを参照 www.jyotiprokashmusic.com