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

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

Каков наилучший способ реализации такого сайта, когда дело доходит до структуры и компоновки?

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

Другая вещь, которая меня достает, - это то, как сделано масштабирование динамического изображения?

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

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

Ответ 1

1. Один веб-сайт всех браузеров.

Как сказал @Tak, ответы здесь - "Прогрессивное улучшение" и "Изящная деградация". Однако определения, которые он дал, не совсем правильные. Вот правильные:

' Прогрессивное улучшение' (см. ссылку) означает, что вы сначала кодируете старый браузер (IE6/7 с/без JavaScript является хорошей отправной точкой) с использованием проверенных технологий, таких как HTML4 и CSS1, а затем добавьте улучшения при прохождении через тестирование на более современные браузеры до Chome и Safari на мобильных устройствах, которые поддерживают CSS3 и большую часть HTML5, Таким образом, вы ставите целью обеспечить любой браузер с наилучшим сочетанием поддерживаемых в нем функций (его никогда не будет идеальным, так что не забывайте 80/20, чтобы избежать запуска проекта в землю).

' Изящная деградация' (см. ссылку) - это то же самое, но наоборот, ее более ленивый способ делать это. Вы начинаете создавать свой сайт против современного браузера, а затем применяете "исправления" и "исправления" до тех пор, пока он не станет приемлемым для старых браузеров. Это в конечном итоге создает намного больше работы, чем планирование с самого начала, и то, что обычно имеет тенденцию происходить с этим подходом, заключается в том, что разработчик/заинтересованная сторона в какой-то момент откажется (например, что, черт возьми, слишком много работает, чтобы получить это работая в IE6/7 - я просто сниму их)

2. Лучший способ стандартизации макета

Лично мое предложение состоит в том, что если вам нужен стандартный макет для мобильных и настольных устройств, я предлагаю вам использовать комбинацию БОЛЬШИХ шрифтов (чтобы они были видны на маленьком мобильном экране) и небольших (так что люди, у которых есть рабочий стол браузер может читать все детали) на ширине стола 900-1000 пикселей.

Этот сайт является примером:

http://www.valuetrader.net

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

ОБНОВЛЕНИЕ 2014

Эта часть вопроса теперь эффективно изменилась на "Каков наилучший способ реализации макета?".

В настоящий момент (и за последние несколько лет широко доступной поддержки CSS3) стандартным подходом к дизайну компоновки с несколькими устройствами является использование так называемого макета "Отзывчивый" на основе медиа-запросы. Существует много CSS-фреймворков, позволяющих пользователям запускаться с удобными для мобильных устройств макетами.

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

Стандартный способ протестировать "отзывчивость" сайта - это перетащить сторону окна вашего браузера, чтобы уменьшить доступную ширину.

Лучший способ - использовать инструменты разработчика, например Chrome имеет кнопку для переключения режима устройства, вот пример использования Stackoverflow:

Пример медиа-запроса для указания макета для элемента #site-banner на экранах рабочего стола и мобильного телефона будет выглядеть следующим образом:

/* DESKTOP SUPPORT */
#site-banner { width: 1000px; background: #fff; margin: 0px auto; height: 120px; }

/* TABLET SUPPORT - rules apply below 1000px width */
@media all and (max-width: 1000px) {
    #site-banner { width: 700px; }
}

/* PHABLET & MOBILE SUPPORT - rules apply below 700px width */
@media all and (max-width: 700px) {
    #site-banner { width: 480px; height: auto; }
}

/* MOBILE SUPPORT - rules apply below 480px width */
@media all and (max-width: 480px) {
    #site-banner { width: auto; height: auto;}
}

3. Как выполняется масштабирование динамического изображения?

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

Например, мой сайт www.desalasworks.com 'кодируется до 900px ширины, но он отлично работает, уменьшая масштаб на небольшом 320px экран (изображения на странице автоматически переэмпилированныеиспользуя различные методы, такие как выборка ближайших соседей и бикубическая интерполяция, а шрифты заменяются родными шрифтами, где это возможно). Что касается выборки изображений, если вы когда-либо зажимали фотографию на своем смартфоне, чтобы "увеличить масштаб" и "уменьшить масштаб", вы знаете, о чем я говорю.

Как правило, вам не нужно беспокоиться о CSS, чтобы ваши изображения были правильно настроены, я заметил, что иногда они немного забавны при использовании процентной ширины, поэтому придерживайтесь пикселов, если это так, чтобы браузеру проще было определить, где предметы относятся друг к другу. Обратите внимание, что вы МОЖЕТЕ конкретно определить мобильный браузер и установить ширину вашего сайта на 320 пикселей и все в нем, чтобы упасть в строке соответственно, но на самом деле это не обязательно, чтобы рабочий сайт на мобильном устройстве, и это заставит вас для поддержки 2 сайтов, мобильного сайта и рабочего стола (что некоторые компании с удовольствием делают).

4. Процент/фиксированная ширина.

Лично я склонен использовать фиксированную ширину, центрированную на экране (с использованием поля CSS: 0px auto), я не использовал процентную ширину для времени LONG, главным образом потому, что его немного кошмар для стандартизации макета. Если вы используете процентную ширину, вам в основном придется делать гораздо больше тестов, поэтому я бы склонен отклоняться от них.

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

Ответ 2

Вы правильно относитесь к процентам.

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

Существует несколько способов изменения разрешения изображений на основе размера экрана клиента, например отзывчивый-images.js. Я не думаю, что есть прекрасный ответ о том, как решить эту проблему.

Если вы действительно заинтересованы в отзывчивом дизайне, я настоятельно рекомендую Ethan Macotte Отзывчивый веб-дизайн.

Ответ 3

Два модных слова на данный момент - изящная деградация и прогрессивное улучшение, и я поклонник последнего. Изящное ухудшение означает, что вы скрываете и/или изменяете размер элементов на странице для просмотра на экране мобильного устройства. Прогрессивное улучшение означает, что вы кодируете мобильный браузер, а затем добавляете бит, если они используют что-то большее. Последнее лучше всего потому, что оно не позволяет мобильным браузерам загружать гигантские изображения, а куча включений никогда не будет использоваться, а мобильная пропускная способность - на высоте.

Я использую 320andup, что является отличным способом создания веб-страницы на 320 пикселей для мобильных браузеров, а затем других решений для планшетов, нетбуков, ПК и смехотворно большие дисплеи Mac. Веб-страницы отлично смотрятся на всех разрешениях.

Я никогда не использую проценты. Я создаю веб-страницу с фиксированной шириной 320 пикселей, фиксированной шириной 480 пикселей и т.д., Поэтому я точно знаю, как это будет выглядеть на каждом устройстве. Я делаю все масштабирование изображения на сервере с переменными в URL-адресе - сервер кэширует измененные изображения для последующей загрузки страниц. Таким образом, мои блестящие веб-2.0 логотипы крошечные для мобильных устройств, но большие на большом экране. Это еще одна причина не использовать проценты!