Ręce precz od stylowania formularzy

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Grafiku! Wyobraź sobie, że projektujesz serwis internetowy. Być może nawet teraz to robisz. Są w nim formularze - jakże by miało ich nie być - pola tekstowe jedno i wielolinijkowe. Pola wyboru jedno i wielokrotnego, rozwijalne listy, pola uploadu plików oraz cała masa przycisków. Masz zestaw wytycznych w postaci wireframes i zabierasz się do ich rysowania w najnowszym Photoshopie / Fireworksie.

Stop.

Nawet niech ci przez myśl nie przyjdzie rysować je pod design strony. Kolorowe obwódki, tak modne teraz delikatne zaokrąglenia - won! Rozwijalne listy z ładnymi trójkącikami po prawej stronie - oo nie. Niestandardowe czekboksy, pola radio z ładniutkimi zaznaczeniami - nawet mnie nie denerwuj.

Już ci mówię czemu. Przez swoje fanaberie stwarzasz ogromne problemy zespołowi wprowadzającemu twoje wizje w życie. Przez chęć artystycznego wyrażenia się i kompletne niezrozumienie zasad działania HTML i CSS powodujesz, że ktoś kogoś tu zaraz rozszarpie.

Parę informacji dla ciebie:

Kolor obramowania: …da się zmienić tylko w niektórych przeglądarkach. Explorer 6 nie zastosuje takiego stylu do listy rozwijalnej. Jeśli nadajesz z góry styl dla input (bez klasowania bądź korzystania z selektorów atrybutów) to Opera obramuje także czekboksy i radiobuttony.
Dopełnienie zwane paddingiem: …da się zmienić tylko w niektórych przeglądarkach. Explorer 6 nie zrobi nic z listą rozwijalną. Opera 8.x nie zastosuje paddingu nigdzie.
Kolor / obrazek tła: …da się zmienić tylko w niektórych przeglądarkach.
Podsumowując…: Tylko w niektórych przeglądarkach

Liznąłeś co nieco HTML-a i z dumą twierdzisz, że można otoczyć kontrolkę divem i nadać mu styl, ukrywając styl pola? Odpal dzieło w Safari i podziwiaj piękne MacOS-owe widgety otoczone jakimś kolorowym obramowaniem, jeśli „lekki i semantyczny dokument” nic ci nie mówi.

Żądasz od zespołu wynalezienia od nowa koła za pomocą NiceForms? Dostępność spada, a ty i tak będziesz flugał, bo skrypt nie jest doskonały. No i wyobraź sobie tylko swoją minę na wieść, że pola uploadu plików nie da się dotknąć niczym, ani CSS-em ani JavaScriptem.

Co ty na to?
Co zobaczą ludzie z CSSem a bez obrazków?
Co się stanie, jeśli na jakiejś przeglądarce taki kod wywali wszystko z hukiem?

Jesteś gotów wziąc za to odpowiedzialność?

Odpowiedź na te problemy jest prosta - daj se spokój. Możliwe, że na 80% szefów zrobisz wrażenie projektując delikatne interfejsy formularzy. Ale sieć rządzi się swoimi prawami. Nie wahaj się wykonać cudnego czekboksa dla designu aplikacji desktopowej. Ale nie ruszaj stylu formularzy WWW, nie teraz i najpewniej nie przez następną dekadę.

Pamiętaj także o jednym - większość użytkowników Internetu to zwyczajni ludzie. Przyzwyczajeni do wyglądu przycisków i pól tekstowych, które w większości wyglądają tak samo w całym systemie. Jeśli człowiek czuje potrzebę zmienić wygląd widgetów swojego desktopu - zrobi to. Nie rób tego na siłę. Nie czuj się zobligowany do zmiecenia go z powierzchni ziemii wspaniałym formularzem jakiego jeszcze nie widział - skup się na użyteczności tego co rysujesz, a nie na fajerwerkach.

Jeśli nadal nie wiesz o czym mówię - realne wsparcie dla twoich magic skills w PS-ie spowoduje wzrost budżetu projektu, bądź jeśli to tak nie działa w miejscu gdzie pracujesz, wzrost irytacji i „odwalenie” twojego wysublimowanego projektu byle jak. Im szybciej przywykniesz, że wygląd formularzy nie leży w zasięgu twoich rąk tym lepiej.

Chyba, że należysz do tych twardogłowych, którzy podmieniliby także kursor myszy oraz paski przewijania z boku strony w celu nadania stronie bombastycznego designu.

Słowa te adresuję do nadgorliwych projektantów oraz do siebie - patrz wyszukiwarka po prawej.

Na zakończenie

Dodam także (korzystając z zasady, że 75% ludzi komentuje tylko ostatni akapit tekstu), że treść postu tyczy się dużych serwisów korzystających z wszystkich typów pól. Jeśli projektujesz bloga albo mini stronkę z jednym input type="text", powyższe kazanie nie jest skierowane do ciebie.

Tagi wpisu: css, design, forms, niceforms, rant

Informacje i hiperłącza

Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 10 października 2006 o 19:51

Kategorie: CSS, Design, Dostępność, Użyteczność, Web 2.0

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Komentarze

Ktos 1 10 października 2006, 19:58

No, akurat inputfile da się czasem dotknąć. Vide http://www.quirksmode.org/dom/inputfile.html

Osobiście jako użytkownikowi Sieci nie przeszkadzają mi takie cudne interfejsy formularzy, powiem nawet, że czasem cieszą oko. Dlaczego w niniejszym blogu jest image zamiast przycisku "submit"? Ano, zeby nie było tak brzydko, tak pospolicie...
zx 2 10 października 2006, 20:18

