連休ということで、Negitaku.orgのスマートフォン表示のテスト作業を行なってみました。
スマートフォン表示テストについて考えたこと
- とあるサイトのアクセス解析を見たらいつのまにかスマートフォンアクセスが68%になっていたのでいろいろと考えることに
自分で他のサイトを見るときに、PCサイトが表示されるとすぐに閉じているから自分のサイトも対応しないと
一応スマートフォン版があるけど、PCとスマートフォンで出し分けをしているわけではない
さらに、そのスマートフォン版は数年前のフレームワークで作ってほったらかしなのでデザインが古くさい(iPhone4のUIライク)
どうせやるならレスポンシブデザインに対応しようかなと思ったけど、実質全部作り替えるくらいの作業が必要でそこまでの時間は無い
いまあるスマートフォンサイトにリダイレクトしようと思ったけどURLが別になったり、デザインが微妙だったりするのでイヤだ。
とりあえず、ソーシャルでよく貼られるニュースページのみで実験することに。
↑現状の微妙なスマートフォン対応
今回のコンセプト
- デザインをもう少しまともにする。
コメント機能とか移植すると面倒なので閲覧だけに特化する
余計な装飾はせずシンプルで見やすくする
テストなので短時間で出来るくらいの作業にする
やったこと
- デザインをゼロから作るのは面倒なので Bootstrap3 を使用
PC版のテンプレートから必要な項目を移植してマークアップ
CakePHPにテンプレート出し分けの処理を追加
出来上がったものがこちらになります。
iPhone、iPod、Android Mobileでニュースにアクセスするとスマートフォン版が自動で表示されるはず。iPhoneしかもっていないので他のデバイスでは試していません。
これでスマートフォンユーザーの人もちょっとは閲覧しやすくなるはず、と思ってそもそも自分のサイトはどのくらいの人がスマートフォンアクセスなのか調べてみました。
約85％がPC、スマートフォンは14％ほどと、さすがPCゲームサイトというような結果に。いまこんなにPC率が高いのは結構珍しいのでは。
いまわかっている不具合
- YouTubeがwidth、height指定のエンベットコードを使っているからはみ出てしまう
Twitchとかのエンベットが表示されない
TwitterとFacebookボタンがスマートフォンだと横に並んでくれない
まああまりたいしたことでは無いので良いのかなと。
不具合とかご意見ありましたらよろしくお願いいたします。
反応とか見つつ、他のアクセスが多いページも対応しようかなと思っております。