Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

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

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

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

JavaScript учебник
Код функций в JavaScript начинает выполнение после их вызова. Функции являются одним из наиболее важных строительных блоков кода в JavaScript. Функции состоят из набора команд и обычно выполняют

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

Пять ошибок при создании адаптивного сайта

Опубликовано: 01.09.2018

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

Адаптивный дизайн для сайта на что он влияет и почему все требуют адапт

Создание адаптивного сайта достаточно сложный процесс и нужно преодолеть немало преград,  избегая возможных ошибок, прежде чем ваш проект будет соответствовать основным принципам этой технологии. Брэд Фрост (специалист по мобильным стратегиям из медийного агенства R/GA)  показывает как обойти наиболее неприятные из них:



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

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


6 правил SEO оптимизации на этапе разработки сайта. Как оптимизировать сайт на этапе разработки

Вот основные ошибки, которых нужно избегать при создании адаптивного сайта:

1. Скрытый контент

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


Основные ошибки новичков в оформлении сайта

Мобильный пользователь должен осознавать — на этом сайте он получает все то же самое, что доступно для ПК

Обеспечьте доступность всего содержимого и функционала для максимального числа  посетителей. Речь идет про скрытый контент, умело спрятанный при помощи CSS — который будет также загружаться и приводить к следующей ошибке:

2. Большой вес страниц — проблемы доступности

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

74% мобильных пользователей прервут загрузку сайта после 5 секунд ожидания и, к сожалению только 3% малоэкранных версий адаптивных сайтов значительно легче, подобных проектов для больших экранов

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

Обычная страница адаптивного сайта Барака Обамы весит более 4 MB. Это недопустимо никакими стандартами, и особенно скажется на производительности для пользователей EDGE, 3G или при плохом WiFi соединении.

Для сайта имеющего целью обращение к остальному населению (с применением разных устройств – в зависимости от мобильной гонки, мобильной религии…) это вызовет серьезные проблемы доступности.

Наиболее сложно при создании адаптивных сайтов  достичь баланса: внедряя новую практику быть нацеленным на придирчивость пользователя и все еще поддерживать опыт его пользования в равной пропорции для всех моментов. Вырежьте весь «хлам» из кода (результат недобросовестной веб-разработки), используйте только « best practice » в коде. Не принимайте хорошее качество связи и высокие параметры соединения по умолчанию и стремитесь к  уменьшению начального веса загружаемой страницы.

3. Игнорирование контекста устройств

Мобильный телефон это не планшет, не лэптоп, не десктоп и не TV. У каждого свой уникальный форм фактор, особенности интерфейсов, ограничения и возможности. Это нужно учитывать и добиваться ощущения «естественности» использования сайта на мобильных устройствах. Я не настаиваю на создании для каждой платформы в браузере подобающего UI, но нужно принять во внимание как пользователи держат устройство, к каким иконкам они привыкли и т.д.

Для создания хорошего адаптивного сайта автор советует пойти дальше «игры в песочнице» с браузером и проявить больше благожелательности к пользователю — поработать над контекстом взаимодействующего с сайтом устройства

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

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

4. Однообразный подход  «на все случаи жизни»

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

Функциональность адаптивного сайта должна соответствовать возможностям устройств пользователей

Устанавливая ограничения по умолчанию, мы создаем прочный фундамент независимости и стабильности проекта (кто знает которое свойство браузера, у какого пользователя может работать с ошибками). Позднее мы можем использовать прогрессивные методы для развития сайта и выгодно применять feature detection для перехода на следующий уровень.

5. Не стоит полагаться на разрешения экранов

320px…  480px…  768px…  1024px…  Неужели!.. Неужели тут все по-прежнему…

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

Примите участие в мобильной эволюции

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

rss