X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
> Адаптивный дизайн сайта на html, нужен совет
airman
airman
Topic Starter сообщение 23.3.2015, 15:48; Ответить: airman
Сообщение #1


Думаю все знают, что гугл сейчас фактически хочет обязать вебмастеров сделать адаптивный дизайн для своих сайтов. Что бы на мобилах сайты были удобными для чтения. В целом гугл конечно прав, и вот я задумался как можно адаптировать свой блог на html http://seob.info/ под адаптивный дизан. Или ваще запилить мобильную версию.
Кто шарит в вопросе, просьба высказываться не стесняясь))) Как сей вопрос можно решить, желательно минимальной кровью...


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
k0ttee
k0ttee
сообщение 23.3.2015, 17:24; Ответить: k0ttee
Сообщение #2


минимальной кровью

Дизайн изначально довольно простой, но статичные файлы все портят. Перепилить в шаблон + инклуд файла с контентом = не трудно. ;)
Звезды рейтинга перепиливать не придется - они подключатся одной строкой. Изначально оно было сделано "чтобы хоть к черту лысому подошло через один инклуд". Это в общем не повод откладывать кирпичи.

Разбить шаблон на "карточки", да строить их согласно ширине дисплея.
Навалом видях по адаптивной верстке, но - "не все они йогурты".

Вечером посмотрю более пристально и предложу свое решение. Пока сами прикиньте, как хотите видеть сайт на мобильном устройстве.


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
msd777
msd777
сообщение 23.3.2015, 17:28; Ответить: msd777
Сообщение #3


Я сам не спец в таких вопросах. Но сайт как понял на движке, не чистая же статика?
Зашёл на него со смартфона. В принципе читать можно, но надо увеличивать центральную колонку.
Адаптивный дизайн вряд ли поможет. Как мне кажется придётся убрать левый и правый сайтбар для этого.
Но на компе всё нормально. Думаю лучше запилить мобильную версию, отдельный шаблон, в который входит только центральная колонка с контентом.


--------------------
My Name is the brand! <!-- s:bomb: --><img src="{SMILIES_PATH}/bomb.gif" alt=":bomb:" title="bomb" /><!-- s:bomb: -->
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
airman
airman
Topic Starter сообщение 23.3.2015, 19:03; Ответить: airman
Сообщение #4


(k0ttee)
Вечером посмотрю более пристально и предложу свое решение

давай, жду :smile-thumb-up:


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
k0ttee
k0ttee
сообщение 24.3.2015, 3:54; Ответить: k0ttee
Сообщение #5


В шапку добавить тэг, чтоб на устройствах можно было читать без масштабирования (попробуйте на одной страничке).
&lt;meta name=&quot;viewport&quot; content-width=&quot;device-width, initial-scale=1.0&quot;&gt;

После этого браузеры мобилок покажут текст (и если повезет - все остальное) в адекватном экране масштабе. ;)

А дальше - велосипед по вкусу...
Можно медиазапросом в старых CSS менять свойства блоков. Это через:
@media screen

Можно подцеплять вообще другой CSS-файл по условию
&lt;style type=&quot;text/css&quot; media=&quot;only screen and (max-width: 720px) and (max-height: 1280px)&quot; href=&quot;mobile.css&quot;&gt;&lt;/style&gt;

Или &quot;карточками&quot; перепиливать.
[video]http://www.youtube.com/watch?v=Au6d1d-vFjU&amp;list=PLHyIl59J60-U4RAIDdgsICnm0lm6nbloL[/video]
Ну и ссылка на плейлист со всеми уроками (которых 6)
_http://www.youtube.com/watch?v=Au6d1d-vFjU&amp;list=PLHyIl59J60-U4RAIDdgsICnm0lm6nbloL

Добавлено спустя 13 минут 32 секунды:
Или просто насрать на все и прикрутить единственное условие
если (юзер_агент==мобайл){
    подключить другой пхп-файл, который покажет мобильную версию
    или редиректнуть на другой файл или изобрести велосипед в htaccess или еще как-то
    ну и не забыть в конце добавить exit; или die;
}

Так можно прикрутить все... Ну прямо &quot;тяп-ляп и в продакшэн&quot; :friends:
Прикрепленное изображение


Дальше уже вам решать что делать, вы ж совет спрашивали. :unsure:

Добавлено спустя 4 часа 33 минуты 15 секунд:
Недавно писал про будущее вебдизайна. Там в пример привел сайт авиакомпании.
Собственно у них в исходниках и CSS'ах можно почерпнуть &quot;как сделано&quot;.

Под разную ширь удобно кукожится.
Прикрепленное изображение

Прикрепленное изображение

Прикрепленное изображение


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
prolisk
prolisk
сообщение 24.3.2015, 11:33; Ответить: prolisk
Сообщение #6


Интересует как сделать сайт адаптивным на мобиле, но не по блокам или отдельным css, а чтобы мобильный браузер просто уменьшал весь сайт. То есть открывается как на ПК, только мелко-мелко, и нужно увеличивать пальцем.
Сам недавно начал интересоваться этим вопросом. Из решений:
1) делается моб.версия сайта. (m.seob.info)
2) делается отдельный css-файл.
3) пилится файл стилей под адаптивный дизайн. Прикол в том, что хорошее свойство name=&quot;viewport&quot; как то по-разному все равно реагирует (на разных сайтах, браузерах, ПК)...


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
k0ttee
k0ttee
сообщение 24.3.2015, 19:50; Ответить: k0ttee
Сообщение #7


