ちゃんと生きてます、生存報告。
近況
クライアントワークに日々の時間をとられたためトレースも一時中断してた。1か月でヒアリングからカンプ、コーディングまでを一人で終わらせるのは大変な労力が必要。
特にカンプ作りはphotoshopに慣れていないせいもあって難航。最初からコーディングしたほうが得意だなぁと思う。カンプ作り終わってからそれを元にコーディングを開始するが、モバイル版から作るとpc版に直すときにとても時間がかかった。慣れの問題。
写真の加工はそれほど苦にならなかったが、問題は画像の圧縮レベル。iphoneの解像度を考えるとkeyVisの写真は1920:*2200はほしいと思っていたのでwebpで圧縮して300kbくらいに収めるようにしていたけど、表示がおっそい。
妥協点探し
そこから妥協点探しの始まり。比べるとどうしても写真の粗さが目立ってしまうのだから、比べなきゃいいのに比べちゃう。
結局、1920*2200の解像度から1125*1500(4:5)の100kb以下になり、それでも重いので700*933の50kb以下になった。
サムネイル画像に関してはもともと500*400(5:4)の30kbくらいだったのを、200*160の5kb以下にまですべて落とした。
以下箇条書き。
当初は1920*2200の画像をkeyVisに使っていて、webpにすれば300kbくらいになるので良しとしていたけど、 |
モバイルフレンドリーや速度を調べるとかなり重い。ので対策することに。 |
画像は軽いに越したことはないが、軽くすると荒くなるので成るべく圧縮したくない。 |
画像の比率を4:5に統一。サムネイルは5:4。 |
解像度も1125*1500、100kb以下に落としその後実機で調整しながら(といってもiphone se2)で700*933、50kb以下に落とす。 |
サムネイルも500*400から200*160、5kb以下に落とす。 |
pc表示の際は少し画像が荒れるが仕方ない。keyVisはbgi指定だったのでメディアクエリーにてpc用の背景に指定しなおした。 |
font awsomeやgooglee fontもモバイルだと遅くなるので撤去。svg画像拾ってきてボタンや受話器のマークを使う。 |
ipadがなかなかの曲者で、cssなどのレイアウトの乱れが目立つ。 |
特に文章を縦書きにするcssを使うときに、position:absoluteをかけると右方向に文字が流れる。 |
これを解消するには親相曽にしっかりrelativeを指定してあげることで解消される。 |
またpaddingもよくわからないかかり方をするので左右指定する際には注意すること。0でも良いと思う。特にbxslider |
mobile firstでコーディングを始めたが、あとからhtml追加したりする手間があるので、時間がかかる印象。 |
しかしモバイルが読み込むコード文字数は半分くらいに抑えられるのでチリツモだが大事に思われる。 |
早く慣れたいところ。 |
cssのクラス指定のやり方に統一感がない。 |
基本的にはクラス名は付けずに、id名、タグ名、タグ名などhtmlを弄る必要がない書き方をしたが、 |
修正する際はフレームワークがしっかりと頭に入っていないと混乱するし、時間もかかる。 |
複数人でコーディングする場合は、ある程度のルールをしっかり作くべきだろうからそれを練習したい。 |
本来なら昨日で納品する予定だったけど、jQueryのブラシュアップが終わらないのでもう数日伸びるかも。
ちなみにサイトは「西川口のおにぎり | 伊勢屋西川口店」。
これが終われば今度はポートフォリオ制作。忙しいね