Разработка Web-дизайна для сайта

На сегодняшний день Интернет проник и закрепился во множестве сфер нашей жизни, в том числе в производстве и торговле. Раньше можно было не принимать это в серьез и не уделять этому вопросу должного внимания, но сейчас любая достаточно крупная компания должна обладать собственным интернет-порталом. И это не просто прихоть времени – с помощью онлайн-представительства можно успешно привлекать потенциальных клиентов и новых партнеров, а также продавать свои товары и услуги там, где раньше это было невозможно. Но веб-сайт это не только торговая площадка вашей фирмы, это также и ее «лицо», и грамотный подход к его оформлению и рекламе поможет создать узнаваемый и привлекательный бренд. А это, в свою очередь, привлечёт еще больше клиентов и поспособствует увеличению продаж.

Разработка веб-дизайна и верстка – дело ответственное, и получить хороший результат можно только в том случае, если доверить его профессионалам с большим стажем работы и множеством успешно завершенных проектов. Кроме того, очень важно соблюсти полный цикл работы, чтобы оформлением, логотипом и программированием в проекте занималось одно и то же агентство. В противном случае из-за несогласованности действий нередко возникают ошибки и проблемы, решение которых отнимает не только время и силы, но и деньги. Обратившись в рекламное агентство «Инфок», вы никогда не столкнетесь с подобным – наша фирма предоставляет услуги по всему циклу работ, включающему в себя создание концепции, разработку и реализацию дизайна, оптимизацию и продвижение готового ресурса. Весь процесс условно делится на три этапа:

• Планирование и создание концепции;
• Дизайн и внешнее оформление;
• Программирование.

Каждый этап работы требует привлечения людей соответствующих профессий – художников, дизайнеров, специалистов по юзабилити и программистов. Для большего понимания того, насколько это важно и сложно, подробно рассмотрим все этапы разработки WEB-дизайна и то, как они выполняются в рекламном агентстве «INFOK».

Концепция-веб страницы и планирование дизайна

Первый этап работы над проектом в свою очередь подразделяется на несколько подпроцессов, выполняемых последовательно, один за другим.

• Создание идеи и концепции – определяется тематика виртуальной площадки и ее назначение. Это может быть продажа или реклама товаров через интернет, предоставление информации о фирме и ее деятельности или площадка для общения между вами и клиентами. На этом этапе подбирается контент для будущего проекта – текстовые материалы, изображения, фотографии, схемы и видеозаписи.
• Конструирование структуры – продумываются и формируются разделы будущего интернет-магазина или онлайн-представительства, весь собранный ранее контент сортируется и распределяется по ним. Создается схема навигации, и обсуждаются общие моменты дизайна.
• Предварительный макет – после того, как наши специалисты вместе с клиентом определяют тематику площадки и ее структуру, приступают к черновому варианту макета, или прототипа. Он выполняется как на простом листе бумаги, так и в AdobeFireworks или AdobePhotoshop. Прототип показывает, как на веб-странице будут располагаться все ее основные компоненты, какое место будет занимать логотип, меню, графика и многое другое.

Черновой макет (как и готовая страница) состоит из контейнера и свободного пространства. Контейнер, также известный как содержащий блок, включает в себя все основные части: контент, логотип, блок навигации и футер. Расскажем о каждом из них подробнее.

Контент – основа любого ресурса, это то, ради чего его и посещают. Состоит из совокупности графических и текстовых материалов, занимающих центральную и самую большую часть контейнера. Пример: для онлайн-магазина запчастей и инструментов контентом будет каталог продукции (или одно конкретное изделие), их изображения, описания, характеристики и цены.

Логотип – символ или эмблема вашей компании. Он должен хорошо запоминаться,  узнаваться и быть привлекательным. Занимая не так много места внутри контейнера (обычно располагаясь вверху в центре или слева на странице), логотип, тем не менее, имеет огромное значение и к его разработке дизайнеры «INFOK» подходят с большой ответственностью.

Блок навигации используется для перемещения между разделами сайта. Хорошее меню должно быть простым, удобным и компактным. Чаще всего блок располагается в верхней или боковых частях контейнера.

