Expression Web 4は、正式にcss3が登場する前に、サポートが終了しています。そのため、Expression Web 4にあらかじめ用意されているテンプレートは、異なる画面サイズでもWebサイトの内容を確認できるレスポンシブWebデザインに対応していません。現在では、タブレットやスマートフォンで、Webサイトを閲覧する層が一定数存在するため、あらたに、Webサイトを作成するためには、タブレットやスマートフォンユーザーを意識する必要があります。
表示されているWebサイトが、レスポンシブWebデザインに対応しているかはすぐに判別することができます。ブラウザの幅をマウスでドラッグして変更するだけです。対応していなければ、Webサイトがはみ出て見えなくなってしまいますが、対応していれば、デザインが変化し、幅の狭くなったブラウザにもきちんと表示されます。
特に、お出かけ情報や旅行記、飲食店紹介、電子書籍サイトの紹介など、出先で調べたい情報や出先の待ち時間の時間つぶしで利用されるWebサイトであれば、タブレットやスマートフォンへの対応は必須です。
逆に、パソコンに限定した情報であれば、タブレットやスマートフォンへの対応は、ほとんど必要ありません。しかし、後で対応する場合は、Webサイト全体を作り直すのと同じぐらいの手間が必要になるので、最初から、レスポンシブWebデザインに対応したテンプレートを使用した方が安全です。
テンプレートを作成する
「Expression Web 4」の機能を知る意味も含めて、レスポンシブデザインのダイナミックWEBテンプレートを作成しようと考えました。 作業の流れは以下のように進めていきます。
Expresson Web 4の付属テンプレートで、ローカルサイトを作成します
付属のテンプレートで作成されるファイル群を元に、修正して求めるテンプレートに変更しようと考えました。
ヘッダに、Html5,css3に対応させるためのポリフィルを構築します
Html5,css3で作成した、レスポンシブデザインのExpresson Web 4のダイナミックWebテンプレートを作成します。 そのために、ヘッダに、Html5,css3に対応していないブラウザのためのポリフィルを構築し、ビューポートを設定します。
フッタを修正する
テンプレートのフッタを修正します
レイアウト枠を設定する
ページをレスポンシブデザインに対応させるには、レイアウト枠の設計が重要です
ナビゲーションデザインを設定する
ページ内にナビゲーションをうまく設定すると、訪問者のサイト内の滞在時間が増え、複数のページを閲覧してくれる可能性が増加します。