Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки - Элиот Стокс

Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

Издано с разрешения Smashing Media GmbH.

Под редакцией Александра Сарычева

© The Smashing Book #3 – Redesign the Web, 2012

© Smashing Media GmbH, 2012

© О. Серовская, перевод, 2013

© Издательство «СилаУма – Паблишер», 2013

Предисловие от партнера российского издания

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

Эта книга достойна самого внимательного изучения. Здесь есть все инструменты для того, чтобы вы смогли создавать по-настоящему современные, удобные и эффективно работающие сайты.

Не важно, профессионал ли вы в деле сайтостроения или решили сделать первые свои страницы, в этом бесценном труде вы найдете ответы на многие вопросы.

Каждый раздел написан ведущим специалистом в своей отрасли.

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

• Второй в подробностях описывает процесс создания или переделки сайта от выбора платформы и языка программирования до определения хостинга, интеграции платежных систем и управления контентом.

• Из третьего вы узнаете, как виртуозно управляться с версткой, JavaScript и современными языками программирования. После прочтения HTML5 и CSS3 станут вашими надежными союзниками.

• Четвертый посвящен преображению сайта, смене стилей и кодов. Здесь уделено внимание и веб-типографике, и грамотной разметке страниц.

• Пятый погрузит вас в мир Java-возможностей. Отныне перемещения, трансформации и анимация с JavaScript перестанут быть для вас загадкой.

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

И все это обильно снабжено примерами, иллюстрациями и html-кодами, которые вы сможете сразу использовать в своей работе.

Эта книга способна полностью перевернуть ваш подход к работе над созданием сайтов, сделать его более продуктивным и денежным.

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

Удачи!

Вступительное слово научного редактора

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

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

Книга укажет направление для работы. Прочитав книгу, вы сможете разобраться, как добавить сайту «человеческое лицо», узнаете фишки юзабилити, поймёте как сделать отзывчивый (responsive) дизайн, а также убедитесь, что HTML5 и CSS3 уже давно в бою. Из книги вы узнаете и о перспективном подходе к вёрстке сайтов – Flexbox. Я уверен – за ним будущее.

Книга посеет и зерно здорового скептицизма – а по правильному ли подходу вы (или ваши подрядчики) разрабатываете сайт? Строите ли работу от контента, делаете ли прототипы, или до сих пор мыслите статичными макетами?

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

Введение

Автор: Элиот Джей Стокс

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

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

Мало просто иметь продвинутые сервисы, равно как и мало уметь их использовать. Настоящая зрелость – это глубокое понимание того, что может и должно быть достигнуто.

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

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

Тема переделывания сайта иногда принимает здесь форму делового обсуждения, ведь это тоже часть процесса, подчеркивает один из авторов, Пол Боуг. Также обсуждается модернизация веб-сайта при помощи таких сервисов, как HTML5, CSS3 and JavaScript, о чем написали Бен Шварц, Ли Веру, Дэвид Стори и Кристиан Хейлманн. Представлена тема и в рассказе про адаптивные мобильные техники (авторы Стивен Хей и Энди Кларк). И, конечно, она раскрывается в широком обсуждении, представленном в разделах, авторы которых Рэйчел Эндрю, Дмитрий Фадеев, Марк Эдвардс, Арэл Балкан и Аарон Уолтер.

Желание ускорить ход событий, которые запустили механизм переделывания Smashing Magazine, также повлияло на создание и контент книги. Эта страсть, которая связывает нас больше как единомышленников, а не конкурентов, – страсть, которую, я уверен, вы прочувствуете, когда будете читать эти страницы, – вдохновит каждого из нас сделать Интернет лучше с помощью… задания градиентов через CSS, использования веб-шрифтов, использования медиазапросов.

Бизнес-подход в переделывании сайтов

Автор: Пол Боуг

Рецензент: Коллис Тайед

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

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

Я же затрону тему бизнес-подхода в реконструкции сайтов.

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