Возрастающая важность использования резиновых макетов
За последние несколько лет создание дизайнов с фиксированной шириной стало самым обычным делом. Это не удивительно, т.к. фиксированные размеры, которые сейчас используются, удовлетворяют большую часть пользователей. Однако, совсем недавно разработчики ощутили некоторое недовольство своих пользователей (владельцев мобильных телефонов, таких устройств как iPad и др.). На сегодняшний день дизайны с фиксированной шириной всё больше и больше устаревают.
Мобильный веб дизайн начал развиваться семимильными шагами и в последние несколько лет для его поддержки использовались специальные таблицы стилей для маленьких устройств, которые обслуживали лишь малую часть рынка, и были рассчитаны на фиксированный размер. Помимо этого, гибкий веб дизайн был настоящей редкостью и применялся от случая к случаю. В идеале гибкий веб дизайн должен быть полностью пропорционален (для небольших и крупных расширений).
Все преимущества гибких макетов видны невооружённым глазом. То же самое можно сказать и о сайтах с фиксированной шириной: их легче и быстрее создавать, вносить всевозможные изменения, и вы можете быть уверены, что они всегда и везде будут выглядеть одинаковым образом. Другими словами, фиксированная ширина макета может быть гораздо более удобней, чем его гибкие альтернативы, конечно если гибкая планировка неправильно реализовывается. В этой статье мы обсудим основные плюсы и минусы каждого типа макетов, и ответим на вопрос, почему гибкие макеты, несмотря на очевидные недостатки, будут наиболее используемыми в ближайшие несколько лет.
Какие устройства популярны сегодня, но не завтра
2010 год был признан очень благоприятным для устройства iPad, и после того, как они были распространены по всему миру, возникла большая необходимость в различного рода приложениях, которые будут предоставлять их владельцам различного рода удобства и услуги. Конечно же появилось огромное число разработчиков, которые создали специальные версии сайтов для iPad, в добавок к мобильной версии, варианта для нетбуков и т.д.. iPad стал очень популярным благодаря тому, что предоставляет огромные возможности, поэтому и началась вся эта заварушка.
Ещё одной платформой, которая стремительно завоёвывала популярность, стала система Android, и целый набор различных устройств, которые функционируют на данной платформе. В то время как вышел iPhone, в 2010 году ещё одно устройство стало очень популярным - смартфон. В отличии от предыдущих годов, огромное количество мобильных устройств нуждалось в особенном внимании, для того чтобы на них всё отображалось как нужно. В результате всего этого, в интернете появилось огромное количество уроков разработки дизайнов для смартфонов и других мобильных устройств.
На этом всё только началось, т.к. в 2011 году вышла очередная серия устройств, которая уже завоевала свою популярность среди потребителей. Нужно ли мне перечислять все брэнды? Как вы думаете, практично ли создавать под каждое устройство свою таблицу стилей? Это же можно сойти с ума – никакие нервы такого не выдержат.
Самым лучшим решением данной задачи, является пересмотр своих привычек и способов создания дизайна. Мы можем воспользоваться гибким дизайном или специальными правилами для наиболее часто используемых устройств и размеров экрана, которые будут популярны в течение следующих нескольких лет, но мы также должны заглядывать в будущее, не так ли?
Стандартные компьютеры & Размеры ноутбуков
Пять лет назад большинство пользователей сети использовали стандартное расширение, которое и вам хорошо знакомо - 1024x768. На период Января 2010, расширением 800x600 пользуется как минимум 1% пользователей, а новые расширения всё продолжают выходить. Теперь только 20% использует расширение 1024x768, а 76% все остальные.
Теперь, для большинства пользователей, многие сайты с фиксированной шириной, которые часто составляет 960px или даже некой другой на более больших мониторах смотрятся не очень привлекательными и сбалансированными. Это ведь не дело. Тут нужны меры.
Различные промежутки, справа, слева, снизу, сверху, могут привести к нарушению баланса, непропорциональности и, в конце концов, заставляют пользователя читать всё в сжатом виде, в то время как его техника может предоставить ему большие возможности, не так ли? Благодаря подходу с гибким дизайном мы можем занять как можно большее рабочее пространство, соблюсти балансировку, пропорции и т.д.
Ещё один момент, который нельзя не отметить, - это популярность мини ноутбуков – нетбуков, для которых характерны свои стандарты, отличающиеся от других устройств.
Многие нетбуки, как правило, стремятся использовать разрешение экрана, в основном 800x480 (один из самых маленьких) до 1280x800 (один из крупнейших). Многие резиновые дизайны без особых сложностей отображаются на данных расширениях, и почти оптимальным для таких рода размеров экранов. Однако, есть много нетбуков, которые используют ещё меньшие расширения, и в противном случае (если у вашего сайта фиксированный размер), вся информация будет выглядеть слегка сплющенной. Популярность таких устройств растёт, и это нужно учитывать.
Гибкие сайты могут (и должны) справиться с этой непростой задачей без нанесения ущерба другим устройствам, которые также популярны в мире.
Всё меньше пользователей используют максимальные размеры
После того, как я купил новый ноутбук с Windows 7, я сразу же стал ярым фанатом функции snap. Благодаря данной фиче, я могу расположить несколько окон одно за другим, тем самым обеспечить себе более удобную работу.
Однако, вскоре я понял, что множество сайтов, которые построены на фиксированных размерах просто превращаются в кашу! С каждым днём все меньше пользователей не используют максимальные размеры своего экрана, из-за каких-то новых функций. Это тоже нужно учитывать, т.к. если я не могу нормально пользоваться сайтом, то через некоторое время он будет меня раздражать и бесить.
Тем пользователям, которые столкнулись с такой же проблемой, как и я, приходится активно пользоваться областью прокрутки для того, чтобы добраться до нужного места. Это неправильно – так не должно быть!
Небольшие устройства, как правило, содержат сенсорные экраны
Если мы можем создать гибкий дизайн, который будет как можно меньше использовать область прокрутки, то это очень хороший старт. Однако, это только часть решения. Чем меньше само устройство, тем больше вероятность того, что оно оснащено сенсорным экраном. Поэтому нужно создавать такие дизайны, которые будут «приятны на ощупь» и удобны для навигации.
Вывод
Веб, по сути всегда является нам чем-то новым, потому как постоянно идёт процесс его развития. Все это будет только продолжаться ещё много лет. Только за последнее десятилетие мы были свидетелями взрыва развития устройств, размеров экрана и очень важно понимать, что если мы хотим крутиться среди всего этого, нужно идти в ногу со временем.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.
Перевел: Станислав Протасевич
Урок создан: 30 Апреля 2011
Просмотров: 11210
Правила перепечатки
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/fmllrzkHfv0/lessons.php


Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
Одного яйца два раза не высидишь. К. Прутков |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp