Концепция RWD - как правильно мыслить во время проектирования
Многое было написано и сказано по теме «Отзывчивый веб-дизайн», которая заключается в том, как создавать веб-сайты, которые доступны, хорошо отображаются и правильно поддерживаются на каждом устройстве при разных разрешениях экрана. В сети много информации о конкретных решениях, примерах, советах по дизайну, как менее, так и более технических.
В этой статье, основываясь на наблюдениях и доступной информации, я хотел приблизить идею RWD и сосредоточиться на интересном, нетехническом подходе к дизайну. Я не буду сосредотачиваться на конкретных решениях, а на том отношении, которое мы должны иметь, когда мы приближаемся к теме «адаптивного веб-дизайна».
Ниже, одним словом, список нескольких проблем, которые может решить адаптивный сайт:
- трудно предсказать типы устройств, которые будут использовать пользователи,
- нет жестких ограничений на разрешение экрана, которые следует учитывать при проектировании,
- отсутствие знаний о том, какое устройство, в какой ситуации и какую информацию будет искать пользователь (один пользователь = несколько устройств = несколько контекстов использования).
Здесь следует отметить, что RWD - это идея, концепция, метод проектирования. Первое слово «Отзывчивый» важно в определении. Давайте рассматривать это как создание проекта, чувствительного к его окружению (среда проекта в данном случае - это устройство, на котором он отображается).
Согласно концепции, которую я хочу представить, необходимо «забыть» об устройствах. И, конечно, они не должны быть самым важным аспектом, который следует учитывать при разработке.
Как я уже писал ранее, мы не знаем, какие устройства будут использоваться пользователем. И поскольку мы создаем проект, который адаптируется к устройству, на котором он отображается, он должен адаптироваться к каждому (насколько это возможно). Второе, что создаются новые устройства, поэтому тем более мы не можем предсказать. RWD должен относиться не к дизайну в соответствии с размером отдельных экранов, а к поддержке нескольких устройств.
Думая об этом таким образом, следует сосредоточиться на элементе отзывчивого дизайна, которые являются точками останова. Они определяют момент, в который изменяется интерфейс страницы, адаптируя ее внешний вид к текущему разрешению.
Один из самых важных вопросов проектирования - «где мне установить точку останова?».
С одной стороны, можно руководствоваться следующим принципом: мы разрабатываем веб-сайт, который хорошо «отображается» на разных устройствах пользователя, таких как смартфон, планшет, ноутбук и т. Д., С учетом ориентации экрана. Поэтому одним из вариантов является установка точек останова в соответствии с рисунком ниже.
источник: http://www.workbysimon.com/observatory/responsive-web-design-breakpoints-or-fluid/
Теперь нужно ответить на вопрос, правильный ли это подход? Таким образом, если мы рассмотрим соображения RWD в контексте правильной адаптации проекта к каждой среде, в которой он выполняется, ответ будет «нет». Если мы начинаем задумываться об устройствах или разрешениях, то это уже не адаптивный дизайн. Тогда мы не создаем проект, который будет адаптироваться к разрешению, но мы выбираем разрешение и адаптируем его к проекту - что «конфликтует» с идеей RWD. Кроме того, проблема «популярных устройств» относится к настоящему. Завтра другие устройства, другие разрешения могут быть популярны, и это все, что нужно, чтобы наш продукт адаптировался к каждому из них (будь то сегодня или завтра).
Одним из способов определения контрольных точек является подход, позволяющий определить, где проект требует этого. Когда наш проект не выглядит хорошо в текущем разрешении - там должна быть установлена точка останова, например, поле с текстом может быть сужено или расширено, но только до тех пор, пока содержимое, содержащееся в нем, не станет разборчивым. Если это перестает быть таковым, мы устанавливаем первую точку останова там.
При создании адаптивных веб-сайтов таким образом, мы должны думать о точках останова, чтобы проект подсказывал нам, где они должны быть, а не наоборот. Давайте начнем проектировать первую версию страницы, расширяя или сужая дизайн, обращая внимание на то, когда страница разрывается (от английского слова «break»). Затем вы можете переставить и изменить элементы, чтобы они выглядели лучше. В зависимости от проекта иногда бывает достаточно двух точек останова, а иногда и больше - работа и разработка продукта позволят вам решить.
При разработке макета сайта давайте будем основывать наш контент (заголовки, картинки, тексты) - они должны быть решающим фактором во всем макете. Часто, однако, мы встречаемся с проектами, где вначале был подготовлен весь макет (расположение изображений, текстов и т. Д.), А затем содержание соответствовало им. То же самое относится к точкам останова, которые были определены до начала процесса проектирования.
Таблицы являются хорошим поясняющим примером. Существует несколько методов создания адаптивных таблиц. Таким образом, способ, которым мы представляем таблицу в меньших разрешениях, должен быть адаптирован к данным, которые содержит эта таблица, а не наоборот. Ведь мы не ставим на страницу таблицы для себя. Таблицы созданы по некоторым причинам. Различные таблицы предоставляют другую информацию. Выбирая метод представления таблицы, мы должны ответить на вопрос, будут ли пользователи сравнивать и какие элементы (столбцы, строки) или какие данные в таблице необходимы и необходимы, чтобы отображать их в меньших разрешениях.
Например, я представляю следующую таблицу.
Цель этой таблицы - позволить сравнивать отдельные строки. Сужая окно браузера, две колонки скрыты, но благодаря сохранению макета таблицы пользователь все равно может сравнивать содержащиеся в нем элементы.
источник: http://www.authenticjobs.com/pricing/
Другое решение было использовано на сайте http://www.solidshops.com/pricing , В версии для более низкого разрешения не было скрыто ни одной строки или столбца, благодаря чему пользователь имеет возможность ознакомиться с полным доступным описанием продукта. Однако такое решение больше не позволяет легко сравнивать отдельные элементы, поскольку они были расположены в столбце, один под другим. Поэтому следует подумать о том, что будет более важным для мобильного пользователя: сравнение продуктов или доступ к полной информации (конечно, есть способы согласовать эти две потребности).
источник: http://www.solidshops.com/pricing
Благодаря этим двум примерам я хотел показать, что адаптивные таблицы можно создавать различными способами, и этот выбор может помочь или помешать достижению этой цели. Только когда мы уверены в месте назначения, для которого таблица создается вообще, мы можем выбрать подходящее решение.
Вы можете прочитать о конкретных решениях для адаптивных таблиц, в зависимости от ваших потребностей: http://blog.cloudfour.com/picking-responsive-tables-solution/
Другой пример, в котором мы должны следить за содержанием во время разработки, - это выбрать тип навигации. Один из самых простых способов - просто разместить список пунктов меню в самой верхней части страницы. Меню никоим образом не скрыто, оно видно все время.
источник: http://www.whitelotusaromatics.com/
Это, очевидно, решение, которое легко реализовать, но не обязательно хорошее, если мы хотим, чтобы пользователь быстро получил доступ к контенту, и чтобы в верхней части страницы отображался правильный контент. Если мы решим этот тип меню (например, разместив элементы рядом друг с другом), то мы должны решить, не хотим ли мы в будущем добавлять дополнительные элементы, которые просто не будут соответствовать нам по ширине.
Еще один элемент, который может повлиять на способ оформления - это картинки на сайте. Очевидно, что более низкое разрешение означает меньше места. Так что это тот момент, когда можно подумать о том, нужно ли показывать все картинки в меньших разрешениях, если это только дополнение к тексту.
В статье http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/ описывает феномен «Проблемы художественного руководства». Это относится к тому факту, что не каждое изображение можно масштабировать при более низких разрешениях. Это связано с тем, что некоторые изображения могут иметь такие маленькие элементы, что на небольших устройствах будут просто размыты. Поэтому лучшим решением является обрезка фотографии таким образом, чтобы, например, отображать ее фрагмент на смартфоне. Конечно, я понимаю, что фотографии на сайте часто меняются, и мы не всегда можем предсказать, какой будет картина. Однако в ситуации, когда мы их определили заранее, стоит подумать об этом в контексте небольших устройств.
Последний вопрос, который я буду обсуждать, это тексты на сайте. Обращаясь к примеру расширения или сужения текста до тех пор, пока он не станет читабельным, я сошлюсь на статью в журнале Smashing Magazine, в которой описан интересный подход к теме. В статье говорится о читабельности, которая зависит от количества символов в одной строке текста. Предполагая оптимальное количество символов в строке, для которого текст доступен для чтения (некоторые источники дают 45-75 символов), а затем расширяя экран, когда текст с количеством символов, превышающим максимальное, уже содержится, мы должны установить точку останова. Тем не менее, я призываю вас прочитать полный текст статьи, где весь подход был полностью описан http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/ ,
Все приведенные выше примеры предназначены для того, чтобы показать, что разработка адаптивного веб-сайта требует не только технических навыков, но и изучения адаптивного мышления. Это означает, что нам не следует настраивать элементы и содержимое в соответствии с заранее установленными разрешениями. Вместо этого, именно контент должен диктовать нам, как мы будем разрабатывать веб-сайт, и место, где должны быть точки останова.
Я не хочу полностью вычеркнуть и отвергнуть подход в этой статье, в котором мы обращаем внимание на конкретные резолюции. Я только хочу представить другой подход тем, кто в центре своих интересов ставит на первое место устройства, которые используются или будут использоваться целевыми пользователями интерактивного продукта, который они создают.
источники:
http://tangledindesign.com/deciding-what-responsive-breakpoints-to-use/
http://tympanus.net/codrops/2012/10/30/becoming-device-agnostic/
http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/
Похожие
Как правильно питаться # хаштаги?... воздержания, стоит подумать, как правильно его есть. Для этого нужен стол или телефон, где можно увидеть фотографии, сделанные людьми со всего мира, и столовые приборы - хэштеги. Именно благодаря им мы можем двигаться в зарослях иллюстраций. Если кто-то не знает, что делать со знаком «#», то самая простая аналогия с Twitter. Там также мы можем пробираться через полуразрушенные твиты, рассортированные по определенным темам. Тем не Как это делается: маринованные грибы
Сначала в банки кладут приложения и специи - вручную, как на обычной кухне .. Женщины на конвейере работают в резиновых перчатках. Измельченные морковь, лук, приправы насыпают мерной посудой - поочередно. Фото: Татьяна Донченко На современном производстве, которое соответствует европейским стандартам Как использовать часы в Minecraft
Это руководство Minecraft объясняет, как использовать часы со скриншотами и пошаговые инструкции. В Minecraft вы можете использовать часы, чтобы узнать, какое сейчас время дня, когда вы работаете под землей или в помещении. Давайте рассмотрим, как использовать часы. Требуемые материалы В Minecraft это материалы, необходимые для использования часов: СОВЕТ: Вам нужен только элемент кадра, если вы хотите поставить часы на стену / Как скачать фильмы с сайта YouTube - Скачать в формате 1080p и 4K
Добавлено: 4 года, 8 месяцев назад оценка: (1) (0) Популярный сайт YouTube постоянно меняется. Время от времени появляется новый вид сайта, но также меняются его функциональные возможности. В сегодняшней статье я представлю два способа загрузки фильма в высоком разрешении. Я приглашаю вас прочитать! Как сделать хороший фирменный портрет - практическое руководство
... время портретов компании. Если мы выберем естественный фон и освещение, мы можем помочь себе с фотографической смесью, которая умело отражает свет от окружающей среды на лице модели. Тем не менее, стоит иметь хотя бы один комплект освещения - софтбокс или лампочку со светорассеивающим зонтиком, который также отлично осветит темную сцену. Профессионалы часто имеют под рукой смеси, софтбоксы, стриптиз и косметические блюда, но это связано с большими инвестициями Как вывести фотографии в интернет
... во веб-сайтов блокируют включение таких больших файлов. Более сжатый JPG (более низкое качество, меньший файл) может и будет вписываться в ограничение портала, но это будет выглядеть ужасно. Перед загрузкой в сеть необходимо обязательно масштабировать картинку. Оригинальный размер, вероятно, составляет около 4-5 тысяч пикселей по длинной стороне. Разумный размер «интернета» составляет около 900 пикселей по длинной стороне - идея состоит в том, чтобы получить такую картинку целиком, Как установить последнюю версию браузера Opera 51 в Linux
Opera - это безопасный и быстрый интернет-браузер для основных платформ операционных систем, в том числе для основных дистрибутивов Linux. Он поставляется с предварительно собранными бинарными пакетами .rpm и .deb для дистрибутивов Linux на основе REHL и Debian. Последняя версия Opera 51.0 имеет мощный встроенный блокировщик рекламы, бесплатную функцию VPN, быстрый набор, функции синхронизации и экономию заряда аккумулятора. Зараженный телефон. Как защитить свой смартфон от вирусов?
Вредоносное ПО все чаще становится угрозой для смартфонов. По данным «Лаборатории Касперского», в третьем квартале 2015 года на мобильные устройства было установлено в 1,5 раза больше вредоносных пакетов, чем в предыдущем квартале *. Вот почему защита смартфонов или других портативных устройств не должна отличаться от защиты настольного компьютера. Что нужно сделать, чтобы не стать жертвой киберпреступников? Вопреки Как осветить гостиную | Опытные дизайнерские идеи и советы
Если бы было одно слово, чтобы описать работу дизайнера интерьера Сан-Франциско Николь Холлис Это была бы драма. Ее проекты подчеркивают негативное пространство, и она часто закрепляет это с помощью смелого, гламурного современного Как добавить или изменить подпись в Office 365 OWA
В этой статье я собираюсь показать вам, как создавать и редактировать подписи в почтовом клиенте Office 365. После входа в учетную запись Office 365 щелкните вкладку «Почта» в верхнем меню или на главной панели, чтобы включить Outlook Web App. Как наркотики попадают к вам через глубокую сеть
... возь окна без окон. Меня сопровождал человек, представившийся Патроном , или «головой» по-испански, нам потребовалось пять часов, чтобы добраться до места: извилистые дороги вдоль края скал, и, кроме того, были усеяны станциями жандармерии, которые мы все еще должны были остановить. с широкой улыбкой они дали Патрону руку. Мужчина засмеялся: «Каждый полицейский, следовательно, на побережье, получает от меня лапу». Путешествие стало причиной укачивания. Асфальтовая
Комментарии
Как обычно в таких случаях, истина лежит где-то посередине, так как же это на самом деле?Как обычно в таких случаях, истина лежит где-то посередине, так как же это на самом деле? Реклама в Google регулируется собственными законами. Прежде всего, это взимается за стоимость одной диверсии. Это означает, что чем больше бюджет, тем больше людей будет посещать наш сайт. Если мы сократим бюджет вдвое, шанс сохранить текущее количество перенаправлений будет незначительным. Вот как работает реклама Google, и это элемент, с которым нам определенно нужно смириться. Продукт за Хорошо, так как он узнает, чтобы начать слушать прямо перед тем, как я собираюсь сказать «Хорошо, Google?
Хорошо, так как он узнает, чтобы начать слушать прямо перед тем, как я собираюсь сказать «Хорошо, Google?») «Это не имеет большого значения». (Компания Stealth устанавливает аудиослушатель, который слушает каждую комнату в мире, которую он может, и передает аудиоданные на корабль, когда он встречает неизвестный, возможно, индивидуально подобранный список ключевых слов - и это не страшно !?) «Вы можете отказаться , Это в Условиях предоставления услуг ». (Нет. Просто нет. Это не то, что является малейшим Вы знаете, как ваш Mac получает невероятное время автономной работы и имеет удивительный трекпад?
Вы знаете, как ваш Mac получает невероятное время автономной работы и имеет удивительный трекпад? Они оба настолько хороши, потому что они оптимизированы для использования с OS X, которая идеально подходит для работы с очень специфическим набором оборудования и из-за этого сильно оптимизирована. Windows, разработанная для работы на большом количестве различного оборудования, далеко не так оптимизирована, и это видно. Скорее всего, вы потеряете несколько часов автономной работы под управлением Если вы находитесь в таком месте, как этот, вы иногда задаетесь вопросом, какова его история: с каких пор эта река течет, как поднимался этот песчаный холм?
Если вы находитесь в таком месте, как этот, вы иногда задаетесь вопросом, какова его история: с каких пор эта река течет, как поднимался этот песчаный холм? - Извините, у меня нет такой тенденции, но я знаю ответ на остальные ваши вопросы - ледник. - Согласен. Хотя, вероятно, было бы лучше сказать ледяной покров ... Жаль, однако, что у вас нет тенденции смотреть на вещи на расстоянии. Жаль ... К счастью, автор редко отдает предпочтение такой окраске своей лекции. Большая часть контента Как сделать так, чтобы фразы были равномерно размещены в тексте?
Как сделать так, чтобы фразы были равномерно размещены в тексте? Когда у меня есть готовый проект, я делаю дополнительное чтение текста, во время которого я отмечаю каждую ключевую фразу красным цветом. Благодаря этому я могу легко просматривать текст и видеть, где в нем размещены ключевые фразы. Если я вижу большие пропуски без ключевых фраз или когда они появляются слишком редко, я перечитываю текст еще раз и пытаюсь вставить в него нужную фразу. Наконец, я еще раз проверяю, что все ключевые Как отправить международную посылку DPD?
Как отправить международную посылку DPD? Большинство международных поставок DPD являются бизнес-пакетами. Перевозчик гарантирует не только надежное выполнение услуги, но, прежде всего, доставку заказа в кратчайшие сроки. Конечно, многое будет зависеть от выбора вида транспорта и дополнительных опций, а также от того, куда отправлять посылку с курьером DPD . И это может быть как конверт с документами, так и упаковка весом до 30 кг. Иностранные Как это сделать?
Как это сделать? Добавить фотографии в Instagram на компьютере с помощью веб-браузера Запустите веб-браузер (желательно Chrome, Opera или Firefox), а затем перейдите на сайт Instagram. Перейти на Instagram.com Войдите в свою учетную запись Instagram, используя свой логин и пароль или учетную запись Facebook. После входа в систему отобразится компьютерная версия Instagram. По умолчанию эта Так как вы меняете канал?
Так как вы меняете канал? Мы не будем делать это достаточно независимо. Но все, что вам нужно сделать, это позвонить в службу технической поддержки нашего оператора и сообщить о необходимости. Это не должно быть большой проблемой. Зачастую оператор делает это дистанционно - без посещения нашей квартиры. Передатчики WiFi сети - что это? Людям, которые немного лучше разбираются в технических новинках, также можно рекомендовать Как разработать концепцию фотографий, то есть должен ли корпоративный имидж быть скучным?
Как разработать концепцию фотографий, то есть должен ли корпоративный имидж быть скучным? Если кто-то пытается убедить вас в том, что каждая компания должна иметь портреты на сером или белом фоне в рубашках и костюмах, вы можете быть уверены, что не имеют представления о последних тенденциях. Это еще один случай, когда вы сами должны ответить на вопрос - как вы хотите, чтобы вас воспринимали ваши клиенты и подрядчики? Если ваша компания предлагает, например, Как подать заявку на участие в программе «Семья 500 плюс»?
Как подать заявку на участие в программе «Семья 500 плюс»? Как подать заявку на «Family 500 plus» через интернет-банкинг? Как подать заявку на «Родзина 500 плюс» в режиме онлайн по empatia.mrpips.gov.pl? Как подать заявку на «Родзина 500 плюс» в режиме онлайн по obywatel.gov.pl? Как подать заявку на участие в программе «Family 500 plus» от PUE ZUS? Как сделать мобильное приложение успешным и получать прибыль?
Как сделать мобильное приложение успешным и получать прибыль? Создание мобильного приложения и публикация его в магазине - это только начало. Тогда вы должны продвигать это. Многие опытные разработчики признают, что разработка приложений обычно занимает у них 30-40% времени. Более 60% времени занимаются вопросами маркетинга и бизнеса, связанными с планированием приложений. Как создать приложение, которое будет зарабатывать деньги? Приложение от А до Я Хорошая идея - это еще не
Один из самых важных вопросов проектирования - «где мне установить точку останова?
Как защитить свой смартфон от вирусов?
Что нужно сделать, чтобы не стать жертвой киберпреступников?
Как обычно в таких случаях, истина лежит где-то посередине, так как же это на самом деле?
Хорошо, так как он узнает, чтобы начать слушать прямо перед тем, как я собираюсь сказать «Хорошо, Google?
Вы знаете, как ваш Mac получает невероятное время автономной работы и имеет удивительный трекпад?
Если вы находитесь в таком месте, как этот, вы иногда задаетесь вопросом, какова его история: с каких пор эта река течет, как поднимался этот песчаный холм?
Как сделать так, чтобы фразы были равномерно размещены в тексте?
Как отправить международную посылку DPD?
Как это сделать?