Чтение RSS каналов

Форум

Открыть Ответить

Адаптивный дизайн на SLAED RWD

5

5
1
05.07.2014 11:18:34
title


Рич Брукс — основатель The Marketing Agents, онлайн-издания для предпринимателей, стремящихся привлечь новых клиентов и получать большую прибыль благодаря мобильному маркетингу и продвижению в поисковых системах и социальных сетях.

Адаптивный дизайн — популярное направление веб-дизайна

К 2015 году более половины трафика будут генерировать мобильные устройства. Если веб-ресурс не будет под них оптимизирован, пользователи будут бежать с такого сайта, как от чумы.

Что такое адаптивный веб-дизайн?

Адаптивный веб-дизайн (responsive web design, RWD) — это подход к разработке сайтов, согласно которому ресурс должен быть удобным для просмотра с любого устройства, независимо от размера экрана, будь то настольный компьютер, мобильный телефон или планшет, существующее устройство или то, что появится только в будущем.

«Сначала — мобильные» («Mobile first») — боевой клич дизайнеров, применяющих RWD. Он призывает начинать разработку с версии для мобильных устройств и только потом создавать сайт для других платформ.

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

Годами я убеждаю предпринимателей, что, хотя им и нужен контент, оптимизированный для поисковых систем, Google никогда не станет их клиентом. Писать тексты нужно, ориентируясь на идеального клиента, а только потом проверять, «понимают» ли их поисковые системы.

То же правило верно и для мобильного веб-дизайна: сначала проектируйте для пользователей, затем — для платформы. Просто не забывайте, что пользователь мобильного устройства может решать задачи (поиск адресов, телефонных номеров), отличные от тех, которыми тот же самый человек занимается, сидя за компьютером (более глубокое изучение веб-ресурсов).

Определённые отрасли могут ожидать серьёзного притока мобильного трафика в ближайшее время (например, туристические порталы, онлайн-магазины и новостные сайты). Однако в других отраслях у предпринимателей будет больше времени для манёвра.

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

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

Нужно умать постоянно, а нужно ли нам на наших проектах применять адаптив? Если да, то как это сделать правильно? На каких breakpoint’ах остановиться? С чего начать проектирование (mobile first или desktop first)? Какие технологии следует применить?

Часто адаптивным пытаются назвать сайт, в котором используется одна единственная технология — media queries, тогда как настоящий адаптивный сайт может (и должен) включать в себя уйму параметров:

серверная адаптация изображений — это позволит не грузить мобильным пользователям полновесные десктопные изображения, а пользователям экранов с высокой плотностью пикселей — насладиться всей мощью своего дисплея;

серверная адаптация layout’a — если какие-то блоки мы все-таки скрываем, логично это делать при помощи сервера, чтобы не отображать лишние элементы разметки пользователям и не заставлять их грузить такие ценные на мобильном интернете килобайты;

адаптировать также нужно и интерфейс:

- по очевидным причинам нельзя оставлять элементы, работающие по наведению;
- различные карусели нужно адаптировать под touch;
- нельзя заставлять пользователя бесконечно скроллить разросшуюся за счет перемещенных блоков страницу;
- в тоже время нельзя и оставлять его без доступа к нужному контенту, нельзя просто скрывать его: контент должен быть доступен, при необходимости.

Настоящий адаптивный сайт не будет ни в чем уступать мобильному сайту. Наоборот, он будет превосходить его, ведь мы получаем не статичный, а динамичный сайт. К тому же, он будет уже заранее адаптирован к будущему. Не важно, какое устройство выйдет завтра — ваш сайт, если он сделан правильно, будет отображаться на нем корректно.

title
4.27

4.27
2
05.07.2014 11:43:2305.07.2014 14:01:22
Здравствуйте, может я что-то пропустил - новая версия SLAED PRO уже поддерживает технологию RWD или это не про нас. В смысле того, что пользователи SLAED могут расчитывать на то, что любой желающий может перевести свой сайт в адаптивную версию.
Правильно ли я понял, что это примерно тоже самое, что перевести сайт в ЧПУ. Что пользователям нужно сделать, чтобы это свершилось?