Nie można mieć wszystkiego jak to mówią. Robiąc jedno - rezygnujesz z drugiego.

Ja - jako zaawansowany modder Windowsa - przyciski i tak mam inne i nie pozwalam najczęściej (wyjątki są) Operze na stylkowanie forms'ów.
Piotreckh 3 10 października 2006, 20:30

Może i masz rację, ale nie rozumiem rozgraniczenia pomiędzy "dużymi serwisami" i "blogami lub mini-stronkami".
Bartini 4 10 października 2006, 20:38

Dziękujemy ojcze dyrektorze, za piękne kazanie :)

>Słowa te adresuję [...] do siebie.
Jakaś jesienna deprecha? ;)

Mnie tam nie przeszkadza stylowanie formularzy, wydaje mi się że twoje strasznie rozsypaniem się, jest raczej przesadzone, jak sobie ktoś strzeli kolorową ramkę i tło dla <input> to naprawdę nic się strasznego nie stanie. Sam zawsze ustawiam sobie kolor ramki i tło, bo szare okienko w czarno-niebieskim szablonie wygląda do bani.
Co do tego badziewiastego nice forms to faktycznie jest shit straszliwy, ale mniej wiecej to samo mozna zrobić za pomocą CSS i też kto ma zobaczyć to zobaczy. Wielkiej różnicy nie ma.
Jeszcze gorszy badziew to JS przy formularzach, to fakt.
Tyle, że to trzeba edukować niekumatych, a nie zabraniać, bo dobrze wiesz, że jak polakowi coś zabronisz, to on zrobi Ci to na złość ;p I przy okazji poleci flame na Ciebie, że dajesz kazania, rozkazy i tak dalej.
Zbigniew Czernik 5 10 października 2006, 20:44

W sumie ten formularz komentarzy też jest delikatnie ostylowany :)
mwgamera 6 10 października 2006, 20:56

Kideyś stylowałem formularze… dopuki nie zobaczyłem mojego „dzieła” w konquerorze…
Adrian 7 10 października 2006, 21:07

IMHO wydaje mi sie ze autorowi chodzilo o bardziej zaawansowane formularze a nie tylko textarea, input type="text" czy submit jak na tej stronie. Chodzilo np. o checkboxy i selecty,optiony
balbardagram 8 10 października 2006, 21:12

eee, riddle przesadzasz ;)
olórin 9 10 października 2006, 21:48

Tak, riddle, przesadzasz... Różne przeglądarki? Dane ze strony reprezentatywnej (projektowanej i odwiedzanej przez ZU): IE 77%, Fx - 20%, Opera 1.15%, Safari 0.37% i powiedz mi że z powodu kilkunastu odwiedzających, którym strona mogłaby się wyświetlić trochę inaczej (a nadal byłaby używalna) mam rezygnować z takiego czy innego rozwiazania? Oczywiście nie ma co wciskać tego na siłę, ale jeżeli cała strona robiona jest eye-candy, to dlaczego mamy zrezygnować ze stylowania inputów?
Fluxid 10 10 października 2006, 22:07

Jestem człowiekiem, który jak robi stronę, to testuje ją wszędzie. I zgodzę się, w większości. polom tekstowym i buttonom nadaję klasę z obramowaniem i tłem, dzięki czemu checkboxy etc. są nieruszone, a tam gdzie nie działa, to nie przeszkadza. :)
soon 11 10 października 2006, 22:21

Riddle wziął się do pisania postów :)

Riddle ma rację. Oczywiście, graficy niech się zastanowią zanim coś zrobią, bo pewnie nie wszystkie ich wizje twórcze da się wdrożyć żeby cacy działały pod każdego użytkownika. To się tyczy tylko dużych serwisów (bo ja np: jeżeli miałbym mieć na swojej stronie ładne formularze, ale wyświetlały by się tylko pod FF to wolałbym ładne formularze pod FF niż nigdzie).
Eluś 12 10 października 2006, 22:32

Fenomen. Pierwszy chyba wpis z którym w pełni się zgadzam, a tu takie komentarze. Wspaniałych masz czytelników.
Wimmer 13 10 października 2006, 23:18

Piotrze, jak mogłeś mi to zrobić? A ja dałem takie ładne przykłady ostylowanych formularzy w kursie :-)
http://webmaster.helion.pl/kurshtml/form/form.htm
Ale poważnie, style przydają się np. przy pozycjonowaniu w polu tekstowym.
Bigismall 14 10 października 2006, 23:24

W sumie to szkoda, że stylowanie kontrolek formularzy jest takie toporne i różnie interpretowane. Uważam że możliwość pełnego w pełni jednolitego formatowania byłą by przydatna, tylko od twórcy witryn zależało by w jakim stopniu z niej skorzysta.
9gods 15 11 października 2006, 00:33

To chyba nie problem z grafikami, tylko z pseudo standardami, które każda przeglądarka interpretuje po swojemu. Nic się od czasów Netscape 4 nie zmieniło, dalej kiła.
Dawid Leśniak 16 11 października 2006, 10:08

Ojj to chyba cos o mnie =)
patryk_t 17 11 października 2006, 11:04

świetny tekst, zgadzam się, że upindrzanie formularzy to koszmar.
sanity-kills 18 11 października 2006, 11:32

powiedziałbym, że bez przesady ;)

najważniejsze to, nawet jeśli takie stylowanie jest niesemantyczne, żeby była możliwa łagodna degradacja -> jeśli przeglądarka nie umie czegoś wyświetlić w sposób zaprojektowany przez grafika to niech wyświetli to normalnie - tym sposobem można zadowolić x% użytkowników nie szkodząc (100-x)%.

