Старый 02.11.2014, 21:38   #1
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,550
Вес репутации: 354
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
По умолчанию Оптимизация сайта для планшетов и телефонов - в 2 строчки

Для тянущегося дизайна поэкспериментировал и использую такое:
Код HTML:
<meta name=viewport content="width=device-width, height=device-height, initial-scale=1">
В стилях вот такое:
PHP код:
@media screen and (max-width650px) { // Если ширина экрана меньше 650
img {max-width96% !important;}
iframetablespandivtextareainputbuttonsubmit {max-width100% !important;}

//Чтобы блоки комментариев не расползались до 500px.
#vk_comments {max-width: 96% !important;}
#fb-comments {max-width: 96% !important;}
#comments {max-width: 96% !important;}

+++
Неплохо отображаются картинки;
В телефоне сайт выглядит намного крупнее;
Текст читать удобно (можно еще настроить отдельно шрифт);
Влазят даже большие блоки Адсенс за счет уменьшнния iframe.

---
Картинки немного корежит по высоте. Понятия не имею как исправить;
Бывает, картинку в таблице сжимает до 0. Применять бы стили только к большим изображениям (больше 360px);
Сделать бы перенос (на новую строку) ячеек из больших таблиц. Из-за этого колонки очень уж узкие.

Очень хочется совет - как бы до ума довести.

Добавлено через 23 часа 39 минут
Покопался еще немного с кодом. Думаю использовать еще псевдоклассы сss :after, :before.

Последний раз редактировалось D.iK.iJ; 02.11.2014 в 21:38. Причина: Добавлено сообщение
D.iK.iJ вне форума   Ответить с цитированием
Старый 14.11.2014, 18:51   #2
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,550
Вес репутации: 354
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Lightbulb

Долго тупил, но с картинками справился как-то так:

Код:
@media screen and (max-width: 650px) {
img {max-width: 96% !important; height: auto !important;}
iframe, textarea, input, button, submit, video, object, embed {max-width: 99% !important;}
table, span, div, ins {max-width: 100% !important;}
}
D.iK.iJ вне форума   Ответить с цитированием
Старый 27.01.2015, 14:43   #3
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,550
Вес репутации: 354
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
По умолчанию

Чтоб не потерять ссылку на проверку оптимизации в Гугле: https://developers.google.com/speed/pagespeed/insights/
D.iK.iJ вне форума   Ответить с цитированием
Старый 28.01.2015, 23:50   #4
Новичок
 
Аватар для Cyber-Gateway
 
Регистрация: 28.01.2015
Сообщений: 1
Вес репутации: 0
Cyber-Gateway на пути к лучшему
По умолчанию

Cпасибо за идею.
Cyber-Gateway вне форума   Ответить с цитированием
Старый 29.01.2015, 09:52   #5
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,550
Вес репутации: 354
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
По умолчанию

Цитата:
Сообщение от Cyber-Gateway Посмотреть сообщение
Cпасибо за идею.
Гляньте еще на Серче. Там побольше тема: http://searchengines.guru/showthread.php?t=873867
D.iK.iJ вне форума   Ответить с цитированием
Старый 02.02.2015, 21:21   #6
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,550
Вес репутации: 354
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
По умолчанию

Ура! Я получил свои 99 / 100 Удобство для пользователей

Делалось довольно просто, если интересно:
1) Табличку меню сделал align="left" ну или style="float: left;".
2) Табличку контента не трогал, добавил <center>
3) Перед футером: <br clear="all">
4) Всякие счетчики и подписи (которые должны стоять рядом) засунул в блоки со стилями display: inline-block; width: 30%;

