レスポンシブ・ウェブデザインの概念で、私のサイトを、スマートフォンでも見やすいサイトに改造しました。レスポンシブ・ウェブとは見る側のメディアの特性(主にモニターの横幅のサイズ)に応じて、レイアウトや写真の大きさ、情報量を調整できるサイトの事です。
スマホで、PC向けに作られたサイトを見ると、やたら小さくて、拡大・縮小・スクロールを繰り返さないと見られないですよね。ですが、この改造をして、スマホでも、ほぼこの操作をしなくても見られるようにしました。
私は「ステンドグラス達風」という、いわゆるメイン・サイトとは別に、「ネットスクール達風」という無料ステンドグラス教室サイトを運営していますが、今回改造したのは、後者です。ステンドグラスを作る時、手元にスマホを置いて、サイトを見ながら作業するというシチュエーションが、これからどんどん増えていくと予想したからです。現に、弊サイトのアクセス解析を見ると、iphoneなどのスマホからアクセスしている方が10%を超えています。
レスポンシブ・ウェブデザインは、サイトを閲覧しているメディアに応じて、CSSを振り分ける技術で、HTMLファイルは1個(共通)で済むのが特徴です。ですが、専門的なことは割愛します。私の場合、未だにWindowsのメモ帳でタグ打ちしてサイトをこしらえているので、数百ページに及ぶサイトの改造は難儀でした。と言っても、サイト制作は最大の趣味なんですが。
で、出来上がったトップ画面が以下です。私は、Android2しかもっていないので,テストが不十分です。もし、なにか不具合をみつけましたら、是非教えてください。現在、分かっている問題点は、会員専用コンテンツ内の動画がAndroid2では見られないということです。これは現時点では原理上、簡単には治らないそうです。
ネットスクール達風 http://www.tappu.com/ns/index.html
にほんブログ村