Pozdrawiam

ps: wolałem teksty które były mniej zabarwione negatywnymi emocjami. (takie moje wrażenie tylko)
mls 19 11 października 2006, 11:40

No proszę, dawno nie było tu nic tak sensownego. Grafik u mnie w firmie także, niestety, rysował piękne kontrolki formularzy. Na szczęście do czasu, gdy zrozumiał, że nie da się ich tak ładnie ostylować. Może zmienił przeglądarkę z IE, może coś innego, nie wiem, ale na szczęście już mu przeszło :) Tym bardziej, że ostatnio częściej korzystam z Safari niż z innych przeglądarek, także przy tworzeniu stron. I nie korzystam z nightly build, które obsługują już jako-takie stylowanie pól input[type="text"]. A w ogóle, najładniej wyglądają standardowe formularze, o. Przynajmniej są takie, do jakich użytkownik jest przyzwyczajony...
palo 20 11 października 2006, 14:03

Najprościej jest zrobić coś, co wygląda prosto i efektownie - nawet pod kolor strony. Obramowanie dookoła 1px i teraz twórczość! góra, dół prawo, lewo - pogrubiamy, modyfikujemy linie za pomocą css'a. Dużo prościej wykonać - dużo lepiej wygląda. Prosta zasada, czy użytkowników powoli nie męczy wszystko okrągłe?
Riddle 21 11 października 2006, 14:13

Palo: To ładnie wygląda, ale mając zestaw pól formularzy włącznie z selectem, nie uda nam się osiągnąć harmonii w wyglądzie, bo IE nie pozwala stylować w ten sposób select.

Bartini: Good point, ale nie chcę zostać stronką z newsami albo magazynem internetowym. :-)

Olórin: Chciałbym przesadzać, stylowanie pól formularzy to koszmar. Opera i IE - dwa powody, mówiąc twoim językiem, wysokoprocentowe i wszystko siada, mate.

Ktoś: Hack z Quirksmode jest naprawdę evil, dobrze o tym wiesz. :)

Pola formularza komentarzy są tutaj ostylowane, ponieważ nie korzystam z wszystkich typów i udało mi się zachować konsekwentny design. Przekombinowałem z zaokrągleniem i paddingiem w polu formularza wyszukiwania, co zaznaczyłem w tekście. :-)
Michał Stempień 22 11 października 2006, 15:29

Bardzo dobry post, sam natknąłem się wiele razy na takich grafików. Ich wizja elementów formularza nie wynikała z ogromnego budżetu projektu, ani z wymagań klienta, tylko z tego, że nigdy nie kodowali swoich dzieł. Oczywiście, wszystko da się zrobić... ale w odpowiednim czasie, a tego akurat zawsze brakuje. Sam też lubie drobne stylizowanie formularzy - szkoda tylko, że nie da się tego łatwiej robić.
palo 23 11 października 2006, 19:21

Riddle, moim zdaniem zastosowanie dla textarea lub inputu kodu css, w którym będzie się zawierać wyłącznie deklaracja fontu, tła oraz obramowania nie ujmie w niczym stronie, a jedynie jej doda walorów. Co do zaokrąglanych, obrazkowych stylizacji - oczywiście jestem na NIE, ale nie możemy odnosić się do początków, czyli zostawić inputy takimi jak zostały stworzone - troche elegancji musi być.

Pozdrawiam ;)
rafalski 24 12 października 2006, 17:38

Nawet lubie safari jako user, ale nie trawie tych ladniutkich formularzy jako developer. Dlatego nie zawaham sie uzyc..
http://www.easy-designs.net/articles/replaceSelect/
shpyo 25 15 października 2006, 10:16

Heh... Formularze to jeszcze nic. Najgorsze są projekty grafizne, gdzie wszystko jest ładnie wyrównane na samym dole strony. Grafik nie przewiduje, że strona może zawierać duuużo więcej treści i wtedy wszystko się sypie.
webjay 26 15 października 2006, 18:12

Riddle, troche przesadziles... odrobina js i mozna zrobic naprawde fajne rzeczy, dzialajace i nie psujaca sie zarowno bez js'a jak i bez css'a. Wlasnie cos takiego koncze - wyglada 10 razy ladniej i nie traci na funkcjonalnosci, a ergonomie podnosi.

IMHO artykul dotyczy slusznego zalozenia: samymi css'ami nie zrobisz za wiele z formularzem. Tytul 'Ręce precz od stylowania formularzy' sugeruje, ze to jakas zbrodnia stylowac i manipulowac przy formach - a przeciez to nie zabronione, a wrecz wskazane - aby je (formularze) upiekrzyc choc odrobine.

Dodajac do cssow odrobine js - zrobisz _dowolna_ rzecz (opera sux z 'browse file...' niestety).

btw. chyba najladniejszy polski blog :)
Athan 27 18 października 2006, 13:46

