Создание сайта: в 1997 и в 2013

Старый логотип ММВ

Первый сайт мы запустили в 1997. Он назывался Московский Музыкальный Вестник. К сожалению, от его первой версии остался только логотип. Но сайт был сделан в Netscape composer, на фреймах — можете поверить, что выглядел он совершенно ужасно. Хотя определенную популярность снискал. Правда, оформление мы сменили достаточно быстро.

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

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

Обложка ММВ

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

1997: Как сделать сайт?

• Тег <font>.
• Тег <table> (чтобы как-то расположить все на странице).
• Графика в GIF.
• Разрешение экрана 800 на 600.

2013: Как сделать сайт?

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

1. HTML и CSS

• Favicon – нужна (тут можно посмотреть варианты).
• Тач-значки для Apple – вероятно.
• HTML5
• Кросс-браузерная совместимость – Старые версии IE будем поддерживать?
• Скорость отрисовки страниц – Должна быть высокой (это в свете анимационных эффектов, параллакс-скроллинга и т.п.).
• CSS – Использовать препроцессор (SASS/LESS)? Как этот CSS оформить? Как он работает? Как не отсечь всякие новые фишки и какие браузеры их поддерживают?
• CSS-трансформашки и анимашки – Когда все это следует использовать? Как сделать хотя бы более или менее интуитивный интерфейс, не сломав мозг ни себе в процессе, ни юзеру, если что-то пойдет не так?

2. Производительность

• Производительность сервера – Хороший хостер? Низкое время отклика? Вопросы использования памяти. Правильно настроенный GZIP. Apache или NGINX? Может, еще что-то установить, чтобы производительность повыше была?
• База данных – производительность MySQL и т.д.
• Кэширование – CMS кэшируется? Каким образом? Настроено правильно?
• Вес страниц – Javascript и CSS сжаты? Шрифты как грузятся? Картинок не слишком много? Они оптимизированы?
• Рендеринг – Есть проблемы с прорисовкой страниц или скроллингом?
• Мониторинг – Pagespeed, YSlow, Pingdom.

3. Код

• jQuery
• Минимальное понимание AJAX
• Vanilla Javascript
• PHP
• Другие библиотеки или фреймворки: Bootstrap, Foundation, Genesis и т.д..
• Исходники – Git?

4. Социальность

• Страница на Facebook, создать и каким-то образом найти время, чтобы ею заниматься, обновлять и заставить людей ее ЛАЙКАТЬ.
• Аккаунт в Твиттере.  Фолловить. Отвечать. Контактировать, а не просто постить обновления.
• Страница на Google+: Google страшно ее хочет, но хотя бы с этим можно пока повременить.
• Дополнительно: Аккаунт в Инстаграме. Pinterest. Для реальных мазохистов или просто музыкантов — аккаунт в youtube.
• Социальные кнопки. Вот с этим я всегда страдаю, хотя в последнее время мне отчасти помог Yandex Share. Потому что я знаю, что они нужны, но стандартные варианты идиотские и замедляют страницы. Создать собственные? Виджетом, плагином их ставить, или как? Оформить их как официальные или вые.. придумать что-то свое?
• Электронная рассылка – Форма подписки на сайте. Размещена нормально? Люди подписываются? Как рассылать — через  Aweber или Mailchimp или…? Насколько часто рассылать? Как оформить письмо? Люди реагируют на рассылку? Сколько людей реально это читает? А письма на мобильниках нормально выглядят? (это тема, потому что возможности использования CSS там не такие большие, как обычно).

5. Дизайн

• Шрифты – Нет больше ни Arial, ни Verdana. Надо использовать особенные шрифты. Но не надо, чтобы страницы замедлялись и сами шрифты долго грузились. Использовать Google Fonts или разориться на  TypeKit?
• Типографика – Все должно быть читаемо. Настраивается бесконечно.
• Шрифты кнопок – Как их использовать? Загружать как отдельный шрифт или?
• Картинки – Оптимизация. PNG, JPG или GIF. Для фоток использовать Progressive JPEG. Оптимизировать до публикации.
• Поиск – Поиск на сайте нужен вообще? Какой использовать?
• Модные фишки в оформлении – За этим вообще не угнаться. Это отдельная профессия и, как правило, человек либо пишет, либо кодит, либо рисует. Одновременно не получится. О чем и речь, в целом..
• Графика вообще – логотип и все остальное: чем рисовать? Photoshop, Fireworks и т.п.

6. Мобильники

• Резиновый дизайн или отдельная мобильная версия?
• Скорость – головная боль, учитывая наш 3G.
• Дизайн и навигация – работает? Пользователям на мобильниках удобно? Что делать с картинками, дисплеи retina.
• Тестирование – На скольких устройствах погоняли?

7. SEO

Стоит ли вообще этим заниматься в эпоху, когда Яндекс и Google стараются сами дать все ответы на вопросы?

• Простейший SEO – header, избегать повторяющихся страниц, какие-то страницы запретить для индексации.
• Разметка издателя – Это нужно? А нужно использовать rel=”author” и залинковать контент со страницей в гуглоплюсе?
• Ссылки – я кое-какие сделал, как сделать так, чтобы их заметили и залинковали в ответ?
• 404 и HTTP Headers – Использовать оригинальную 404 страницу. И проверить, чтобы хедер был корректный.
• Биржи: стоит ли покупать ссылки?
• Использовать ЧПУ, но чтобы они были не длинными.

8. Инструментарий

• Редактор – Какой использовать? Coda 2, Espresso, Dreamweaver, Notepad2?
• Локальное окружение – настроить локальные сервер и базу данных.  Может, еще что-то, что будет автоматом жать Javascript и CSS?
• Выгрузка на сайт – FTP? GIT?
• Бэкап — Помимо серверного, нужен локальный. И не годовой давности желательно.
• Безопасность – пароли, администрирование сервера (черт! знакомые маги или systemintegra в помощь!, но ведь дорого..), не допускать левый код на сайты. Беречься от спама.

9. Аналитика

• Статистика посещений – Хорошая вещь, но нужно время, чтобы научиться делать правильные выводы. Варианты: Liveinternet, Яндекс-метрика, Google Analytics.
• 404 – Откуда пришли и почему получили.
• Контроль за бесперебойной работой : та же Яндекс-метрика с их смсками, Alertra, Pingdom.

Если коротко — раньше сайты было делать сравнительно легко. Теперь — нет. Особенно, если ты один.