- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Переиграть и победить: как анализировать конкурентов для продвижения сайта
С помощью Ahrefs
Александр Шестаков
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Народ, а кто что скажет? Лучше делать адаптивную верстку или же отдельный мобильный шаблон с фильтром по user-agent?
Если проект новый, то адаптивная верстка, я за нее.
Если дизайн недавно сделан, но он под desktop, то надо взвешивать за и против.
Сделал тут простую кнопку переключения на полную версию сайта для адаптивного дизайна:
В Хедер, вместо meta name=viewport:
Сама кнопка:
<script>
//Ставим Куки
function SetCookie(id, days){
var ws=new Date();
ws.setDate((days-0+ws.getDate()));
document.cookie=id+"; path=/; expires="+ws.toGMTString();
}
</script>
Куки на 30 дней, страница перегружается по ссылке. Работает, проверил.
На здоровье :)
Если кому-то интересны технические моменты, то мы меняем width=device-width на width=1024, делая сайт "шире" для мобильного устройства. Также, я изменил начальный масштаб загрузки страницы с initial-scale=1 на initial-scale=0.1 - так работа очевиднее.
Сегодня переделывал сайт pleervox.ru и получил у Гугла 100 / 100 Удобство для пользователей. :)
Даже слайдер и просмотрщик фотографий переделан под мобильные устройства.
Подтверждаю сказанное. Владелец Плеервокса мой давнишний друг и SEO клиент. Когда потребовался адаптив, он сам нашел Андрея, который на удивление быстро и недорого сделал адаптив. В итоге я попросил контакты такого шустрого исполнителя и передал Андрею еще один проект autovyhlop.ru.
Теперь я знаю, кто может быстро и безболезненно сделать адаптив и всячески рекомендую Андрея.
Отзыв реальный, мой номер телефона для сомневающихся +7 499 391-35-99
Спасибо! :)
А сегодня у нас интересная тема!
Как сделать таблицу адаптивной и не сойти с ума
В общем, адаптация под "резиновую верстку" табличного сайта часто выглядит примерно вот так. Особенно, если нет легкого доступа к самой таблице.
У меня есть полная статья на эту тему, но давайте тут просто приведу список полезностей по пунктам:
1) td {hyphens: auto;} - корректный перенос слов в таблице. Жаль, не во всех браузерах.
2) word-break: break-all; - принудительно разбиваем строки и слова в таблице. Не очень красиво, но работает.
3) <WBR> сами расставляем места переносов.
4) Заключаем таблицу в DIV c фиксированной шириной и overflow: auto. Это включит прокрутку по горизонтали.
5) Иногда достаточно уменьшить отступы в ячейках.
6) td {display: inline-block !important; width: 100% !important;} - а этот способ дошел до меня совсем недавно. Можно сделать столбцы таблицы блоками или инлайн-блоками. Это настолько легко и круто, что даже слов нет!
Любые карточки товаров легко складываются друг под друга, а ячейки переносятся. И все это - без физической разбивки таблицы на 2 части (у таблиц вообще много глюков с float: left в разных браузерах).
Да, подход применим и к строкам (tr). В принципе, стилями таблицу можно даже пересобрать заново.
max-width не работает в Firefox и IE 11 для изображений. И буду рад, если кто-то знает другое решение :)
Большинство современных браузеров вполне корректно понимают max-width: 100% и уменьшают изображение, если оно не помещается в контейнер. С IE 11 и Firefox такого не происходит. По какой-то причине эти браузеры считают, что max-width: 100% относится к истинной ширине изображения, а не к ширине в контейнере.
Решение довольно простое: Мы дополнительно задаем изображению width: 100% (не забываем про height: auto).
Картинка растягивается на весь контейнер и уменьшается вместе с ним. Как минус - нужно очень точно указывать стили, чтобы не растягивать маленькие изображения.
Если у разных картинок нет разных классов, иногда можно воспользоваться медиа запросами и CSS селекторами.
Например: img[src$="-560.jpg"] {width: 100% !important; height: auto !important;}
Есть еще одно нудное и долгое решение.
Указывать каждому изображению width: 100%; height: auto; max-width: 800px; max-height: 600px;
Где 800 и 600 я указал просто для примера. Тут max-height больше всего нужен для IE 11. Там все будет работать корректно только в том случае, если на сайте указан доктайп.
max-width не работает в Firefox
у меня работает
у меня работает
Зайдите и восхититесь: http://dikij.com/test.php
Код
<img style="max-width: 100%;" src="http://dikij.com/foto/661.jpg">
</td></tr></table>
похоже, что вместе с таблицей они не знают, как себя вести.
изображение растягивает таблицу (при уменьшении ширины), и, соответственно, не уменьшается само
похоже, что вместе с таблицей они не знают, как себя вести.
изображение растягивает таблицу (при уменьшении ширины), и, соответственно, не уменьшается само
Да, нужно было указать в тексте подробнее, что дело в кривой работе с таблицами, в первую очередь.
А обязательно ли упоминание "screen"? Например: @media screen and (max-width:600px)
Google обходится без этого screen и предлагает простое @media(min-width: 468px) в рекомендациях по стилям адаптивного блока.