Основни инструменти за онлайн присъствие

Процес на уеб дизайн – планиране, дизайн и разра­ботване на модерна уеб платформа

Принципно повечето уеб дизайнери могат да потвърдят, че голяма част от процеса на интернет маркетинга е стандартна процедура. При голяма част от проекти­те се повтарят едни и същи стъпки отново и отново, само с леки вариации. Ако изберете да следвате един типичен и подробен дизайн на уеб сайт и процес на създаване от една страна ще ускорите работата си, а от друга ще избегнете възможни грешки. Целта на това ръководство е да ви покаже как би изглеждал един подобен процес.

Какво всъщност означава „процес“?

Процесът е документирано описание, което ви води от самото начало на уеб проекта до края му. Той разбива и категоризира работата Ви и описва отдел­ните елементи във вид на задачи, които може да използвате като ръководни или опорни точки по пътя, както и да ги използвате в други проекти.

Събиране на информация

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

На практика най-важна е първата стъпка, защото тя обхваща цялостното познаване на организацията, за която създавате сайта.

Насоченост

Каква е целта на сайта? Търсите възможност да представите информация, да рекламирате определена услуга или да продавате продукт?

Цели

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

Целева аудитория

Има ли специфична група лица, която ще ви помогне да постиг­нете поставените си цели? Полезно е да си представите “идеалният” потреби­тел, който бихте желали да посети вашия сайт. Помислете за неговата въз­раст, пол или интереси – по-късно това ще ви помогне да определите най-добрия възможен дизайн и вид на сайта.

Съдържание

Какъв вид информация би търсила вашата публика на сайта? Дали би търсила конкретна информация, продукт или услуга, възможност за по­ръчки онлайн и др.?

Много е важно и да си поставите, и да отговорите на редица въпроси, кои­то сте очертали. Отговорите ще ви помогнат в изграждането на цялостната структура на вашия сайт. Помислете и за това какво Ви е необходимо, както и за нещата, от които не се нуждаете за сайта. Начертайте си една мисловна карта, което ще Ви бъде от неоценима помощ в това да разграничите по-важните от по-маловажните неща.

Планиране

Етапът на планиране е може би един от най-важните етапи в целия про­цес на разработването на уеб сайта. Решенията, които вземете и очертаете на този етап, оказват отражение върху цялостния процес на разработване. Обръщането на нужното внимание на детайлите е основно за успеха на за­почнатия уеб проект. Използвайки цялата информация, събрана на етап едно, сега можете да съберете всички елементи в едно и да изградите плана за уеб сайта.

Сега е моментът да изградите картата на сайта. Картата на сайта пред­ставлява списък, в който се отразяват всички основни теми и области на сайта – това представлява структурата на сайта. Картата на сайта трябва да бъде лесна за възприемане и логически подредена. Тя трябва да изглежда като златна­та нишка, която води през целия уеб сайт. Тя насочва потребителите така, че да не се изгубят в структурата и им помага много бързо да достигнат до търсе­ната от тях информация.

Част от етапа на планиране е също така и обмислянето на някои тех­нически аспекти. Какъв вид CMS (Система за управление на съдържанието) е подходяща за вашите нужди?

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

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

Дизайн

На този етап е време информацията, която сте събрали на етапа плани­ране, да се превърне в реалност. Това е най-творческата част от целия процес, защото се оформя теорията, събрана на предходните етапи. Цялостното съдър­жание се ползва от предимствата, осигурени от професионалния уеб дизайн и по този начин достига и до вашите клиенти.

Селин М Боулби казва:

“Целевата аудитория е един от ключовите фактори, които трябва да се вземат под внимание. Сайт, който е предназначен за тийнейджъри например, би имал много по-различна визия от сайт, предназначен за финансова институция. Като част от етапа по дизайн е важно да се включат и елементи като фирмено лого или цветове, които да бъдат в помощ за подсилване на идентичността на дружеството с помощта на уеб сайта.

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

За изграждането на солиден, съвременен и успешен уеб дизайн са необходи­ми следните стъпки:4

  1. Планиране на Уайърфрейм и елементи на дизайна
    В този момент започва да се очертава визуалният облик на вашия уеб сайт. Използвайки информацията, събрана от клиента на етапа планиране, започнете дизайн на облика с помощта на уайърфрейм. Моливът и хартията са учудващо полезни на този етап в допълнение разбира се, на множеството онлайн средства.
  2. Модели на основата на изискванията на анализа
    Изграждането на модели във Photoshop позволява относително лесни модификации, организира елементите от дизайна в слоеве и ви дава основата за по-късно нарязване и кодиране.
  3. Цикъл на преглед и одобрение
    Цикълът на преглеждане, избор и одобрение на моделите често про­тича до момента, в който (в идеалния случай) и клиентът, и изпъл­нителят, са удовлетворени от дизайна. Това е най-подходящият мо­мент за внасяне на промени вместо да се чака етапа, в който дизай­нът вече е кодиран. [1] [2]
  4. Мобилни устройства (Дизайн, адаптиран за телефон)

