Рубрика «адаптивный дизайн» - 3

Я каждый день просматриваю информацию в Интернете, причем делаю это с разных устройств – это и Macbook Pro, и iMac, и PC, iPad, iPhone и даже мой телевизор. Поэтому меня серьезно раздражают веб-сайты, не оптимизированные под большие экраны или страницы, долго открывающиеся на мобильном устройстве.

Все мы положительно восприняли концепцию адаптивного дизайна. Лишь немногие возражают против него. В сущности, на сегодняшний день единственный аргумент против адаптивного дизайна заключается в том, что клиент не хочет оплачивать дополнительное время на доработку ресурса. Но, как любое нововведение, адаптивный дизайн породил множество мифов. Посмотрим, сможем ли мы развенчать некоторые из них…
Читать полностью »

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

Уровень подготовки веб-мастера: любой

Люди все чаще предпочитают пользоваться смартфонами, и все больше сайтов оптимизируют свой контент для просмотра на этих устройствах. С тех пор как мы последний раз говорили о дизайне сайтов для мобильных платформ, нам удалось значительно улучшить поддержку их содержания. Так, ещё в декабре 2011 года был запущен робот Google для мобильных сайтов, который обрабатывает именно такой контент.
Сегодня мы хотим дать вам рекомендации по созданию и оптимизации сайтов, чтобы они одинаково хорошо отображались как на обычном компьютере, так и на смартфоне.

Читать полностью »

Уровень подготовки веб-мастера: средний/высокий

Нам нравится работать с данными. Мы уделяем много времени изучению аналитической информации о наших веб-сайтах. Любой веб-разработчик, которому это тоже интересно, наверняка заметил, насколько увеличился в последнее время объем трафика с мобильных устройств. За последний год значительно вырос процент просмотров страниц наших основных сайтов со смартфонов и планшетных ПК. Это значит, что все больше посетителей используют устройства с современными браузерами, поддерживающими последние версии HTML, CSS и JavaScript. Однако ширина экранов таких устройств обычно ограничена 320 пикселями.

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

  1. четкое отображение страниц на экране с любым разрешением;
  2. возможность просмотра группы контента на любом устройстве;
  3. отсутствие горизонтальной полосы прокрутки независимо от размера окна.

Читать полностью »

Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.

Дайджест интересных новостей и материалов из мира айти за последнюю неделю №48 (9 — 15 марта 2013)
Читать полностью »

Статья является переводом отличного, вдохновляющего, хоть и небольшого поста Mixing Responsive Design and Mobile Templates от одного из создателей CodePen, Криса Койера.

Итак, вы заняты стратегической проработкой поведения своего сайта для мобильных устройств. По идее вам надо бы выбрать что-то одно — или адаптивный дизайн, или создание отдельного сайта для мобильных. Что ж, возможно, это не так. Может быть, вам удастся сочетать сразу несколько стратегий. Читать полностью »

Не так уж и давно наличие адаптивного или мобильного сайта стало не трендом а реальной необходимостью — трафик с устройств продолжает расти, а пользователи уже начинают отказываться от больших компьютеров в пользу смартфонов и планшетов. Для создания таких сайтов сейчас, в основном, используются три метода: адаптивная верстка, разработка отдельной мобильной версии и RESS. Johan Johansson опубликовал сравнение этих методов, которое мы перевели и представляем вашему вниманию. Под катом много текста и картинок.
Читать полностью »

image

В качестве примера того, что мы получим в результате, можно посмотреть сайт «Five Simple Steps» с адаптивной версткой. Когда окно браузера имеет маленькую ширину, меню в верхнем правом углу превращается из обычного ряда ссылок в выпадающее меню.
Читать полностью »

Джонатан Смайли | Перевод Главмастера | Оригинал

 

Погружение в адаптивную вёрстку с Foundation

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

Одна из постоянных проблем верстальщиков адаптивных сайтов — это задача удобно представить обычные таблицы на мобильных устройствах. Вот как выглядят такие таблицы чаще всего:
Способы реализации адаптивных таблиц

Не очень удобно, правда? К счастью уже существует несколько хитрых способов решить такую проблему.Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js