Rubrika: Uživatelské rozhraní

Určitě jste narazili na situaci, kdy se vám velmi nehodí standardní box model, tj. skutečná šířka elementu je width + padding + border. Já se s tím peru hlavně, když chci mít zarovnaná pole formuláře.

Článek Box sizing předkládá celkem snadné řešení: Přepněte si box model do toho, co měl IE 6, tj. deklarovaná width bude ta skutečná a padding + border se „odčítají dovnitř”. Příklad pro jeden element:

textarea {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

Paul Irish doporučuje to rovnou hodit na všechny elementy, ale tím si nejsem tak jistý.

Via Pavel Bier

Po šesti měsících (to to letí) tu máme novou verzi.

Here’s a look at some of the most prominent changes:

  • Completely overhauled documentation for nearly every component
  • A brand new Customize page to tailor your Bootstrap experience
  • New 12-column, responsive grid system
  • New table styles with a common base class for improved compatibility with other tools
  • New form styles with smarter defaults, requiring less HTML
  • Icons, graciously provided by Glyphicons
  • New, smarter navigation components
  • New buttons, button groups, and button dropdowns
  • New, simpler alert messages
  • New javascript plug-ins like carousel, collapse, and typeahead

— Twitter Developers, Say hello to Bootstrap 2.0

Můj 3 (slovy tři) roky starý návrh úvodní obrazovky je stále lepší, než ten v nově spuštěné AirBank? Sakra kde je problém? Osobně bych sázel na „design by committee”.

Mimochodem, pokud by snad některá banka měla zájem o moje služby jako konzultanta na UI, ozvěte se. Upřednostnil bych FIO, protože tam máme účet s Fakturoidem.

Některá gesta jsou až moc komplikovaná, ale to rychlé prolistování přes „odkrytí” okrajů se mi líbí.


— Zdroj TUAW

Via @tombarys

Přednášku, jejíž slajdy vkládám níže, bych si rád poslechl, bohužel je součástí An Event Apart a z toho záznamy nejsou. Jen poznámky nezdolného Luka Wroblewskiho.

Jak v komentáři dodal Honza Řezáč, přednáška je shrnutím knihy Design for emotion.

Opět jeden tutoriálek od Codrops a opět platí, že jejich příklad je až moc výrazný, v praxi by se asi tak silný efekt hodil jen málokde. Nicméně, v jemnější variantě si to představit dovedu.

1 KB jQuery plugin pro jednoduchou responzivní slideshow.

Via WebAppers

Prezentační video iPad aplikace pro kreslení diagramů. Líbí se mi, jak využívá gest pro to, co by dřív byla nějaká explicitní volba funkce z menu. Výsledkem je, zdá se, mnohem přirozenější rozhraní.

Přesně tohle objevování „nového jazyka”, kterým budeme v dotykových rozhraních mluvit, nás teď bude pár let určitě zaměstnávat.

Via @karimartin, @bdc

Doplňování textu pro inputy ve formuláři v 8 KB pluginu.

Via WebAppers

Určitě se vám to někdy stalo: Vyplňujete dlouhý formulář a omylem si zavřete tab, nebo spadne prohlížeč, či systém a vyplněná políčka jsou v trapu.

Sisyphus.js se snaží tomuhle nepříjemnému zážitku předejít tím, že vám umožní automaticky v pravidelných intervalech ukládat obsah formuláře a obnovit vyplněná políčka, pokud to budete potřebovat.

Používá localStorage z HTML5 a má jen 3,5 KB.

Via Smashing Magazine

V návaznosti na předcházející post: Ukázka dobré animace. Klikejte na červené tlačítko vlevo dole.

Via @PetrKaleta

Jason Fried píše o hledání rovnováhy v designu.

„Coming to know the difference between obvious, easy, and possible takes a lot of practice, deep thinking, critical analysis, and, often, debate. It’s a constant learning process. It helps you figure out what really matters.

But once you’re able to see the buckets clearly, and you begin to think about things in terms of obvious, easy, and possible instead of high, medium, and low priority, you’re on your way to building better products.”

UI Parade shromažďuje ukázky nejrůznějších prvků uživatelského rozhraní.

Pokud byste chtěli víc, zkuste moje záložky.

Za tip díky @milancermak

Už jsem na to odkazoval před rokem a půl, ale tenkrát se to týkalo jen WebKit nightly buildů. Teď už parametr -webkit-font-smoothing funguje minimálně na aktuálním Chrome a Safari.

Obzvlášť velká písmena s tím vypadají o poznání líp, takže jsem to zapnul pro celý svůj blog.

V článku Asynchronous UIs – the future of web user interfaces Alex MacCaw celkem stručně představí trochu jiný přístup k tomu, jak prezentujeme uživateli změny a jak rozhraní reaguje na jeho požadavky.

Když to zjednoduším, představte si Ajax, ale bez čekání na vykonání požadavku. Změny se v UI projeví okamžitě, uživatel na nic nečeká, nic se nenačítá znovu. Akce se provedou na pozadí a uživatel je vytržen z nerušeného používání pouze pokud se něco nepovedlo.

Zmiňuje javascriptový framework Spine, který mě zaujal už tím, jak se prezentuje.

Takhle by měly fungovat všechny web aplikace. Miluju tuhle dobu.

Via @zdenekkostal

PS: Ten modální dialog při smazání položky v jeho příkladu beru v daném kontextu jako vtip :-)