През последните години организациите започват да се ориентират не само към поддържане на уеб сайтове за настолни компютри, но и към уеб сайтове за мобилни устройства за трансформиране на важни части от декстоп в уеб сай­тове, оптимизирани за мобилни устройства. Проблемът при този подход и че се налага да поддържате отделно два уеб сайта. От една страна вашият десктоп сайт и от друга, мобилният уеб сайт.

Благодарение на новите технически възможности като CSS3 медия заявките става възможно поддържането само на един сайт, който автоматично се съвместява с устройството, с което гледате сайта. Това е така нареченият уеб дизайн, адаптиран за мобилни устройства. В съвременния свят не само е важно да имате уеб сайт, оптимизиран за смарт телефони и таблети, това вече е едно неизбежно изискване на средата.

Разработване, тестване и пускане на уеб сайт

Разработването на уеб сайт се разделя на две отделни части. Трябва да направите разграничение между тези две части.

Frontend разработване

Frontend на уеб сай­та представлява смесица между про­грамиране и облик, които са основата на визуалната част и интеракциите на уеб сайта. Можем да кажем и че front end представлява интерфейс между потребителя и back end. Той отразява дизайна на вашия уеб сайт.

Backend разработване

Backend на уеб сайта представлява част от цялостната система, която не може да се види от посетителите. Ако си представите, че уеб сайтът е една кола, в колата има множество елементи, които осигуряват движението й – съз­дават ускорение, спиране, пускане на светлините. На практика вие не виждате всички тези елементи – те обаче са от основно значение, за да може колата да функционира. Backend се изпълнява на сървъра и е свързан с базата данни. Той оси­гурява и администраторската част за поддържане на уеб сайта и запълването й със съдържание.

В нашата компания целият дизайн, както и frontend на нашите уеб сайтове, се разработват от самите нас. Програмирането на backend се възлага на външно дружество по програмиране.

Най-популярните стъпки за изпълнение на всички етапи

Изграждане на рамка за разработване

В този момент конкретните изисквания могат да наложат необ­ходимостта да се отклоните от процеса. Ако използвате Ruby on Rails, което е ASP/PHP фреймуърк или система за управление на съдържанието от типа Typo3 или Drupal (и двата са отворен код), сега е моментът да ги въведете и да пуснете сайта. Ако напра­вите това достатъчно рано ще осигурите сървърът да може да поеме гладко инсталацията и настройките.

Видове код за всеки вид страница

Един уеб сайт обикновено съдържа няколко страници (напр. За нас, общо съдържание, блог, форма) които могат да са основани на шаблони. Една добра практика е вие сами да създадете шаблони с тази цел. Създавайте на frontend на всяка страница и приложете в избраната система.

Разработване и тестване на специални функционалности и инте­рактивност

Тук идва място на забавните елементи. Предпочитам да се погри­жа за това преди добавянето на статичното съдържание, защото сега уеб сайтът осигурява относително изчистено и непретру- пано работно пространство. Някои разработчици предпочитат на този етап също така да приключат формите, валидизирането и функционалността.

Наливане на съдържание

Качете цялото съдържание, което ви е предоставено от клиен­та или копирайтъра. Въпреки рутината, отделете усилия на тази стъпка, защото и най-опростените страници изискват внимател­но графично оформление и внимание към детайлите.

Тестване и проверка на линковете и функционалността

Сега е подходящият момент за цялостно преразглеждане на уеб сайта. Използвайки като указател своя файлов мениджър, мине­те през всяка страница, която сте създали. Всичко от началната страница до страницата за потвърждение на заявката и прове­рете дали всичко работи добре и дали не сте пропуснали нещо във визуалното оформление или функционалността.

Тестването е изтощително, но наистина е важно да отделите достатъч­но време за него. Много по-трудоемко е да фиксирате бъг след като уеб сайтът ви вече работи в пространството. За да гарантирате вашият сайт да работи еднакво добре независимо от използвания браузър, трябва да го тествате и с
различните браузъри. Направете кръстосано тестване с различните браузъри (IE, Firefox, Chrome, Safari, Opera, iPhone, BlackBerry и т.н.).

Даже и ако кодът е валиден, това не означава, че ще блести с брилянтен изглед при ползване на старите Интернет експлоръри. Не забравяйте да интегрирате и аналитичен софтуер, за да генерирате стойност за своята статистика. Тези цифри ви дават възможност да реагирате адекватно и да модифицирате сайта си така, че да получите повече трафик или да увеличите своя поток посещения или да достигнете целите си. След цялата тази усилена работа вече можете да прережете лентата и да качите сайта си на www.

Ако планирате да разработите сайт, който да е достъпен за ползване и от хора с увреждания, е много важно да създадете сайта с използване на указанията на W3C consortium познати като WAI-Указания (Инициатива за уеб достъпност). В тези указания ще намерите технически указания как да разра­
ботите своя код на уеб сайта така, че до него да имат достъп всички лица, които използват спомагателни технологии като скрийн рийдъри и брайлови дисплеи.

