Как сделать сайт responsywną? Разве это трудно?
Такой вопрос прокручивает в практике, когда стороны responsywne появились в интернете.
Приспосабливаются они к ширине экрана, и они выглядят хорошо на любом устройстве – от небольшого телефона, через планшет и компьютер, вплоть до телевизора.
Никакого увеличения, растяжения или wlepiania нос в экран, потому что буквы слишком мелкие.
Однако появление страниц responsywnych вызвало также изменение стандартов в создании веб-страниц.
И о таких изменениях стандартов и передовой практики, вы узнаете из статьи.
(В качестве дополнения – из этого текста вы узнаете, что такое responsywne сайты)
Начните с малого экрана
Это золотое правило создания страницы responsywnej. Независимо от того, создаете ли вы портал или простую страницу компании – стоит начать ее строить версии на телефон.
Да, я знаю, это ставит некоторые вещи в голове, но я поясню почему.
Прежде всего – большинство интернет-трафика генерируют мобильные устройства (телефоны и планшеты). Это более 52% трафика, и с этим надо считаться. Когда-то доминировали в сети компьютеры и делалось стороны, в основном на не. Сегодня преобладают мобильные устройства, так что стоит держать аналогичный подход.
Если вы начинаете создавать страницу от малого экрана, то быстро поймете, что версия на телефоны не имеет ограничений. Не нужно ничего upychać, просто складываешь их элементы, а на остальных режимах – труп их немного по-другому, вы увеличиваете и, в сущности, у вас есть больше места :).
Такой подход помогает оценить значение контент на стороне, и заставляет тщательно продумывать системы и широко понимаемого user experience. Хотя это звучит требовательно, но это такие не это. В дальнейших пунктах объясняю, почему.
Установите приоритеты
Приоритеты, это звучит зловеще. Но вовсе не обязательно.
Когда вы делаете страницу responsywną, это вещь, которая обеспечит более половины работы является определение приоритетов на сайте. Что является наиболее важным. Что меньше. Что может вылететь (?), а что, лучше, чтобы было.
Маленький экран требует этого. Не napchasz на нем задней панели элементов, что на странице настольного и... хорошо. Потому что такая сторона не имеет смысла.
Когда вы начинаете с ни малейшего представления стороны, и планируете расположение элементов на ней, то сразу же заметите, что последующие элементы должны укладывать в какую-нибудь конструктивное целое. Одно должно вытекать из другого, каждый элемент должен иметь свою цель или помочь реализовать цель страницы.
Кроме того, основные элементы должны быть в верхней части страницы. Это их вы должны видеть в первую очередь.
Если подумаешь немного глубже, то так и должно выглядеть создание сайтов. Всегда, независимо от устройства. Просто версии responsywne требуют соблюдения этих правил. Благодаря этому многие сайты сегодня небо przejrzystszych, чем еще несколько лет назад.
Перейти в минимализм
Определяя приоритеты стоит помнить об одном: минимализм, на сайте не является вымыслом или только тенденцией. Меньше элементов в самом узком представлении сайта означает одно: остаются только самые важные.
Сменяют друг друга, дополняют контент и правда – работают.
Однако пусть Тебя не смущает то, что на этом сайте мало элементов – это вовсе не такие поиски легких путей. Меньше в этой ситуации, тем больше. И часто требует больше внимания. Однако это (действительно) окупятся.
Потому что, когда вы переходите к укладке материалами на других видах responsywnych, то получается, что достаточно немного расширить, увеличить шрифт, немного изменить расположение и вид готов.
Как я уже упоминал, – когда вы начнете дизайн страницы от najwęższego экране мобильного устройства, каждый последующий (более широкий) будет производил впечатление просторной.
Крупные объекты
Так, крупные объекты.
Я уверен, ты знаешь, что дисплей смартфона имеет ограниченную площадь и ширина. К этому трудно на него попасть пальцем точно в какой-то объект. Для компьютерного курсора, это не беда; хуже с довольно большой поверхностью большого пальца.
Так что объекты на странице, которые должны быть интерактивными, они должны быть достаточно большими, чтобы пользователь мог легко попасть, и – здесь Вас удивит – нажать на кнопку. Да.
Однако кнопки не являются единственными вещами, которые должны быть достаточно большими, на веб-сайте.
Хорошая типография, то есть, размер шрифта имеет значение
Хорошо подобранные шрифты и сохранение хорошей структуры заголовков слова для удобства чтения текста на странице. Особенно responsywnej.
Основанием хороший сайт, хорошее содержание, а за нее отвечает, чаще всего, текст. Так что стоит доработать его внешний вид, чтобы пользователи могли легко прочитать то, что у вас есть на странице.
Это касается практически каждого элемента, который является текстом на странице – начиная с информации в заголовке, через короткие bullety, до и после текста новости. Каждый человек должен быть легок в чтении.
Поможет в этом, безусловно, хорошая типографика, то есть хорошо подобранные шрифты. В интернете лучше всего читает текст, „написанный” шрифтом bezszeryfowym, то есть без „kreseczek”. Times New Roman является szeryfowy, Лето, которое ты сейчас читаешь, – sans serif.
Кроме того, важен размер текста. И, наверное, хорошо, догадались – он должен быть большой. 20 пикселей в высоту для обычного текста это абсолютный минимум. Такой текст читается на мобильных устройствах и действительно, не стоит давать меньше шрифта.
К этому добавляются также заголовки. Должны быть, соответственно, больше, чтобы пользователи знали, что является, а что не является заголовком (можно сказать, что идеальная пропорция между высотой заголовков и текста 1,6).
Кроме того, заголовки хороши для пользователей и позиционирования веб-сайта.
20 пикселей в высоту для обычного текста это абсолютный минимум. Такой текст читается на мобильных устройствах и действительно, не стоит давать меньше шрифта.
Согласованность между версиями
Недавно многие владельцы (на практике – почти все) получили приятное сообщение от Google Search Console, что он вступает в силу Mobile First Indexing. То есть, что за основу индексации страницы принимается версия, адаптированная для мобильных устройств.
В письме было также упоминание о том, что контент на разных версиях сайта, согласуются или нет. И это очень важная вещь.
Еще некоторое время назад многие сайты имели стандартную версию на компьютер, со стандартным адресу) и мобильная, с „m.” перед адресом. Это часто были две отдельные страницы, которые иногда давало обновлять одновременно, однако не всегда. В случае страниц responsywnych это не проблема.
Что не меняет того факта, что поведение согласованности между версиями сайта responsywnej очень важно. Не зря я писал о том, что, когда вы начинаете делать сайт с точки зрения мобильных устройств, то потом еще версии будут проще в освоении.
Когда вы выбираете ключевые элементы и поместить их на самую узкую версию страницы, затем лучше отрегулировать размер, а не добавлять что-то новое.
Да, конечно, – между версиями могут быть расхождения (хотя бы меню – мобильные или „обычные”) или появиться какие-то дополнительные объекты на странице desktop (анимации, больше изображений в галерее или что-то), но основные вещи, такие как содержание, должны быть согласованы.
Есть также различные способы „развитие” содержание сайта, начиная от телефонов и компьютеров, однако, это отдельная и довольно обширная тема, поэтому если Вас интересует эта тема, то Luke Wroblewski, Product Director в Google, очень хорошо объясняет эту тему в своем блоге.
Responsywne графика на сайте и не только
То есть векторная графика. Формат SVG становится все больше и больше появляется на веб-страницах.
Графики в этом формате имеют ряд недостатков (в частности, могут быть только иллюстрациями, а не изображениями), но их преимущества, безусловно, перевешивают. Стоит также упомянуть, что не все программы для создания сайтов поддерживают формат SVG (DonbassWeb его поддерживает).
Прежде всего: быстро накапливается (что очень важно на мобильных устройствах) и прекрасно масштабируются (т. е. независимо от того, как сильно их увеличивать, не увидишь „pikselozy”).
За ними хорошо размещать на страницах responsywnych графики соответствующих размеров – лучше всего такие, которые, что наибольшее совпадения максимальную ширину экрана (сегодня мало, что экран превышает ширину 1920 пикселей), но помните, что на мобильных устройствах эта реальная ширина редко превышает 1000 пикселей.
Потому что чем больше разрешение, тем больше размер изображения. Чем больше размер изображения, тем дольше вам придется ждать, пока загрузится. Даже в самый быстрый ссылке.
Также стоит использовать форматы, которые легко сжимают (например .jpg или .png, если вы хотите, чтобы графика не было фонов). Благодаря тому, что сайт будет заряжается гораздо быстрее. Серьезно.
Чем больше разрешение, тем больше размер изображения. Чем больше размер изображения, тем дольше вам придется ждать, пока загрузится. Даже в самый быстрый ссылке.
Приглушенный фон
Если я на графики, то стоит упомянуть о спокойном фоне страницы; такой, который не мешает при чтении и восприятии содержания.
Это немного такая очевидность, но и на мобильных устройствах очень важно, чтобы фон (страницы, текстовых блоков или сегментов контента) помогает в чтении. То есть, высокий контраст между текстом и цветом, под ним очень целесообразно.
Да, конечно, – стоит пойти в классику, то есть черные буквы и белый фон (как здесь), но не надо себя ограничивать. Однако помните, что красочные картинки или орнаменты значительно ухудшают комфорт чтения.
Достаточное количество видов
Хотя обычно говорится, что стороны responsywne имеют три вида (телефон, планшет, компьютер), это часто является проблемой оказываются большие телефоны, в которых самый маленький вид выглядит немного неестественно (просто растягивается), а дисплей не является еще достаточно большой, чтобы появилась версия на планшет.
Очень хорошо эта проблема показывает, графика UXplanet.com:
Другими словами, четвертый вид", „промежуточный” между телефоном и планшетом, может очень пригодиться. И такой четвертый вид мы тоже в DonbassWeb. Мы называем его „телефон горизонтально”, однако эта ширина соответствует, также, все большим дисплеям больших смартфонов и minitabletów.
Используйте возможности мобильных устройств, навигация, звонки)
Иногда об этом забывает, но когда необходимо позвонить на номер указанный на сайте, это может раздражать. Его нужно выделить, скопировать и потом вставить в окно набора номера. Но это можно сделать намного лучше.
Вы можете добавить действие после нажатия пальцем на номер телефона или на значок (callto), так что кто-то захочет позвонить, позвонит быстрее. Так же и навигация – когда вы нажимаете в нужном месте запускается навигация, которая направит по указанному адресу.
И это только несколько свободных идей :).
Это, в конце концов, как сделать сайт резиновым?
С головой, вкусом и идеей ;).
Я перечислил только несколько вещей, о которых стоит помнить, так что не удивлюсь, если вы знаете еще какие-то tipy, связанные с хорошими практиками при создании страниц responsywnych :).