5) Допилил немного media:
- Увеличил шрифты при уменьшении экрана (font-size: 110%
- Интервал между строк тоже подрос (line-height: 130%
- Появились переносы через hyphens: auto;
- Меню где-то на ширине экрана 500px разворачиваю на width: 100%;
- Ну а лишние блоки, виджеты и групп и небоскреб в левой колонке скрываю через display: none !important;

Кажется, все. Только для ширины экрана в 350 добавляю переносы всех слов в любом месте (word-break: break-all и еще увеличиваю шрифт и межстрочный интервал

Если интересно посмотреть: http://dikij.com/
Или: http://atola.name/

С хрома можно смотреть прямо так (надо только обновлять страницу на нужном размере - чтобы реклама не мешала и подстраивалась).
P.S. Фаерфокс что-то тупит и не переносит таблицу на новую строку.
D.iK.iJ вне форума   Ответить с цитированием
Старый 02.02.2015, 21:55   #7
Эксперт
 
Аватар для MonAmur
 
Регистрация: 03.07.2007
Адрес: Chinatown
Сообщений: 7,265
Вес репутации: 608
MonAmur - прекрасное будущееMonAmur - прекрасное будущееMonAmur - прекрасное будущееMonAmur - прекрасное будущееMonAmur - прекрасное будущееMonAmur - прекрасное будущееMonAmur - прекрасное будущееMonAmur - прекрасное будущееMonAmur - прекрасное будущееMonAmur - прекрасное будущееMonAmur - прекрасное будущее
По умолчанию

Цитата:
Да мне плевать, как мой сайт видится в мобильных устройствах. Мне, что, остаток жизни потратить, выискивая и устраняя ошибки, чтобы потрафить этим козлам из Америки? Итак урезали выдачу и, соответственно, посещаемость - в поиске гугля всего 14% от общего (более 4200) количества проиндексированных им страниц сайта. Хрена с два я что сделаю! Кому интересно, тот всегда находит способ зайти на сайт, чтобы нормально видеть его. А то в "исправлении ошибок" еще написали, что на сайте шрифт слишком мелкий. Я, что, идиот, на каждой странице шрифт менять? Может, еще зад им поцеловать? Пусть мой целуют. Плевать на их санкции, русские не сдаются, даже когда погибают.
бгггг
MonAmur вне форума   Ответить с цитированием
Старый 02.02.2015, 21:58   #8
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,550
Вес репутации: 354
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
По умолчанию

Да меня за*кол****о, что сам с телефона тыкаю вечно не на те ссылки. Хоть дизайн и резиновый.
А раз стал копать адаптивную рекламу гугла, то и тут перепилил заодно.

Делов-то...
D.iK.iJ вне форума   Ответить с цитированием
Старый 14.03.2015, 19:58   #9
Специалист
 
Аватар для DVE
 
Регистрация: 21.12.2010
Сообщений: 109
Вес репутации: 167
DVE - очень-очень хороший человекDVE - очень-очень хороший человекDVE - очень-очень хороший человекDVE - очень-очень хороший человек
По умолчанию

D.iK.iJ, спасибо за проделанную работу и за подробный отчет!
DVE вне форума   Ответить с цитированием
Старый 14.03.2015, 22:03   #10
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,550
Вес репутации: 354
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
По умолчанию

Цитата:
Сообщение от DVE Посмотреть сообщение
D.iK.iJ, спасибо за проделанную работу и за подробный отчет!
Не помню, добавлял ли я в тему, но 100% рабочий вариант - как сделать чтобы таблицы смещались друг под друга без проблем в фаерфоксе, это обернуть их в див:
Цитата:
<div style="display: inline-block; min-width: 200px; width: 30%;" align="left">
Конечно, min-width: 200px; width: 30% - это просто для примера.

А один align="left" style="float: left;" примененный к таблице дает неплохие такие глюки. А примененные к 2 таблицам - еще более странное поведение
D.iK.iJ вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оптимизация сайта koctik Общие вопросы оптимизации 5 13.07.2013 15:23
SEO оптимизация сайта birja Общие вопросы оптимизации 2 13.04.2012 10:54
Задачка... 3 строчки на JS. Хелп! MonAmur Разработка и сопровождение сайтов 3 08.10.2009 14:50
Оптимизация сайта sunplant Общие вопросы оптимизации 9 25.11.2008 09:15
оптимизация сайта :( pha Яндекс 1 10.12.2007 15:54


Часовой пояс GMT +3, время: 10:38.