W3C consortium дава технически указания за създаването на сайт, достъпен за всички хора, но има и още въпроси, които следва да обмислите. Съдържанието, което се транспортира посредством интернет сайта, трябва да бъде написано по лесен начин. Авторът, който е отговорен за съдържанието, трябва да избягва използването на чуждици; трябва да се стреми да използва опростени фрази с оглед постигане на ясен изказ.

Пълната достъпност сама по себе си не е постижима поради наличието на конкретен бенчмарк. Колко голям трябва да бъде линкът така, че всеки потреби­тел да може да го кликне – даже и ако ръцете му треперят? Как да бъдат написа­ни изреченията така, че и децата от основното училище, и чужденците, които тепърва започват да учат езика, да могат да ги разберат?

Всичко опира до следването на трендовете: сайтовете трябва да се съз­дават така, че да използват най-съвременна технология за програмиране и да следват всички приложими стандарти. Избягвайки всичко, което може да пред­ставлява само излишно затруднение, операторите на сайтове вече са изминали много от пътя към осигуряването на достъпност.

И така, ако сте изяснили каква информация искате да поместите на уеб сайта си, следващата стъпка е да обмислите структурата на уеб сайта (Каква да бъде навигацията? Необходима ли ви е търсачка? форми или друга функционал­ност?).

За разработчика е много важно да знае тези неща, за да си изгради пред­става как да създаде сайта по ясен и систематизиран начин и как да добави всич­ки опции за характеристиките за достъпност.

Технически изисквания

Хората със зрителни затруднения използват скрийн рийдъри за достъп до съдържанието на уеб сайтовете. Важно е да се осигурят също така и възмож­ности за промяна на цветовия контраст и размера на шрифта за хора с подобни нужди. Друг важен момент е уеб сайтът да е достъпен с използването на клавиа­тура или други специално разработени устройства за въвеждане на данни. Нама­лената лингвистична способност или невъзможността за движене на мишката в определена част на екрана поради треперене на ръцете на потребителя са само два от възможните примери.

  • Разделете дизайна и съдържанието на страниците с помощта на XHTML (Хипертекстов маркиращ език) и CSS (каскадни наборни стилове). XHTML и CSS са интернет технологии, разработени от World Wide Web Consorti­um w3c както вече беше посочено. CSS е начин за разделяне на съдържа­нието на XHTML документа от неговото представяне.
  • XHTML кодът определя кои елементи са на страницата (заглавия, абза­ци, и т.н.), как са групирани те, а след това стилът определя как да из­глежда страницата, за да бъде създаден web frontend. Така, ако изграж­дате уеб сайт, който да може да бъде достъпен за всички, тези техники следва да се предвидят от разработчика.
  • За всички графични или други мултимедийни елементи трябва да осигу­рите и алтернативи. Скрийн рийдърът не може да разчете alt текст, ако той не е празен (“описание

Достъпността на уеб сайтовете е важна задача: съдържанието, както и функциите и начините на транзакция на сайта трябва да бъдат достъпни. Това означава всички хора, без значение на възможните им затруднения, да могат да имат достъп до съдържанието и да могат да използват всички функ­ции. Ако има съдържание е ясно, че за осигуряване на достъпност са необходи­ми и „алтернативни решения”.

Към картинките могат да се добавят тексто­ви описания, които да са в помощ на незрящите потребители, а за помощ на потребителите със слухови увреждания например към видео филмите могат да се добавят субтитри или картина-в картината с използване на езика на глухонемите.

Семантика

XHTML кодът определя кои елементи са на страницата (заглавия, абзаци, и т.н.), как са групирани те, а след това стилът определя как да изглежда стра­ницата. Ако желаете, можете да стилизирате всички HTML елементи. Така, ако изграждате уеб сайт, който да може да бъде достъпен за всички, тези техники следва да се предвидят от разработчика. Друга важна бележка е, че не трябва да използвате таблици, за да създавате облика. Вместо този остарял и по-непри- годен в техническо отношение способ, можете да създадете основна шаблонна структура с използване само на XHTML и CSS.

За всички заглавия, параграфи и други елементи от съдържанието използ­вайте определените XHTML тагове.

Подобрените семантика и тагове помагат и на мрежите търсачки да раз­берат по-правилно какво има на определена страница и как са разграничени еле­ментите.

По този начин виждате какво е значението на семантичната структура на страницата. Даже и то да е подсигурено така, че да осигурява на хората с ув­реждания възможност за използване на уеб страниците с помощта на софтуер­ните инструменти, с които разполагат и хардуерните устройства за въвеждане на данни.

Има няколко важни момента, които е добре да внесете в новата уеб платформа. Всички тези елементи информация са компоненти на Инициати­вата за уеб достъпност(WAI) на World Wide Web Consortium (W3C), която полага много усилия за подобряване на достъпността на световната мрежа за хората с увреждания. Изцяло новата версия WCAG 2.0 (Указанията за дос­тъпност на уеб съдържанието) можете да намерите тук: http://www.w3.org/ TR/WCAG20/