タグ

webdesignとcssに関するkitsのブックマーク (7)

  • https://www.tortoise-shell.net/entry/2015/12/17/231105

    https://www.tortoise-shell.net/entry/2015/12/17/231105
    kits
    kits 2015/12/19
    「Webデザイナーは、コンテンツの質を高めることに注力しなければ…」(自分で中身を作るのでなければ)デザイナーがすることはコンテンツの「価値」を高めることでは。だからこそ伝える手段に注力すべきと思う。
  • 壊れたデザインプロセス(「The Broken Design Process」日本語訳)

    2012年8月12日 以下の文章は、Philip Zastrow氏の書かれた「The Broken Design Process」を翻訳したものです。レスポンシブWebデザイン関連の記事をこの数ヶ月、いろいろ斜め読みしてきましたが、これは是非とも翻訳しておきたいと思ってZastrow氏にコンタクト、翻訳と掲載につき了解を得ました。ただし、この翻訳には誤りが含まれている可能性があります。英語が読めるなら、原文のほうを是非お読みください。 Webデザインのプロセスは壊れており、レスポンシブWebデザイン(訳者注:以後「RWD」と表記)の推進によって、モダンなアプローチを余儀なくされつつある。 典型的なデザインプロセスでは、理想化されたWebサイトのコンセプトイメージが写真編集アプリを用いて制作される。そして、コンセプトイメージを顧客または承認する立場にある権威に渡し、フィードバックや批判を得る

    壊れたデザインプロセス(「The Broken Design Process」日本語訳)
    kits
    kits 2012/08/13
    「Webデザイナーにとって基本的なツールがもはや写真編集アプリではなく、CSSであることを意味する」 responsive web design 以前に(CSSが普及した時点で)そうなってもよさそうなものだったが。
  • リデザインとborder-radiusとtext-shadow

    でっかいロゴに飽きてきてヘッダをコンパクトにしたくなったので、少し前からサイトのスタイルを色々いじっていた。ナビと検索フォームとロゴを一段に並べるのはかなり難しかったので、ロゴをアイコンにして無理やり詰め込むことにした。border-radiusまくり。緑の流行はまだまだ続くらしいので色はこのままで。次はオレンジだな(適当)。 ヘッダ ロゴ・アイコンとナビをfloat: left;、検索フォームとTwitterとフィードのアイコンをfloat: right;。それぞれにborder-radiusを使って少し丸みをつけて、丸いロゴ・アイコンと並べてもあまり違和感が無いようにした。アクティブなナビはtext-shadowでエンボスっぽくしてみたんだけど、背景色の明るさがアレでうまくへこんでいるように見えない……。 最初、display: table-cell;で検索フォームの横幅をうまいこと可

    kits
    kits 2009/10/30
    「ヘッダをコンパクトに」「ブラウザの横幅が狭い場合は検索フォームやTwitterやフィードのアイコンが適当に折り返されて下に落ちる」
  • 今回のmixiのリニューアルについて - 専門家に聞く [All About プロファイル]

    Web制作・クリエイティブ どこがどう良くなったんでしょうか? 一見のパッと見た目は印象が良くなったかもしれませんが、長時間使い続けるユーザーからすると、見づらく疲れるデザインで、メリハリがないため、エリア視認性がとても悪く、情報把握が非常にしづらいのですが。 専門的にどうなのか詳しく解説していただきたいです。 質問者│サリエル・東京都・男性・35歳 はじめまして クロスウェーブの鈴木です 最初に画面が公開された時は期待したのですが、確かに見づらいものがありますよね。 CSSでのコーディングが中心になり、今後の機能追加でのデザイン追加等が容易になるなどのメリットが運営者側にはあったと思いますが、これではユーザー側のメリットがわかりづらいものがありますよね。 今後の修正に期待していますが・・・ 私の環境でも崩れる場面があり使いづらいです。 評価ありがとうございます 「CS

    kits
    kits 2007/10/07
    自分が持つ(web技術に関しての)All Aboutへの印象が固まりつつある。
  • 続・リキッドカラムデザイン:ウェブログのIA研究(6) - Liner Note

    続・リキッドカラムデザイン:ウェブログのIA研究(6) 書いた人: hash 投稿日: 2007年08月30日(最終更新:5年7ヶ月と15日前) 読者の皆さんの反応 0 被ブックマーク数: 0 昨日書いたリキッドカラムデザインの実験は、リンク先のテキストを解釈しきれていなかったのもあるけれど、実装をどうするかばかりを考えてしまった結果、ちょっと変な実装結果になっていたと思う。 つまり、昨日の実験では幅をおよそ半分以下に設定したときに段組になるように設定したけども、それだと高解像度環境では一行の長さ(=最大文字数)が長くなってしまって、読みづらくなってしまうケースが生じる。そうではなくて、一行の長さを固定的に1 決めた上で、ユーザーのブラウザが、それを超える幅を持つ場合に段組をするようにするのが適切なやり方なんじゃないかと。一言で言うと幅に応じた動的な段組ですね、昨日の記事ではリキッドカラム

    kits
    kits 2007/09/01
    ボタンでなく下辺にスクロールバーがあればいいと思う。
  • /* Position Is Everything */ Modern browser bugs explained in detail!

    Coding and Computing Tips & Tutorials. Learn & Build: CSS,JavaScript,HTML,PHP,C++ and MYSQL.

  • Spiffy Corners - Purely CSS Rounded Corners

    Anti-aliased rounded corners using pure CSS. No Images. No Javascript. No fluff. What? Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript. Why? I needed a way to create anti-aliased round corners without the extra server calls that are incurred when using external JavaScript files or images. When your websites are

    kits
    kits 2006/03/26
    "No Javascript"って…元のHTMLに余分な構造を入れることにためらいはないのだろうか。
  • 1