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

Question

[LNK]

В общем я решил разработать сайт, на базе cs.stalker-game.ru/ru и хочу, чтобы получился такой же дизайн(после того как сайт переделаю на полностью адаптивный некоторые элементы перерисую), но сделать сайт адаптивным(в том числе и для мобильных устройств) и оптимизированным. Что вы можете посоветовать, как сайт превратить в адаптивный?

_
-буду пилить сталкерский сайт.
-зачем?
-я буду пилить сталкерский сайт.

Answer 1

[Никита]

В плане верстки, смотрите в сторону bootstrap сетки или flexboxgrid, в зависимости от необходимой поддержки динозавров(IE9).
Первый - достаточно кроссбраузерно, второй - быстрей верстка сама, да и удобней имхо.
После того как отверстаете десктоп, если конечно с него начнете, смотрите на мобильных в инспекторе, и медиа запросами правите под нужные разрешения соответствующие стили.
А вообще данный дизайн сделать адаптивным тот еще геморой, проще отдельную версию для мобильных устройств сделать, для планшетов выводить десктоп.

Comments

[LNK]

Ну а вообще, такой дизайн, если я возьму его за основу для десктопа, нормальный, ничего что все статичное?
Тогда буду делать 2 версии, мобильную и для пк..

[Никита]

Для информационного сайта статичность - норма. Если он будет пестрить различными анимациями и прочей динамикой, то это будет больше раздражать, т к среднее время посещения выше чем на тех же продающих страницах(лендингах). Тут главное что бы все было читабельно, как на маленьких мониторах так и на больших, это касается и цветовой гаммы, на темной фоне светлый текст долго читать невозможно.
Я в целом не любитель подобной стилистики дизайна, т к он умер лет так 7 назад имхо.
Лучше смотреть в сторону простоты и минимализма. При должных навыках, даже сайт для подобной игры, можно сделать достаточно атмосферным и интересным, а главное удобным для пользователя, в минимализме.
Помните, что людям должно быть приятно находиться тут и у них не должны глаза вылазить из орбит из-за светлого шрифта на темном фоне.
Все выше написанное не истина в последней инстанции, а личное мнение.

[Никита]

NikHaker: да, и учтите, что подобный сайт поддерживать без CMS - это большой геморой. Вам стоит еще ознакомиться с этим аспектом и понять, потяните ли вы это сами или стоит нанять специалиста.

[LNK]

Никита: я пересмотрел over999 современных минималистичных шаблонов, чтобы появились какие нибудь идеи, но так и не придумал как можно сделать такой сайт в современном интерфейсе...
CMS облегчает наполнение контентом, верно? Я думал взять свой основной шаблон, который сделаю и клепать страницы на его базе, меняя текст и картинки.. Или все не так просто?

[Никита]

NikHaker: сложность будет в поддержке этой всей кучи страниц, когда у вас будет более 10 страниц, поддержка вашего сайта уже будет похожа на пытку, а если дотяните до 100+ страниц, скорее всего забьете на это дело.
При редизайне или каких-то изменениях, опять же возникнет задача править все это на 100+ страницах.
CMS - да, это система управлением контента.

[LNK]

Никита: а можно ли в cms использовать свой дизайн, т. е. Чтобы все осталось так как было ( дизайн и настройки), а при помощи cms менять только содержимое?
И какую cms посоветуете?

[Никита]

NikHaker: Дизайн можно использовать любой, только для начала нужно верстку этого дизайна натянуть на конкретную CMS, можете использовать Джумлу или Друпал. Можно вордпресс, но многие штуки костылями придется делать.

[LNK]

Никита: что значит натянуть? Нужно как то видоизменить исходный код?

[Никита]

Верстка отвечает за внешний вид только. Для того, что бы можно было управлять контентом, нужно использовать верстку как шаблон, для генерации страниц. Что бы это реализовать, в вашем случае, используется CMS, это значит, что нужно исходя из особенностей конкретной CMS, настроить вывод в этот шаблон корректно: новости, меню, банеры или любые другие элементы из БД. Но если вы не знаете таких вещей. Лучше заплатить кодеру, т к для новичка это может превратиться в ад, существует много мелочей которые нужно учесть еще на этапе верстки.

[LNK]

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

[Никита]

Да, неплохая. Если c++ знаете, то с php разберетесь куда быстрей=)

[LNK]

Никита: а где можно найти статьи по друпалу? Нашел гайд на хабре но он датирован 2010 годом, многое уже наверняка поменялось

[Никита]

Лучше видео сначала посмотрите, проще понять будет. По статьям ничего посоветовать не могу, да и по видео собственно тоже, ибо не смотрел их. Читайте хабр, с 2010 прям сверх кардинально ничего не изменилось, для "Понять в чем смысл" - более чем достаточно. Любые непонятки можно уточнить в офф документации www.drupal.ru/docs например тут.

Answer 2

[lakegull]

Открываете редактор в браузере, меняете ширину экрана и настраиваете CSS, создаёте @media-query под размер смартфона. В чём проблема то?

Comments

[LNK]

Спасибо

Answer 3

[Максим]

На вордпресс похоже - очень - ни на этой cms ваш сайт ?

Comments

[LNK]

Не знаю, сайт то не мой. Я только хочу за основу взять тот сайт. А для чего вообще нужен вордпресс?

[Максим]

NikHaker: Ну а как понять за основу ? Вы сможете лишь оформление т.е сам дизайн стянуть и то на врядли - вордпресс это система управления содержимым - т.е для быстрого старта - установили и пользуетесь без кодирования

[LNK]

Максим Жаров: дизайн я и собираюсь стянуть и потом немного перерисовать - это я имел ввиду под основой. В вордпресс можно загрузить этот свой дизайн?

[Никита]

Это не Вордпрес