ホームページを作成する時に気をつける点として、訪問者に横スクロールさせると不愉快な思いをさせることになるので、当時普及していたモニターの解像度を考慮して800px以下に抑えるというのがセオリーだったと記憶しています。その後、高解像度のモニターが普及するにつれ拡大されて、現在Yahoo!などは950px程度あるようです。また以前はインターネットをする端末はパソコンもしくは携帯（フィーチャーフォン）だったけど、携帯サイトを用意しているのはショッピングサイトなどビジネス系がほとんどでした。当時はインターネットをする携帯所有者側で画像を表示させない設定をするとか工夫してPCサイトを見ていたような気がします。でもスマートフォンが普及している現在、インターネットをする端末の半分くらいはスマートフォンが占めるほど影響力が増してきました。だから検索サイトのGoogleでもWebmasterに対してモバイルフレンドリーであるかを検索順位に反映させると発表しました。でもスマートフォン用のサイトを用意する必要はありません。アクセスしてきた端末の画面サイズによってCSS（スタイルシート）を振り分けることで既存のサイト（HTML）を複数のデザインで表現し対応できるのでここに記しておきます。

<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" media="all" type="text/css" href="default.css" />
<link rel="stylesheet" media="all" type="text/css" href="tablet.css" />
<link rel="stylesheet" media="all" type="text/css" href="smart.css" />

HTMLヘッダーのメタ要素にViewportを設定。下三行は外部CSS（スタイルシート）へのリンクです。※ファイル名は任意で。外部CSSファイル数も好きなだけ設定できます。以下、外部CSSファイルの記述例です。こうすることでこのHTMLファイルが読み込まれると端末の画面幅に応じて3種類のCSSから選択されたデザインがブラウザに表示されます。

default.css

@media screen and (min-width: 961px){
img{
 max-width: 100%;
 height: auto;
 width /***/:auto;　
}
#container{
 width:100%;
}

ここに任意のスタイルを記入。

}

PCサイト用。画面の横幅961px以上。

tablet.css

@media screen and (min-width: 641px) and (max-width: 960px){
img{
 max-width: 100%;
 height: auto;
 width /***/:auto;　
}
#container{
 width:100%;
}

ここに任意のスタイルを記入。

}

タブレット用。画面の横幅641px-960px。

smart.css

@media screen and (max-width:640px){
img{
 max-width: 100%;
 height: auto;
 width /***/:auto;　
}
#container{
 width:100%;
}

ここに任意のスタイルを記入。

}

スマートフォン用。画面の横幅640pxまで。

モバイルフレンドリーかのテストはGoogleのサイトにあります。
モバイル フレンドリー テスト