Футер, или нижний колонтитул – небольшая полоса внизу страницы, содержащая адреса, телефоны, общую информацию о компании, форму заявок и отзывов, а также ссылки на социальные сети (группу компании в ВКонтакте или канал на YouTube). Нередко футер может дублировать блок навигации – это повышает удобство пользования ресурсом и избавляет от необходимости проматывать её вверх для перехода на другой раздел.

Свободное пространство – часть сайта, не используемая для представления контента, размещения навигации или логотипа. Может показаться, что в нем нет необходимости, но это не так – без свободного пространства веб-страница выглядит как неприятная и неудобная свалка из множества блоков, картинок и абзацев. Кроме того, помните, что внимание пользователя обращено к центру экрана, и потому края должны быть пусты и не отвлекать потенциального клиента (если речь не идет о мобильной версии).

Типы макетов и определение размеров

Работая над проектом, мы учитываем то, что его будут просматривать с множества различных мониторов, с телефонов и планшетов. И каждая веб-страница должна корректно отображаться вне зависимости от размера и разрешения экрана. Оптимизацию сайта под различные разрешения проводят в соответствии с одной из двух концепций:

• Отзывчивый веб-дизайн, также известный под англоязычным сокращением RWD. В рамках данной концепции создается «резиновый» макет, где каждая составляющая виртуальной площадки изменяет свой размер, подстраиваясь под разрешение экрана. При этом основные пропорции и соотношения должны быть соблюдены. Возьмем в качестве примера сайт, где условный элемент А занимает 60% от ширины и 40% от высоты страницы соответственно. Для монитора с разрешением 1920 x 1080 он будет иметь размеры 1152 х 432 пикселя. Возьмем экран меньшего разрешения, 1280 x 768. Адаптируясь под новые условия, элемент А приобретет размер 768 х 307 пикселей.
• Адаптивный веб-дизайн, или AWD. В данном случае применяется фиксированный макет, когда все части веб-страницы имеют одну и ту же ширину вне зависимости от разрешения монитора или дисплея мобильного устройства. Но чтобы «подстроиться» под каждое устройство, создается несколько макетов, соответствующих самым популярным размерам экранов, а именно для смартфонов, планшетов, ноутбуков и для стационарных ПК.

Стоит заметить, что для концепции отзывчивого веб-дизайна также необходимы несколько образцов – на сравнительно малых дисплеях смартфонов некоторые детали могут быть нечитабельными или неудобными для работы, потому мы разрабатываем отдельный «резиновый» макет для мобильных устройств. Кроме того, максимальная ширина веб-страницы, ограничивается 1280 пикселями, так как чрезмерно растянутые на больших мониторах текстовые и графические материалы плохо воспринимаются.

Но вне зависимости от выбранной концепции, при создании прототипа веб-сервиса нашими специалистами применяется модульная сетка – деление пространства на равные колонки по вертикали и с одинаковыми отступами. Чаще всего это делается в соответствии с системой 960 GridSystem. Веб-страница делится на 12, 16 или 24 колонки, и по этим колонкам выполняется выстраивание контента и всех блоков внутри контейнера.

Применяя модульную сетку, мы добиваемся не только упрощения процесса верстки и ускорения темпа работы, но и придаем будущему порталу аккуратность – все составляющие части имеют одинаковые расстояния друг между другом и комфортную для восприятия ширину. Как итог – красивый и приятный для глаза онлайн-ресурс, при изучении которого у пользователя возникают исключительно положительные эмоции.

Где размещается навигация

Может показаться, что вопрос о месте для блока навигации второстепенен, и нужно думать больше о контенте и логотипе, и не тратить время на мелочи. Но как показывает опыт работы специалистов «INFOK» - это далеко не так, и вопрос навигации важен. Нужно понимать, что онлайн-магазин, где переключение между разделами устроено неудобно и сложно, популярным не будет – не разобравшись, пользователь просто уйдет, не совершив покупки. И это будет не один и не два человека, а множество. А это – недополученная прибыль и ушедшие «впустую» расходы на рекламу.

Всего существует четыре основных типа размещения блока навигации:

