Евгений Грачёв | Одомашненная страница

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

А вот ещё интересно ↓

В предыдущей версии (январь 2010 года) сайт выглядел следующим образом:

Предыдущая версия сайта

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

Что ж, рисуем макет. Сайт делаем шире, размер текста увеличиваем, шрифт меняем на более лёгкий. Облака оставляем, но делаем их крупнее и располагаем по центру. Герб тоже оставляем на месте, но убираем девизную ленту, чтобы в общем сайт выглядел чище:

Макет

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

Иконки

В нарушение всех корпоративных правил и указаний брендбуков в разделе «Работа» логотипы компаний-работодателей делаем в этом же стиле. Заодно убираем с сайта все flash-элементы: большую по размеру карту меняем на картинку со ссылкой на Google Maps, а в разделе «Галерея» делаем слайд-шоу на основе CSS — это гарантирует, что сайт будет работать даже на тех устройствах, которые по какой-то причине не поддерживают технологию flash.

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

Вариант 1

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

Вариант 2

Снова не то: всё-таки у каждой фотографии свой фон, и это сильно мешает. Пробуем избавиться от этих фонов, в результате чего получается именно то, что нужно:

Вариант 3

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

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

Отзывчивый веб-дизайн

Когда очередь доходит до страницы для «ошибки 404», возникает вполне справедливый вопрос: на каком языке её делать? Языков у нас много, а 404-я страница всего одна. Правильный ответ — ни на каком:

Ошибка 404

Сохранить