Основы адаптивного дизайна

Он-лайн сервисы по проверки адаптивности

Основной задачей этих сервисов презентовать (показать) как будет выглядеть ваш сайт на мобильном устройстве. Сайтов с таким функционалом великое множество. Я приведу лишь некоторые из них. В большинстве случаев они дублируют встроенный функционал FireFox и Chrome.

Начну опять же с Google, у которого есть свой сервис демонстрации адаптивности:

Quirktools screenfly

Второй симпатичный сервис — это http://quirktools.com/screenfly/. Он покажет как может выглядеть ваш сайт даже на телевизоре!

Symby.ru adaptest

Ну и чтобы не обидеть «отечественного производителя» приведу пример еще одного сайта: http://symby.ru/adaptest/. На одной странице вы увидите сразу несколько представлений с различными разрешениями экранов.

Мобильная версия сайта и адаптивный веб-дизайн: большая разница

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

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

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

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

Проверка совместимости

Нужно проверить:

• Совместимость с браузерами;
• Совместимость с операционными системами;
• Просмотр на мобильных устройствах;
• Параметры печати.

Совместимость с браузерами

Работа некоторых веб-приложений зависит от типа браузера. Сайт должен быть совместим с различной конфигурацией и параметрами разнообразных браузеров.

Верстка сайта должна быть кроссбраузерной. При использовании Java-скриптов и AJAX, обеспечивающего функциональность пользовательского интерфейса, проверки безопасности или валидации создают большую нагрузку на систему.

Проверьте работу веб-приложения в браузерах Internet Explorer, Firefox, Netscape Navigator, AOL, Safari, Opera разных версий.

Совместимость с операционными системами

Некоторые функции веб-приложения могут быть несовместимы с определенными операционными системами. Не во всех из них поддерживаются новые технологии, используемые в веб-разработке. Поэтому проверьте работу приложения в Windows, Unix, MAC, Linux, Solaris и их различных версиях.

Просмотр на мобильных устройствах

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

Параметры печати

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

Мета-теги

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

Title

Это название страницы. Заголовок, который можно увидеть во вкладках браузера. Сменить title можно в панели управления CMS (например, в WordPress или Joomla). Также title можно прописать в коде страницы – для этого соответствующий тег пропитывается в блоке head.

К оформлению title есть два требования:

• Он должен быть не длиннее 60 символов, если на русском языке, и не длиннее 70 — на английском.
• Он должен содержать ключевые слова для поисковых ботов и максимум полезной информации для посетителей в кратком изложении. Часто его пытаются сделать привлекательным для потенциальной аудитории, так как это первое, что видно в поисковой выдаче.

Description

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

Описание так же прописывается в блоке head. Для этого используется тег description. 

Примеры тегов

<title>Тестовый сайт</title>
<meta name=“description” content=“Одна из страниц тестового сайта”>

Примерно так это выглядит в HTML-разметке сайта. Этот код вставляется в начало HTML-файла.

Как сделать сайт не только удобным, но и красивым

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

Ищите источники вдохновения

Использовать для вдохновения чьи-то идеи не стыдно, в чем убеждает нас Остин Клеон, автор бестселлера «Кради как художник». Книга не учит уходить от ответственности, бессовестно копируя конкурентов, зато помогает прокачать креативность. А если вы считаете себя визуалом, ищите вдохновение на сайтах Behance, dribbble, Awwwards, Site See, Land-book или 99designs. 

Главная страница 99designs встречает модными цветовыми схемами и подборкой трендов

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

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

А российская компания «Молочная культура» сделала акцент на стаканчике с молоком, который шустро перемещается при скроллинге.

Учитывайте тренды 2020 года в дизайне сайтов

В Shutterstock проанализировали глобальные тенденции в дизайне на 2020 год и выяснили, что к нам возвращаются 1920-е с их шиком, элегантными геометрическими фигурами и элементами стиля ар-деко, магическими символами и яркими флористическими композициями. В тренде минималистичный черный, абстрактные темные фоны и эксперименты с каллиграфией. А главными цветами года в Shutterstock назвали Lush Lava, Phantom Blue и Aqua Menthe. Ниже — коллажи, которые отражают главные тенденции 2020 года в дизайне. 

Коллажи, подготовленные дизайнерами Shutterstock

В блоге глобальной креативной платформы 99designs рассказали, что тренды текущего года во многом определят вектор развития графического дизайна в следующем десятилетии. Главными тенденциями авторы блога называют ультратонкие геометрические фигуры, дымчатые текстуры, крупные шрифты и такие же контрастные элементы. Также мы ожидаем от 2020-го много ярких, смелых оттенков, неоновые свечения и набирающие популярность киберпанк и стрит-арт. 