• По левому краю – блок навигации представляет собой меню, размещенное в столбце слева. Весьма распространенная и интуитивно понятная схема, особенно удобная для тех, кто привык к интерфейсу социальной сети ВКонтакте.
• По правому краю – соответственно, блок находится в столбце справа от основного контента.
• Навигация в двух столбцах – слева и справа расположены меню разделов, формы для поиска и прочее, по центру – основное содержимое. Гибридный вариант предыдущих схем, в котором в столбце слева обычно располагается основная навигация и чаще всего используемые разделы, а в колонке справа – все остальное.
• Горизонтальная навигация. В таком случае меню находится в верхней части страницы, под логотипом вашей фирмы. Преимущество такой схемы в том, что остается большое и широкое пространство, оптимальное для размещения каталога товаров или иного контента с большим количеством графических материалов.

Мобильная версия

Исследуя статистику последних трех лет, мы пришли к выводу, уже больше половины пользователей интернета для выхода в сеть используют не персональные компьютеры, а телефоны и планшеты. Соответственно, вырастает важность мобильной версии ресурса, оптимизированной для небольших сенсорных дисплеев. Ее наличие становится уже негласным правилом «хорошего тона».

Обсуждая тематику и сферу деятельности проекта, мы можем предложить своим клиентам использовать принцип «MobileFirst». Это значит, что сначала разрабатывается вариация сайта для смартфонов и планшетов, а уже на ее основе создаются веб-страницы для персональных компьютеров с достаточно большими мониторами, куда добавляются новые блоки, объявления и составляющие части оформления.

Проработав общую концепцию и идею, сделав предварительный макет, специалисты «INFOK» приступают к следующему этапу работы – к созданию внешнего вида проекта.

Создание дизайна

Большинство онлайн-площадок, так или иначе, имеет коммерческую направленность и их задача – привлечь клиента и продать ему товар или услугу. И дизайн онлайн-ресурса должен быть подчинен выполнению этой задачи и соответствовать маркетинговой модели AIDA. Она описывает последовательность событий, приводящих клиента к покупке товара или услуги.

• А – Attention, или внимание. Веб-сервис обращает на себя внимание потенциального покупателя. Для этого ему необходим баннер или привлекательная картинка.
• I – Interest, интерес. Продаваемый на интернет-площадке товар должен заинтересовать потенциального покупателя. Здесь вступает в работу контент – текстовые и графические материалы должны преподнести свойства продукции, ее преимущества, привлекательные скидки и акции, если таковые имеются.
• D – Desire, желание. Посетитель должен захотеть купить товар и представить, как его приобретение удовлетворит возникшую потребность. Опять же, для этого нужны грамотно поданные тексты и графика.
• A – Action, действие. Последний и самый важный этап, ведь здесь действие – совершение покупки. Следовательно, клиента нужно побудить сделать это. На веб-странице это реализуется как баннер или кнопка, хорошо заметная и снабженная текстовым призывом к действию.

Маркетинговая модель AIDA уже давно используется при создании онлайн-площадок, и уже существуют основные инструменты ее реализации – визуальные направляющие и схема просмотра страницы.

Суть визуальной направляющей – какой-либо элемент дизайна, который не просто украшает веб-страницу и радует глаз пользователя, а обращает его внимание на контент, который уже в свою очередь побуждает в потенциальном клиенте интерес, желание и, как итог, приводит к действию. Самая очевидная и простая направляющая – стрелка, указывающая на раздел с товарами или на кнопку «купить». Чуть более тонкий инструмент – изображение человека, указывающего на нужное место взглядом или рукой. Отслеживать, насколько эффективны направляющие, и на какие детали пользователь обращает наибольшее внимание, можно с помощью «тепловых карт».

Схема просмотра страницы создается на основе того, как человек просматривает ресурс взглядом. В данном случае не просто размещается стрелка, привлекающая внимание – весь внешний вид ресурса и размещение его составляющих частей подчиняется задаче «вести» потенциального покупателя в соответствии с моделью AIDA. Чаще всего применяется Z-схема. Рассмотрим подробнее принцип ее работы.

