С какой шириной вы рисуете адаптивные сайты?

Question

[Павел]

Здравствуйте

Занимаюсь проектированием и дизайном сайтов. Пока новичок и берусь за простые проекты.

Прочитал книги «Сначала мобильные» и «Отзывчивый дизайн». Начал делать и адаптивный версии для своих работ. Возник вопрос о том, какую ширину выбирать для иллюстрации версий для планшетов и мобильных телефонов? Например, у меня телефон 480х856 и книга-планшет 800х600, но это не очень стандартные расширения.

Начал искать в Интернете, а там еще больше разнообразие: www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning

Лично я думаю остановится на таких значениях ширины:
— мобильные – 320
— планшет – 720
— ПК – 960-980 (в зависимости от статистики посещения и наполнения)

Они как раз хорошо подходят под стандартную сетку 960 пикселей.

П. С. Заранее спасибо тем, кто захочет жестко покритиковать мои работы или дать советы мне на почту. Знакомых дизайнеров сайтов и интерфейсов нет и покритиковать особо некому.

Comments

[Павел]

Спасибо всем за ответы.

Собственно отрисовал в 960, 720 и 480 пикселей макет дизайна сайта

Столкнулся с проблемой. Я для менее широких версий не перестраивал сетку, а просто обрезал холст. И в 720 столкнулся с проблемой, что получилось 8 колонок. На 3 не делится. Я то доделал уже в 8 колонок, чтобы аккуратно было, но понял, что в будущем лучше оставлять 12 колонок (или сколько в ПК-версии получилось) перестраивать сетку: уменьшать ширину колонок, а оступы оставлять примерно теми же

Правильно я мыслю?

Answer 1

[EugeneOZ]

Возьмите за стандарт цифры Twitter Bootstrap.

Comments

[Deleted Deleted]

Этот фреймворк - идеален для разметки!

[Владимир Дремучий]

А вот это сетка http://dribbble.com/shots/1064433-Bootstrap-responsive-grid-PSD-Mobile-Tablet-Web-Free

Answer 2

[Павел]

Чтобы не искали, из Twitter Bootstrap:

Large display 1200px and up
Default 980px and up
Portrait tablets 768px
Phones to tablets 767px
Phones 480px and below

Хотя я для планшетов остановлюсь все-таки на 720. Андроид-планшеты популярны с HD Ready 720p.

P.S. Неимоверно рад, что теперь на Хабре. Есть возможность спросить у профессионалов, которые реально занимаются подобным.

Answer 3

[Step_M]

На основе практики создания адаптивных сайтов, используем вот такой комплект ширин (для верстки с использованием брейкпоинтов):
320 или 480 — телефоны/смартфоны
800 — смартфоны/планшеты
1024 — ноутбуки/планшеты
1280 — десктопы/планшеты/ноутбуки
1600 — десктопы

А вообще, суть адаптивного сайта автоматически подстраиваться под любой размер экрана, и в идеале лучше вообще обойтись без переломных точек, а просто плавно подстраивать элементы сайта (размеры блоков, размеры шрифтов и т.д.) под размер экрана.

Comments

[Павел]

Я же рисую, а не верстаю. 10 вариантов дизайна нарисовать для разной ширины - это затратно по времени.

Остановился на 480, 720 и 960/1200

Answer 4

[Дмитрий]

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

Answer 5

[EugeneKaurov]

Design Targets:

Layout 1: iPhone (320/640px) in Portrait is a good candidate for the PSDs. Since this is often a fluid width layout, it can grow or shrink in width to fit other devices in this layout.

Layout 2: iPad (768/1536px) is a good choice for the PSDs here. This layout can scale to fit other devices with the same layout.

Layout 3: Desktop full width (960px) fixed-width with a background generally makes the most sense for PSDs.

if budget allows to create 4 layouts, then
Layout 4: Desktop HD full width (1350px) fixed-width with a background generally makes the most sense for PSDs.

Comments

[EugeneKaurov]

Итого, ширины:
320
768
960
1350 (опционально).