Плюсы и минусы профессии

Если вы еще сомневаетесь, выбирать ли для себя профессию дизайнера, предлагаем взвесить все «за» и «против». Давайте начнем с приятного.

Достоинства:

1. Многообразие сфер деятельности: если раньше работа дизайнера была связана только с разработкой линии одежды, дизайна интерьера или ландшафта, то сейчас все большую популярность набирают графические и веб-дизайнеры. Можно освоить несколько навыков и стать универсальным специалистом.
2. Высокая оплата на рынке труда: конечно, это зависит от уровня специалиста, но если хорошо зарекомендовать себя, то, поверьте, за вами начнут охотиться хедхантеры.
3. Возможность работать во фрилансе или удаленно, подстроив под себя график.
4. Нет ограничений в рынке: никто не мешает находиться в одном городе, а работать, например, в столичной или зарубежной компании.
5. Популярность профессии: да, со временем она будет только совершенствоваться, но вряд ли исчезнет совсем.
6. Много новых знакомств: постоянные переговоры с заказчиками, посещение выставок и презентаций – то, без чего не обойдется работа дизайнера.
7. Доступность информации для изучения: в Интернете сейчас есть много различных курсов и методического материала, которые помогут изучить эту сферу или улучшить свои навыки.

Но, несмотря на все перечисленные плюсы, профессия дизайнера имеет свои нюансы.

Недостатки:

1. Далеко не все могут правильно распределять свое время, работая по свободному графику. Зачастую дизайнеры переоценивают свои силы, трудясь днем и ночью. Однако эта проблема легко решается. Советуем заглянуть на нашу онлайн-программу «Лучшие техники тайм-менеджмента», где за несколько недель вы освоите эффективные методики управления своим временем, целеполагания, совместной работы, которые применяются успешными людьми и известными компаниями.
2. Бывает, что желания заказчика не совпадают с видением работы дизайнера, а творческому человеку трудно работать в определенных рамках и ограничивать свой полет фантазий.
3. Рутина: работа в графическом редакторе, составление технической документации, отрисовка эскизов не всегда сопровождаются разнообразием деятельности.
4. Необходимо постоянно совершенствоваться и поддерживать свою конкурентоспособность: мир меняется, компьютерные технологии не стоят на месте, поэтому нужно держать руку на пульсе изменений в области дизайна.
5. Возможен творческий кризис: это свойственно всем, кто работает в такой области. Постоянная генерация и воплощение идей требуют сил и вдохновения, поэтому наступают моменты эмоционального истощения.
6. Чтобы стать успешным и востребованным дизайнером, будьте готовы изучить основы маркетинга и продаж, они вам понадобятся при общении с заказчиком и для продвижения своих услуг.

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

Кто такой UX-дизайнер

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

Обязанности

Определение и создание персон

Персона — это собирательный образ целевого клиента. Один микросегмент, воплощенный в образе конкретного человека.

Разработка структуры

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

Прототипирование

Когда структура готова, приходит время визуализировать идеи. UX-дизайнер занимается такой визуализацией — от создания вайрфрейма  до интерактивных прототипов.

Тестирование

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

Немного UI

Разработка концепции вместе с UI-дизайнером, координация и тесное взаимодействие на этапе разработки всех экранов интерфейса. 

Этот пункт, скорее, носит рекомендательный характер — конечно, если вы чистый UX и не совмещаете в себе функции UX/UI-дизайнера.

Исследования, гипотезы, очередное тестирование

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

Какими знаниями, личными качествами и навыками должен обладать UX-дизайнер

Личные качества

Логическое мышление.
Аналитические способности.
Развитые коммуникативные навыки.
Умение принимать быстрые решения в условиях сжатых сроков.
Умение правильно расставить приоритеты.
Самостоятельность и организация рабочего процесса.
Умение уделять внимание деталям.
Способность доводить начатое до конца.

Знания

• Методики тестирования интерфейсов.
• Принципы юзабилити и умение применять их на практике.
• Тренды и последние направления в дизайне.
• Основы аналитики.
• Английский на уровне чтения технической литературы.
• Понимание принципов User Centered Design.
• Верстка и современные инструменты разработки.
• Понимание всех этапов создания продукта.

Навыки