Посещая интернет-портал, человек сначала смотрит в левый верхний угол, и здесь нужно привлечь его внимание. Эта задача возложена на логотип, который является не просто отличительным знаком фирмы, а тем, что бросается в глаза, легко запоминается и побуждает не закрыть вкладку браузера, а изучать ее дальше. Важно помнить, что логотип не должен быть перегружен графическими элементами, особенно сегодня, когда популярность приобретает «плоский» и минималистичный дизайн.

Дальше взгляд человека перемещается вправо. Вверху по горизонтальной линии располагается меню. Оно не должно отталкивать посетителя своей сложностью, громоздкостью или непривлекательностью.

Теперь наступает тот момент, когда потенциальному покупателю нужно, что называется, «показать товар лицом». Его взгляд идет по диагонали в левый нижний угол веб-страницы, и по этому пути, по центру, должен быть размещен контент – привлекательные изображения и легко читаемый текст, где поясняются преимущества продукции, ее свойства, назначение и характеристики. Эта информация может размещаться в нижней части контейнера, по центру и левее его.

И, наконец, виртуальный магазин должен побудить человека сделать покупку. Взгляд посетителя останавливается в нижнем правом углу, где размещается яркая кнопка с соответствующим лозунгом. Но стоит заметить, что баннеры и кнопки не должны быть излишне яркими и навязчивыми – они лишь отпугнут потенциального клиента или, что еще хуже, вызовут у него раздражение. А недовольный покупатель – упущенный покупатель.

Цветовое оформление

Помимо размещения элементов, для хорошего сайта нужны правильно подобранные цвета. За годы практики сотрудники «ИНФОК» разработали весьма эффективный метод решения данной задачи.

• Составляется список слов, соответствующих тематике проекта.
• К каждому слову подбираются синонимы.
• Основные слова из списка и синонимы последовательно вводятся в поиск по картинкам в самых популярных системах (Google и Яндекс).
• Создаются подборки изображений, выдаваемых в каждом запросе.
• Каждая подборка анализируется на предмет наиболее часто используемого цвета.
• Найденный цвет (или несколько) используются для оформления веб-сервиса.

Как результат, заказчик получает проект, оформленный в цветовой палитре, ассоциируемой с той или иной темой. Наши художники и дизайнеры уделяют внимание тому, чтобы цвета правильно сочетались друг с другом и между ними соблюдался контраст.

Для работы с палитрами специалистами «INFOK» используются программные пакеты и сервисы AdobeColorCC, ColorSchemeDesigner и COLORlovers.

Стили оформления

Условно стиль создаваемого онлайн-ресурса можно отнести к одному из двух типов – к скевоморфизму или к «плоскому дизайну». Разберемся вместе с «INFOK», что это за стили и в чем их особенности.

Скевоморфизм подразумевает создание отдельных частей онлайн-площадки, схожих по своему внешнему виду и качеству с реальными аналогами. Как пример – создание кнопок, внешним видом и анимацией имитирующих внешний вид и реальное нажатие на них, имитация с помощью фона книжной или магазинной полки, применение текстур металла или камня. Данный стиль характеризуется «объемностью», скруглением углов и большим количеством деталей. Считается, что скевоморфизм теряет свою популярность, и все больше заказчиков рекламного агентства «INFOK» предпочитают заказывать «плоский дизайн».

Также этот новый стиль оформления может быть известен как Flat или Material. Во многом продвижению «плоского дизайна» поспособствовало то, что основной прирост пользователей интернета сейчас составляют владельцы мобильных устройств, а портал, оформленный в соответствии со скевоморфизмом, с телефона просматривать не всегда удобно. Свою роль сыграло и то, что Flat и Material стали использовать основные производители мобильных операционных систем, Apple и Google.

«Плоский дизайн» характеризуется минимализмом и стремлением упрощать внешний вид. Обосновать подобное решение просто – чем меньше лишних деталей, тем проще глазу пользователя остановиться на важном – продвигающем тексте, картинках, показывающих достоинства товара и его внешний вид и кнопке «Купить». Также для Flat и Material применение текстур сводится к минимуму – вместо них используется игра на контрасте, простые и понятные каждому иконки и тщательно выверенные соотношения размеров.

