Каковы наилучшие методы для удобства использования веб-сайта на всех устройствах и размерах экрана?

Confused относительно лучшей методологии, чтобы сделать сайт удобным и последовательным во всех устройствах - настольные компьютеры, нетбуки или Ipads и мобильные телефоны (в основном смартфоны).

Я не разработчик или дизайнер Front End, поэтому я не уверен, что лучше всего там.

Я читал о Liquid Layouts, сохраняя две разные версии таблиц стилей (1 для экрана и 1 для ручных устройств) и CSS Media Queries.

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

Пожалуйста, помогите.

5 ответов

Из того, что я собрал (сам это изучал), это действительно комбинация всего. Жидкостные макеты отлично подходят для разных размеров монитора, в то время как мультимедийные запросы помогают ориентироваться на мобильные и планшетные устройства. Я искал 978 Grid System, чтобы отформатировать несколько веб-сайтов, над которыми я работаю. У него есть сетки для нескольких устройств, но часть меня думает, что это может быть слишком громоздким для того, что я хочу делать.


То, что вы ищете, называется Отзывчивый веб-дизайн.

Жидкостные решетки, гибкие изображения и медиа-запросы являются тремя техническими ингредиенты для отзывчивого веб-дизайна, но это также требует другого способа мышления. Вместо карантина наш контент в разрозненный, опыт, специфичный для устройства, мы можем последовательно использовать медиа-запросы улучшить нашу работу в просмотр контекстов. То, что не сказать нет бизнес-кейса для отдельные сайты, ориентированные на конкретные устройства; например, если пользователь целей для вашего мобильного сайта больше ограниченный по объему, чем рабочий стол эквивалент, затем обслуживающий разные контент для каждого может быть лучшим Подход.

Но такое дизайнерское мышление не обязательно должен быть нашим дефолтом. Теперь более чем когда-либо, разрабатывали работу предназначенный для просмотра вдоль градиента разные переживания. Отзывчивая сеть дизайн предлагает нам путь вперед, наконец, позволив нам "разработать для отлив и поток вещей.

Существует хорошее бесплатное вступительное видео на Think Vitaimin.

Отзывчивый веб-дизайн: Основы: Введение

Следите, пока около 3/4 пути, где они начинают демонстрировать, о чем они говорят.


Как я уже сказал в комментарии, я думаю, вы должны держать все как можно проще и соответствовать хорошим стандартам, как HTML и CSS.

Позвольте браузеру/пользователю выбрать наилучший способ использования вашего сайта.

Также имейте в виду изящная деградация/прогессиональное улучшение и логическую структуру, которая поддерживает страницы.


Даже среди планшетных устройств разница в размере экрана и разрешении экрана может потребовать разных размеров шрифтов и межстрочного интервала, для четкости шрифта и точной осязаемости ссылок. Страницы, отображающие на 10 "iPad разборчиво, могут быть трудными для чтения и неуклюжими для использования на 7-дюймовом планшете. 7-дюймовый планшет может заставить вас почувствовать, что у вас были пальцы, такие как Шрек. Это произошло недавно, когда я использовал 7-дюймовый планшет, чтобы посмотреть на сайт, который я модифицировал, чтобы хорошо работать на iPad. Слишком маленькое, чтобы читать на 7-дюймовом планшете, и вы не всегда хотите, чтобы ваши 7-дюймовые планшетные пользователи были масштабируемы, чтобы они могли читать вашу страницу и взаимодействовать с ней. Вы должны определить размер целевого экрана и использовать соответствующий стиль CSS для этого форм-фактора, и вам также может потребоваться уменьшить количество контента и/или предоставить альтернативный режим навигации для меньших и наименьших форм-факторов. Может потребоваться динамически обслуживаемый контент, зависящий от формфактора, или очень гранулированный контроль видимости контента с помощью CSS.

Я бы начал со страниц, которые имеют "воздушный" вид - избегая страниц, которые имеют слишком много контента и слишком "заняты".


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

licensed under cc by-sa 3.0 with attribution.