Connect your site to apps like HubSpot, Adobe Express, and more
As I write this, responsive web design turns three years old, and as expected, the bandwagon is well and truly jumped on. But even now, I still find examples of people confusing responsive and adaptive; describing their websites or commenting on other projects and portfolios like these terms are interchangeable. News Flash: They’re not. Whilst their goals are the same, the key difference between r
1. iPad mini Nexus 7 Nexus 10 2560 × 1600 Screen 768 x 1024 800 x 1280 for Design 163dpi 300dpi 216dpi 128dpi devicePixelRatio 1.5 13inch Laptop devicePixelRatio 3 1440x 900 px iPad 2048 x 1536 720 x 1280 Galaxy Nexus 163dpi 233dpi 118dpi 326dpi 320 x 480 iPhone3 480 x 800 Galaxy S 316dpi 264dpi 15inch Laptop 640 x 960 iPhone4 1600 x 900 px devicePixelRatio 1 devicePixelRatio 2 96dpi PC で制作したビットマッ
ちょうど今レスポンシブWebデザインのサイトを制作しているのですが、Media Queriesで画面サイズ別にCSSを記述していくときにどのような順番で記述すればよいのか、改めて調べてみたらいろいろ迷ってしまいました。 今までいろいろなやり方を試してきたのですが、一度整理してみたいと思います。 記述方法の種類 一般的なMedia Queriesの記述の方法としては、以下のようなやり方があります。（ブレイクポイントを480px、768px、980pxとした場合の例です） 1. PCのスタイルから記述していく方法 デフォルトでPC用のスタイルを定義し、タブレット／スマートフォン用のスタイルはMedia Queriesを使って上書きしていくPCファースト的な方法です。 /* デフォルト：980px以上用（PC用）の記述 */ @media screen and (max-width: 979px
This agreement has never been more important. That’s why it always hurts when a device or browser maker does something that goes against our agreement. Especially when they’re a very visible and trusted friend of the web—like Apple. You see, Apple’s newest tablet, the iPad Mini, creates a vexing situation: Its device-width viewport tag defaults to the same values as Apple’s original iPad (768×1024
Related files: Part one of this article, about desktop browsers. Compatibility tables. The full list of browsers can also be found here. Test page. Many thanks to Grace Kloba (Google), David Storey and Anne van Kesteren (Opera), Mike O'Malley (Microsoft), Kartikaya Gupta and George Staikos (RIM), and Mark Finkle (Mozilla) for reviewing earlier versions of this piece and providing me with valuable
In this mini-series I will explain how viewports and the widths of various important elements work, such as the <html> element, as well as the window and the screen. This page is about the desktop browsers, and its sole purpose is to set the stage for a similar discussion of the mobile browsers. Most web developers will already intuitively understand most desktop concepts. On mobile we’ll find the
下記のCSSをユーザCSSとして登録してすべてのウェブページに適用しておくと、QuickResなどのアプリでMacBookのRetinaモデルで画面をドットバイドットにした時に自動的にウェブページが拡大されるようになり、インターネットが快適になる。 html { zoom: 150%; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { html { zoom: 100%; } } 僕はSafariではhttp://sobolev.us/stylish/を使用している。
先日JSTORがレスポンシブウェブデザインによるモバイル対応した件[*1]についてのメモです． 表示パターン PCのブラウザでJSTORにアクセスしてブラウザの横幅を変えていくとこんな感じで表示が変わります．目視で気づいたかぎりでは以下の4パターンありました．手元のiPhone 4Sで確認すると縦表示・横表示ともにパターン1になります． パターン1（320px〜） 2枚目は矢印ボタンをクリックしてサイドメニューを表示させたもの．サイドメニューをメインカラムの下に持ってくるんじゃなく開閉ボタンを作るという方法はうまいなーと感心したんですがどうでしょう．隣のひとは「スマホで見てたらボタンに気づかないかも」と言っていてそれもそうかもと思ったり． パターン2（490px〜） 下部が2列になりました．ヘッダメニューも地味に変わってます（細かいなぁ）． パターン3（640px〜） サイドメニューが現れ
320 dpi Androidの密度グループ iPhoneを当てはめると、iPhone 3までがmdpi、iPhone 4からはxhdpiに区分けされそうです。日本で流通しているAndroidスマートフォンの多くはhdpiに属するでしょうが、最近のHD解像度の端末はxhdpiに属しそうです。 IS05やXperia ray, INFOBAR A01/C01などはグループ上hdpiに属しています。しかし、画面サイズが小さいことからピクセル密度が300dpi前後と、xhdpiに近くなっています。小型で高解像度な端末が増えると、所属するグループだけでは画面の精細さを判断するのは難しくなるでしょう。 ピクセル密度の違いが見た目に影響する さて、ピクセル密度のばらつきによって、すこし困ったことが起こります。密度の低い環境に合わせて作られたコンテンツの見た目が、密度の高い環境で良く見えない可能性が出て
このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 Webは見た目のコントロールがきかない モニターの外をデザインするのが大半である Webは寛容性をデザインする場である Webサイトのデザインは、グラフィックデザインやエディトリアルデザインと同じような感覚でデザインをすると、柔軟性・拡張性が欠けたものになるだけでなく、特定の環境でしか見れないものになることがあります。 こうなるひとつの要因として、グラフィックデザインやエディトリアルデザインが、特定の環境で見るということを前提にしてデザインしているからだと考えられます。A4の紙であったり、名刺サイズだったり、特注のコーティングを施したビルボードなど、決められた枠の中で世界を作り上げるデザインに対し、Webは枠があるようで
Cross Device Design Patterns by Luke Wroblewski July 25, 2012 In a few years, there will be more connected devices in people’s hands than people in the World. That means multiple devices per person: a smartphone, a tablet, a connected TV, and perhaps lots more. Cross device patterns look at how people, content, and services will flow between these devices. Here’s my attempt at defining a useful re
This page lists a ton of different devices and media queries that would specifically target that device. That’s probably not generally a great practice, but it is helpful to know what the dimensions for all these devices are in a CSS context. Brought to you by DigitalOcean DigitalOcean has the cloud computing services you need to support your growth at any stage. Get started with a free $200 credi
iPhone、iPadを基準にした数値が目立ちます。 レイアウトをPC、タブレット、モバイルで変更すると考えた時に、 代表的なデバイスでありユーザー数も多いiPhone、iPadが基準になるのも自然な流れかも知れません。 しかし、例えばブレークポイントをiPad基準にした768pxにすると、 幾つかのAndroidタブレットは800pxなのでこれらのデバイスにはタブレット用のレイアウトが適用されません。 ブレークポイントの数 少ないサイトは1〜多いところでは十数のブレークポイントを設けてるサイトもあります。 ただし、多く設定してるサイトもその全てでレイアウトが大きく変化する訳ではなく、 ごく一部のコンテンツのみ調整するといった使い方をしています。 例えば下記のサイトでは1300pxを境に境界線(.splitter)のみスタイルが変わります。 Remodelista: Sourcebook
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く