Лендинг – что это, зачем нужен и как создается

Помимо «плоского дизайна» еще одним популярным явлением становятся лендинги. Это полностью «продающий» сайт, состоящий лишь из одной страницы и применяющийся для продажи определенного товара (или нескольких схожих товаров) или услуги. Помимо продаж, он может побудить пользователя оставить заявку, записаться на консультацию или курсы, принять участие в акции или тестировании нового веб-сервиса – вариантов для применения лендинг пейджей множество.

Ввиду особенности его структуры необходимость в главном меню полностью отпадает, и практически все пространство лендинга используется для размещения контента и направляющих, которые должны обратить внимание посетителя в нужную сторону, создать интерес, возбуждать желание приобрести продукцию и, как итог, привести к нажатию заветной кнопки. С точки зрения концепции AIDA это наилучший вариант при минимуме затрат. Но стоит сказать, что при конструировании лендингов требования к их внешнему виду существенно вырастают – плохое оформление не завоюет чьего-то доверия и не поможет реализовать продукцию. Потому залог успеха продаж через «посадочные страницы» - заказ их разработки у профессионалов.

Кстати, о продажах. Лендинг пейджи завоевали свою популярность не просто так – при грамотном подходе конверсия посещений в покупки (показатель того, какой процент от посетителей делает заказ) выше на треть по сравнению с обычным виртуальным магазином. Теперь разберемся, как устроены посадочные страницы, и как их делают в агентстве «INFOK».

Как и простой сайт, лендинг состоит из набора определенных частей:

• Логотип и контактная информация в верхней части контейнера. Так как лендингу не нужна навигация, то вместо нее помещаются ссылки на группы фирмы в социальных сетях. Будет лучше, если посетитель подпишется на них – так выше шанс того, что он придет к вам снова.
• Картинка, которая сможет «зацепить» посетителя и побудить у него интерес к товару и желание полностью просмотреть лендинг.
• Сам товар и его описание (также известное как дескрипшен). Здесь перед специалистами «INFOK» лежит не самая простая задача – как сделать дескрипшен не только максимально привлекательным, но и лаконичным, ведь лендинг – не место для длинных статей и запутанных описаний. Стоит отметить, что также на них не размещается какая-то сторонняя реклама или лишняя информация, ведь ничто не должно отвлекать потенциального клиента.
• Далее располагаются элементы, отвечающие за возникновение желания купить товар и подталкивающие к этому действию. Нужно в как можно более краткой форме представить преимущества от совершенного заказа или поданной заявки. Как один из возможных вариантов, «INFOK» предлагает следующее решение – размещение графического элемента в виде стрелки, направляющей внимание на форму заказа. Но она не просто указатель, внутри стрелки размещен либо процент скидки (причем так, чтобы не заметить его было невозможно), либо счетчик времени до конца акции. Подмечено, что подобные детали нередко способствует повышению продаж, так как пользователь старается успеть сделать выгодную покупку как можно быстрее.
• Триггеры доверия. Их задача – убедить клиента в том, что он совершает выгодное для себя действие. Завоевать доверие посетителя лендинга вам поможет не только привлекательный дизайн от агентства «INFOK», но и размещение положительных отзывов, демонстрации успешного использования товара, фотографий счастливых клиентов, сертификатов и свидетельств качества, словом, всего того, что поможет рассеять последние сомнения потенциального покупателя.
• Интерактивные вставки. Особенность лендингов в том, что вся информация, размещенная на них, максимально «ужата». Но иногда у клиентов возникают различные вопросы, касающиеся характеристик товара, каких-то его особенностей или способа оплаты и доставки. Но ответы не на все вопросы могут быть представлены на лендинг пейдже в силу его специфики. Решить проблему помогают интерактивные вставки – всплывающие окна, лайтбоксы, разворачивающиеся списки и боковые блоки-слайдеры.
• Завершающая часть многих лендингов – еще одна побуждающая фраза и вторая кнопка заказа, предназначенная для тех, кто сначала полностью пролистал ресурс, и только потом решил сделать покупку.

