HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

レスポンシブWebは、PCやスマフォなどモバイル端末の見栄えを、1ソース(同一HTMLファイル)で最適化しようという最近注目の技術です。
つまり、PC用サイトと、スマフォ用サイトを別々に構築する方法がありますが、レスポンシブWebでは1ソースで管理し、CSSで見た目の最適化を図ろうということです。

海外サイトではよくみられますが、最近では日本のサイトでもみかけますね。
以下、参考までに、レスポンシブWebサイトをまとめたサイトです。
http://mediaqueri.es/

このレスポンシブWebを作成するのに有効なJSライブラリ「mediaqueries.js」と「Respond.js」のお話です。

スマホサイト制作において役に立ちそうなツールを見つけたのでご紹介します。

クロスブラウザテスト、携帯シミュレータ | Adobe Edge Inspect

Webサイト制作のコストとして、クロスブラウジングというものがあります。
作成したWebサイトがいかなるOS、ブラウザ上でも同等のコンテンツを提供できているか保障しなければなりません。(厳密に全く同じように見えているのかという事ではなく、同等のコンテンツ内容を提供できているかというのがポイント。)

最近ではスマートフォンの普及が加速し、これらの端末でもきちんとWebが表示するように制作時には設計する必要があります。スマホの種類も日々急速に増え続けているので、その確認作業コストは増加傾向にあります。

iPhoneやAndroidのブラウザでサイトにアクセスした際に、ファーストビューでヘッダ部分にページURLなどの情報を持ったアドレスバーが表示されたままになります。

address_bar
上の写真のようにヘッダにアドレスが表示された状態になっていますね。
この状態からフリックして画面を下にスクロールすると、アドレスバーは消えます。

スマートフォンは画面サイズが小さく、その限られたスペースにアドレスバーが居座るのを嫌うユーザもいます。特にデザイナは、ファーストビューでそのサイトデザインとは関係のないアドレスバーがヘッダに表示されるのはあまり気分が良くないようです。

Monthly Archives

Search