html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}fieldset,img{border:0;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}table{border-collapse:collapse;border-spacing:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;font-size:100%;}legend{color:#000;}del,ins{text-decoration:none;}

Само 699 символа е, а си спестявате недоволни потребители

Току що Краси ми репортна за нов изглед на Google Reader. Най-сетне започнаха да се премахват гадните сини “бъбълчета”. Подозирам наличие на нови дизайнери или просто на повече акъл в главата на старите Както и да е…изгледът радва…нищо чудно да се появят и теми за него(както стана с Gmail)

10. Ужасните каунтъри.

Да, всички сме попадали на такива. Бяха доста разпространени преди няколко години и бяха наистина налудничави. Но не мина много време и хората се усетиха, че са глупост тези огромни, грозни и изобщо не връзващи се, с дизайна каунтъри, та се заместиха от красиви малки картинки, водещи към отделна страница с тази статистика. Ето един пример за глупав каунтър:

9. Вертикалната линия с <img> таг.

Наистина адски се учудвам когато в днешни дни, видя подобна препоръка в някой форум. Става въпрос за глупавата идея да се направи една картинка с размери 1×1 и тя да бъде разтегната, до неузнаваемост:

<img src="line.gif" alt="" width="1" height="100" />

8. Меню от submit бутони.

Рядко срещана глупост. За меню с 10 линка се правят 10 формуляра, без никакви полета, освен един Submit бутон. Наистина рядко се среща, но е рядка глупост. Наскоро отново попаднах на такава страничка и дълго време не свалих усмивката от лицето си:

<form action="about.php" method="get">
<input type="submit" value="За нас" />
</form>

7. Flash или Java базирано меню.

Подобни глупави подходи са налице, при появата на всяка нова технология. Не може да не си спомняте при излизането на Java каква мания беше. Твърдеше се, че това е технологията на бъдещето за Web. Сега това място зае Flash…интересно ми е, кога ще се вдигне мъглата и от тази заблуда. Та 7-о място глупостта в страница да се вмъква глупаво Java или по-често срещаното наскоро Flash меню.

6. Меню във Frame.

Ок. Обещавам това е последното споменаване на менюта, ама именно там се допускат най-абсурдните грешки. Frame-овете, сами по себе си са полезни. Особено, когато се използват с ajax. Но абсурдният подход е в един фрейм да е хедърът, в друг менюто и в трети съдържанието. За да е култува, глупостта идеята е всеки фрейм да е с border не по-малко от 3-4 пиксела

5. <img> Spacer.

За малко да забравя класиката в жанра. Когато неща като margin бяха непознати, не може да не сте попадали на креативни начини за отстъп. Ето любимият ми в класацията “Най-глупави spacer-и“:

<img src="spacer.gif" alt="" width="20" height="50" />

Познато, нали?

4. Глупавите ярки бутони.

Какво беше един сайт преди години без глупавите огромни, обли или ръбести бутони, които са далеч от стила на страницата? Не…нямаше начин да минем без тях. Едно два от любимите ми:

3. <big> тагът.

Имаше времена, когато ръчно да указваш големината на шрифта, се смяташе за глупост. За това се използваше един уникален метод:

<big>Голям текст</big>

2. Глупавите фонови изображения.

Да, кой не ги помни. Разни хилещи се черепи. Наши снимки. Ярки изображения на горички, клетчици… и т.н. Винаги ми е било интересно, как никой толков години не е осъзнал, че подобни фонови изображения само пречат. А най-фрапантното е, че още не са рядкост тези сайтове…и дори големи и известни сайтове, като MySpace например. Кога ли ще се пробудят тези хорица, не знам.

1. Дизайнът, изграден от таблици!

Дойдехме си на думата. Първенецът нямаше как да не е глупавата таблична структура! Защо да се ползват <div> тагове, когато цялата ни страница може да е една глупава таблица? Така явно се е мислело преди… Това е най-често срещаната глупост на сегашните прохождащи дизайнери и чак ме хваща яд, когато попадна на такава страничка.

Искаме страницата ни да е с две колони? Лесна работа…

<table border="0">
<tbody>
<tr>
<td>Първата колона</td>
<td>Втората колона</td>
</tr>
</tbody></table>

Или пък, като се замислим…не е ли по-добре да са три колоните?

<table style="text-align: justify;" border="0">
<tbody>
<tr>
<td>Първата колона</td>
<td>Втората колона</td>
<td>Ето я и третата колона</td>
</tr>
</tbody></table>

Нямаше просто начин, да не споделя с Вас тези глупави техники! Било то малко за да се развеселим или да не допускаме нито една от тези глупави грешки. Надявам се, да не съм изпуснал, някоя “ценна” техника. Да забравим глупавите техники… нали това е идеята…да забравим Web 1.0

Ще се радвам, да чуя отзиви за тази класация

За да ви обясня по-нагледно, ще прибягна до следния сценарии. Правите си страхотен дизайн. Стилен, изчистен, без излишни мигащи глупости и т.н. Решавате, че за да бъде напълно изчистен, ще оставите фона на страницата бял. Добра идея, но това не го указвате, защото той по дефолт си е бял…ГРЕШКА!

И тази грешка е продиктувана от недефиниране на елементи, които смятате, че са си така както ги искате по подразбиране(a.k.a default). Е да, ама не. Тази грешка се забелязва например при хора, които използват тъмни теми на компютрите си. Било то тема за Windows, GTK+ или QT3/4 теми за GNU/Linux и т.н.

Защото, ако в останалите случаи на всеки потребител му се визуализира бял фон, то на тази малка група от потребители с тъмни теми, ще се визуализира изключително лошо. nplus ми предостави и един screenshot от tyxo.bg

Неприятна гледка нали? И всичко това просто заради мързел да драснем два реда в css файла ни. Не си струва! Дефинирайки фона се улеснява и потребителския браузър, което от своя страна е по-добре както за вас така и за посетителите ви. Когато даден обект не е дефиниран стилово, браузърът започва да го рендира както си знае операционната система, според стила й.

За да избегнете такива глупави последствия просто поставете следния ред някъде из .css файла си:

html, body { background: #FFFFFF; }

И целият проблем е решен! Дефинирайте стилово всеки използван обект в страницата си! Надявам се да ви е била полезна тази статия.

В тази статия ще опиша един проблем, който срещат изключително малка част от потребителите, но все пак е изключително дразнещ. Проблемът се състои в грешка на дизайнерите и забелязвам, че тя се допуска от изключително много такива. Вярно… и те са хора(Да! Хора са! Няма значение, какво са ви казвали, те са хора, точно като вас ), но понякога е грешка, която би те изкарала извън нерви, ако няма на кой да репортнеш тази грешка или не й обърнат внимание.

Нека дам малко повече информация на тази тема. Правите си едно дизайнче…жестоко…припка, много му се радвате. Формулярите…какво да ги гледаме тях? Бели полета с черен текст вътре. Е да, ама Вие указали ли сте го това? Това се подразбира по подразбиране, колкото и странно да звучи. Още по-ужасно става, когато се укаже или само фонът, или само цвета на текста вътре.

Нека Ви илюстрирам защо не винаги това, да оставите формулярите без старателно да им указвате стилове, далеч не е добра идея:

Грозна картинка нали? Това неприятно падащо меню се среща из целия админ панел на WordPress. Известен софтуер за блогъри, утвърден е, много е полезен, но едно такова недоглеждане “съсира” цялата идея. Проблемът, произлиза от това, че съм избрал мрачна gtk+ тема, а Firefox, ако не е указано друго, следва нея. Поне недоформатираните бутони се срещат само на едно място

И всичко това просто заради мързел да драснем два реда в css файла ни. Не си струва! Просто за стил на всеки формуляр добавяме тези два “иначе толкова симпатични”(както казва един ужасен български спортен коментатор) реда:

1
2

background-color:white;
color:black;

И целият проблем е решен. Слагате ги за input тага и всичко е наред. Независимо от операционната система, избраната от потребителя тема. Просто ще бъде един формуляр с бял фон и черен текст вътре. Спомням си, че преди време го имаше този проблем в edno23, ама Nick го фикса има-няма минута след като му го репортнах. Жалко, че не мога да намеря скрийншота…

Който и елемент да ползва дадени стойности по подразбиране, стремете се да му укажете Вие такива, именно с цел избягване на такива проблеми. Смятам да репортна това на WordPress.org тея дни…

1) Потребителят има интернет, но има някакъв носител, на който има копие от някой браузър. Отново не е удобно за обикновеният потребител.

Всъщност, ако оставим това настрана, интересен факт , че Майкрософт не спазва собствените си стандарти. Ако разгледаме списъка с членове на w3c някъде в него се намира не кой да е, а Microsoft Corporation. Mozilla Foundation и Opera Software също присъстват там. На мен не ми е много ясно как MS ще продават Windows с чужд браузър, но ще видим.

IE винаги е бил стратегически. Направен, за да победи по-добрия Netscape, Майкрософтският браузър дължи популярността си на мързел. И заради мързелът на потребителите и инерцията, придобита с годините сега се налага да правим сайтове “на две части” – по стандартите и за IE.

източник на части от информацията: Slashdot