Лендинговые страницы прекрасно подходят для начинающих компаний и индивидуальных предпринимателей. Хотите вывести свой товар на рынок и достаточно быстро начать получать прибыль? Закажите у нас лендинг пейдж и его продвижение в социальных сетях и контекстной рекламе.

Написание кода

Итак, уже достаточно давно была определена общая концепция и макет проекта, полностью готовы составляющие части его оформления и дизайна. Теперь настает третий, заключительный этап разработки – написание кода, который «оживит» набор текстовых блоков и картинок и превратит их в веб-страницу. Здесь вместо дизайнеров и художников на первое место встают программисты агентства «INFOK». Они создают оптимизированный и грамотно составленный программный код. Как результат – проект быстро загружается, а число возможных ошибок сводится к минимуму. Еще один немаловажный момент – наши программисты соблюдают «негласные правила хорошего тона», благодаря которым дальнейшие действия с порталом или лендингом и их улучшение существенно упрощаются. Процесс написания кода состоит из следующих этапов:

• Подготовка и составление структуры проекта;
• Написание HTML-кода;
• Написание CSS-кода;
• Разработка JS-скриптов;
• Проверка, отладка, тестирование и исправление ошибок.

Часть из этих программ применяются в виде «как есть», а другая – вместе с установленными плагинами и дополнениями, расширяющими функционал.

Подготовка и составление структуры

Прежде чем приступать к написанию кода или разработке скриптов, нужно составить структуру будущей веб-страницы. На деле это означает организацию системы папок и хранилищ для всех используемых файлов в проекте. Разумеется, можно обойтись и без подобных излишеств, но подобная упорядоченность существенно ускоряет разработку и позволяет без проблем кооперироваться нескольким программистам «INFOK». Кроме того, существуют неофициальные правила хорошего тона:

• Каждому типу файлов – своя собственная папка. Все изображения надлежит держать в папке с названием pictures, img или images, скрипты в js или javascripts, страницы онлайн-площадки - в pages и так далее.
• Названия файлов также подбираются таким образом, чтобы было понятно, что это и для чего он необходим. Допустим, графический файл для кнопки покупки должен иметь название button.pngили buybutton.png, логотип – logo.pngили logotype.png. Использовать в названии лишь цифры или случайный набор букв нежелательно.

Написание HTML-кода

HTML – язык разметки веб-страниц, применяемый для подавляющего большинства проектов в Сети. Сам сайт – лишь набор таких документов, «читаемых» браузером и преобразуемых в форматируемый вид. И его вы можете наблюдать, просматривая любую информацию в интернете, в том числе и эту.

С момента изобретения язык постоянно менялся, менялись и его версии. На сегодняшний день актуальна версия HTML5, поддерживаемая всеми современными браузерами. Но иногда возникают ситуации, когда требуется корректное отображение данных на довольно старых версиях браузеров, не поддерживающих стандарт HTML5. Используя наш многолетний опыт, мы с легкостью реализуем пожелания заказчика и сделаем для вашей интернет-площадки возможность поддержки старых браузеров и использование более ранних версий языка HTML.

Применяя его разметку, наши программисты создают каркас проекта, воспроизводят его структуру в коде. И здесь находят свое применение составленные ранее макеты – сотрудники «INFOK» работают с ними либо напрямую, либо воспроизводят макет на бумажном или электронном носителе, что позволяет упростить и немного ускорить разработку.

Все элементы представляют собой блок с тегами, классами и идентификаторами. Есть два подхода к написанию HTML-разметки – БЭМ и SMACSS.

БЭМ это концепция наименования классов в языке HMTL и представления разметки. Полное название подхода – Блок-Элемент-Модификатор, и оно полностью отображает суть идеи: каждый элемент, будь то форма, кнопка или навигация, представляет собой единый блок. Внутри нее могут существовать отдельные элементы (для примера, в форме заказа есть несколько строк для ввода, как минимум одна кнопка, и опционально несколько «галочек» и т.д.). Каждый элемент характеризуется несколькими параметрами, такими как форма, цвет, и прочее. Они фиксируются в модификаторе. Как итог – получается последовательная структура, где сайт состоит из отдельных блоков, блоки состоят из наборов элементов, а те в свою очередь имеют собственный набор модификаторов.