Ja jestem jednak podzielnej uwagi. Z jednej strony można ustylizować input text i textarea, ale żeby stylizować radio albo checkboxa? bez przesady Panowie... od tego jest Flash a nie CSS, poza tym takie stylizowanie to na strony o designie. Jak chcesz zbudować profesjonalną stronę - trzymaj się interfejsu usera (tu popieram Riddle'a)
dunDer 28 24 października 2006, 12:45

Jesli w FF, Operze i IE wyglada to dobrze i jest zgodne z XHTML+CSS to o co chodzi? Reszta bedzie miala wyswietlony formularz tylko bez wszystkich bajerow, ale to wina przegladarek ze nie obsluguja standardow. Ciezko zeby nie uzywac czegos tylko dlatego ze jakas mala firma ktorej nikt nie zna wyprodukowala bubel a nie przegladarke - miliony jest takich i to znaczy ze trzeba sie ograniczac? Jesli funkcjonalnosc nie spada a jedynie troche gorzej (co nie musi znaczyc nieczytelnie) wyglada strona w takim niedorobionym browserze to o co chodzi? Wg mnie to jest takie troche sranie w banie za przeproszeniem, bo najwazniejszy jest Firefox, Opera, IE i Lynx - jesli pod tym nikt nie ma problemow to jest OK, a reszte przegladarek mozna sobie w D wsadzic jesli kod jest w pelni zgodny a stronka w nim wyglada kaszaniascie :] hehe
Riddle 29 24 października 2006, 14:06

O to chodzi, że nie rozumiesz idei standardów sieciowych to raz (wymieniasz 3 przeglądarki, tak jak kiedyś wymieniano tylko IE 4.0, poza tym jeśli wspierasz Operę musisz i Safari (-> Konquerora), tak idą procenty) dwa masz bardzo luzackie podejście do wizualnego aspektu webdesignu.

Standardy sieciowe próbują wyjść naprzeciw stylowaniu widgetów formularzy, ale nie udaje im się to - a to dlatego, że kontrolki użytkownika powinno się zostawić użytkownikowi i jego desktopowi.
Yashin 30 24 października 2006, 14:10

Hm... A gdyby w specyfikacji CSS3 do checkboxów / radio / inputów / czegokolwiek dozwolone byłoby korzystanie z obrazków jako "ŧła", coś na wzór:

checkbox{
background-image: url(checkbox-normal.gif);
}
checkbox:checked{
background-image: url(checkbox-checked.gif);
}

Tekstowe by ignorowały, FF, Opera, Safari, Konqueror interpretowały, ludzie zaczeliby przenosić się z ie, "bo po co mieć brzydkie formularze"? :)
dunDer 31 24 października 2006, 14:17

Jesli widze XHTML/CSS VALID i bedzie to dzialalo jak trzeba, bedzie funkcjonalne w kazdej przegladarce, a w niektorych po prostu bedzie wygladac gorzej z tej uwagi ze nie sa zrobione zgodnie ze standardami to wina lezy po stronie producenta przegladarki, choc wcale nie bedzie to niefunkcjonalna strona bo kontrolki beda dzialac tylko beda wygladac standardowo, ew. z jakims kolorem czy cos.
Przyklad prosty - OpenDocument jest standardem i nikt powazny nie bedzie tlumaczyl sie uzywaniem MS Office zamiast niego tylko dlatego ze "duzo ludzi go ma i w Wordzie ODT nie otworza". To by byl bezsens. To Ty nie rozumiesz idei standardow wogole. Polegaja one na tym ze jesli cos jest zgodne ze standardami to wszystko jest ok, a jak ktos uzywa IE ktory ze standardami nic nie ma wspolnego to jego sprawa i niech widzi kaszane na ekranie. Po co isc na reke komus kto ma w D standardy? I tu wlasnie Yashin ma racje. Celem standardow jest wlasnie rozwoj a nie zacofanie ... po co uzywasz wogole grafiki na stronach skoro ktos moze uzywac pulpitu w 16 kolorach i gowniano mu to wyglada? Po co uzywasz kolorow skoro ktos moze miec czarno bialy monitor w ktorym to sie i tak zlewa albo nie wyswietlaja sie pewne odcienie szarosci (mialem kiedys taki)? Ano dlatego ze stosujesz sie do ogolnych standardow a nie mojego widzimisie ... tak samo nikt nie powinien stosowac sie do widzimisie MS czy innych firm ktore same proboja robic swoje "standardy" :] Nie cofajmy sie wstecz przez takie posty jak ten wyzej ... to ze cos gdzies nie dziala nie znaczy ze najlepiej tego wogole nie robic i nie pracowac nad tego rozwojem ...
Ktos 32 24 października 2006, 14:29

dunDer: Po pierwsze jak już standardy to stosuj standardy ortografii. "W ogóle", a nie "wogóle".

I spróbuj mówić użytkownikom IE, żeby zainstalowali coś innego, bo ich przeglądarka nie rozumie standardów sieciowych. Powiedzą ci, że "no przecież większość stron działa!". Niestety, prawda jest brutalna, i ja też bym chciał żeby IE 6 wyginął, ale niekiedy TRZEBA zachować zgodność z nim. Zwłaszcza przyjmijmy że otwierasz nowy serwis internetowy - i odcinasz użytkowników IE od niego. I co? Nie korzystają? Czy ktoś zmieni przeglądarkę dla jednej strony? Nie - tracisz sporą część publiki. A w przypadku niektórych projektów utrata ułamka internautów jest już bardzo poważnym problemem.

Nie chcesz robić stron tak, by pod IE działały prawidłowo? Twoja wola.

Ale w poście chodzi o to, żeby w ogóle nie stosować "ulepszaczy", a nie tylko dlatego, że IE nie rozumie. Czy cokolwiek innego.
dunDer 33 24 października 2006, 14:41

"ulepszaczy"? dla mnie wyglad strony to nie ulepszenie, szczegolnie jesli wiekszosc ludzi bedzie mogla ogladac ladniejsze formularze, a garstka formularz bedzie widziala normalnie. Bo nikt mi nie powie ze nie da sie zrobic tak zeby wszedzie wygladalo to estetycznie, tylko widze ze kogos tutaj mania napadla i zamiast myslec jak wszystkim dogodzic bez ustepstw wrecz propozycja jest odwrotna - zrezygnowac najlepiej tylko dlatego ze nie wszedzie bedzie tak samo :|
A co do MS to poblazanie ich wybrykom w niczym nie pomaga - ogolny bunt bylby lepszy bo ktos nie mogac wejsc na strone ktora go ciekawi zainstaluje sobie inna przegladarke mimo wszystko albo zapyta kogos madrzejszego dlaczego ten IE mu nie dziala - wierzcie mi.
Riddle 34 24 października 2006, 15:00

