- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Переиграть и победить: как анализировать конкурентов для продвижения сайта
С помощью Ahrefs
Александр Шестаков
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Уж простите, только учусь, в CSS не силен, поэтому прошу разъяснить (это не совсем наглость? :confused: ) и показать пример как делается адаптивный дизайн
Допустим, имеется базовый шаблон для компа:
При уменьшенном до размере планшета:
Тут убирается за ненадобностью правый блок, к примеру, в hidden, т.к. там рекламки новостей.
При просмотре с мобильного устройства:
Вот здесь левый блок как то нужно перенести вниз, а нижний со счетчиками в hidden
Помогите с HTML и CSS для такого варианта.
первый сайт из выдачи http://beloweb.ru/novichkam/osnovyi-adaptivnogo-veb-dizayna-responsive-ili-kak-sdelat-prostoy-shablon-adaptivnyim.html текст не читал, но судя по примерам то, что вам надо, чтобы понять суть, всё наглядно. А вообще люди книги пишут на эту тему, оплатите их труд и узнаете много нового, например:
Тим Кедлек `Адаптивный дизайн. Делаем сайты для любых устройств`
Люк Вроблевски `Сначала мобильные!`
---------- Добавлено 16.02.2016 в 20:46 ----------
прошу прощения, не по теме: тем, кто считает что люди не делятся ссылками, делятся ещё как, если контент качественный и раскрывает тему! смотрите выше ;) сайт вижу впервые.
Да, спасибо, статья интересная.
Но если, вдруг, кто то расщедрится на несложный пример с кодом по вышеприведенной задачке, был бы вообще счастлив :)
вообще-то не правильно скрывать блоки в hidden, так как они всё равно грузятся, вся суть адаптивного дизайна (скажем так по-уму) в том, чтобы грузить только то, что необходимо и в таком качестве, какое необходимо. В общем то как раз книги хорошо и последовательно это объясняют.
вообще-то не правильно скрывать блоки в hidden, так как они всё равно грузятся, вся суть адаптивного дизайна (скажем так по-уму) в том, чтобы грузить только то, что необходимо и в таком качестве, какое необходимо. В общем то как раз книги хорошо и последовательно это объясняют.
И снова спасибо Вам, жаль плюсануть не получается.
До книги обязательно доберусь :) Никто же не оспаривает эту истину.
Захотелось разобраться прямо сейчас хотя бы в основах, загореться, так сказать.
Просто на текущий момент удовлетворился вылавливанием мобильного устройства по USER AGENT и подсовыванием ему облегченной версии, и Яндекс и Гугл довольны, а, вот, пользователи широкоэкранных планшетов, судя по всему, не очень :)
удовлетворился вылавливанием мобильного устройства по USER AGENT и подсовыванием ему облегченной версии
это, имхо, неправильно
вот можно почитать:
Как сделать один сайт для всех устройств (Responsive Web Design)
«Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление.»
Почему это глупо
Во-первых, никто не сможет предугадать, какими устройствами будут пользоваться ваши посетители. Нужно ориентироваться не на устройства, а на разрешения.
Адаптивный дизайн на основе медиа-запросов
четкое отображение страниц на экране с любым разрешением;
возможность просмотра группы контента на любом устройстве;
отсутствие горизонтальной полосы прокрутки независимо от размера окна.
...Яндекс и Гугл довольны, а, вот, пользователи широкоэкранных планшетов, судя по всему, не очень :)
вот кстати я такой пользователь! постоянно сайты показывают моб.версию, и приходится искать ссылку на полную версию, а как раз с адаптивным дизайном такой проблемы нет. Но может не все так поступают, меня лично моб.версия не устраивает, если я могу пользоваться полной. Значит по юзер-агенту фильтровать не самый лучший вариант. Здесь где то на форуме читал что есть проблема с маленьким экраном, но высоким разрешением, но в чём именно проблема не совсем понял, ведь у таких устройств свои браузеры показывают адаптивный сайт как надо.
Наводящий вопрос:
Если левому блоку дать ширину 100% , где будет отображаться центральный блок с шириной 100%?
Ну или стукните в ЛС, дам пример
в зависимости от стилей, в зависимости от расположения блоков на странице они будут на разных местах))
первый сайт из выдачи
Изучил. Интересная статья.
Но тут, к примеру, вниз уводят правый блок. Это, как оказалось, не сложно. А как увести в низ левый блок?
svv, так я статью не читал :) но теоретически в медиазапросе поменять обтекание float вроде как...
---------- Добавлено 16.02.2016 в 22:47 ----------
смотря какая вёрстка, грубо говоря чтобы левый блок в медиазапросе стал правым и ушёл вниз, а правый скрылся раньше (хоть это и не правильно скрывать, но если надо...)