ウェブサイトは各ブラウザごとに1pxでもずれないよう！
というコーディングをおこなっているところも多いと思いますが、
これって結構大変作業ですよね。
古いブラウザだけのためにCSSをごにょごにょしたり
スクリプトを使ったり、かなりコストがかかる作業も…。
全部のブラウザで同じ見え方にする作業はとても面倒ですよね。
これに工数をかけるならもっとデザインとか色々な部分に
時間がかけられるのに！ということも実際ありますよね。
そこで、ターゲットブラウザを選定してもっと楽にコーディング
できないかと最近は様々な効率化アップの取り組みを考えています。
今回は弊社でターゲットブラウザを選定して、
実際に効率化をおこなった実例のお話をしたいと思います。
実例サイト「TweetMail」
今回「TweetMail」でターゲットブラウザは、
メインのブラウザがFireFox、Google Chrome、
他にレイアウトが確認できるブラウザとしてInternetExplorer6,7,8、
Safari、Operaでチェックをおこないました。
TweetMailはTwetterを使いこなすWebリテラシーが高い人が使うであろう
という考えから、FireFox、Google Chromeをメインにしています。
また、弊社のアクセス解析データを確認したところ、
FireFoxユーザーが全体で最も多く、
InternetExplorerユーザーが全体の21.90%だったこともあります。
制作コストを削減した箇所
「TweetMail」のトップページの概要を説明している箇所ですが、
この箇所の角丸で制作コスト削減をおこなっています。
今まで対応していた方法なら角丸を作成するときに
jqueryを使ったり、画像を多用して<div>を増やして囲んだりと
角丸に対応するのに時間がかかっていました。
しかし、今回CSS3のborder-radiusで角丸を対応することにより
CSSで簡単に実装することができました。
InternetExplorerなどでは角丸を表現することはできませんが、
コンテンツの情報に違いはないので問題なく閲覧者に情報を伝えられます。
他にもCSS2.1の隣接兄弟セレクタなどもサイトに取り入れたりするようにしています。
InternetExplorer6などで表示されないですが、コンテンツの情報に影響はありません。
これからはCSS3など、まだすべてのブラウザに対応していないものでも、
ターゲットブラウザを選定して積極的に使っていき、
制作コストの削減をおこなって、効率化を目指してはいかがでしょうか。
デザインブログの「[CSS3小ネタ]CSS3でシマシマの表をつくる – :nth-child」
などもぜひ参照してください。
関連した記事：
この記事にTwitterでコメント■「iPhoneとツイッターで会社は儲かる」
ツイッター全社導入によるメリット・デメリット、導入して起きた効果、社内への落とし込み方、
iPhone とツイッター、iPhone 活用方法、
さらには、iPhone×ツイッター×Google Apps™によって起こる
クラウド上のコミュニケーション革命について詳細に解説します。
最終章にはGoogle 代表取締役社長 辻野氏との対談を収録。
「iPhoneとツイッターで会社は儲かる」
この記事へのコメント (0)
コメントはまだありません。
ページの先頭に戻る
コメントを投稿