• Создание понятных кликабельных прототипов в специализированных программах.
• Взаимодействие с UI-дизайнерами и веб-разработчиками.
• Умение понимать техническую документацию и требования к интерфейсам.

Какие инструменты UX-дизайнер использует в работе

Для разработки структуры

Если задача сложная, требует построения сложных логических связей и одним блокнотом не обойтись, используйте mindmap-сервисы — XMind, FlowMapp, MindMeister.

Для интерактивных прототипов

Для создания интерактивных прототипов можно использовать Figma, InVision, Axure, Adobe XD.

Если хотите проработать анимацию в интерфейсе, можно использовать Framer и UXPin.

Sizzy

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

Тестирование производительности сайта

Тестирование производительности сайта или веб-приложения должно включать в себя:

• Нагрузочное тестирование.
• Стрессовое тестирование.

Проверьте производительность приложения на различной скорости интернета.

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

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

ab тестирование функциональности также включает в себя проверку на ошибки, связанные с оперативной памяти.

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

Нагрузка

1. Количество пользователей, одновременно посещающих сайт;
2. Проверьте работу системы при пиковых нагрузках;
3. Пользователь осуществляет доступ к большому количеству данных.

Объясняйте, что происходит

Хорошо, когда пользователи точно знают, к чему привели их действия и чего ожидать. Например, им не приходится буравить экран взглядом в мучительном ожидании: «Ну что там?» Они могут быть уверены, что данные не пропадут. Якоб Нильсен утверждает, что чем более предсказуема работа с сервисом, тем больше доверия к нему и тем приятнее пользовательский опыт.

Я выбираю «Перезагрузка», и система заботливо рассказывает мне, что будет дальше. Скриншот: Skillbox
А Aviasales показывает прогресс-бар, пока ищет рейсы. Я точно знаю, сколько мне ещё ждать. Могу сходить чайку налить. Скриншот: Skillbox

Илья Бирман в своей книге «Пользовательский интерфейс» приводит пример о важности обратной связи:

В челя­бин­ском поч­то­вом отде­ле­нии №80 рабо­тает элек­трон­ная оче­редь. У входа стоит машинка с един­ствен­ной кноп­кой. Нажи­ма­ешь кнопку, и через две секунды на чеко­вой ленте печа­та­ется номерок. Эти две секунды — целая веч­ность. Мно­гие решают, что кнопка не сра­бо­тала, и жмут ещё раз. Рядом с машин­кой все­гда валя­ются лиш­ние» номерки. Если бы машинка делала хоть что‑то сразу в ответ на нажа­тие — изда­вала звук или мигала лам­поч­кой, — такой про­блемы бы не было.

А Брюс Тогнаццини добавляет: «Хорошо, если пользователям не нужно искать или догадываться о состоянии системы. Они должны взглянуть на интерфейс и сразу понять, что там сейчас происходит».

Не забывайте про обратную связь

Это важно

Юзабилити-тест: что именно тестировать

Хочется улучшить сайт, но непонятно с чего браться? Пара идей что проверять тестом юзабилити, чтобы сдвинуться с места:

Этапы, где теряются конверсии

Если вы видите, что на каком-то этапе воронки отваливается необычно большая часть пользователей, скорее всего с этим этапом проблема. Одна из возможных причин — сайтом неудобно или непонятно пользоваться.

Рассмотрим реальный кейс теста юзабилити компании Imaginary Landscape. Из Google Analytics видно, что пользователи заходят на страницу с формой обратной связи, но заявку на звонок не отправляют. Видимо, что-то не так с самой заявкой.

Компания выдвинула гипотезы о причинах и сделала несколько вариантов формы. После юзабилити тестирования стало понятно, что дело в количестве строк: люди не хотят вводить так много данных. Форму поменяли, количество строк сократили c 11 до 4, после чего конверсия выросла на 140%.

Было — стало

Проблема с заявками была и у сайта бронирования отелей и курортов Arenaturist.com. Первый шаг на пути к оформлению — заполнение формы на главной странице. Туда нужно ввести дату путешествия, пункт назначения и количество пассажиров. Компания задумалась, как им получить больше заявок, и стала экспериментировать с формой заполнения. Это старая форма:

Горизонтальная форма сбора данных

А это новая, которая показала конверсию на 52% выше старой. Она выглядит крупнее, занимает больше места и привлекает больше внимания, хотя поля для заполнения остались прежними:

Вертикальная форма заявки

Элементы, обманывающие ожидания

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

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

• повесить на элемент ссылку на что-то полезное, что логично было бы ожидать по клику;

