レスポンシブWebデザインのブレークポイント調査
iPhone、iPadを基準にした数値が目立ちます。 レイアウトをPC、タブレット、モバイルで変更すると考えた時に、 代表的なデバイスでありユーザー数も多いiPhone、iPadが基準になるのも自然な流れかも知れません。 しかし、例えばブレークポイントをiPad基準にした768pxにすると、 幾つかのAndroidタブレットは800pxなのでこれらのデバイスにはタブレット用のレイアウトが適用されません。 ブレークポイントの数 少ないサイトは1〜多いところでは十数のブレークポイントを設けてるサイトもあります。 ただし、多く設定してるサイトもその全てでレイアウトが大きく変化する訳ではなく、 ごく一部のコンテンツのみ調整するといった使い方をしています。 例えば下記のサイトでは1300pxを境に境界線(.splitter)のみスタイルが変わります。 Remodelista: Sourcebook
iPhoneとAndroidにおいての“ジェスチャー”について
スマートフォンのUI設計において、まず考えるべきって何だと思いますか？ 色々と挙げられますが、今回は”ジェスチャー”について考えてみましょうか。 ジェスチャーを使ったイベントを設定できるライブラリとかも紹介します。 さて。 まずぱっとマツモトが思いつくWebブラウザとスマートフォンでの表示の違いは、 クリックエリアを広く取らなくてはならない※場合によってはサイズが決められている focusはない(タッチした瞬間がそうとも言えるけれど) 基本的にリキッドでレイアウトする というところです。 まぁその他にも結構留意するところはいっぱいあるのですが、 そもそも、一番大きいのは、 「タッチして操作する」ところ。 しかもマウスでのジェスチャーとは根本的に異なります。 まずはちゃんとここから考えてみようと思います。 スマートフォンのOS間で異なるジェスチャー こちらを参考にしています。 【参考元(PD
スマホサイトでも使えそうなかっこいいドロップダウンメニュー実装jQueryプラグイン「ddSlick」:phpspot開発日誌
スマホサイトでも使えそうなかっこいいドロップダウンメニュー実装jQueryプラグイン「ddSlick」 2012年05月17日- ddSlick - a jQuery plugin for custom drop down with images スマホサイトでも使えそうなかっこいいドロップダウンメニュー実装jQueryプラグイン「ddSlick」。 タップすればリストが開いてアイテムをクリックすると選択できるというウィジェットを簡単に実装できるプラグインです。 デモではソーシャルサイトの選択という感じになっていますが、色々応用ができそうです。 スマホのメニューとして使ってもよさそう。アイテムの内容には画像、タイトル、デスクリプションが含まれますが、これら値はJSONで渡せます もちろんPCサイトでも使えますね 関連エントリ スマホのホーム画面っぽいものを作れるjQueryプラグイン「Pr
Webデザインリリック
「Highlighing Code Block」のプラグイン「Treeview」を導入したらコードブロックのテーマカラーが反映されない時の解決方法
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