Вторая концепция организации HTML-разметки – SMACSS, или в переводе «Масштабируемая и модульная архитектура для CSS». В данном случае страница разбивается на следующие уровни:

• Базовый уровень – все, что относится к определенным HTML-тегам.
• Секции страницы, которые вместе образуют макет.
• Модули – активные элементы, такие как баннеры, меню навигации, списки, формы, всплывающие окна и т.д.
• Состояние – описание того, как выглядит при определенных условиях тот или иной модуль – активен или нет, свернут, или раскрыт, проигрывается ли анимация или нет и так далее.
• Темы – по принципу построения похожи на состояния, но они в основном касаются внешнего вида и оформления модулей.

В рамках подхода SMACSS для каждого уровня есть свои обозначения и префиксы, которые необходимо вводить в названия элементов. Для макета это «.layout», для состояния «.is» или «.is-hidden» (для свернутого списка или скрытого лайтбокса), модули и темы используют собственные имена, так как их существует огромное множество, и добавление к ним префиксов лишь запутает программистов и ухудшит восприятие структуры веб-страницы.

Написание CSS-кода

Раньше и структура онлайн-площадок и их внешний вид оформлялись при использовании HTML-разметки. Сейчас подобный подход устарел и еще с вводом HTML4.0 был заменен каскадными таблицами стилей, больше известными как CSS. Каскадные таблицы отвечают за фон, шрифты, цвета, расположение различных баннеров, изображений и текстовых материалов. По сравнению с форматированием сайта при помощи HTML-разметки CSS обладает следующим набором преимуществ:

• Оптимизированный и быстро загружаемый код. Во многом благодаря внедрению CSS в последние годы сайты стали открываться практически моментально.
• Меньшее число ошибок, большая простота в отслеживании, поддержки и улучшении кода.
• Модульность – один и тот же CSS-код может применяться к нескольким разделам одного интернет-магазина или представительства, отпадает необходимость прописывать форматирования для каждого раздела интернет-площадки по отдельности.
• Взаимозаменяемость – так как за внешний вид отвечает CSS, а за структуру HTML, то программисты и дизайнеры получают возможность изменить оформление веб-сервиса, не прибегая к полной и трудоемкой переделке всей структуры заново.
• Разделение труда – теперь программистам не нужно помимо кода заботиться о том, как выглядит веб-страница, эту работу выполняют дизайнеры.
• Точность размеров и позиционирования – теперь дизайн сайта можно тщательно выверить, буквально до каждого пикселя.

Созданные дизайнерами (при некоторой помощи программистов, разумеется) CSS-файлы просто включаются в HTML-код ссылками, которые, подгружаясь при открытии ресурса в браузере, и создают оформление контента, навигации, разделов и многого другого.

Особенно важно при написании CSS постоянно соотносить результаты работы с макетом – все размеры и отступы должны иметь полное соответствие с размерами и отступами в образце. Чаще всего наши дизайнеры поступают следующим образом – открывают макет в графическом редакторе (AdobePhotoshop), тщательно замеряют размеры каждого блока, заносят их в таблицу. Позднее, при работе с CSS, эти числа переносятся из таблицы в код.

Помните, ранее было написано про два подхода к созданию макета – адаптивный и отзывчивый веб-дизайн? Разница между ними начинает проявляться именно на этом этапе. При использовании отзывчивого веб-дизайна в CSS файлы заносится не постоянный размер элемента, а его процентная доля от ширины экрана. Приведем пример: имеется прототип главной страницы интернет-портала с шириной 960 пикселей. В левой верхней части находится логотип фирмы с размерами 300 на 300 пикселей. Отступы от границы контейнера сверху и слева заданы заранее (причем слева при помощи деления модульной сеткой 960GridSystem). Нужно подсчитать процентную долю логотипа, проводится это следующим образом: делим ширину изображения на ширину всей страницы и умножаем на 100%. В результате мы получаем (300/960)*100%, или 31,25%. Это значение и заносится в CSS-файл для «резинового» формата веб-страницы.