Хватит это терперь! :spiteful:
Вот короче набросок. Если не считать фоны &amp; рекламы &amp; сайдбар до контента, то это можно назвать малой кровью.
Тестирование будем проводить вообще без крови. ;) Через плагин можно (не испортив сайт) наблюдать результаты.

1.) ставим плагин stylish в firefox
2.) открываем seob.info
3.) создаем новый стиль в плагине &quot;для всего сайта seob.info&quot;
4.) вставляем в редактрое один из двух вариантов кода:
а.) в пикселях
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(&quot;seob.info&quot;) {
  @media screen and (max-width:1200px){
   body{width:640px;margin:0;}
   #cont{width:640px}
   #webeffector{clear:left;width:640px}
   #head{width:640px}
   #left{clear:left}
   #main{clear:left;width:640px}
   #right{clear:left;float:left}
   #footer{width:640px}
  }
}

б.) в процентах (так оно будет вместо с окном кукожиться)
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(&quot;seob.info&quot;) {
  @media screen and (max-width:1200px){
   body{width:90%;margin:0;}
   #cont{width:90%}
   #webeffector{clear:left;width:90%}
   #head{width:90%}
   #left{clear:left}
   #main{clear:left;width:90%}
   #right{clear:left;float:left}
   #footer{width:90%}
  }
}


5.) сохраняем стиль
6.) уменьшаем ширину окна до &quot;1200 или меньше&quot;
7.) смотрим, прокручиваем
8.) начинаем радоваться, что у нас получается

Для особо ленивых даю скриншот получившейся колбасы. :friends:
Прокручивайте шура, она золотая...

Добавлено спустя 4 минуты 22 секунды:
Прикрепленное изображение


Это набросок, который страшноват, но он уже делает что было нужно. :beach:

открывается как на ПК, только мелко-мелко, и нужно увеличивать пальцем.

Не делать ничего... Сарказм!
Разве не так обычные веб-сайты открываются на мобильниках? :blink:
хорошее свойство name=&quot;viewport&quot;

Во-во! :smile-thumb-up: Пусть браузеры до ума допилят, дадут нам ровные стандарты, а потом с веб-разработчиков спрашивают. А то взяли и сказали: битесь с этим сами, а то писсимизируем.

Добавлено спустя 49 минут 15 секунд:
Можно конечно все растянуть в 100% по ширине, но от фоновых картинок придется отказаться: масштабировать их больно геморно. В общем, вот к чему я пришел.
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(&quot;seob.info&quot;) {
  @media screen and (max-width:1200px){
   body{width:100%}
   #cont{width:100%}
   #head{width:100%;background-size:contain}
   #left{clear:left;width:100%;background-size:contain;margin:0}
   #title{width:100%;background:none}
   #left_bottom{width:100%;background:none}
   #main{clear:left;width:100%;margin:0}
   #right{clear:left;float:left;width:100%;background-size:contain;margin:0}
   #title2{width:100%;background:none}
   #right_bottom{width:100%;background:none}
   #footer{width:100%;background:#D2D2D2}
  }
}

Крупные узлы вроде переставил коррекнтно, а дизайн это уже ваш выбор.


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
prolisk
prolisk
сообщение 24.3.2015, 20:34; Ответить: prolisk
Сообщение #8


(k0ttee)
Разве не так обычные веб-сайты открываются на мобильниках?

Да должны так. Но вот некоторые мои на ВП (шаблоны типа под мобилки) и некоторые другие сайты начинают &quot;резать&quot; блоки, особенно если ширина в пикселях.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
k0ttee
k0ttee
сообщение 24.3.2015, 22:00; Ответить: k0ttee
Сообщение #9


&quot;резать&quot; блоки

Попробуйте заменить в стилях width на max-width
Если у вас блокам заданы четкие ширины в пикселях, такое прорезиненное решение должно помочь.
У меня все хорошо резинится и переносится на новый вертикальный ряд (только с float:right проблемы испытываю).

Показываю - когда влезло по ширине и когда не влезло. В живую показать не могу, оно на локалке пока не допилил.
Прикрепленное изображение

Прикрепленное изображение


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
airman
airman
Topic Starter сообщение 25.3.2015, 13:20; Ответить: airman
Сообщение #10


(k0ttee)
Прокручивайте шура, она золотая...

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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Вёрстка HTML-писем
30 Vampler 28838 Вчера, 12:41
автор: Vampler
Горячая тема (нет новых ответов) Продвижение молодого сайта
30 maxmer 6363 26.3.2024, 21:49
автор: c4p1t4l15t
Открытая тема (нет новых ответов) SEO-текст на главной странице сайта и в категориях
5 boltuk 1352 26.3.2024, 21:43
автор: c4p1t4l15t
Горячая тема (нет новых ответов) Делаю полностью уникальный дизайн для сайтов!
46 AlexDIZ 93453 26.3.2024, 20:03
автор: AlexDIZ
Открытая тема (нет новых ответов) Какой % отказов нормален для сайта?
10 Aloof 2542 24.3.2024, 21:45
автор: Liudmila


 



RSS Текстовая версия Сейчас: 28.3.2024, 19:32
Дизайн