スマホサイト最適化25の最新ルール | グロースハックジャパン | growth hack japan
Ryutaro Mori TwitterでGHJをフォロー！ FacebookでGHJをフォロー！ NEW スタートアップに欠かせない6種類の人間 検索エンジン大手グーグルが、スマホサイト最適化に関する大規模なリサーチを行いました。 その結果から導き出した「スマホサイト最適化25のルール」は、モバイル時代、特にtoCビジネスには欠かせない内容です。 調査に関して 本調査は、GoogleとAnswerLabの共同指揮の下に行われました。 モバイルサイトにとって最良のデザイン慣行を提言することを目的に行われた本調査は、以下の方法論で実行されています。 ・シカゴ・サンフランシスコにて、119時間のユーザービリティテストを敢行 ・iOS・Android両方を含むユーザーに調査を実施 ・ユーザーは、商品の購入、価格の調査、予約など、コンバージョンに関連するタスクを実行し、各サイトのユーザービリティを
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
『スマートフォンにおける描画の最適化(tofu.js + pixi.js)』
皆さん初めまして！ 2013年度新卒ディベロッパーのスエ@sueと申します。 私は現在、スマートフォン向けブラウザゲーム「ペコロッジ」を開発しています。ペコロッジで主に使用しているスマートフォン向けJavascriptライブラリ tofu.jsをテーマにお話したいと思います。 tofu.jsってなんか聞いたことあるな？って感じたあなた。はい、そうです。以前、同じく2013年度新卒デベロッパーのチャーリー@charlie10151015がtofu.jsの特徴について説明してくれました。（「 スマートフォン向けJavascript tofu.js 」参照）今回はこのtofu.jsを用いたスマートフォンのデバイス対応について焦点をあてて説明していきたいと思います！ デバイスのレンダリング性能の差異ブラウザのレンダリング性能の特徴はスマートフォンの機種やバージョンによって様々です。例えばあるAnd
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
なんという情報量！ 231台のスペックを比べられる｢スマートフォンデーターベース｣
なんという情報量！ 231台のスペックを比べられる｢スマートフォンデーターベース｣2013.05.21 10:00 小暮ひさのり すごいサイトが出現しました。 今ってスマホが増えすぎて、その機種はどんなスペックなのか？ わかりませんよね。また似たような型番のスマホも多く、何の機能があって、何が無くて、CPUは何なのか？ メモリは？ 液晶サイズは？ なんて。比べるにしても情報が多すぎ。複数のページを開いて製品情報を見くらべるのも大変です。 しかし、｢スマートフォンデーターベース｣では、国内キャリアから発売されている多種多様なスマホ（執筆時231機種）から条件を指定して検索することができてしまいます。 キャリアやメーカー、OS、スペックなどを指定して｢この条件で検索｣をクリック。 該当機種がピックアップされます。 さらに機種を選択して画面のサイズを指定すると......。 実寸大表示！ 何とな
エックスサーバー サーバー初期ページ
このウェブスペースへは、まだホームページがアップロードされていません。 早速、エックスサーバー上へファイルをアップロードしてみましょう。 アップロードの方法などは、サポートマニュアルをご参照ください。
CSS selectors - mobile
Here are almost all CSS2 and 3 selectors, and the CSS3 UI selectors (mostly structural pseudo-classes). This is the mobile table. See also the desktop table. Last major update on 1 October 2013. I'm writing a CSS book. Basics Selector iOS Android Chrome Opera BlackBerry Nokia UC Nintendo Dolphin Tizen One IE Firefox 6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS A
スマホ向けのビューポートとメディアクエリーまわりのメモ | もしもワークス
スマートフォン用のメディアクエリー（Media Queries）の指定を調べたときのまとめです。 まずはお約束。 <meta name="viewport" content="width=device-width,initial-scale=1.0" /> device-widthを指定して、ビューポート（仮想の画面領域）の幅と実際の画面幅を一致させます。 iPhoneの場合、3GSまでならここは320pxを指定するのと同じ。iPhone 4以降ならRetinaなのでデバイス幅と言うなら本来は640pxになるところですが、互換性を取ってこれも320px。つまり width=320 でもいいってことですかね。 次はメディアクエリーの記述。 @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* iPhone Retin
はじめてスマートフォンサイトを作る人へ。制作で気をつけたいポイント５つ
スマートフォンの普及に伴い、スマートフォンサイト制作案件が増えてきている方も多いと思います。かくいう私もその一人です。 最近は一人でカバーしきれない程のご依頼をいただくようになり、新たに担当者を増やすことにもなりました。 普段私が気をつけている点、どういったことを考えてスマートフォンサイトを制作しているかを伝えることになったので、ついでに記事にしてしまいたいと思います。 私がスマートフォンサイトを制作するときのポイントは、以下のとおりです。 1.そのサイトはいつ・誰が・どんな時見るのか2.実際のサイズ感を考えて、使いやすさを確かめる3.死角と押しやすい位置を意識する4.CSS3で実現可能なデザインを5.ユーザは本当にスマホサイトを求めているのかそれでは、詳しくお話していきたいと思います。 こんなの当たり前だよ！ということばかりかもしれません。 案件やサイトのジャンルによっては当てはまらない
[JS]スマートフォンのタッチイベントを取得する各スクリプトのまとめ（仕様比較）
タッチイベントを取得する各スクリプトの対応イベント、スタンドアローンなのかjQueryが必要なのか、ファイルの容量など、仕様の比較をまじえて紹介します。 QUOjs イベント タッチ、タップ、ダブルタップ、ホールド、フィンガー、スワイプ、スワイプアップ、スワイプライト、スワイプダウン、スワイプレフト、ドラッグ 補足 jQueryとのコンフリクトを避けるため、「$$」を使用。 対応予定（2フィンガータップ、ロウテイト、ピンチアウト、ピンチ） 仕様 スタンドアローン ファイルサイズ Minified: 13KB Hammer.js イベント タップ、ダブルタップ、ホールド、ドラッグ、ピンチ 補足 タッチジェスチャだけにフォーカスしたスクリプト。 仕様 スタンドアローン jQueryのプラグインも有り ファイルサイズ Minified: 2KB [ad#ad-2] jGestures イベント
data URI Schemeを使ってHTTPリクエストを削減する
data URI Schemeを使ってHTTPリクエストを削減する方法を紹介します。 １．概略 HTMLで画像を表示する場合、 <img src="http://user-domain/foo.jpg" /> という風に、httpを使ってサーバ上の画像ファイルを表示させるのが一般的ですが、httpの代わりにdata URI Schemeを使えば、HTMLファイルに埋め込んだインラインデータで画像を表示することができます。 ２．data URI Schemeとは RFCの規定上、http、https、ftpなどは「URI Scheme（スキーム）」と呼ばれます。 data URI Schemeは、「http」にあたる部分が「data」であるURI Schemeのことを指し、RFC2397で規定されています。 ３．data URI Schemeの構文とサンプル data URI Schemeの
Data URIによるHTTPリクエストの削減とYSlowスコア | ゆっくりと…
以前「WordPressテーマ iNove のYSlow的サイト最適化」で CSS Sprites によるHTTPリクエストの削減に取り組みました。しかしながら、繰り返し画像などはSprites化が出来ないため、どうしても幾つかの画像が残ってしまいます。 そこで、さらなるサイトの最適化を目指し、人気のデザイン系Webサイト CSS-Tricks で紹介されている「Data URIs」という技術を取り入れてみました。 1.Data URI って何？ Data URI とは、「ドキュメントに直接埋め込まれたデータにアクセスするためのスキーム」のことで、RFC2397 には次の様な書式が定義されています。埋め込むデータは base64 もしくは7ビットASCIIエンコードでテキスト文字列にエンコードします。 data:[<mime type>][;charset=<charset>][;base
スマートフォンサイトにてフォームボタンのコーディング時に覚えておきたいCSSプロパティ | バシャログ。
禁煙してから３ヶ月、着実に体重が増加しているishidaです。 先週土曜日にCSS Nite LP13に参加してきました。 ちょうどスマートフォンのデザインとコーディングのお仕事が進行中でしたので、とても参考になりました。現在セミナー内容を振り返り学習中です。 それとCSS Nite関連ですと、何やら CSS Nite LP14 にて弊社メンバーが登壇するとかしないとか。 スマートフォンコーディングでは、CSS3で角丸やらグラデーションが使えるので画像の使用頻度は少なくなります。ボタンまわりについてもCSSのみで実装する機会が多いです。 フォームのsubmitボタンをCSSのみで表現する際には、ちょっとクセがありましたので 解決方法をご紹介します。 検索するsubmitボタンを、以下のようなデザインをCSSのみで実装することにします。 まずは簡単に横幅と背景色・角丸をCSSで設定してみます
フロントエンドがやっておかなきゃいけない、iPhone(スマホ)向けサイトを軽量化･高速化するための必須項目をメモ。 | Mnemoniqs Web Designer Blog
Webサイトの待ち時間の80％はフロントエンドの処理によるもの なんて言われるとドキっとしちゃいます。どんな素敵にデザインして綺麗にコーディングしても、ページが重くてイライラしてるユーザーがいたら台無しです。なのでスマホ向けサイトのデザインに入る段階から、高速化・軽量化を意識するために、いくつか項目をメモしておきます。 デザインの段階から軽量化を意識する 画像を極力使わないで魅せる努力をする 当たり前ですが、画像を使えば使うだけレスポンスは遅くなります。背景画像にドデーンと写真を使ったり、見出しを使うたびに大きなアイコンを入れるなど、わざわざページを重くさせるようなデザインにする必要はありません。 多少シンプルになったとしても、色のメリハリ・1pxの線などでカバーしましょう。テキストも可能な限り画像にせず、デフォルト文字にするべきです。Webデザイナーの腕の見せ所ですね。 HTML5+C
li要素で作ったナビゲーションリンクを、Media Queriesで設定したブレークポイントでselect要素にする軽量ライブラリ・TinyNav.js
シンプルで使いやすそうだったので 備忘録。Media Queriesと併用して、 ナビゲーションリンクをselect要素 に変換するjQueryのプラグインです。 圧縮版だと300バイトほどと、超軽量で、 様々なブラウザにも対応できるので 覚えておこうと思います。 ウィンドウサイズが設定したブレークポイントに達するとli要素で作ったナビゲーションがselect要素に変わってくれるので、スマフォのような幅の狭いデバイスでもスペースを取らずにナビゲーションを配置できます。 通常のナビゲーションが、スマフォでは自動でselect要素タイプのナビゲーションになってくれる、というライブラリ。 場所も取りませんし、ユーザーも使いやすいし、余計なCSSを書く必要も無くなります。圧縮版だと300KBほどと超軽量みたいです。 以下のブラウザに対応できるみたい。 IE 6,7,8,9Firefox 6,8Sa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
flipsnap
公海555000kk线路检测—首页（欢迎您）
スマートフォン対応、気をつけたいトラブル
mdlab.jp
html5-css3.jp - このウェブサイトは販売用です！ - リソースおよび情報