Все ширины центрированы, чтобы при просмотре на экранах бОльшего размера поля застилались цветом или фоном.
Для ширин до 960 есть смысл пробовать делать width=100% с указанными брейкпоинтами.
последнуюю ширину (960 или 1350) я делаю фиксированную центрированную -- чтобы на гигантских мониторах не плющило весь дизайн в сигарету.

Answer 6

[Kukuiski]

Полезная ссылка по теме:
design.google.com/resizer

Answer 7

[Кирилл]

а где 640*480? статистика http://avtodailynews.ru http://clip2net.com/s/6cpVEg

Answer 8

[SergeyKot]

Сетки? Баловство все это. На мобильниках это не "катит". Тут скорее всего проблема со стандартами под картинки. www.cotonti.mobi/page.php?al=model_style_css&pg=Se... а рисую один резиновый скин, который, как оказывается подходит под все разрешения. Для перехода под мобильный сайт использую специальный плагин, в котором есть стандарты разрешения экрана. Например, есть вариант 0, это когда весь экран мобильника заполняет картинка, а есть вариант 1 когда надо, чтобы над картинкой и под картинкой была одна строка управления (комментария, титла...) кроме того массу и других проблем, о которых отцы HTML5 не подумали, например, рыхлый сайт на компьютере и перегруженный на мобильнике. В общем путь сеток тупиковый, насаждаемый всякими сеошниками, типа адаптивный дизайн за вечер и миллион у вас в кармане. Берите специализированный движок.
Это проще и париться не придется.

Вот тест www.responsinator.com/?url=www.cotonti.mobi подвигайте слайдером, увидите, что ни о каких колонок не может быть речи. Итак все уже мелко. А картинки? Картинки надо готовить на сервере под каждый, практически стандартный размер. Тут проблем столько, что не на одну статью.

Теперь статистики по браузерам mobtop.ru/stat/browsers ну так вот эти браузеры из первой тройки, сетки, закруглений и прочих штучек от CSS3 не знают.

Comments

[Павел]

Сетки - это важный элемент.

например, рыхлый сайт на компьютере и перегруженный на мобильнике.

так может надо начать сетки использовать, чтобы такого не было? Пример: pasha4ur.org.ua/portfolio-2/117-web-studio

[SergeyKot]

Я взял и потестил ваш сайт. Итак результат: отчет (mobitest.akamai.com/m/results.cgi?testid=140115_TT_V5 )
1-я загрузка 21.13s 3382.99kb
2-я загрузка 14.23s 3366.84kb

мой. отчет mobitest.akamai.com/m/results.cgi?testid=140115_J0_V9
1-я загрузка 6.41s 772.29kb
2-я загрузка 3.12s 746.19kb

мой быстрей в 3.5 раза.
А если, я включу режим складываемых страниц, то уложусь в 1 сек.

Тесты проводились для iPhone. Мой загрузчик его опознал и загрузил специальный скин в "черном" разработанный для iPhone.

[Павел]

И как это относится к вопросу?

[SergeyKot]

Не овер
"П. С. Заранее спасибо тем, кто захочет жестко покритиковать мои работы или дать советы мне на почту. Знакомых дизайнеров сайтов и интерфейсов нет и покритиковать особо некому."
Я дал вам инструмент оценки качества работы. И провел тестирование. Вы же сами просили, не так ли?

[Павел]

Ну за свой сайт я и так знаю. Я не верстальщик и не программист. А грузится та страница долго, потому что там фулсайз картинки.

В мобильной версии моего сайта часть блоков не отображается. Отзывчивой версии у этого шаблона нет, а руки до изучения верстки никак не дойдут.

[SergeyKot]

Картинка в сетке, одна из самых больших проблем. В журнале smashingmagazine mobile.smashingmagazine.com/2013/05/29/the-state-o... несколько статей, в которых описываются разные методы исправления этой ситуации. Но все сводится к 2-3 стандартам ширины, для них делаются отдельные картинки. Хорошо, если это свой контент, но когда картинку будет загружать читатель?
Проблемой мобильного инета, я занимаюсь аж с 2007 года, когда он появился на моем телефоне. Естественно и этот путь я прошел, пока не подошел к специальному Ббкоду подробности тут www.cotonti.mobi/page.php?al=Bbcode_photo хотя :) яндексом она признана спамом. Но это понятно почему.