„Bo nikt mi nie powie ze nie da sie zrobic tak zeby wszedzie wygladalo to estetycznie”

Więc właśnie ci mówię a ty nadal swoje. Tworząc ileś tam serwisów internetowych oraz używając setek innych widzę, że stylowanie formularzy jest chybionym pomysłem, który w którymś momencie zaowocuje powrotem do wyglądu kontrolek systemowych. Z mojej strony to tyle, bajos.
dunDer 35 24 października 2006, 15:26

a ja mowie o tym, ze jesli jest jakas kwestia sporna - jedni chca ladnego wygladu, a inni zeby bylo to kompatybilne to rozwiazaniem nie jest powiedziec "stop" tylko znalezc rozwiazanie ktore umozliwi pogodzenie i jednego i drugiego ... czyli rozwijanie standardow w tym kierunku zeby zwiekszyc ich elastycznosc ;)
Yashin 36 24 października 2006, 16:35

"Więc właśnie ci mówię a ty nadal swoje. Tworząc ileś tam serwisów internetowych oraz używając setek innych widzę, że stylowanie formularzy jest chybionym pomysłem, który w którymś momencie zaowocuje powrotem do wyglądu kontrolek systemowych. Z mojej strony to tyle, bajos."

Tylko że gdyby w specyfikacji CSS to było, to byś uzywal, tylko w [if IE] cssie bys nie dawal :)
webjay 37 25 października 2006, 18:44

[dunDer]: „szczegolnie jesli wiekszosc ludzi bedzie mogla ogladac ladniejsze formularze, a garstka formularz bedzie widziala normalnie”.

o to chodzi :) jak ktos ma text browsera, to i tak 'przeczyta' strone z obrazkami, jak ma 'graficzna' (czyt. normalna) to zobaczy tez ladne ilustracje. warunek jest tylko jeden - ilustracje nie moga wplywac negatywnie na czytelnosc i to jest jedyny argument, na ktorym mozna byloby oprzec teze 'rece precz od stylowania formularzy' - dokladnie o tym dunDer mowi.
Jakub Kułak 38 29 października 2006, 02:01

Strona ma być przede wszystkim czytelna i dostępna pod wszystkimi przeglądarkami, dopiero po drugie ma tak samo wyglądać. Jeżeli któregoś pola nie da się stylować pod którąś przeglądarką, to strata (zysk?) jej użytkowników, dlatego uważam, że dopóki z formularza da się skorzystać zarówno przez wap jak i jaws’a to jest ok bez względu na to jak ładnie wygląda pod IE (czy czymkolwiek innym).

No i nie rozumiem Twojego podziału na małe i duże serwisy – to nie ma żadnego znaczenia, ponieważ co się da zrobić w dużym serwisie, to da się też w małym. A czego się nie da tu, to też się nie da tu.

Riddle: „kontrolki użytkownika powinno się zostawić użytkownikowi i jego desktopowi”.

A czemu w takim razie nie zostawiać też kolorów, rozmiarów i fasonów czcionek?

Oczywiście fantazje projektantów-grafików trzeba trochę zeszlifować, bo niektóre projekty to rzeczywiście gruba przesada.
Riddle 39 29 października 2006, 10:54

Różnica jest dość oczywista – w blogu nie potrzebujesz pola file i rzadko kiedy czekboksów albo radiobuttonów.

To co opisałem wynika z jakiegoś tam doświadczenia i zaręczam, że zostawienie w spokoju pól formularzy przyniesie więcej dobrego jak złego.
webjay 40 01 listopada 2006, 00:44

Riddle, dopisz ‘rece precz od stylowania formularzy w blogach’ i po czesci sie z soba zgodzisz… nawet ‘dodaj komentarz’ jest ostylowany, wiec cytuje:

„To co opisałem wynika z jakiegoś tam doświadczenia i zaręczam, że zostawienie w spokoju pól formularzy przyniesie więcej dobrego jak złego.”
Riddle 41 01 listopada 2006, 00:46

Przeczytaj ostatni akapit (i sprawdź kod tych przycisków).
webjay 42 01 listopada 2006, 01:49

‘sprawdź kod tych przycisków’ – mialem na mysli sekcje (wszystkie inputy i textarea), a nie tylko img-submity.

ostatni akapit, czy chodzi o ten: „Jeśli projektujesz bloga albo mini stronkę z jednym input type=„text”, powyższe kazanie nie jest skierowane do ciebie.”?

to jakos tak wybiorczo… jedno tak, kilka nie… textarea takze sklasowales… wiec w/g Ciebie mozna text, textarea i wstawiac grafike do buttonow – reszty juz nie, bo… bo nie.

wiec, czegos nie rozumiem – dlaczego mialbym nie skorzystac z przejrzystego radio / checkboxa, ktory wyglada jak radio / checkbox ale nieco ladniej?

jaka jest roznica, pomiedzy ostylowanym text, a zfejczerowanym graficznym checkboxem? IMHO zadna – kwestia skila, aby zrobic to poprawnie (i juz mowie, ze bedzie dzialac zarowno bez css jak i bez js).

nie lubie krytykowac, ale jednoczesnie draznia mnie dziwne skroty myslowe – IMHO zainspirowales sie kilkoma artami z zachodnich serwisow i jakos probujesz przekazac argumenty, ktore maja sie troche nijak do rzeczywistosci :(
Riddle 43 01 listopada 2006, 09:16

Żaden art mnie nie zainspirował, używam i koduję dość duże serwisy internetowe i wiem że stylowanie formatek formularzy jest błędem, ponieważ albo zatraca się spójność graficzną albo walczy z wiatrakami.
Piotrek 44 03 listopada 2006, 20:20

Krótko: Zasłużył chłopak na pochwałę
kanjar 45 09 listopada 2006, 00:53

święta racja, nawet zwykłe width dla input type=„file” nie działa dla wszystkich przeglądarek (np. Firefox)
a dodawać tone JS żeby jeden przycisk ładnie wyglądał... :/
hartipa 46 17 listopada 2006, 10:46

A ja styluje/robię/upiększam serwisy i może twój artykuł niesie wiele prawdy, ale jak wiele rzeczy, w zderzeniu z rzeczywistością przegrywa. Jak? Po postu: – SZEF chce żeby było okrągłe lub wypukłe lub wklęsłe lub półprzeźroczyste czy inne. I nie ma bata żeby go przekonać. Ma być ładnie i już. Nie zgadzasz się to znajdź sobie inną robotę. – Klient też czasem kręci nosem, bo to szare takie, brzydkie, on chce ładniejsze? Ze nie będzie zgodnie z WAI czy innym nie wiadomo czym? A co go to obchodzi, gość płaci i wymaga – ma być ładnie i w dodatku z animacją.
Nigdy nie będzie tak, że kogoś przekonasz do swojego projektu mówiąc mu że gdy użyjesz „semantycznego XHTML-a, wizualizowanych CSS-em, których użyteczność zwiększa JavaScript/DOM” to będzie koleś miał lepiej niż konkurencja. Co mu z DOM o którym nie ma pojęcia skoro biznesowy rywal ma stronkę z wyśmienitą grafiką, ładnie wkomponowaną animacją, ostylowanymi formularzami itp. Ludzie w większości mają gdzieś standardy, liczy się wygląd, bajer czasem fajerwerk jakiś. Nie mówię, że trzeba olewać standardy, sam staram się ich przestrzegać, a jak „góra” zleci okrągły input to trzeba go zrobić.

Tak więc marzenia swoją drogą a życie swoją...

A rozróżnienia na małe i duże serwisy to nie rozumiem. Czym różni się mały od dużego i gdzie leży granica wyznaczająca wielkość?
Riddle 47 17 listopada 2006, 12:14

Po postu: – SZEF chce żeby było okrągłe lub wypukłe lub wklęsłe lub półprzeźroczyste czy inne. I nie ma bata żeby go przekonać.

Więc trzeba szefów edukować. Kiedyś nikt nie chciał słyszeć o braku otwierania linków w nowym oknie, teraz jest to rzadkość że ktoś o to poprosi. Masz rację, czasem się nie da przebić przez mur, ale można spróbować (i pokazać ten art na przykład ;))

A rozróżnienia na małe i duże serwisy to nie rozumiem. Czym różni się mały od dużego i gdzie leży granica wyznaczająca wielkość?

Geez, spójność graficzna. Parę borderów i obrazek tła nie zrobiło nikomu krzywdy, ale input[file] i select na przykład w paru przeglądarkach nie dadzą się ruszyć.
Piotr 48 11 grudnia 2006, 09:52

Riddle: Ja mam prośbę, wywal to rozwijanie z „momencikiem”. Bajer jest fajny i działa ok. chyba wszędzie, ale… odbierasz użytkownikom podstawową funkcjonalność przeglądarki – przycisk wstecz. Użycie go wymusza konieczność ponownego rozwijania artykułu. Nie podoba mi się to.
Krzysiek Kluza 49 23 czerwca 2007, 01:37
Nie podoba mi się styl w jakim apelujesz do grafików: „Przez swoje fanaberie stwarzasz ogromne problemy zespołowi wprowadzającemu twoje wizje w życie” – a co to grafika obchodzi? Skoro dzielisz pracę na grafika i zespół wcielający, to chyba grafika praca kończy się na tym, by oddać grafikę. Prościej by było, aby to grafik przygotował cały layout – w końcu html i css nie wymaga jakiejś ogromnej wiedzy…

Czym innym jest jednak „stwarzanie problemów”, a czym innym sforumułowane dalej już konkretne argumenty, że:
- nie wszystko się da zrealizować,
- spada dostępność formularza,
- ludzie przyzwyczajeni są do standardowych przycisków.
To są argumenty, które mnie przekonują (użyteczność przede wszystkim), choć mimo to uważam, że niceforms są całkiem nice :)
hidee 50 07 sierpnia 2007, 14:35

A ja też upiększam formularze, tak aby pasowały do layoutu strony. W swoim biuletynie umieściłem post jak zmienić wygląd pola typu checkbox oraz radio. Oczywiście działa on pod większością (nie sprawdzałem czy pod wszystkimi) przeglądarek, takich jak IE6/7, Mozilla Firefox oraz Opera (z dostępnością safari problem – nie ma na Windę).

Więc stwierdzenie „nie wszystko da się zrobić” jest w tym przypadku błędne.
PS. Jak się chce i ma trochę wyobraźni to się da nawet podmienić strzałkę w polu select (i to pod mozillą) – wystarczy w moim biuletynie przejść do logowania.
Lort 51 27 września 2007, 16:24

