Вопрос для опытных вебмастеров-оптимизаторов по адаптивному дизайну

Автор krestsoft, 12-09-2016, 08:06:29

« назад - далее »

krestsoftTopic starter

Собрался адаптировать дизайн для ИМ под мобилки...

Подскажите, можно ли избавляться от кучи текста в адаптивном дизайне под мобилки? Не повлияет ли это на ранжирование в мобильных ПС?

И вдогонку вопрос: под какие разрешения нужно обязательно адаптировать дизайн?

Прочитал следующую статью:
[spoiler]
При рисовании любого дизайна встает техническая задача — уместить элементы сайта в указанную ширину. Уместить в заданную ширину тяжелее, чем растянуть до заданной ширины. Растянуть легко на этапе верстки. Поэтому нужно ориентироваться на минимальную ширину в классе.

1. Мобильные телефоны — 320px. Ориентируемся на viewport айфона, т.к. он самый маленький. У современных андроидов вьюпорт больше, поэтому их игнорируем (растянется на верстке).

2. Планшеты — 768px. Опять-таки ориентируемся на айпад в портретной ориентации , т.к. у андроид планшетов вьюпорты обычно имеют размер от 800×1200 или совпадают с айпадом. Планшеты с вьюпортом 600×1024px устарели. К тому же ничего страшного, если в вертикальной ориентации сайт на таком планшете будет выглядеть как на мобильнике, а в горизонтальной ориентации — как на десктопе.

3. Десктоп и планшеты в ландшафтной ориентации — 1000px. Почему 1000, а не 1024: первое, в настольных браузерах полоса прокрутки съедает (обычно) 18px ширины; второе, от 1000px верстальщику удобнее расчитывать размеры в процентах, а до 1024 все равно растянется при верстке.

В принципе, этого достаточно, чтобы верстальщик справился.

Если дизайн не имеет максимальной ширины и тянется от края до края окна браузера, то на усмотрение дизайнера можно нарисовать еще один или несколько эскизов для более широких экранов.

В каком порядке рисовать? Смотря как поставлено тех.задание. Чаще всего в задании описан полный функционал для настольной версии. Тогда проще нарисовать дизайн под 1000px и перекомпоновать под 768 и 320, выбросив или упростив по пути менее значимые элементы сайта. Т.е. двигаться от сложного к простому.

Верстать при этом удобнее от меньшего экрана к большему (от простого к сложному). При mobile first верстальщику приходится дописывать новые стили для бóльших экранов поверх базовой версии в 320px вместо того, чтобы обнулять написанные для настольных браузеров стили. В результате для мобильника css весит меньше и парсится быстрее.
[/spoiler]

Из неё вынес, что в основном нужно адаптировать под смартфоны: 320px и планшеты: 768px


krock

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


krestsoftTopic starter

Цитата: krock от 12-09-2016, 12:51:29
Глянь в своей метрике с каких экранов заходят больше всего, под такие и адаптируй. На счет скрытия текста не знаю, но на моих сайтах практических везде при узком экране скрыт сайдбар - все нормально.

Там все разрешения есть... Причём нет особых лидеров. Только поэтому и спрашиваю.

Sorokin Vladimir

Мой девиз:    Делу время, потехе – час!
Натяжка HTML шаблонов на MODX Rev, Joomla 3, GetSimpleCMS, MyEngineCMS,  Kandidat CMS.
  •  

krestsoftTopic starter

Цитата: Sorokin Vladimir от 21-09-2016, 07:26:23
у меня начинается с 240рх, хуже не будет!

Я пока слабо представляю как в 360 всё запихать, а Вы про 240 пишете  ;D


Sorokin Vladimir

Цитата: krestsoft от 21-09-2016, 12:01:38Я пока слабо представляю как в 360 всё запихать, а Вы про 240 пишете
апетит приходит во время еды......
начнете ковырять - разберетесь!

Мой девиз:    Делу время, потехе – час!
Натяжка HTML шаблонов на MODX Rev, Joomla 3, GetSimpleCMS, MyEngineCMS,  Kandidat CMS.
  •  

Sorokin Vladimir

Цитата: krestsoft от 21-09-2016, 12:01:38
Я пока слабо представляю как в 360 всё запихать, а Вы про 240 пишете  ;D
кстати, если интересно, у меня есть хороший мануал по верстке под мобильные устройства
Мой девиз:    Делу время, потехе – час!
Натяжка HTML шаблонов на MODX Rev, Joomla 3, GetSimpleCMS, MyEngineCMS,  Kandidat CMS.
  •  

krestsoftTopic starter

Цитата: Sorokin Vladimir от 22-09-2016, 20:58:04кстати, если интересно, у меня есть хороший мануал по верстке под мобильные устройства

Очень поможете )


Sorokin Vladimir

Мой девиз:    Делу время, потехе – час!
Натяжка HTML шаблонов на MODX Rev, Joomla 3, GetSimpleCMS, MyEngineCMS,  Kandidat CMS.
  •