爪は今coの中にあると思います：特定のビューポートサイズの1つ（または狭いセット）のみを念頭に置いて、Web用のものをデザインしてはなりません。そうです 魅力的です そのように考える。あなたは今目の前にいくつかのかなり具体的な画面サイズを持っています、あなたはおそらくある程度それらに向けて設計するでしょう。デザインツールは、多くの場合、デザインする画面を表す長方形を描くように求められます。テストツールには、事前に設定された画面サイズのセットにサイトが表示される場合があります。たとえば、3つのサイズに向けて設計し、それらに磨くのは普通で素晴らしいと感じることができます。正直なところ、それはうまく機能するかもしれませんが、そうではないかもしれません！特に、それらの特定のブレークポイントでのみ変更されるCSSの作成が非常に厳格である場合、厄介な内部のインベットワーンにつながる可能性があります。
それが本当にそうです。あなたはもう本当に具体的なブレークポイントで考える必要はありません。メディアクエリの幅のブレークポイントはまだ素晴らしいツールですが、今ではビューポートユニット、コンテナユニット、コンテナクエリ、計算/min/max/クランプ、およびその他のあらゆる種類のものがあります。しかし、このようなものは比較的最近CSSに到着したので、すべてが落ち着くまでに1分かかります。
これは本当にそうではありません 新しい ニュース。 10年以上前、私は、あなたのサイトが視聴されているさまざまなサイズがたくさんあります。それに対処します。これで適切にできます。
ウェブサイトはがらくたになりましたか？周りを閲覧します 人気のある サイト、そして私はあなたが簡単にはいに着陸すると思います。特にモバイル、クリプス。いくつか名前を付けるには、ロードが遅すぎると、広告とポップアップが目立たないほど、使用可能な領域を減らす固定位置要素の使用が多すぎます。
このウェブサイト ユーザーinyerface 最近風刺しましたが、それはかなり面白いです（意図的にイライラしているのがあなたのことであるなら、ゲーマーは関係する必要があることを知っています）。
人々はこれについて何年も心配しており、それが良くなることは決してないようです。
これはすべて私を悲しくさせます。幸いなことに、ほとんどのことはそうです 大丈夫。
見たことがありますか ポップオーバーAPI？それはきちんとしたアイデアであり、すでにChromeでプレイ可能です。スタイルのツールチップを考えてください。アイデアは、いくつかの相互作用（ボタンをクリック）を接続して、より多くの情報またはコンテキストで別の要素を切り替えるということです。驚くべきことに、私にとって、このHTMLはCSSやJavaScriptのないChromeで完全に機能します。
I am a popover with more information.
あなた できる もちろん、CSSを使用したスタイルをスタイルしますが、相互作用の基本は機能しません。 aのように
JavaScriptの外で「国家管理」の形態を得るときはいつでも、人々はプレイします！ CSSで作られた数え切れないほどのゲームがあります。 :checked CSSのセレクターと使用 ~ 他の要素を選択するコンビネーター。
今回は、そのままにしてください Tic-Tac-Toeを作ったGarth Heyes 全体的に HTMLのみ。それは最初のことです。
見たい？最初に公正な警告。 HTMLの170 MB（!!）と「50万ノード以上」です。クロムは本当にこれに苦労しています。最初のページをレンダリングするのに私のマシンが1分近くにかかったかもしれません、そして、それぞれのクリックもしばらく時間がかかりました。あなたがダウンしているなら、それを試してみてください、 デモを参照してください。
だから今、私たちはあなたがウェブ上で絶対にすべきではないことを見たので、ここにあります ヘザー・ブッケルあなたが絶対にいくつかのことをしています すべき ウェブ上で行います。 Heatherは、NewFangled TechでWebサイトを構築し、プラットフォームなどでコードを共有しようとしていることに気が狂っていませんが、まさにそのようなものを壊さないでください。壊れないでください スーパーデュパーベーシックなもの そのウェブサイトは簡単に行い、誰にとっても良いことです。私は彼女のリスト全体をハイジャックしますが、もちろんより多くのコンテキストのためにそれを読んでください：
- テキストをコピーさせて、貼り付けることができます。
- 何かがリンクのようにナビゲートする場合は、リンクをリンクさせてください。
- Webサイトがすべてを奪われることなく、ブラウザをズームインさせてください。
- 応答性の高いことをしてください。
- ホバースタイルをさせてください。
- 何かをクリックするとUIが完全に変更された場合、まるで新しいページに移動したかのように、ブラウザの履歴アップデートと新しいURLを提供します。
- スクロールバーを見させてください。
- あなた自身のアプリで使用するために、私の典型的なブラウザのショートカットのハイジャックを停止します。
合理的な尋ねる、いいえ？
onnnnneeeもっとあなたはウェブ上で行うことに本当に注意する必要があります。アダムシルバー： 粘着性メニューの問題と代わりに何をすべきか。
1つの問題は、粘着性のメニューではかなり明白です。彼らはあまりにも頻繁にダングに入ります。
しかし、すぐに見えないかもしれない問題を引き起こす他のものがあります。アダムはズームに言及しています。 1つの小さなズームまたはまた、ページから粘着性/固定要素を蹴る可能性があります。また、何かが粘着性のメニューを開くと、そのメニューがビューポートよりも背が高い場合、問題があります。どちらかが必要です それ スクロール可能なエリア（ただし、ネストされたスクロールは吸う）またはユーザーがメニューをもっと見るためだけにさらにスクロールする必要があります。 ughghadk。
アダムは、それ以上の3つをリストしています。あそこにあなたを見るように強制します。しかし、私は良い結末を手に入れます。
- ページを短くしてください： 粘着性メニューは長いページの症状なので、根本原因を修正してください。
- ユーザーにスクロールさせます： スクロールが問題であるというのは神話です。モバイルでも、ページの上部はフリックまたは2つの離れたものです。
- 関連するリンクをコンテキストに配置します。 たとえば、投稿の最後にサブスクライブフォームを追加するか、価格設定セクションにCTAを追加します。
- バックツートップリンクを使用してください： それらは比較的目立たないものです（ただし、他のオプションを使い果たした後にのみこれを行います）。
Views: 0
