How to test responsive designs for free
“Stop resizing that browser, you’re gonna wear it out!” How many times have you heard that one? Well okay, maybe not so many times, but if you develop responsive design web sites, you know what I’m talking about: with every DOM or CSS edit you’re dragging that browser edge back and forth, testing your changes and looking for anything broken. Ultimately, most of this effort is an attempt to emulate
続・レスポンシブWebデザインとかアダプティブWebデザインとか
2013年6月19日 著 渡辺さんが、レスポンシブ・デザインとアダプティブ・デザインの定義を整理してみたのなかで僕の記事に言及してくださったので、改めて自分の解釈を覚え書きしておきます。 身もふたもないことを先に言っておくと、どうもこの「レスポンシブ」やら「アダプティブ」という言葉が最近、好きではありません。意味的にも発音的にも紛らわしく、厄介なことこの上ない。これらをそのまま日本語圏で（カタカナ表記にしろ英語表記にしろ）使うことについては、どちらかというと反対の立場。渡辺さんの記事で説明されているように、「アダプティブ」と言ってもそれがコンテンツの適応性を指すのか、それとも表示上の適応性のみを指すのか、文脈次第で変わるのも好きになれない理由。 閑話休題。レスポンシブWebデザインにしろアダプティブWebデザインにしろ、Webコンテンツをマルチデバイスに対応させるうえでの考え方であることは
Dev.Opera — Responsive Web Development With WordPress — a Case Study
Responsive web design is maturing. Many of us have moved on from thinking about media queries and responsive layout towards addressing the challenges of responsive images, navigation, UX and more. Content and planning are important too. Even if you’re not adopting a Mobile First strategy, it’s important to consider the mobile experience when planning any responsive site. This includes thinking abo
壊れたデザインプロセス（「The Broken Design Process」日本語訳）
2012年8月12日 著 以下の文章は、Philip Zastrow氏の書かれた「The Broken Design Process」を翻訳したものです。レスポンシブWebデザイン関連の記事をこの数ヶ月、いろいろ斜め読みしてきましたが、これは是非とも翻訳しておきたいと思ってZastrow氏にコンタクト、翻訳と掲載につき了解を得ました。ただし、この翻訳には誤りが含まれている可能性があります。英語が読めるなら、原文のほうを是非お読みください。 Webデザインのプロセスは壊れており、レスポンシブWebデザイン（訳者注：以後「RWD」と表記）の推進によって、モダンなアプローチを余儀なくされつつある。 典型的なデザインプロセスでは、理想化されたWebサイトのコンセプトイメージが写真編集アプリを用いて制作される。そして、コンセプトイメージを顧客または承認する立場にある権威に渡し、フィードバックや批判を
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
はじめは今までと同じように、カンプを作ってからコーディング、というやり方でした。 しかし、そのやり方だとトラブルが多いんです、なぜか。 ブレイクポイントとかで揉めたりすることが多いです。 早い話が、いままでの制作のやり方は、レスポンシブWebデザインでは無理だということです。 allWebクリエイター塾の菊池 聡さんは、「レスポンシブWebデザインでは、いままでの仕事のやり方は通用しない。いずれはブラウザでデザインする時代がくる」と、某セミナーで言っていました。 実際、最近は、ブラウザでデザインする、いわゆる「インブラウザ・デザイン」で制作することが多くなってきています。最近は、ほぼ7割くらいです。 最近、久しぶりにFireworksでカンプを作りましたが、「以外とPhotoshopやFireworksでカンプを作るのが面倒だな」と感じました（ちょっといらついていたような気がするのは気のせ
ぼくのかんがえたさいきょうのResponsive Design View
2012年8月6日 著 少し前に、勤務先で僕が講師を務めるレスポンシブWebデザインについてのセミナーに@dynamisさんが参加してくださいました。セミナーの内容はさほど技術的ではない、企業のWeb担当者向けのものでしたから、Web技術のエキスパートでいらっしゃる@dynamisさんにとっては正直「釈迦に説法」もいいところだと思われましたが、それはさておき。セミナーの最中、Twitterでこんなことをつぶやかれていました： ミツエーリンクスさんのレスポンシブウェブデザインセミナーではFirefox Nightlyを使ってレスポンシブツールでデモしてる。やっぱレスポンシブデザインにはFirefoxってことかなー。 実際Responsive Design Viewは便利だと思っていて、レイアウトの確認やらデモンストレーションの際には大変、重宝しています。正直、Nightlyを頻繁に使い始めた
Firefox Developers Conference 2012 in Osakaでの講演内容
2012年7月5日 著 先日登壇させていただいたFirefox Developers Conference 2012 in Osakaで、トークセッション「Writing HTML ～これからの HTML の書き方～」の前座として講演したときのスライド「ミツエーリンクス 自社サイトの取り組み」が、勤務先のSlideShareアカウントにて公開されたので、こちらでも紹介しておきます。 スライドに載っている字面「だけ」を追うと、非常にあっさりした内容に映ると思いますが、口頭ではある程度、内容を掘り下げてお話したつもりです。NightlyのResponsive Modeを使った簡単なデモも織り交ぜましたし。そのあたりは、いずれMozilla Japanさんのほうで録画を公開されると思いますので、よろしければそのときにでもご覧ください。 ちなみに、最後のスライド「これからのWebデザイン」の末尾で
5 Useful CSS Tricks for Responsive Design - Web Designer Wall
Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I’m going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They are simple CSS properties such as min-width, max-width, overflow, and relative valu
レスポンシブWebデザインと「最適化」
2012年5月2日 著 レスポンシブWebデザイン（Responsive Web Design、以下「RWD」）は、いま自分が注力している旬なテーマのひとつであり、それゆえに取り上げている記事などもいろいろ読んだりしているのですが、RWDが「最適化」の3文字と共に紹介されているのを見かけると、ちょっと首を傾げたくなります。RWDの記事に限らないかもしれませんが、おそらく「最適化」という言葉が使われるとき、何に対しどういう尺度でもって最も適していると言っているのか、そのへんが明示されていないことが多い、というあたりに原因がありそうです。そういう明示がされないままで、半ば盲信的にRWDをプッシュされていたりすると尚更「なんだかなぁ」と思います。 デバイス固有のスクリーンサイズに対し、Webページのレイアウトやビジュアルデザインがフィットしているかどうか、一定の使いやすさを提供できているかという
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