Osobiście, owszem, zmieniam style formularzy, ale raczej nieznacznie, ograniczając się do zmiany koloru ramki, tła czy czcionki dla pól tekstowych, czy buttonów. Jeśli chodzi o obrazki w formularzach to mówię im stanowcze WĄ! Sam korzystam z simdaty, więc oszczędzam przede wszystkim na grafikach… I po prostu szlag mnie trafia gdy nie mam pojęcia gdzie kliknąć jeśli chcę coś zrobić. Wybajerzone przyciski w postaci obrazków to istna zmora!
czerwiakowski 52 13 listopada 2007, 23:20

Błagam… grafik robi to co ma zrobić, czyli opracowuje wygląd serwisu i reszta go nie obchodzi. To developer ma się martwić, aby wszystko działało sprawnie. Nie po to zdobywałem doświadczenie przez ostatnie 15 lat, żeby powiedzieć mojej graficzce, że tak się nie da, kiedy z doświadczenia wiem, że jest inaczej. A najlepszym rozwiązaniem na niestandardowe formularze jest Flash – działa wszędzie i może wszystko, pod warunkiem że wie się jak go używać.

Pozdrawiam!
Riddle 53 13 listopada 2007, 23:20

To się uśmiałem, formularze na Flashu.
czerwiakowski 54 13 listopada 2007, 23:32

A co Szanownemu Riddle’owi nie odpowiada we flashowych formularzach? Czyżby były niezgodne ze standardem, czy po prostu brak wiedzy nie pozwala sprawnie obsłużyć? Bo argument z brakiem playera nie trafia do mnie.
Pytam się bardzo poważnie, bo nie wiedzę racjonalnego powodu, aby nie stosować formularza, we Flashu.
Albi 55 13 listopada 2007, 23:44

Dawno czegoś takiego nie widziałem… Zapytam swojego grafika, co o tym sądzi ;D.
kiero 56 13 listopada 2007, 23:45

@czerwiakowski: Bardzo prosto, chce coś zamówić poprzez formularz z komórki, i co teraz? Albo osoba niewidoma chce coś zamówić w zwykłej przeglądarce i nie może.
Reinmar 57 13 listopada 2007, 23:59

>grafik robi to co ma zrobić, czyli opracowuje wygląd serwisu i reszta go nie obchodzi. To developer ma się martwić, aby wszystko działało sprawnie.

@czerwiakowski: LOL. Tak robi dzieciak, a nie poważny grafik.
czerwiakowski 58 14 listopada 2007, 00:03

@kiero: a stosuje się w formularzu dla komórki niestandardowe kontrolki? Bo tam chyba, wszystko jest proste i lekkie. Ale drugi argument trafia do mnie bardziej: 75% użytkowników stron, które projektuje to niewidomi i bardzo im zależy, aby piękne, zaokrąglone, kolorowe [tutaj wstaw dowolną ilość efektów wizualnych] kontrolki były zrobione bez flasha. Jeżeli chcesz używać takich argumentów, uważaj bo kiedyś wejdzie na robioną przez Ciebie stronę i powie, żeś d***, a nie web developer, bo w Lynx’ie nic nie widać.

@Albi: miała być cięta riposta, ale… argumentów brak.

W ogóle mam wrażenie, że Autor bloga jak i Autorzy komentarzy są nastawienie niezbyt przychylnie do flash’a co bardzo mnie dziwi. Bo o ile we flash’u można odtworzyć każdy layout css+html, to w drugą stronę nie jest aż tak łatwo.
Więcej pokory i nieszablonowego myślenia. Nie zapominajcie, że przede wszystkim liczy się efekt końcowy, a nie standardy.
czerwiakowski 59 14 listopada 2007, 00:19

@Reinmar: Poważny grafik robi grafikę, a „dzieciak” próbując to zakodować nie wyjdzie po za szablon, „bo tak”. I będzie uparcie twierdził, że trzeba zmieniać klepnięty layout ponieważ nie zna flash’a/flex’a/ajax’a tudzież innej technologii, która pozwoliłaby na poprawną implementacje.

Darujcie już sobie tą świętą wojnę, bo niczego nowego nie wnosi do sprawy, a wyrocznią i tak jest klient, który płaci i wymaga, a Wy albo się dostosujecie, albo nie będziecie mieli co do garnka włożyć.
andrzejk 60 14 listopada 2007, 08:36

@czerwiakowski

Gdybym znał osobę niewidomą poczułbym się komentarzem urażony. Zachowujesz się co najmniej jak rozkapryszone dziecko. Ironizowanie na temat odsetka osób niewidomych, niedowidzących, daltonistów itp itd jest niesmaczne. Postaw się na miejscu takiej osoby. Wykonanie formularza, który działa i być może nie zawiera tych wszystkich fantazyjnych wodotrysków jest ważniejsze. Chcesz używać flasha do formularzy? OK, ale daj ludziom alternatywę.

Obecnie przystawiasz swoim serwisom etykietkę „takich jak Ty tutaj nie chcemy i mamy gdzieś, że nie możesz skorzystać z tej usługi”, co jest MOCNO nieprofesjonalne.

Co do grafików, to niestety jesteś również w błędzie. Profesjonalny grafik zna ograniczenia wynikające z używania html’a (i css, js) i potrafi dostosować swoje projekty. Grafik, który projektuje jakieś wymyślne rzeczy z ułańską wręcz fantazją, pomijając przy tym następną osobę w „kolejce” jest dzieckiem, a nie profesjonalistą. Grafik może się wykazywać w bannerach reklamowych, plakatach, reklamach różnego rodzaju, ilustracjach… zachowanie pokory w tym jednym przypadku i stworzenie projektu miłego dla oka i jednocześnie dostępnego dla ludzi jest dla mnie oznaką najbardziej profesjonalnego podejścia. I owszem, znam takich ludzi.

