Перейти к содержимому


Как сделать адаптивный дизайн сайта?


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 10

#1 4ekset

4ekset

    Новичок

  • Пользователи
  • Pip
  • 6 сообщений

Отправлено 27 Январь 2016 - 13:20

Подскажите как настроить сайт так, чтобы он корректно отображался как на мониторе, так и на экране планшета.

#2 Master

Master

    Новичок

  • Пользователи
  • Pip
  • 8 сообщений

Отправлено 29 Январь 2016 - 20:15

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

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

Способов создания и настройки адаптивного дизайна существует несколько.

Наиболее простой способ, который подойдет веб-мастерам, только-только начинающим свою деятельность – использование готовых шаблонов движков. Большинство популярных движков, таких как Wordpress имеют уже готовые шаблоны с адаптивным дизайном. Все, что требуется от мастера – установить его и заполнить нужной информацией.

К этому же способу можно отнести и использование фреймворков – настраиваемых каркасов шаблонов. Правда, работать с ними уже сложнее, нежели с готовыми шаблонами.

Второй способ – более сложный и требует от веб-мастера знания CSS, умение работать с тегами. Для создания адаптивного дизайна с помощью CSS придется вручную прописать метатеги, их основные значения. Это требует не только знания основ CSS, но и умение разбираться в кодах, менять их в соответствии с потребностями.

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

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

#3 maria0k

maria0k

    Новичок

  • Пользователи
  • Pip
  • 3 сообщений

Отправлено 31 Январь 2016 - 22:00

Проще заказать адаптивную верстку у фрилансера, если бюджет позволяет конечно. Если нет, тогда не знаю.

#4 RUN

RUN

    Новичок

  • Пользователи
  • Pip
  • 8 сообщений

Отправлено 09 Март 2016 - 01:10

maria0k может человек хочет сам попробовать и научиться

#5 ValentinBelov

ValentinBelov

    Новичок

  • Пользователи
  • Pip
  • 2 сообщений

Отправлено 25 Август 2016 - 10:07

Здравствуйте, хочу создать адаптивный сайт. Сколько будет стоить сделать мне такой сайт по деньгам и по срокам?

#6 admin

admin

    Администратор

  • Администраторы
  • 502 сообщений

Отправлено 25 Август 2016 - 13:42

ValentinBelov , Вы можете создать тему в разделе - изготовление сайтов, быстрее решите свой вопрос))

#7 alekaSV

alekaSV

    Новичок

  • Пользователи
  • Pip
  • 7 сообщений

Отправлено 01 Декабрь 2016 - 09:51

Для создания адаптивного сайта на wordprees достаточно подобрать и установить несколько плагинов:

1) Hammy – изменяет размеры изображений на вашем сайте для правильного отображения на мобильных устройствах.

2) Responsive Widgets – плагин, который вводит новые текст/HTML виджеты для WordPress, которые появляются только в определённых устройствах, таких, как iPads, Nooks, PlayStation Vita и других универсальных устройствах, таких, как планшеты или смартфоны.

3) Responsible – проверяет адаптивность ваших страниц «на лету» в браузере.

4) WPTouch Mobile Plugin - создает мобильную версию вашего сайта.

5) WordPress Mobile Pack – предлагает мобильные темы для WordPress сайтов.

6) Jetpack – имеет функцию «Мобильная тема».

#8 Ninelutigh

Ninelutigh

    Новичок

  • Пользователи
  • Pip
  • 3 сообщений

Отправлено 06 Февраль 2018 - 22:18

Хочу поинтересоваться у вас: как вы создаёте дизайн для вашего будущего сайта? Вернее: кто рисует набросок на планшете, а кто делает это за компьютером?

#9 MarieNox

MarieNox

    Новичок

  • Пользователи
  • Pip
  • 6 сообщений
  • ГородRibinsk

Отправлено 16 Март 2018 - 14:35

А где можно заказать адаптивный дизайн для сайта недорого?

#10 admin

admin

    Администратор

  • Администраторы
  • 502 сообщений

Отправлено 23 Март 2018 - 17:04

MarieNox, вот в этой ветке ищите исполнителей, договаривайтесь с ними.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных