What if we had an opportunity to write visual tests for responsive websites? What if we could describe the look and feel of an application and put this directly into our tests? Ivan Shubin decided to look at another interesting side of visual testing. For the last seven years, his main focus has been testing automation for a big enterprise project. Over time, Ivan became obsessed with the idea of
Automated testing of look and feel for your responsive websites Download 2.4.4 The Idea... Layout testing seemed always a complex task. Galen Framework offers a simple solution: test location of objects relatively to each other on page. Using a special syntax and comprehensive rules you can describe any layout you can imagine Runs in Selenium Grid Galen Framework runs well in Selenium Grid. You ca
JavaScript のメソッド window.matchMedia を使用すると、CSS3 の MediaQuery のようにウィンドウサイズで JavaScript のコードを分けて使用する事が可能です。window.matchMedia の使い方・対応ブラウザなどのメモです。 window.matchMedia は MediaQueryList オブジェクト（MediaQueryList – Web API インターフェイス | MDN）を返すメソッドです。 サンプルデモまでのリンク→ウィンドウサイズによってテキストの内容を変更するサンプルデモ 使い方 matches でウィンドウサイズとマッチするかを簡単に調べる matches プロパティを使うと、指定したウィンドウサイズとマッチしたら true マッチしなければ false を返してくれます。ウィンドウサイズの指定の仕方は CS
![[JS] window.matchMedia をつかって JavaScript のコードをレスポンシブに分ける方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/d4a1ab350b11240c268ad4418373b07e790b15b0/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F08%2Fmediaquery.png)
Google が言う 「モバイルフレンドリー」 とは？ モバイルフレンドリーテストツールで色々試してみた Google がモバイル検索の順位決定時に 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表したことに関連して、そもそも Google は何を根拠に 「モバイルフレンドリー」 かどうかを判断しているのか、という点について調べてみました。 先週ですが、Google が Official Google Webmaster Central Blog で、2015年 4月 21日 （米国時間） から、モバイル検索の順位決定時に、その Web サイトが 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表しました。 Finding more mobile-friendly search results ： Official Google Webmaster
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Opera requests that the EU General Court secure the DMA’s promise of free browser choice... July 12th, 2024 Opera is appealing the EU Commission’s decision not to designate Microsoft Edge as a gatekeeper, and requesting to keep freedom... AI, Gaming, Opera GX Aria gets Buffed in Opera GX July 1st, 2024 Aria gets buffed in Opera GX. New features are being added to improve Aria's capabilities. Deskt
なぜ、レスポンシブに労力を費やすのか? 私達は全てのデバイスにおいて、スクリーンのサイズや縦横の方向といったユーザーの環境に左右されずに、ウェブサイトが利用しやすくなることを目指しています。 断片化された世界 2013年現在、数千種類のデバイスとスクリーンサイズがインターネットにアクセスしています。それら全てに対して、それぞれレイアウトを設計するのはもはや不可能です。そんなことより、デザインにより流動的なアプローチを取り入れるべきでしょう。 モバイルファースト 最近になって「モバイルファースト」という言葉がそこらじゅうで聞かれるようになりました。その言葉は、モバイル向けのスタイルから始めて、必要とされる時に大きなスクリーンに最適化したスタイルを適用するということを意味します。言い換えると、作成したモバイル向けのスタイルがデフォルトになり、それ以降に書き換える必要はないということです。それは
A confession: I'm starting to hate choropleth maps. When it comes to comes to comparing U.S. states, especially where there's no obvious geographic pattern, a map is often the wrong choice. So, following my posts on responsive maps and legends, let's make a bar chart, and let's make it responsive: Percent of adults over 25 with at least a bachelor's degree: Median: Source: U.S. Census Bureau, via
a solution to control font-size relatively with media queries in Sass SCSS で media queries を使いながら、相対的に font-size を扱うよさ気な方法を思いついた。 I just conceived a good solution to control font-size relatively with media queries in Sass. settingsAt first, you can change… base font sizes, which is referenced by reading text like and othres… brakepoints for mediaqueries and here is the settings and mixins $font-si
WebKit （Nightly Builds） で HTML の srcset 属性がサポートされたようですので、簡単に srcset 属性の仕様について解説してみます。 WebKit （Nightly Builds） で HTML の srcset 属性がサポートされたようです。 srcset 属性は、img 要素の属性として使用することで、高精細ディスプレイ （デバイスピクセル比に応じて） 向けや、ディスプレイサイズに応じて画像を出し分けるための属性。所謂、「Responsive images （レスポンシブ イメージ）」 を HTML のみで実現することができます。 Improved support for high-resolution displays with the srcset image attribute ： Surfin' Safari WebKit Nightly
先月末の話ですのでちょっと乗り遅れ感はハンパないですが、Google Chrome の最新ベータ版、Chrome 34 が公開され、srcset 属性への対応が明らかにされました。 Chrome 34: Responsive Images and Unprefixed Web Audio ： Chromium Blog Chrome Browser Beta 去年の夏に Webkit が Nightly Builds で srcset 属性をサポートした時から 議論されていたものが実際に実装されましたというお話。 srcset 属性は、img 要素の属性として使用することで、高精細ディスプレイ （デバイスピクセル比に応じて） 向けや、ディスプレイサイズに応じて画像を出し分けるための属性。所謂、「Responsive images （レスポンシブ イメージ）」 を HTML のみで実現するこ
http://typecast.com/blog/a-more-modern-scale-for-web-typography 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約3時間前 Jason Pamentalが、 例えば各デバイス共通で、H1がbodyの3倍(3em)、H2が2.25emと順に設定しても、画面サイズが小さくなりエレメントの数が減ると、相対的なサイズ設定のバランスは極端になってしまう。(参考画面) 特に、ヘッダーはこのように大きくなりすぎてしまう。 スマホ画面では、1行あたり35-40文字（英文テキスト）が読みやすそう。(参考画面: 35-40 vs. 40-50) メインのコンテンツエリアのまわりのマージンを減らして、コンテンツエリアを広げることができる。小さな画面では、bodyのcol
Using the Guide Code for America aims to improve the relationships between citizens and government. The following logos, materials, and character of the Code for America brand were created to express the following: Openness: That the organization is approachable, easy to understand, easy to get involved with, and welcoming to both scrutiny and participation. Currency + Progress: We’ve attempted to
2014年1月15日 著 最近読んだ» Defining Responsiveness Cloud Four Blogという記事のなかで、何がレスポンシブWebデザインで何がそうではないか、みたいなことが書かれていました。以前から自分もセミナー等でも繰り返し言ってきたことではあるけれど、Ethan Marcotte氏の唱えた原義に照らすならば、レスポンシブWebデザインを名乗るための要件というのは、次の3つしかありません。 流動的なグリッドベースのレイアウト フレキシブルな画像/メディア メディアクエリー これらすべてを使ってコンテンツが実装されていればレスポンシブWebデザインだし、使っていなければ、たとえそれっぽく見えてもレスポンシブWebデザインとは言えない。にもかかわらず、モバイル・ファーストだの何だのと、確かにそういう要件も盛り込んだほうが適切かもしれないけれど原義には含まれない
http://calendar.perfplanet.com/2013/rapid-response/1 comment | 0 pointsDigital ArtsとSpeedCurveを兼務しているMark Zemanが、レスポンシブサイトのパフォーマンス向上についてまとめています。 レスポンシブウェブサイトはビジュアル重視でデザインされることが多いので、パフォーマンスは二の次になりがち。320ピクセル幅のレスポンシブウェブサイトは、1600ピクセル幅のものと比較して、8%しかサイズが違わないというリサーチ結果がでている。パフォーマンス上の懸念は、レスポンシブウェブサイトの採用を躊躇する原因となっている。[参考図] Inline the initial experience (within 14k if possible) 最初の留意点は “above the fold” のCSS/J
We built screensiz.es to help you quickly find the screen specifications of the most popular devices and monitors currently on the market. The size data comes from a variety of sources. For a better understanding of Pixel Density, check out this great post by Teehan+Lax. Our “popularity” guesstimates are derived from annualized monthly Google queries (from AdWords traffic estimator), and some fuzz
Lightweight. Unobtrusive. Style-agnostic. Build your look on the web, not Twitter's – and build it fluid. Layers CSS is a CSS framework aimed for practical use cases. It comes with a small footprint and zero bullshit. Normalizations & sensible defaults Fluid grid + progressively enhanced columns Preserves native form styles by default No px definitions No colors, no borders, no rounded corners No
2013/11/13 この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります techCSSmediaQueryviewportSmartphone 最近改めて使い分けないとなーと実感したので、その実感を忘れないうちにメモしておこうと思います。 デバイスの幅(width)と device-width の違いについてそもそもの話ですが、そのデバイスで何ピクセル x 何ピクセルで表示できますよーという値と、 device-width の値は異なります。（結果的に同じ場合もあり得ますが） http://screensiz.es/ こちらに、デバイスごとの width, device-width がまとめてあります。たまに見ます。 iPhone 3GS の時代であれば、width = 320px, device-width = 320px であったので問題なかったのです
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