Nie neguję jednak Flasha, nie uważam że jest to wielkie zło, które powinno zniknąć. Tak jak html, css i js tak i flash ma swoje miejsce w świecie. Chodzi tutaj bardziej o świadome i rozważne używanie tych elementów.

Klient tak jak wspomniałeś, również nie jest wyrocznią. Klient nie jest specjalistą w dziedzinie projektowania czy implementacji serwisów internetowych. Klient przychodzi do NAS aby prosić NAS o wykonanie dla niego serwisu. Oczywiście ma jakąś wizję, ma pomysł, ale nie posiada wiedzy i warsztatu, dlatego konsultuje się z nami, ustala na co może sobie pozwolić, a na co nie, co może przynieść lepsze efekty w danym przypadku, a co wręcz odwrotnie.

I ostatnia rzecz… poprawna implementacja to nie zawsze „odbajerzenie” zgodne z widzimisię grafika.
Michał Krupa 61 14 listopada 2007, 12:09

@czerwiakowski:

Proste liczby (zmierzone na naprawdę dużej liczbie bardzo różnych internautów):

1,5% – brak flasha
2,8% – flash 7 i nizej

w sumie około 4,3%.

Dla porównania z Safari korzysta około 0,7% ludzi w Polsce. Olewasz jako front-ender Safari?

Po drugie, grafik musi znać ograniczenia wynikające z nośnika i technologii.
czerwiakowski 62 14 listopada 2007, 15:10

Zeżarło mi komentarz, więc teraz w skrócie (wybaczcie nie mam czasu na pisanie kolejnej epistoły).

Generalnie chodzi mi o to, że standardy TAK!, ale czasem trafiają się klienci uparci oraz klienci z wiedzą o swoim targecie przy której jesteśmy malutcy. O ile pierwszych można przekonać, to drugich nie przekonamy, bo wiedzą czego chcą i mają na papierze finansowe konsekwencje swoich wyborów – nie można zapominać, że serwis służy do zarabiania pieniędzy.

Grafik to artysta, który tworzy wizję projektu. Albo jest wykonalna zgodnie ze standardami, albo nie, ale i tutaj decyzja nie należy do nas tylko do klienta poinformowanego o wszystkich za i przeciw.

Procenty też są ważne, ale to które podał Michał stają się bezużyteczne jeśli targetem są użytkownicy YouTube.com w przypadku inne statystyki też można obalić w podobny sposób.

Nie chce się z nikim kłócić o wyższości świąt wielkanocnych nad bożonarodzeniowymi, chcę tylko pokazać, że punkt widzenia zmienia się w zależności od potrzeb klienta, bo to dla niego robi się serwis, a nie dla użytkowników – oni nam nie płacą, płaci klient. Badania targetowe, o których chyba zbyt często się zapomina to potężne narzędzie pozwalające ukierunkować serwis na konkretną grupę odbiorców, a przy odrobinie szczęścia określić zestaw dozwolonych technologii. Osobiście uważam, że warto z nich korzystać, bo ucinają wiele dyskusji na temat sposobu wykonania i nie ma sensu dostosowywać serwis dla wszystkich, kiedy od początku wiadomo, że np 75% odbiorców ma flash’a i generuje 99,95% zysku, a klient godzi się na stratę 0,05%.

EOT
Adas 63 18 listopada 2007, 23:05

„Więcej pokory i nieszablonowego myślenia. Nie zapominajcie, że przede wszystkim liczy się efekt końcowy, a nie standardy.”

to brzmi jak „cel uświęca środki”... czyli wiadomo jaka to droga.

A co do formularzy we flashu: klient może sobie zażyczyć wiele shitu, ale to my jesteśmy na straży poprawności standardów.
Versus 64 21 stycznia 2008, 21:49

Stary temat, ale cały czas na czasie.

Dzięki.
Marcin Klotek 65 13 lutego 2008, 16:46

Prawda taka bracie, że jesteś cięki jak dupa węża i dorabiasz teorię.
sztuki walki 66 05 czerwca 2008, 18:10

przecietny art ;>
pavulon 67 16 października 2008, 22:25

Heh.., kązdy się tu produkuje czy lepiej Flash czy może nie czy może w ogóle sie zastrzelić.

Wszystko to marność. Osobiście uważam, że najwyraźniej ktoś tu zrobił lukę i to taką feee… . CSS daje sporo możliwości, ale nigdy nie rozumiałem i chyba nie zrozumiem dlaczego tych sanych możliwości nie może być dla pól formularzy skoro są osiągalne dal DIV itp.
kilas 68 11 grudnia 2008, 02:01

A nie można by stworzyć normalnego, standardowego formularza w HTML. Na to nałożyć podstawowe style i, jeśli już chcemy bajerować, to za pośrednictwem JS odwoływać się do elementów tego formularza? Jeśli przeglądarka, której używa użytkownik nie obsługuje JS – trudno, zobaczy standardowy formularz. Jeśli obsługuje – wspaniale, załaduje się upiększona wersja formularza. Jeśli skrypt wykryje przeglądarkę uniemożliwiająca stylizowanie select – na jego miejsce podstawi skrypt zastępujący listę rozwijaną, etc. Wszyscy zadowoleni, choć oczywiście więcej pracy. Pracy, którą raz wykonasz i zawsze później możesz wykorzystać dołączając daną bibliotekę. Pozdrawiam.
pozdro 69 01 czerwca 2009, 13:57

Ehh taa nie róbmy stylowania … Tylko co zrobić jak szef każe zrobić ?:P