Avatar of mpeshev

by

Дизайни и графични особености, неподходящи за уеб (дискусия)

06.06.2011 in Freelance seminar 26-11-2010

В историята ми с писане на уеб неща имам 3 конкретни проекта, които са ми съкратили живота с немалко години и основната причина за това е, че PSD-тата идват от хора с бекграунд на графични дизайнери, предпечат, рекламни агенции и прочие. А аз съм краен почитател на backend нещата и безкрайно много ме боли, когато се сблъскам с абсурдите на front-end света и конкретно рендването на уеб портали.

А понякога дизайните идват от хора, които цял живот са правили: визитки, плакати, картини, календари, банери и други.

Нямам нищо против тези гурута на четката или на Photoshop/GIMP. Стига да не се опитват да правят нещо, което:

да работи

  1. под всички операционни системи
  2. да изглежда еднакво под Firefox/Chrome/Opera/Safari и, разбира се, IE9, IE8, IE7 (не дай си Боже IE6)
  3. да подлежи на адекватна промяна на съдържанието (разпъване вляво и надолу, без да чупи дизайна)
  4. да има очаквано поведение при промяна (например хоризонталните менюта при добавяне на 50 елемента)
  5. И други подобни.

Надявам се този пост да направи един TODO списък за верификация на адеквавтност на всеки един дизайн или слайс. Защото статичното съдържание днес го има само на принтираните брошурки или плакати, но не и в Уеб.

Някои неща, за които аз се сещам:

Проблемни background изображения – фонови изображения на сайта (background image) или на даден div/block, които не подлежат на разпъване по широчина или височина, и при добавяне на повечко контент, последният излиза от очертанията или остава празен фон (или неадекватно повторено по Y изображение)

Недомислени менюта – ако в едно хоризонтално меню се добавят 20 елемента, какво правим? Ще се появи ли втори ред, ще излезе ли в безкрая по хоризонтала (със скрол) или нещо друго?

Екстравагантни шрифтове – при наличието на Cufon/@font-face и други услуги, до голяма степен този проблем е решен. И все пак има малки разлики при рендването под различни браузъри и OS-ове и трябва да се добавят fallback шрифтове, а това все още може да наруши дизайна.

Стилизиране на елементи, които не са замислени за стайлинг. Пример – нарисуван PSD с висок select box, който да работи под IE7. Стандартно <select> тага в IE7 не поддържа задаване на височина, което означава… че се ползва JS, който го превръща в div с input и със изображение за дропдаун вдясно и стана тя, каквато стана…

Обработка на дълги текстове, линкове и изображения. В sidebars или малки блокове често има дълги URL адреси или големи изображения, които не е ясно какво правят. Аз обикновено ползвам word-wrap за CSS3-compliant браузъри и/или слагам overflow, така че да не чупят, когато не мога да си позволя разширяване.

Измислена Captcha – има няколко популярни вида captcha, които се използват, и всички те имат относително константна възможност за стилизиране. По дизайни често виждам как някой си е измислил свой вид, без да се съобрази със съществуващите възможности и си е съчинявал по картинка.

Прозрачни панели/изображения, заоблени ръбове, сенки, градиенти – повечето от тези неща работят почти навсякъде, но е добре да се ползват с внимание. На места CSS3 или behavior-ите не случват и се налага специфичен JavaScript за един малък ефект. Може да е ефект, може да стане и дефект. А и допълнително нещо – някои JavaScript скриптове също не работят добре под всеки един браузър.

Super-custom дизайн на страница, която трябва да подлежи на редакция. Конкретният ми пример е – корица на списание, която да може да се редактира лесно (с добавяне на ново каре или ново лого тук и там).

Статични блокове за статичен текст… но за многоезични сайтове. Става въпрос за случая, при който дизайнът е страхотен за статичните блокове, които няма да променят съдържанието си, но пък сайтът може да се преведе на 10 езика.

Изображения с набит текст – отново при 10 езикови версии, като дизайнерът е заложил текста в изображенията.

Вие с какви подобни проблеми се сблъсквате?

1 response to Дизайни и графични особености, неподходящи за уеб (дискусия)

  1. Хубави примери.

    Една тъпотия, с която аз се сблъсках скоро, беше – клонирай сайт, но му сложи ей-този другия дизайн. Проблемът беше, че header/footer бяха нагаждани с „position: absolute“ и „left: 123; top: 456″. Искаха други шрифтове, други картинки. Пълен ужас.

    Реших, че няма време за подвизи, и просто нагодих нови абсолютни стойности, но се заклех, че ще се върна към този сайт след някоя и друга седмица и ще му измисля хубав гъвкав дизайн! Което точно сега ми е актуална мъка – качествени HTML/CSS снипети, дето да не ползват абсолютни стойности. Засега без успех. :(

Leave a reply

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *


*

Можете да използвате тези HTML тагове и атрибути: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Twitter Users
Enter your personal information in the form or sign in with your Twitter account by clicking the button below.