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

Последняя проблема, с которой нужно справиться перед тем, как приступать к адаптивному веб-дизайну, лежит скорее в психологической сфере. И в какой-то мере, возможно, является самой трудной для преодоления. Например, меня часто просят преобразовать имеющиеся графические дизайны в соответствующие стандартам веб-страницы на основе HTML/CSS и jQuery. По своему опыту могу сказать, что графическим дизайнерам редко (если я говорю «редко», то имею в виду, что это почти никогда не случается) требуется держать в уме нечто иное, кроме «настольной версии» сайта с фиксированной шириной, в тот момент, когда они создают свои композиции дизайнов. Таким образом, моя задача заключается в том, чтобы создать совершенную до последнего пиксела визуализацию соответствующего дизайна в каждом из известных браузеров. Неудача или успех в решении этой задачи определяет в глазах моего заказчика профессионализм графического дизайнера,

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

Однако если вы когда-нибудь пытались сделать так, чтобы тот или иной современный веб-дизайн выглядел в браузере Internet Explorer 6 и 7 точно так же, как он выглядит в актуальных, соответствующих стандартам браузерах, например в Safari, Firefox или Chrome, то вам будут известны сложности, присущие такому процессу. У меня зачастую уходит до 30% выделенного на проект времени/бюджета на то, чтобы устранить бреши и недостатки, свойственные хилым устаревшим браузерам. Это время можно было бы потратить на внесение улучшений и оптимизацию кода в плане его объема для растущего количества пользователей, просматривающих сайты в современных браузерах, вместо того чтобы ставить заплаты и ковыряться в кодовой базе в попытке обеспечить скругленные углы, прозрачные изображения, корректно выровненные элементы формы и т. д. для сокращающейся аудитории пользователей Internet Explorer.

Жаль, но единственным «лекарством» при таком сценарии является просвещение. Заказчику необходимо объяснить, почему адаптивный веб-дизайн — целесообразный вариант, что он несет в себе и почему итоговый дизайн не будет и не должен одинаково выглядеть во всех областях просмотра и браузерах. Одни заказчики способны все это понять, а другие — нет. К сожалению, некоторые из них все равно будут хотеть, чтобы скругленные углы и отбрасываемые тени корректно выглядели и в Internet Explorer тоже!

Приступая к новому проекту, независимо от того, применим для него адаптивный веб-дизайн или нет, я разъясняю клиенту следующие моменты.

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

Делая так, чтобы все элементы выглядели одинаково даже в устаревших браузерах (например, в Internet Explorer версии 8 и ниже), мы добавляем на сайт значительное количество изображений. Это замедляет его работу, делает его создание более дорогим, а также усложняет сопровождение.

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

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

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

Резюме.

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

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

Существует несколько причин, которые формируют необходимость в адаптивном веб-дизайне. Первая причина – это неуклонный рост числа владельцев всевозможных гаджетов. Вторая причина – это дешевеющий, на фоне интенсивной конкуренции, интернет. Безлимитный интернет Билайн уже сегодня способен порадовать владельцев смартфонов и планшетов тарифами, о которых лет 5-8 нельзя было и мечтать. Таким образом сочетание упомянутых выше факторов приводит к очевидному выводу: если у вас уже есть сайт – необходимо заказать адаптивную версию, если вы решили заказать сайт – не стоит экономить на адаптивном веб-дизайне.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *