スマートフォンサイトをコーディングする時の注意など

はてさて、無事に転職しまして、こういうことをやるようになりました。
今までも知識レベルでは持ってたつもりですが、いざやるのはまた勝手が違うわけで。
まだ全然周りも見えてないですが、個人的に気付いた点などをメモ。

はじめに

対象端末とか

主にiPhoneとAndroid端末向けにコーディングするようです。
iPadはまた別？というわけで、画面サイズも小さめのいわゆる「スマートフォン」が相手です。

つまり

利用環境がある程度絞れている＋新しいもの＝Html5やCss3を惜しみなく使えるということ。

JavaScriptについては今回は割愛。

コーディングルール

viewport

お約束の。

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

そのほか、

<meta name="format-detection" content="telephone=no">

数字リンクで電話がかかる鬱陶しいのを制御するやつ。

リキッドレイアウト

個人的なすごく極端な理解としては、iPhoneで見ても、横幅1900pxくらいのブラウザで見ても、「綺麗に見える」こと。
背景画像が画面端までrepeatされてたり、画像はcenterに寄ってたり。
不自然なインデントでテキストが開始されてたりしないとか。

コーディングする前に、広い画面で見た場合にどういう風に見えるか？を意識してからHtmlを組むのが良いかなぁーと。

その他気にする

縦方向に関しては、固定のpxで指定するシーンは多々あって、PCサイトと同じく特に意識しない。

margin: 20px auto;
padding-top: 5px;
height: 44px;

ただ横方向に関しては少し慎重になる必要があって、

width: 100%;
padding-left: 10px; /* はみ出る */

こういうのに注意。

画像関連

スマートフォンであろうともちろん画像は表示するわけで。

形式やサイズ

言わずもがな容量重視。
単純な画像ならgif、たいていはpng、写真はjpgも検討。
ファイルは圧縮したり減色したり、できる限りの策を。

Retinaとか対応

画像は1/2サイズで指定すると、後々幸せになれます。
元画像が320px*200pxなら、以下のように。

<div class="banner">
    <a href="hoge.html">
        <img src="banner.png" alt="hogehoge" width="160" height="100" />
        <!--↑サイズは半分を指定-->
    </a>
</div>
<200b>||<


>|css|
.banner{
    text-align: center;
}

そうすることで、低解像度の端末でも高解像度の端末でも最適な表示になります。
そしてこれだけで綺麗にセンター寄り。

低解像度の端末に対して倍サイズの画像を配信するってのはどうやねんっていうのはあるやろうけど・・。

Cssスプライト

これさえやればOKみたいな勢いで使われてます。
imgタグで呼び込む画像ファイル＝リクエスト数を減らすために、1つの画像ファイルにまとめて、それをずらしながら使いまわそうというやつ。

background: #ffffff url(splite.png) no-repeat scroll 40px 10px;
background-size: **px **px; /* スプライト画像の半分の縦横サイズ */

半分サイズを指定するのは、↑で書いたのと同じ理由から。
後は背景として指定している要素自身のheightやwidthで見える範囲を絞る。

スプライトのだめなところ

~~このように基本的にbackgroundで指定するので、~~

~~imgタグにできない＝altがつけれない＝SEO的にもいろいろよろしくない。~~
スプライト画像作るのがすごく面倒くさい。
no-repeatなものにしか使えない。

imgタグでも親要素でoverflow: hiddenとかすればできるので、差し替えの多そうなバナー系や、背景画像以外をスプライトで固めちゃうってのが良いのかな？

デザイン関連

画像を使いたくないならCss3を使えば良いじゃない！
そこで悩むのが、こんなんどうやって実現するんや・・っていうやつ。

使えそうなコたち

:beforeと:after
position: absolute
その他Css3
- background: gradient
- text-shadow
- box-shadow

ちょっとそれっぽい見出しのサンプル

Html

<div class="title">
    <h2 class="title1">Fantastic Experience Ever!!</h2>
</div><200b>

Css

/* prefixはとても適当 */
.title{
    position: relative;
}

.title1{
    background: background: #feffff;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(35%,#ddf1f9), color-stop(100%,#dbdbff)), -webkit-linear-gradient(top,  #feffff 0%,#ddf1f9 35%,#dbdbff 100%);
    box-shadow: 0 1px 3px #000;
    color: #180e40;
    font-size: 1.3em;
    height: 44px;
    line-height: 44px;
    margin: 10px auto;
    text-align: center;
    text-shadow: 1px 1px 2px #fff;
}

.title1:before{
    background: #180e40;
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    top: 4px;
    width: 100%;
}

.title1:after{
    background: #180e40;
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    bottom: 4px;
    width: 100%;
}<200b>

jsfiddleとかでどうぞ。

悩みどころ

上記のサンプルはbeforeやらを使って実現できてますが、中にはもっと複雑なやつもあり・・。
それを実現するために、Html文書として意味のない空のdivやらを、画像を表示するために用意しないといけないシーンがあったり。

これは自分の力量不足だったりもするのですが、あちこちのサイトでも割と横行してますよね。
ページを高速化するためにスプライトにしちゃって、本来文書として意味のあるマークアップができないってのも問題だと思ったりも。

よく見たのはh2とかの見出しにあたるであろう部分が、空divでbackground画像で済まされてたり。
サイドを画像で挟む見出しのデザインで、なんでもかんでも空divを組み合わせて力技で実現されてたり。

じゃあ遅いページでも良いのかと言われるとなんとも言えず・・。
落とし所は一体どこなんでしょう。

読み込みページサイズの指標かなんか設けて、容量に余裕があれば・・とか？

とりあえず今の時点は書けることはこんなもの。