Для адаптивного веб дизайна процесс намного проще – как уже упоминалось ранее, составляется несколько макетов для различных мониторов, включая дисплеи смартфонов и планшетов. Размеры элементов там четко заданы и закреплены, и нужно просто перенести эти цифры из прототипов в файлы каскадных таблиц стилей.

Рекламное агентство «INFOK» при разработке CSS придерживается следующих правил, позволяющих эффективно организовывать работу и получать оптимизированный код с наименьшим количеством возможных ошибок или конфликтов:

• Не перегружать код. Излишняя специфичность и большее, чем это нужно, количество правил и классов приводит к существенному росту «балластного» кода. И как результат, падает скорость загрузки и прорисовки портала. Мы придерживаемся принципа разумного минимума.
• Не использовать имена тегов вместе с наименованиями классов. Так сокращается объем кода и ускоряется загрузка ресурса.
• Стандартная и мобильная версия «подгоняются» под особенности часто используемых браузеров, таких как GoogleChrome, Firefox, Opera, Safari и другие.
• Сначала – мобильная версия. Помните, мы писали о том, что сейчас большинство пользователей сети интернет используются смартфоны и планшеты? Потому оформление веб-страниц с помощью CSS-файлов следует начинать с мобильной версии. А затем, усложняя и расширяя ее, подходить к версии интернет-площадки для десктопов. Раньше все делалось наоборот – сначала конструировали сайт для ПК, а уже затем для мобильных устройств, но такой подход требует больше времени, и в итоге версия онлайн-ресурса для смартфонов нередко получала много «лишнего» кода. И если для десктопа вес страницы не имеет большого значения, то для смартфонов и планшетов с мобильным интернетом скорость загрузки и расход трафика при этом критически важны.

Разработка Java-скриптов

На сегодняшний день любой, даже самый простой сайт, имеет в своей структуре интерактивные вставки, всплывающие окна, анимацию и тому подобное. Реализуется это с помощью скриптов, написанных на сценарном языке программирования JavaScript. До последнего времени его функционал был недостаточно обширен, что решалось установкой дополнительных плагинов и библиотек, таких как jQuerry. Это соответственно повышало сложность работы с языком и могло приводить к различным конфликтам и ошибкам, требующим отладки. Но развитие JavaScript не стояло на месте, и в современных его версиях для полноценной разработки достаточно нативного (оригинального) функционала языка.

Особенностью написания сценариев и скриптов для сайта является необходимость их тщательного тестирования и отладки на часто используемых браузерах, причем как для последних, так и для самых ранних версий. Работа сложная и трудоемкая, но без нее у части пользователей ресурс может отображаться некорректно. В этом деле существует два подхода – восходящий и нисходящий.

Восходящая концепция также может быть известна как Progressive Enhacement. Ее суть в том, что скрипты для интернет-портала пишутся под устаревшие версии различных браузеров. Затем проводится их тестирование. Если сценарии работают правильно – они последовательно улучшаются, совершенствуются и адаптируются под более современные версии браузеров.

Нисходящая концепция, или Graceful Degradation, работает по обратному принципу. Сначала программисты пишут на JavaScript сценарии для современных браузеров десктопов и мобильных устройств. Затем скрипты тестируются на более ранних вариантах. Если ошибок нет – тестирование продолжается для самых старых версий. Если нужно что-то исправить – выполняет отладка и изменение скрипта и тестирование повторяется. Проконсультировавшись с нашими сотрудниками, вы можете выбрать один из двух способов и обсудить его преимущества, недостатки и особенности.

Отладка

Последний этап разработки веб-дизайна – проверка результата на различных браузерах старых и новых версий и просмотр на различных мониторах и мобильных устройствах. Если все отображается корректно, и скрипты работают как нужно – результат представляют заказчику.

Надеемся, что вам было интересно ознакомиться с тем, как разрабатываются сайты в рекламном агентстве «INFOK». Если вы заинтересованы в создании качественной и доходной интернет-площадки – оставьте нам заявку или сделайте звонок.