Какой лучший способ для создания мобильной версии сайта?

Question

[Mauster]

Здравствуйте! Какие есть варианты создания мобильной версии сайта ? Лучше использовать различные CSS фреймворки или же верстать отдельную мобильную версию? Подскажите какие самые оптимальные варианты, может есть ещё способы для реализации мобильной версии?! Заранее благодарен.

Answer 1

[xmoonlight]

Два пути: простой и правильный.
Простой: один код для всего
1. Создать адаптивную вёрстку
2. Создать динамически загружаемые JS-модули в зависимости от их востребованности на конкретной странице.
3. Настроить кэш на сервере для JS-модулей.

Правильный: API и Single Page Application
RESTfull API + SPA

Если сделать оба - то это будет ИДЕАЛЬНЫМ вариантом.
Video: knockout.js SPA: https://www.youtube.com/watch?v=vhT9Id8Jfb8

Comments

[Mauster]

Здравствуйте! Благодарю за ответ, не подскажите какие нибудь книги или может быть статьи как реализовать с помощью второго способа?

[xmoonlight]

Mauster: stackoverflow.com/questions/14336450/javascript-sp...

[Mauster]

xmoonlight: Спасибо

[Alex]

Как RESTfull API + SPA относится к мобильной версии?

[Андрей Хохлов]

SPA как решение проблемы мобильной версии это конечно мощно)

Answer 2

[Сергей]

Я делаю на сетках типа бутсрапа, считаю что так удобно и другого не нужно

Answer 3

[Андрей Хохлов]

Лучшего способа нет. Всё зависит от проекта, его задач, аудитории. Ресурсов, которыми располагает проект.

Не путайте отдельную "лайт-версию" сайта для мобильных (m.example.com) и просто адаптивный сайт.

Так же есть более сложные варианты, использующие как адаптивность основного шаблона, так и рендеринг разных шаблонов в зависимости от устройства.
Почитайте вот эту стать. например: frontender.info/building-a-better-responsive-website

Comments

[Mauster]

Спасибо!

Answer 4

[yaBliznyk]

Все зависит от ваших знаний и навыков. Есть готовые фреймворки типа framework7. Есть очень крутая штука от google polymer, которая умеет понимать жесты и сделана в лучших традициях material design.
Так-же стоит уделить внимание самому material design. Большинство людей будут заходить на ваш сайт с android устройств и им будет комфортно работать в нем, если он будет внешне совпадать с большинством android приложений.

Добавлю React native

Comments

[Artyom Lagun]

polymer, на сколько я знаю, корректно работает только в Chrome. остальные же браузеры могут просто не воспроизвести компоненты, написанные на polymer.

[yaBliznyk]

Artyom Lagun: Для этого в polymer есть js библиотека, которая позволяет ему работать в других браузерах. Но так-же стоит учесть, что web-компоненты в скором времени будут поддерживаться всеми браузерами, т.к. эта технология не просто библиотека, а стандарт w3c.

[Artyom Lagun]

yaBliznyk: я не спорю, что в скором времени будут воспроизводить все браузеры. другой вопрос, когда будет это "скорое время". мне кажется, можно использовать css-фреймворки, типа meterializecss или semantic-ui, у которых из коробки есть прикольные плюшки, что-то вроде выезжающего меню сбоку экрана. но а вообще, если правильно помню, то можно использовать ionic, чтобы получить версию сайта, приближённую к мобильному поведению.

[yaBliznyk]

Artyom Lagun: Да, вполне может быть, что ionic решит эту задачу. У polymer есть очень крутые фишки, типа возможности эмулировать движения и т.д. все как на мобильных устройствах. Предельно приближенно к material design!! А это очень важно. Никакие из указанных вами фрэймворков такого не смогут. Вот вам пример: polymerelements.github.io/app-layout-templates
Попробуйте в мобильной версии просто тянуть с левого края, меню выдвигается так-же как на мобильном.
Помимо этого с polymer дает очень много фишек для инкапсуляции кода, относящегося к компоненте, делает код приложения чище и понятнее.

[Artyom Lagun]

yaBliznyk: вот пример: materializecss.com/mobile.html + это материал фреймворк)

[Antony Bark]

yaBliznyk: ваш пример страшно глючит при заходе с планшета (android 4.2)

[yaBliznyk]

Antony Bark: Странно.. сам пример не мой, но я разворачивал на его основе приложение и оно хорошо работало на планшете android 5 и телефоне android 4.4. Попробуйте склонировать репозиторий и запустить локальную версию.
Artyom Lagun: Очень рад, что они сделали такую мелочь. А вот так они умеют? https://elements.polymer-project.org/elements/pape...
Вот стандарт https://www.google.com/design/spec/patterns/scroll...

[Artyom Lagun]

yaBliznyk: =) я не спорю, что полимер крутая штука) но всё таки, мне кажется, лучше подождать, пока начнут поддерживать его хотя бы 3 основных браузера...исходя из этого я и предлагал css-фреймворки с material design.

Answer 5

[Илья Панков]

А что если попробовать сначала bootstrap а потом foundation?

Comments

[EGO]

Попробуйте, но скорей всего на bootstrap и останетесь :)