• переработать оформление, чтобы элемент не выглядел активным;

• вовсе его убрать, если он не несет практической ценности.

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

Нужно это исправить в зависимости от вида элемента:

• добавить надпись, которая бы давала понять, что ссылка здесь;

• сделать ссылку явной, вынести ее за рамки элемента;

• добавить элементу реакцию — увеличение или подсветку при наведении.

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

Что еще тестируют на сайте

Кроме прочего, анализируют:

• структуру сайта, чтобы сделать ее простой и понятной для пользователя;

• кнопки на кликабельность, особенно после того, как в моду вошел так называемый плоский дизайн — без теней и градиентов;

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

В общем, любые элементы, с которыми посетитель взаимодействует на сайте. Или не взаимодействует, но по нашему плану должен.

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

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

Как выполнить проверку кроссбраузерности сайта?

Firefox, Internet Explorer, Safari, Chrome и Opera обычно можно без проблем загрузить и установить. Но если у вас нет такой возможности, то существует множество веб-инструментов, которые позволяют проверить кроссбраузерность сайта онлайн.

Например, BrowserStack, Ghostlab и CrossBrowserTesting, но их использование может обойтись в значительную сумму. К счастью, существуют бесплатные инструменты. Каждый из них предоставляет пользователям различные функции тестирования.

Browsershots

Browsershots — это простой в использовании онлайн-инструмент для проверки кроссбраузерности сайта. Он позволяет протестировать сайт в основных стационарных браузерах, при этом вы можете указать различные версии программ. После того, как введете URL-адрес тестируемого сайта, всего через несколько минут вы увидите его скриншоты, сделанные в каждом из выбранных браузеров:

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

Spoon Browser Sandbox

Spoon предлагает более основательный вариант проверки кроссбраузерности. Для Chrome, Firefox, Internet Explorer, Opera и Safari можно выбрать точную версию, которую нужно протестировать.

Если вам нужно протестировать новейшие версии этих браузеров, то это бесплатно. Но если вы хотите проверить старые версии, за это взимается плата:

После выбора браузера он открывается в новом окне. Затем нужно ввести URL-адрес и протестировать страницу.

Данный сервис позволяет полностью протестировать все аспекты кроссбраузерности

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

Viewlike.us

Viewlike.us позволяет просмотреть сайт при разных разрешениях. Это пригодится для тестирования внешнего вида сайта, а также даст ценную информацию, касающуюся адаптивности ресурса:

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

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

IE NetRenderer

IE NetRenderer показывает тестируемый сайт только в Internet Explorer, но зато позволяет выбрать версию от IE 5.5 до IE 11. Это еще один простой инструмент, который подходит только для тестирования внешнего вида сайта:

Browsera

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

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

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

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

Для использования Browsera требуется создание учетной записи. Доступно несколько тарифов, а бесплатного вполне достаточно для тестирования небольших сайтов.

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

Разрешения экрана, размеры окна браузера. Справочник (изменения от 27.11.2013)

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

Для этого мы составили очень простую и удобную таблицу:

Зеленым цветом выделены строки, показывающие оптимальное разрешение, под которые следует проектировать веб-сайт, так как по данным некоторой статистики у большей части пользователей мониторы поддерживают указанные параметры. Менее 10% имеют разрешение меньше указанного. Желательно, чтобы максимальная ширина сайта не превышала 1259 px, иначе некоторые пользователи вашего сайта могут увидить горизонтальный скроллинг, который является очень неудобным для использования. А если вы на своем сайте не хотите видеть и вертикального скроллинга, или просто хотите узнать высоту той части сайта, которую гарантированно увидят сразу при открытии страницы, то она будет в диапазоне 599-631 px.

А как быть с владельцами сотовых телефонов, смартфонов и планшетов? Под какое разрешение разрабатывать сайт для них?

Современные мобильные устройства, кроме очень бюджетных моделей, имеют минимальное разрешение 480×320 px, а чаще 800×480 или более, умеют масштабировать сайты, а также самостоятельно разделять их на блоки, выделять важные текстовые фрагменты. Большинство сайтов корректно отображается на мобильных устройствах и без создания специальной мобильной версии сайта. Если вы все же хотите разработать мобильную версию, то желательно, чтобы она была сверстана в одну колонку (обычные сайты чаще верстают в 2-3 колонки) и не содержала сложных скриптовых и навигационных решений (например, выпадающих меню, мелких управляющих элементов и т.п.).

Вступление

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

• верстку;
• функционирование;
• безопасность.