Именной сайт для австралийской писательницы

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

Требования заказчицы

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

Её клиентами являются правительственные структуры, некоммерческие организации, СМИ.

Итак, какой сайт нужен?

  • Архитектура сайта должна быть простой, чтобы все страницы были в доступе в 1-2 клика от главной страницы.
  • Само содержимое сайта должно вмещать в себя все виды деятельности писательницы и, с другой стороны, быть лаконичным.
  • Юзабилити должно быть удобным для пользователя любого уровня.
  • Дизайн должен содержать любимые цвета Хизер, которые ей помогают всю жизнь и являются счастливыми.
  • Это должен быть не блог, а именно сайт-визитка.
  • Сайт должен корректно работать в любом браузере и легко просматриваться с любого мобильного устройства.
  • Нельзя потерять старый контент, т.к. у заказчицы уже был сайт, в который надо было вдохнуть новую жизнь.

Технические нюансы

В качестве CMS, Хизер выбрала Вордпресс – именно поэтому она и обратилась ко мне. Я абсолютно одобрила её выбор, т.к. сама обожаю эту простую, но вместе с тем, такую многофункциональную и мощную систему управления контентом.

Также был ещё один интересный нюанс со старой версией сайта на том же самом домене, созданной на движке ciSuite. Честно говоря, я никогда раньше не сталкивалась с этой CMS – но не боги горшки обжигают! Т.е. надо было провести миграцию сайта с ciSuite на WordPress.

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

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

Осторожность прежде всего

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

Сначала я сделала полный бекап старой версии сайта. Потом скопировала весь контент: тексты, картинки, ссылки, урлы страниц. Сделала скриншоты каждой страницы.

Потом я сделала поддомен и установила Вордпресс на новый хостинг. Далее – воссоздала все старые страницы.

Также Хизер захотела добавить новые элементы в старый контент и полностью изменить дизайн.

Признаки именного сайта

Что делает обычный сайт-визитку именным? Во-первых, имя и фамилия должны присутствовать в домене. В данном случае, www.heathergrant.com.au.

Также мета-теги главной страницы должны обязательно нести информацию о владельце сайта. В нашем случае, title – Heather Grant, подзаголовок h2 в шапке сайта: Professional writing and editing; description, keywords также содержат данные о деятельности писательницы.

Из элементов дизайна:

  • любимые цвета Хизер: пурпурный и бежевый
  • именная печать в виде логотипа и фавикона.
Атрибуты именного сайта

Атрибуты именного сайта

Естественно, весь контент сайта должен быть связан с деятельностью писательницы.

Чем отличается блог от сайта?

Требованием писательницы было то, что именной сайт должен выглядеть именно как сайт-визитка, а не как блог.

Следовательно, на front page должна быть не лента, состоящая из постов, а домашняя страница с тем контентом, который там захочет разместить заказчик.

В данном случае, это были:

  • меню со всеми страницами сайта;
  • слайдер;
  • текстовый блок с короткой презентацией владелицы сайта;
  • блок с услугами которые предоставляет автор.

Вот что у нас получилось:

Домашняя страница heathergrant.com.au

Домашняя страница heathergrant.com.au

Адаптивность дизайна

Естественно, для создания адаптивного сайта мы выбрали responsive WordPress theme и уникализировали её.

Вот как выглядит домашняя страница в разных мобильных устройствах.

Для проверки адаптивности мы воспользовались функцией Inspect в браузере Google Chrome.

Также обратите внимание на то, как выстраиваются блоки Featured Services в разных моделях мобильных устройств. Мы, для сравнения, сделали скриншоты в iPad и Galaxy S5 (в самом большом и самом маленьком).

Что с адаптивностью на других страницах сайта?

Для примера, мы взяли страницу About

Вот как она выглядит на стационарном компьютере:

Страница About на стационарном компьютере

Страница About на стационарном компьютере

По желанию писательницы, контент внутренних страниц сайта разбит на две колонки (3/4 + 1/4).

Как эти колонки “поведут себя” в мобильных устройствах?

Конечно же, мы проверяли адаптивность на всех устройствах. Но для наглядности, взяли три модели: iPad, iPhone 6, Galaxy S5.

Сам контент страницы, как резиновый, подстраивается по любой размер экрана.

Вердикт Google Developers:

Тест Google Developers пройден успешно

Тест Google Developers пройден успешно

Кроссбраузерность сайта

Видимость и корректность работы сайта были проверены в браузерах: Google Chrome, Opera, Safari, Yandex Browser, Internet Explorer, Mozilla Firefox.

Замена старой версии сайта на новую

Теперь, когда всё готово, аккуратно меняем старую версию сайта на новую. Для этого, меняем DNS-настройки со старого хостинга на новый. И переносим сайт с поддомена на основной домен. Эта работа заняла где-то пол-часа.

Вся работа над созданием новой версии сайта длилась примерно 2 недели.

 

Leave a Reply

Your email address will not be published. Required fields are marked *