Есть конечно несколько авторитетных авторов, которые не согласны с переходом на адаптивные версии сайтов, если уж быть откровенными - то на проблему нужно смотреть с разных сторон, чтобы принять взвешанное решение:

Хуан Пабло Сармиенто (Juan Pablo Sarmiento), Web Design Shock
11 причин, почему адаптивный дизайн не так уж крут

Том Эвер (Tom Ewer), ManageWP
5 случаев, когда адаптивный дизайн не стоит того

Гай Поджарный (Guy Podjarny), Guy’s Pod
Адаптивный дизайн замедляет работу сайта

Извините, что сайты на английском языке,
но есть тому сторонники и с российской стороны:


http://innova-media.ru/news/1995/

www.cmsmagazine.ru

galior-market.ru

title


Версия системы: SLAED CMS 4.* Pro
Версия PHP: PHP 5
Сервер: Сервер в интернете
4.27

4.27
3
05.07.2014 15:54:40
Небольшой видео-урок на YouTube про адаптивный дизайн, смотрим, наслаждаемся:

title


Версия системы: SLAED CMS 4.* Pro
Версия PHP: PHP 5
Сервер: Сервер в интернете
4.27

4.27
4
06.07.2014 17:58:10
Здравствуйте,
пробежавшись лишь по некоторым сайтам нашей системы - обнаружил, что адаптивный дизайн уже реализован на некоторых проектах.
Лично у меня остается вопрос - как можно прикрутить адаптивный дизайн к сайту на платформе SLAED CMS?

А вот и счастливчики из наших пользователей:

ra55551

www.pro-script.ru

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

Другие сайты, представленные ниже - используют RWD, но уж сильно сомневаюсь, что они работают на движке SLAED, скорее всего были зарегистрированны с целью получить обратный линк на свой ресурс, но к нашей системе не имеют никакого отношения, тем не менее - эти сайты числяться у нас, как образцы работы адаптивного дизайна.

webself.ru
playax.ru
glassorder.ru
hypnomusic.ru
wpmen.ru
elektro-blog.ru
evrokvartira.com
pesok-graviy.ru
slots-pirates.net
betua.ru
guard-dog.ru

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

Единственное, чего не могу понять, если есть руки и знания в голове, то чего бы эти ошибки не исправить, чтобы сайт зашел в зеленую зону. Ничего не хочу сказать, но не обладая большими знаниями - мне удалось обуздать валидатор, таким образом сайт всё солиднее смотриться - зачем вам ошибки:

title

Спасибо, что делаете свою работу!

title
4.27

4.27
5
06.07.2014 18:55:58
особо код движка не трогал . Избавился от tr td table в коде модулей. Переписал модуль news contact , остальные отключил за ненадобностью


Тему можно взять от движка dle.

А вообще я бы посоветовал автору данного движка убрать где это возможно html код из php кода движка. И немного переписать шаблонизатор.
3.76

3.76
6
07.07.2014 08:41:30
1.Правильно ли я понял, что убрав эти теги из использованных модулей - решит вопрос с адаптивным дизайном и разве эти теги не отвечают за структуру преподнесенной информации, т.е. если начнешь "шашакой махать" и резать в модулях все <tr> <td> и <table> - не приведет ли эти к информационной каше, когда перемешаются все картинки и текст в общей массе.

2. Например, если взять готовый дизайн у партнера SLAED.in с уже реализованным адаптивным дизайном, то это может быть спасением от мучащих вопросов, так как там уже всё прописано и продуманно до мелочей, вот один из варриантов:

title


Версия системы: SLAED CMS 4.* Pro
Версия PHP: PHP 5
Сервер: Сервер в интернете
4.27

4.27
Открыть Ответить
Хотите опробовать SLAED CMS в действии?

Технологии

PHP MySQL HTML 5 CSS 3 jQuery jQuery UI

Контакты

  • D-49179, Deutschland
    Ostercappeln, Im Siek 6
  • +49 176 61966679

  • https://slaed.net
Идеи и предложения
Обратная связь