Чего хочет заказчик или веб вчера, сегодня и завтра
Введение
Сегодня в эпоху, когда практически каждый человек имеет доступ к сети Интернет и располагает для его использования несколькими девайсами (телефон, планшет, компьютер, ноутбук и т.п.) главным критерием является то, насколько легко и быстро можно найти необходимую информацию. Поэтому каждая уважающая себя компания желает заявить о себе потенциальным потребителям и для этого прибегает к услугам различных интернет-студий, занимающихся разработкой сайтов.
При обращении к студии, мало какой заказчик может четко сказать, какой сайт ему необходим, обычно на начальном этапе мы имеем основной концепт и цель, с которой создается сайт. Как же в таком случае определиться: «Что действительно необходимо и модно, а что давно пройденный этап? Как выбрать студию, которая выполнит работу качественно?».
Краткая история Web 1990–2010гг.
Прежде чем давать ответы на вопросы, которые связаны с новейшими тенденциями в мире web, сначала необходимо разобраться, с чего же все начиналось и как это развивалось с течением времени.
На сегодняшний день история веба насчитывает более двадцати лет, давайте вернемся к самому началу его развития.
В далеком (или не очень) 1990г. научному сообществу был представлен первый текстовый браузер (Тим Бернерс-Ли), который предоставлял пользователю возможность on-line просматривать текстовые файлы, связанные гиперссылками. Представление же общественности произошло в 1991 году с публикацией перового веб-сайта (рисунок 1), который представлял собой: текст, содержащий набор ссылок и поясняющий, что же такое World Wide Web.
На смену текстовым страницам, вместе с появлением первого графического браузера Mosaic (1993г. Марк Андресен) пришли страницы, с использованием графики. В сравнении с нынешними версиями сайтов, старые версии являлись скучными и примитивными, но для того времени это было нечто новое и неизведанное, поэтому возможность использовать изображения в формате GIF уже являлось прорывом.
К 1995 году веб стремительно развивается и набирает популярность. Основными особенностями является:
- при верстке разработчиками используются таблицы, которые позволяют легко структурировать и отображать информацию;
- появление JavaScript (язык программирования, используемый в браузерах с целью придания странице интерактивности);
- появление Flash (мультимедийная платформа компании Adobe Systems для создания веб-приложений или мультимедийных презентаций [1]).
В плане дизайна это время можно охарактеризовать как ужас, для восприятия, но в то время это было нормально, так как люди были недостаточно осведомлены, как работает сайт, что приводило к ошибкам в проектировании. Примеры сайтов того времени можно увидеть на рисунке 2.
Ничего не стоит на месте, так и веб к 2000 году обзавелся дополнительными возможностями: CSS, появление новых тегов в HTML. Ну и, конечно же, ограничения, накладываемые HTML, преодолевались при помощи Flash, который стали использовать поголовно все, вставляя его, где нужно и не нужно, но с его помощью было достаточно легко реализовать анимированное меню, изображения, а иногда и целый сайт. Сайты к тому времени выглядели более презентабельно и интересно (рисунок 3).
С началом нового века и в веб-дизайне наметился прорыв, в связи с широким применением технологии CSS, которая позволяла четко разграничить структурную часть сайта и часть, описывающую внешний вид элементов в структуре, что позволило сделать сайты проще в поддержке и обслуживании.
Дизайнеры стали грамотней использовать цветовую палитру и располагать элементы на странице (использование свободного пространства на странице для выделения тех или иных объектов). Главной проблемой, возникшей перед разработчиками, стала пикселизация изображений, а ее причиной стало то, что сами же разработчики при добавлении изображений не задумывались, как изображения будут отображаться у пользователей с большим разрешением на мониторах, что и привело к появлению проблемы [3]. Пример сайта начала 2000 изображен на рисунке 4.
В первом десятилетии двадцать первого века широкое распространение получил Web2.0, который с визуальной точки зрения можно отличить по следующим элементам: закругленные уголки, специальные бейджи (распродажа, новинка, специально предложение), активные элементы наделены эффектом глянца или стекла, используются закругленные уголки и градиенты. При верстке все еще отдавалось предпочтение таблицам, что позволяло легко позиционировать элементы на странице и реализовывать новые требования заказчиков. Одним из них являлось одинаковое отображение сайта на разных разрешениях экрана и для решения этой проблемы стали использовать резиновую верстку (изменение ширины блоков в зависимости от размера окна браузера). Использование этого подхода решило проблему с отображением, но и не стало панацеей. Так как если элементу задавалась ширина 50%, то при уменьшении экрана этому элементу нельзя было установить ширину 100%. Пример сайта с резиновой версткой.
Отображение не единственная проблема, с которой столкнулись разработчики, еще одной из существенных проблем стала реализация скругленных углов. Технологии на то время еще не позволяли просто использовать свойство CSS (border-radius) просто потому, что его еще не было и реализовывать приходилось подручными методами, а именно использование картинок (пример), но это было действенно и выглядело так, как того хотел заказчик. На рисунке 5 приведен пример сайта в стиле Web2.0.
К концу первого десятилетия в дизайне стало популярна реалистичность: использование теней, градиентов, тиснений для придания используемым элементам реалистичности (скевоморфизм – рисунок 6). Для разработчиков этот период связан с развитием технологий и постепенным внедрением блочной верстки (в таком подходе элементами для создания странички являются блоки (div), они позволяют сделать код более компактным).
Относительно отображения сайтов на мобильных (первый телефон с такой возможностью появился в 1998году), использовался протокол WAP, который являлся неким аналогом HTTP, адаптированным для беспроводных устройств. Если говорить об особенностях этого протокола, то к ним относится не поддержка JavaScript и Flash. Ограничения касаются не только средств, используемых разработчиком, но и дизайнеров, которые при создании макета должны следовать следующим правилам:
- небольшое количество, используемых цветов;
- отсутствие элементов с тенями и полупрозрачностью;
- дизайн только резиновый;
- минимальное использование картинок;
- только стандартные шрифты (Times, Arial, Verdana) [5].
Данные ограничения были связаны с тем, что мобильный интернет был медленным и телефон не мог загрузить страницы больше 15–20Кб, поэтому внешний вид мобильных сайтов разительно отличался от оригиналов, что и подразумевало создание отдельной мобильной версии сайта (m.
Web во втором десятилетии XXI века
Вместе с началом нового (второго) десятилетия скорость мобильного интернета значительно возросла, и в интернет получают широкий доступ не только при помощи ПК, но и при помощи телефонов, планшетов и т.п.. Разработчики уже не ограничены в средствах и возможностях. На сайтах активно используются библиотеки JQuery, JavaScript, CSS3 и в связи с этим многообразием Flash уже не нужен и все реже используется на сайтах. Мобильность достигается при помощи медиа запросов, которые позволяют подстроить отображение сайта под определенное разрешение, но основным недостатком является то, что изменение происходит рывками, при переходе от одного разрешения к другому. На рисунке 7 приведены медиа запросы, ориентированные на основные размеры экранов. Приведенных запросов обычно достаточно для того, чтобы подстроить внешний вид страницы под любое устройство. На рисунке 8 можно увидеть пример сайта с мобильной версткой, левое изображение сайт для больших экранов и правое изображение для мобильных и планшетов.
C 2011 года адаптивность (отзывчивая верстка) стала более востребованной и легкореализуемой, благодаря появлению Twitter Bootstrap (фреймворк, который облегчает жизнь разработчикам Front-end и представляет собой свободный набор инструментов для создания сайтов и веб-приложений [6]). Определение стилей CSS все еще задается на основе медиа-запросов, а вот верстка основывается на сетке, изображенной на рисунке 9, максимальное количество колонок 12, а размеры экрана делятся на 4 категории: большие экраны (lg), средние экраны (md), планшеты (sm) и телефоны (xs). Суммарный размер двенадцати колонок занимает по ширине 1140px, а размер колонок базируется не на пикселях, а процентах, что позволяет обеспечить необходимые пропорции для различных разрешений экранов [7].
В дизайне тоже произошли радикальные изменения. Если до этого упор делался на создание реалистичности, то теперь основной тенденцией стал минимализм (плоские элементы, яркие цвета отказ от теней и использование вместо картинок обычных цветов, т.к. такие элементы легко масштабировать). И теперь дизайнеры рисуют вместо одного макета четыре, чтобы клиент мог видеть, как будет выглядеть страничка на каждом разрешении. Пример адаптивного сайта, изображен на рисунке 10.
Не менее популярными к концу 2015 года стали целевые страницы (landing page). Подобные сайты создаются как основной или дополнительный сайт для компаний, продающих услуги или же для компаний, деятельность которых связана с информацией. Они позволяют обратить внимание посетителя на уникальное товарное предложение, награды и дипломы компании, отзывы клиентов, контакты и самое главное — простое осуществление заказа услуги. Согласно исследованиям использование landing page позволяет продавать на 10–30% лучше, чем на обычном сайте [8].
Особое влияние на визуализацию подобных страниц оказал выход HTML5, который позволил свободно добавлять на страницу видео, аудио, графику, анимацию и многое другое. На рисунке 11 можно увидеть пример landing page, использующего возможности HTML5. На рисунке 12 еще один пример сайта с HTML5.
Единственным недостатком, который является проблемой всех сегодняшних сайтов это то, что для обеспечения различных визуальных эффектов используются готовые библиотеки, которые в сумме увеличивают вес страницы до 10Мб, а то и больше, вместо 1Мб.
Выбор подрядчика
Вот мы и добрались с вами до последнего раздела статьи, в котором рассмотрим, как заказчику выбрать студию, которая займется разработкой его сайта.
Рынок студий и компаний, предлагающих свои услуги велик и многообразен. И выбрать иногда является достаточно сложной задачей, потому что, как правило, заказчик не знает тонкостей и выбирает по ценовой политике. Что же он упускает? Лучше всего провести оценку возможного проекта не только по цене, но и по: размеру потенциальной аудитории сайта, подходу к разработке ТЗ и дизайна на начальном этапе, скорости загрузки страниц.
Если проект заказчика крупный и ему нужен стабильный, хорошо спроектированный и качественный сайт, который предполагает большую аудиторию пользователей, то лучше всего обратиться в крупную компанию, потому что она:
- гарантирует стабильность и скорость его работы;
- имеет многолетний опыт работы, как с маленькими, так и крупными проектами;
- прежде чем начать разработку утверждает с заказчиком все детали и составляет полное и корректное ТЗ;
- используют при разработке систему контроля версий (Git, SVN);
- гарантирует поддерживаемый код;
- в зависимости от размера проекта создается группа программистов, работающих над вашим проектом;
- и соответственно высокая цена за проделанный труд.
Маленькая компания чаще всего:
- редко гарантирует стабильность и скорость его работы;
- с большой вероятностью, еще не занималась разработкой крупных проектов, но всегда готова выслушать все ваши пожелания и по возможности их реализовать;
- нередко приступают к разработке, даже не имея ТЗ, и в этом случае у разработчика начинается «веселая жизнь», когда заказчик просит поменять цвет, размер шрифта или «подвинуть вот тот элемент немножко левее» и данная просьба возникает не раз и не два. Или же заказчик полностью полагается на вкус программиста, говоря «Сделайте круто», но вкусы у всех людей разные, поэтому очень часто возникают недопонимания, что приводит к затягиванию сроков сдачи проекта;
- код, предоставляемый такой компанией это как «кот в мешке». Вы можете получить как качественно написанный сайт, так и проект с полностью неподдерживаемым кодом («Как писать неподдерживаемый код?»);
- про использование систем контроля версий здесь если и слышали, то вряд ли используют, потому что для маленьких проектов это не всегда необходимо, а на больших проектах вступает в силу правило «нам и так хорошо»;
- штат такой компании, как правило, небольшой (10–15 человек) и только 5–8 человек из них это программисты и Вашим проектом, скорее всего, будет заниматься только один человек;
- низкая стоимость обычно привлекает заказчика.
Конечно, нельзя отнести описанные критерии к абсолютно любой крупной или малой компании всегда найдется исключение из правил (как в лучшую, так и в худшую строну). И если Вы не склонны доверять чужому мнению, вспомните хотя бы одну из этих пословиц: «Дешева рибка — погана юшка», «Мы не настолько богаты, чтоб покупать дешёвые вещи», «Бесплатный сыр только в мышеловке», «Делают как-нибудь, так и выходит как-нибудь».
Выводы
В ходе статьи мы кратко рассмотрели историю web-дизайна и средств, используемых разработчиками, для достижения требуемой картинки. Обратили внимание читателя на адаптивную верстку, которая позволяет потенциальному потребителю посещать сайт с любого устройства и не волноваться, что на их разрешении экрана сайт будет выглядеть некорректно, а наоборот получать удовольствие от удобства использования предоставляемого функционала.
Описали критерии оценки студий, которой заказчик пожелает доверить ответственную миссию по созданию сайта для его компании.
P.S.
Уважаемые, заказчики, не мучайте разработчиков, требуя поддержки древних браузеров, таких как (IE-6), посетите сайт www.w3counter.com и ознакомьтесь со статистикой на актуальный период. Если Вы хотите сайт с оригинальным дизайном то заплатите дизайнеру за разработку индивидуального макета или продоставьте компании уже готовый макет. Да, вы заплатите больше, но так Вы сохраните свои нервы и время, а так же разработчики в душе скажут Вам большое человеческое спасибо.
Источники:
- Adobe Flash — Википедия
- История веб-дизайна
- Эволюция веб-дизайна — 20лет за 5 минут!
- Разбираемся в трендах веб-дизайна
- Создание сайтов для мобильных устройств — руководство по быстрому старту
- Bootstrap (фреймворк)
- Шаблон| Bootstrap по-русски
- Лендинг это — не простой сайт, а инструмент для продаж!