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

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

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

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

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

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

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

П. С. Заранее спасибо тем, кто захочет жестко покритиковать мои работы или дать советы мне на почту. Знакомых дизайнеров сайтов и интерфейсов нет и покритиковать особо некому.
  • Вопрос задан
  • 95873 просмотра
Решения вопроса 1
EugeneOZ
@EugeneOZ
Возьмите за стандарт цифры Twitter Bootstrap.
Ответ написан
Пригласить эксперта
Ответы на вопрос 7
Pasha4ur
@Pasha4ur Автор вопроса
Чтобы не искали, из 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. Неимоверно рад, что теперь на Хабре. Есть возможность спросить у профессионалов, которые реально занимаются подобным.
Ответ написан
Комментировать
@Step_M
На основе практики создания адаптивных сайтов, используем вот такой комплект ширин (для верстки с использованием брейкпоинтов):
320 или 480 — телефоны/смартфоны
800 — смартфоны/планшеты
1024 — ноутбуки/планшеты
1280 — десктопы/планшеты/ноутбуки
1600 — десктопы

А вообще, суть адаптивного сайта автоматически подстраиваться под любой размер экрана, и в идеале лучше вообще обойтись без переломных точек, а просто плавно подстраивать элементы сайта (размеры блоков, размеры шрифтов и т.д.) под размер экрана.
Ответ написан
Я пробовал использовать подобные сетки, в итоге пришел к тому, что под каждый сайт нужна своя сетка. Просто, медленно меняя разрешение (размер) браузера, сам определяю ключевые точки для изменения тех или иных элементов.
Ответ написан
Комментировать
@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.
Ответ написан
@Kukuiski
Полезная ссылка по теме:
design.google.com/resizer
Ответ написан
Комментировать
psychomonkey
@psychomonkey

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

Ответ написан
Комментировать
@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 не знают.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы