Хватит менять размер окна браузера, хватит его насиловать! Готов спорить, вы не раз слышали это. Хорошо, возможно и не слышали. Но если вы профессионально занимаетесь разработкой адаптивных сайтов, вы понимаете о чем я: любое изменение DOM или правка CSS, и вы снова начинаете тянуть край браузера вперед, назад, тестируя изменения и просматривая ничего ли не сломалось.
Вы можете увидеть эффекты ваших изменений в коде страницы, переключив окно браузера на свой компьютер с полноэкранного режима, чтобы реагировать. Таким образом, за 3 минуты мы создали простейшую отзывчивую страницу! Почему сайт должен реагировать? Вчера вечером у меня был разговор с Богданом, другом, который работал в Англии некоторое время. Он работает в агентстве, которое создает веб-сайты, как концепцию, так и технически и графически.
Сначала мы начали противоречить себе, но мы быстро поняли, что у нас нет единой системы отсчета. Поэтому мы решили поговорить о том, что не делать, когда вы делаете сайт. Мой список Богдана немного длиннее, но очень простой и доступный для всех. Нет окна поиска.
Целью ваших движений является имитация экранов различных устройств.
В корпоративной среде зачастую, у вас есть множество гаджетов предоставленных компанией для теста. На моей работе в моем распоряжении есть iPad, iPod, другие планшеты, ноутбуки, а также настольные мониторы. Если у вас нет такой роскоши, приходится использовать то, что под рукой.
Сайт похож на архив, полный информации. Независимо от того, является ли это корпоративным сайтом или просто блогом, поле поиска имеет важное значение. Посетитель может искать что-то скрытое внутри сайта, и с помощью окна поиска есть хорошие шансы получить то, что он хочет.
Является эффективным, стильным и простым в использовании. Это позволяет посетителям эффективно искать сайт. Итак, вы выполнили функцию поиска. Нелегко читать и отслеживать информацию. Это важный элемент в веб-дизайне. Разумеется, хороший дизайн интерфейса привлечет внимание посетителей, но они должны сначала прочитать текст, а затем получить желаемую информацию. Некоторые сайты используют необычные шрифты и размеры шрифтов, которые делают чтение практически невозможным.
К счастью, есть внушающий набор онлайн инструментов, имитирующих различные диагонали устройств. Конечно, каждый из них имеет свои преимущества и недостатки, мы рассмотри несколько таких инструментов.
Для тестирования я выбрал реально адаптивный сайт PajamasOnYourFeet.com, сайт построено на основе HTML5 шаблона, бесплатно предоставленным EGrappler.
К счастью, есть решения. Контент плохо организован. Контент сайта - это тот, который приносит трафик и то, как он структурирован, делает сайт успешным или неудачным. Посетители читают только то, что им интересно, но просматривают сайт и сохраняют точки интереса на веб-странице.
Некоторые дизайнеры вначале помещают блок текста и полностью игнорируют абзацы, заголовки и субтитры, ключевые слова, абзацы и пробелы. В целом худшее - это неточное, неверное, недоступное, незначительное или устаревшее содержание. Содержимое должно соответствовать общей теме сайта и быть полезным.
Am I Responsive?
Am I Responsive , очень простой инструмент, позволяющий быстро просмотреть ваш сайт на 4 устройствах. Все они - IOS и разработчик объясняет это фишкой сайта. В общем никаких настроек, никакого выбора, а очень просто и наглядно.Доступные размеры:
- настольный монитор - 1600 x 992px;
- ноутбук - 1280 x 802px;
- планшет - 768 x 1024px;
- мобильный телефон - 320 x 480px.
Есть две приятные фишки: возможность таскать устройства по вашему экрану, а также возможность поделится ссылкой на тест сайта.
Навигация должен быть совершенным. Посетители должны «легко найти свой путь». Хотя для веб-сайта нет стандарта для навигации, особенно когда есть много технологий, необходимо понимать, что навигация должна быть интуитивной и последовательной. Текст, используемый в качестве навигации, должен быть кратким. Ссылки должны быть очевидны. Мертвые или неактивные ссылки не должны существовать. Это создавало бы путаницу и пустую трату времени. Еще хуже, чем у этого есть ссылка домашней страницы на домашнюю страницу.
Вы можете использовать текстовые описания для ссылок или альтернативный текст для изображений. Персональные сайты могут быть более креативными, но деловые сайты нуждаются в большей эффективности и ясности. Чрезмерное творчество ни к чему хорошему не приводит. Некоторые дизайнеры делают искусство слишком высоким, создавая различные шаблоны для каждой страницы веб-сайта. Это запутывает и раздражает пользователя. Каким бы замечательным и привлекательным ни был сайт, когда общий внешний вид и здравый смысл не согласуются.
deviceponsive
deviceponsive очень похож на Am I Responsive, тем, что он настолько же прост, с минимум настроек и опций. Все доступные устройства отображаются сразу на одной длинной странице. Из всех доступных опций это возможность отредактировать фон заголовка и добавить туда свой логотип, что будет полезно когда вы решите поделится скриншотом.Устройства и доступные разрешения экранов.
Пользователи чувствуют себя неконтролируемыми и уходят, как только они прибудут. Вы можете использовать стандартный шаблон для каждой страницы со ссылками на главные разделы сайта. Ключевое слово простое: он создает эстетически простой дизайн, чтобы не путать пользователей.
Разрешение недружественного экрана. Это не так в современном дизайне. Хороший дизайнер разработает сайты, которые подходят для большинства размеров экрана. Неупорядоченные страницы и слишком мало свободного места. Многие дизайнеры забывают о космосе и его важности. Они настолько «пойманы» в своем собственном творчестве, что забыли, что речь идет не о них. Таким образом, они пытаются сопоставить все на одной странице. Полная, переполненная и неразборчивая страница.
- Macbook - 1280 x 800
- iPad портрет - 768 x 1024
- iPad портрет - 1024 x 768
- Kindle портрет - 600 x 1024
- Kindle альбомная ориентация - 1024 x 600
- iPhone портрет - 320 x 480
- iPhone альбомная ориентация - 480 x 320
- Galaxy портрет - 240 x 320
- Galaxy альбомная ориентация - 320 x 240
Некоторым дизайнерам даже хуже помещается различная фоновая музыка на каждой веб-странице. Не используйте фоновую музыку, но при необходимости создайте кадр, который может контролировать посетитель. Таким образом, пользователь может остановить или прервать музыку в любое время.
Используйте «призыв к действию», чтобы быть предельно ясным. Хотя юмор и шутка, как правило, хороши в онлайн-контенте, призыв к действию должен быть максимально простым и простым. Цель здесь заключается в том, чтобы пользователь действовал! Этого никогда не может быть слишком много. У веб-разработчиков должен быть механизм проверки при тестировании сайта. Является ли появление связным во всех браузерах?
responsive test
Как и deviceponsive, responsive test отображает ваш сайт в различных устройствах. Но вместо показа всех сразу, вы сами выбираете необходимое устройство в верхнем меню страницы. Кстати тут корректно работает масштабирование, что позволяет проводить тестирование большего разрешения на меньшем.30 различных разрешений доступно на сайте, начиная от огромного настольного монитора, до того, что они называют «дрянный андроид» (справедливости стоит заметить, что есть и нормальный андроид).
Что касается браузера Firefox, то он немного не корректно работает с данным сайтом. Обратите внимание, что на скриншоте не отображается слайдер между зеленым заголовком и белой областью фонового содержания.
responsive.is
Очень похож на предыдущих два инструмента, но есть одна вещь которая отличает responsive.is от других. Это плавная анимация при переходе от одного устройства к другому, а также полу-прозрачная область которая показывает реальную площадь сайта не попадающую в область просмотра.Доступные варианты устройств - авто (то как вы видите сайт), настольный комьютер, планшет в альбомной и портретной ориентации, смартфон в портретной и альбомном положении. Задавать произвольные размеры в px, к сожалению нельзя.
Screenqueries
А вот возможности и доступные опции отличают Screenqueries от предыдущих сервисов. 14 телефонов и 12 планшетов представлены здесь, с отдельной возможностью переключения в портретный и альбомный режим. Результаты отображаются на сетке с линейками. Также возможно задать произвольное разрешение, потянув за правый или нижний край.Интересной особенностью этого сайта, для ряда устройств есть “Trueview” вариант, который показывает ваш сайт в нативном браузере устройства.
К сожалению, Firefox и тут не смог отобразить слайдер. Не нужно обвинять меня, Firefox мой любимый браузер, но такие вот дела.
Screenfly
Screenfly пожалуй наиболее функциональный из всех. Доступно 9 больше чем планшет устройств - от 10" ноутбуков, до 24" мониторов, 5 планшетов, 9 телефонов, 3 телевизионных разрешения, а также произвольное разрешение. Добавьте сюда отдельный переключатель в портретный и альбомный режим, а также опцию показа прокрутки. Также можно поделится ссылкой на тест с помощью одной кнопки.У каждого устройства в меню указано размер экрана в px., а также в правом верхнем углу отображается фактический размер вашего окна браузера.
Все перечисленные достоинства позволяют претендовать на лидерство если бы не одно но (цитата разработчика): «Screenfly может использовать прокси-сервер, чтобы имитировать устройства во время просмотра вашего сайта. Прокси-сервер имитирует строку агента пользователя, но не поведение этих устройств.» Screenfly является единственным сервисом из списка, который позволяет тестировать на основе строки агента пользователя.
Используете ли вы представленные инструменты в своей практике? Делитесь своими секретами разработки адаптивных сайтов в комментариях.
P.S. Ошибки по поводу перевода просьба сообщать в личку.
Людям, вовлеченным в разработку веб-сайтов, обычно требуется проверить, как макеты сайта будут отображаться в разных разрешениях экрана и веб-браузерах. Сложно отследить отображение сайта на различных устройствах с разными разрешениями экрана. К счастью, некоторые интернет-сайты предлагают отличное средство для проверки макета страницы при разных разрешениях экрана.
Эти веб-сайты выводят предварительный просмотр веб-страницу путем ввода URL сайта. Если вы хотите увидеть, как ваша веб-страница будет выглядеть в разных разрешениях экрана, вы можете попробовать эти бесплатные ресурсы, легко проверив совместимость с различными размерами экрана.
Некоторые из этих сайтов предлагают широкий спектр популярных разрешений настольных компьютеров, ноутбуков, телевизоров, планшетов и мобильных устройств, другие предоставляют возможность ввести разрешение вручную и проверить макет страницы в каком-то конкретном разрешении.
Хотя все инструменты просты и легки в использовании, они имеют свой собственный набор преимуществ в сравнении друг с другом.
На первое место можно вынести - очень хороший сервис для онлайнового тестирования сайта в различных разрешениях, который имеет понятный и симпатичный пользовательский интерфейс. На сайте вы найдете различные варианты разрешения экрана, включая настольные компьютеры, нетбук, ноутбук, планшеты, телевизоры.
Есть возможность выбрать непосредственно название устройства в случае, если вы не знаете его точное разрешение. Таким образом, вы можете выбрать Kindle, Google , Samsung, Motorola, Apple из выпадающего списка и проверить макет страницы в соответствующем разрешении.
Кроме того, Screenfly позволяет установить нестандартный размер экрана в пикселях и позволяют применить к своей страничке. Таким образом, вы можете легко проверить веб-страницы практически в любом разрешении.
Кроме того, вы можете вращать экран, включить или отключить прокрутку веб-страницы или использовать прокси-сервер для тестирования веб-страницы.
Другой бесплатный онлайн ресурс, где можно легко проверить сайт в разных разрешениях. На сайте вы найдете хороший диапазон устройст от настольного компьютера, ноутбук, планшет до смартфона. Кроме того, также позволяется вручную вводить разрешение и проверять макеты страниц.
Кроме того, есть вариант "в браузере", который оставляет место для границ браузера и элементов управления, а также панели задач в окне предварительного просмотра.
Далее идет , другой бесплатный инструмент, который позволяет протестировать сайт в разных разрешениях. Есть возможность выбрать из предложенных вариантов разрешения или ввести свои собственные размеры для сайта.
Этот сайт предлагает два различных варианта отображения: окна и рамки. Вариант окна хорошо сочетается с низким разрешением экрана, однако, если выбранное разрешение больше размер экрана, вы можете использовать опцию кадров, чтобы проверить его совместимость с размером экрана.
также определяет текущее разрешение вашего экрана и отображает его для ознакомления.
Еще один веб-инструмент, который позволяет протестировать страницы сайта в различных размерах. Сайт лучше всего работает с Internet Explorer и отображает веб-страницы в выбранном разрешении. Однако, список разрешений весьма ограничен. Это означает, что вы можете проверить веб-страницы только в 8 разрешениях, включая 800 × 600, 1024 × 768, 1280 × 960, 1440 × 900, 1600 × 1200, 1680 × 1050 и 1920 × 1200.
Не предусматривает такое количество опций, как на других подобных веб-сайтах, но и этот вариант стоит попробовать.
Последним в списке является ресурс TestSize.com, бесплатный онлайн инструмент, который предлагает 9 различных разрешений для проверки страницы сайта: 240 × 380, 640 × 480, 800 × 600, 1024 × 600, 1024 × 768, 1280 × 600, 1280 × 1024, 1366 × 768 и 1920 × 1024.
Кроме того, здесь также можно вводить размеры экрана вручную и проверять веб-сайт в отдельно открывающемся окне (Open popup) . TestSize.com удобен и прост в использовании.