🎉 Celebrating 10 years of Responsive Web Design
🎉 Celebrating 10 years of Responsive Web Design Jun 11, 2021 🥳 Ten Years of RWD with Ethan Marcotte Well, that was fast! We're celebrating ten years of Responsive Web Design this week with a fresh take from Ethan Marcotte. (Happy tenth to that little yellow book!) Take a look back (and ahead!) as Ethan reflects on what inspired Responsive Web Design, what we need to reckon with as designers, and
レスポンシブデザインに見るデザインカンプと実装との溝
デザインカンプを基に実装する難しさはあらゆる場面で語られます。私の場合は特にレスポンシブデザインに関する仕様の解釈に悩む場面が頻繁にあります。 その問題点はどこにあるのでしょうか。私の制作したツールの紹介を通して、グリッドシステムのあり方やレスポンシブデザインの意味などを考察しました。 デザインカンプとワークフローの関係性 ウェブサイト制作のワークフローでは、クライアントとの上流での合意形成と開発者への指示書との役割をデザインカンプが兼ねるパターンがよくあります。デザイナーはウェブページの実装仕様を決定しながらデザインカンプを制作し、開発者はデザインカンプを通して前工程での決定を読み取りながら実装します。 デザインカンプを基に実装する難しさの一因は、それがシステムが取り得る状態のうちの一場面を切り取った単なるスナップショットでしかない構造です。 仕様を理解するためには、デザイナーが想定する
CSSフレームワークのブレイクポイントを比べてみた(Bulma, Vuetify, Element, Bootstrap, etc..) - Qiita
だいたい5段階になってるっぽい。上限や下限がそれぞれ違うのがおもしろい(´ω｀) ちなみに単位はpx。収まらなかったので省略... 調べたのはこの7つ Bulma ... Responsiveness | Bulma Bootstrap ... Overview · Bootstrap Material Design ... Responsive layout grid - Material Design Vuetify ... Breakpoints — Vuetify.js Material-UI ... Breakpoints - Material-UI Element ... Component | Element Tailwind CSS ... Breakpoints - Tailwind CSS Material DesingはCSSフレームワークではないけど参考として。
Bidirectional Scrolling is here to save Responsive Design
This article is about a simple question with a surprisingly complex answer. The QuestionIt’s Monday afternoon and the air is starting to feel stuffy in our meeting room. We are standing in front of 20 marketing professionals, all of them representatives of individual countries of an international non profit organisation. We just finished presenting our new UX approach for their global website rela
Apple Watch（watchOS 5）向けのレスポンシブ対応についてのまとめ
現在ベータ版が公開されているwatchOS 5 から、メールとメッセージ・アプリでHTMLメールやリンク先のページがWebKitで表示されるようになるそうです（Safariは搭載されない）。ついに！ウェブコンテンツをApple Watchで見られるようになるんですね。 HTMLメールが見られたら便利だと思うことがしばしばあるのでwatchOS 5の公開が楽しみです。画面は小さいですけど、HTMLメールやウェブサイトの内容をサクッとチェックできたら便利だと思うんですよね。 ということで、そろそろHTMLメールやウェブサイトのApple Watch向けレスポンシブ対応を考えておいても良さそうですね。 以下は「Designing Web Content for watchOS 」というWWDC 2018の公式ビデオの内容を基にまとめたものです。実際の環境で確認したものではないので、watchOS
11 Powerful Examples of Responsive Web Design
Back in 2010, Ethan Marcotte urged designers and developers to practice “responsive web design” (RWD): “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can [make our] designs […] more adaptive to the media that renders them.” By designing websites that adapt to any device, designers and developer
iframeの高さをJavaScriptで自動的に調整する方法
実装方法の説明 ここではiframeを読み込むページを親フレーム、読み込まれるほうを子フレームと呼びみます。下図のようにJavaScriptのwindow.postMessage()メソッドを使って子フレームから親フレームにコンテンツの高さを送信します。 親フレームで高さを受け取ってJavaScriptでiframeの高さを調整します。 シンプルですね。 実は、長年この解決策が見つけられずに困っていたんですが、意外にもシンプルに解決できて驚きました。しかし、こういう解決策ってふとしたときに見つかるもんですね。 ソースコードの説明とデモ まずは簡単なデモをご覧ください。 デモでは以下を実装しています。 子フレームでコンテンツの高さを取得 子フレームからpostMessage()でコンテンツの高さを親フレームに送信 親フレームでaddEventListner()を使ってメッセージを受け取る i
Building For Mobile: RWD, PWA, AMP Or Instant Articles? — Smashing Magazine
As we look deep into 2017, one of the questions on every web developer’s mind ought to be, “What trend will define the web in 2017?” Just three years ago, we were talking about the “Year of Responsive Web Design”, and we’ve all seen how the stakes were raised when Google announced Mobilegeddon (21 April 2015) and started to boost the rankings of mobile-friendly websites in mobile search results. T
Maintaining Accessibility in a Responsive World | Filament Group, Inc., Boston, MA
Maintaining Accessibility in a Responsive World Posted by Scott Jehl 02/02/2017 At Filament Group, our primary concern has long been to build sites that are accessible to as many people as possible. In that aim, being “accessible” means many things. It means that a page must load quickly—even in slow and spotty mobile networks. After loading, the page should be usable and feel appropriate and intu
Budou - 機械学習を用いた日本語改行問題へのソリューション - ウェブ雑記
こんにちは！ 日本語のウェブサイトを作っていると、日本語特有の問題にぶちあたることがありますよね。 その中でも今回着目したいのは、日本語改行問題。最近、この問題を解決するためのライブラリを公開したので、紹介します。 github.com そもそも日本語改行問題とは何か ウェブブラウザで日本語で書かれたウェブサイトを見ていると、ときどき文章が変なところで改行されているのを目にすることがありますよね。 たとえば、こんなかんじ。 「ソリューション」が「ソリューショ」と「ン」に分かれてしまっています。読みにくいですね。 英語では単語がスペースによって区切られますが、日本語や中国語などのアジア圏の言語では単語がスペースで区切られないことが多いです。 そのため、英語では単語の途中で改行されることは通常ありませんが、日本語では単語の途中で改行されることがよくあります。 本文ならともかく、見出しやキャッチ
Redesigning SGS’ Seven-Level Navigation System: A Case Study — Smashing Magazine
Improving every tiny thing by 1% dramatically improves performance. This applies to what Marko Dugonjić did in the SGS project and its intricate navigation. By focusing on the finer details, improving each detail by a tiny bit, he significantly reduced the complexity of the navigation and improved loading times, while keeping the navigation appealing and engaging for users. No web project is ever
Coding mobile-first emails
Update: Since this article was written, Gmail has added support for media queries. However, due to some caveats in their implementation, the following mobile-first technique remains the most reliable for now. You may have read our announcement on the Campaign Monitor blog that email campaigns created with our Email Builder now render beautifully across all major devices and clients. This includes
Pushy - Off-Canvas Navigation Menu
Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions. This project was inspired by the off-canvas navigation menu seen on Medium. Pushy has been implemented on many sites, check them out! Feel free to let me know if you use Pushy in one of your websites. Download | Documentation | View Project on GitHub Features Uses CSS transforms & transitions. Smooth performance o
FlexNav – Jason Weaver
A jQuery plugin for responsive menus FlexNav 1.3.3 jQuery plugin is no longer supported. I have plans to make a non-jQuery version 2 soon.
マルチデバイス時代に最適なウェブサイトのナビゲーション構造とは？※未解
今回も、このブログでいま流行りの「マルチデバイス時代」シリーズです。 前回に引き続き、これからのレスポンシブ・デザインについて書いていきます。今回はナビゲーションについてです。 BootstrapやFoundationで実装されているように、レスポンシブ・デザインでのナビゲーション・インターフェイスには標準的なものが確立されつつあります。しかし、それが従来のウェブサイトの構造に簡単に当てはめられるかというと、そうでもありません。使っている技術は根本的にはあまり変わりませんが、マルチデバイス時代の今、解決しようとしている課題は以前と大きく異なります。 全くサイズの違う複数の端末に、デスクトップ向けの考え方で作ったサイト構造を最適化しようとしているわけですから、ゼロから考え直さないと、根本的な解決は難しいのかもしれません。 そもそも従来型のナビゲーションは必要なのか レスポンシブ・デザインでサ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Are You Sure Your Site Is As Mobile Friendly As You Think?
Web Fundamentals — Google Developers
Desktop-First Design Tips for Responsive Websites
Responsive Reading | July 2016 | ZURB
Marcel Gordon on Responsive Web Design