EC studio EC studio デザインブログ

ウェブサイトは各ブラウザごとに1pxでもずれないよう!
というコーディングをおこなっているところも多いと思いますが、
これって結構大変作業ですよね。

古いブラウザだけのためにCSSをごにょごにょしたり
スクリプトを使ったり、かなりコストがかかる作業も…。
全部のブラウザで同じ見え方にする作業はとても面倒ですよね。

これに工数をかけるならもっとデザインとか色々な部分に
時間がかけられるのに!ということも実際ありますよね。

そこで、ターゲットブラウザを選定してもっと楽にコーディング
できないかと最近は様々な効率化アップの取り組みを考えています。

今回は弊社でターゲットブラウザを選定して、
実際に効率化をおこなった実例のお話をしたいと思います。

実例サイト「TweetMail」

今回「TweetMail」でターゲットブラウザは、
メインのブラウザがFireFox、Google Chrome、
他にレイアウトが確認できるブラウザとしてInternetExplorer6,7,8、
Safari、Operaでチェックをおこないました。

TweetMailはTwetterを使いこなすWebリテラシーが高い人が使うであろう
という考えから、FireFox、Google Chromeをメインにしています。

また、弊社のアクセス解析データを確認したところ、
FireFoxユーザーが全体で最も多く、
InternetExplorerユーザーが全体の21.90%だったこともあります。

制作コストを削減した箇所

「TweetMail」のトップページの概要を説明している箇所ですが、
この箇所の角丸で制作コスト削減をおこなっています。

tweetmail-index

今まで対応していた方法なら角丸を作成するときに
jqueryを使ったり、画像を多用して<div>を増やして囲んだりと
角丸に対応するのに時間がかかっていました。

しかし、今回CSS3のborder-radiusで角丸を対応することにより
CSSで簡単に実装することができました。

InternetExplorerなどでは角丸を表現することはできませんが、
コンテンツの情報に違いはないので問題なく閲覧者に情報を伝えられます。

他にもCSS2.1の隣接兄弟セレクタなどもサイトに取り入れたりするようにしています。
InternetExplorer6などで表示されないですが、コンテンツの情報に影響はありません。

これからはCSS3など、まだすべてのブラウザに対応していないものでも、
ターゲットブラウザを選定して積極的に使っていき、
制作コストの削減をおこなって、効率化を目指してはいかがでしょうか。

デザインブログの「[CSS3小ネタ]CSS3でシマシマの表をつくる – :nth-child
などもぜひ参照してください。


関連した記事:
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.