Здравствуйте!
Имеется практически готовый сайт http://www.myfancycraft.com/ на Drupal 7
Там есть базовая адаптация, нужно её доработать под приличный вид на мобильных устройствах.
Планировалось две точки перехода, которые охватят большинство устройств:
1) смартфон (640x1130px)
2) планшет (1024x768px)
В данный момент рассматривается вариант сделать мобильную версию под размер 640x1130px (под iPhone 6), а от неё уже плясать под остальные устройства просто уменьшая размер шрифта для девайсов с шириной экрана менее X px и увеличение для ширины экрана более X px. Вот только: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
Возможно под планшет будут какие-то нюансы, но это скорее мелкие визуальные правки.
Сразу хочу предупредить: Пожалуйста, предлагайте адекватные цены и относитесь к работе серьезно!
С тем как это делает через @media запросы я знаком, так что, попрошу без лапшы... :)
Адаптацией пытался уже заняться один человек, но у него не вышло ничего толкового, при этом было затронута часть PC версии, поэтому вот что ключевое нужно сделать постараюсь как можно более детально описать:
1) Меню категорий товаров сайта сейчас разворачивается только при нажатии на стрелочку (хотя, иногда и при нажатии на название). При выборе категорий (Clothing & Accessories, Home & Living etc) или подкатегорий "For her" и "For him" переходит на эти страницы.
Нужно следующее: То есть, человек нажимает сначала на Categories -> раскрывается меню, он выбирает категорию, нажав на кнопочку с надписью Clothing & Accessories или Jewelry и т.п. (не только на стрелочку, а и на само поле с надписью, стрелочки больше для наглядности) -> разворачивает подменю данной категории... Если внутри есть ещё "For her" и "For him"- по нажатию на них тоже не должно быть перехода на страницу, должно происходить разворачивание. Только при нажатии на конечные пункты меню происходит переход на страницу с товарами конечной подкатегории.
Пример:
2) Меню блога в данный момент разворачивается через 1 кнопку (Blog categories) сразу всё, без предварительного выбора категорий. Отображается криво, иногда наблюдаются какие-то проблемы с отступами
Необходимо следующее: Сделать обычное css3 меню, чтобы пользователь мог выбрать сначала только категорию блога(кнопки категорий), далее получал список подкатегорий (они будут добавляться) выбранной категории, а в конце ему отображались посты, которые соответствуют этим критериям.
3) Меню Info (Login | Register + About us | Blog | Policies | Our Artisans + возможно, 1 пункт добавится)
В данный момент отображается немного не красиво.
Нужно: Либо поместить всё в одну кнопку Info (что более правильно) (пример в мобильной версии сайта www.rozetka.com.ua), либо довести до ума, чтобы были крупные надписи, удобные кнопки нажатия и не было съехавших пунктов.
Пример:
4) В PC версии были фильтры и меню подкатегорий слева в списке товаров категорий. Нужно его вернуть для устройств 1024px и более в ширину. Он его отключил или вовсе удалил. Если удалил и не получится её просто и быстро вернуть - у меня есть backup версия всего сайта, занимает, правда, более 5gb.
Сейчас вот так:
5) В PC версии в последней строке списка продукции не дырки между товарами, они выводились друг за другом.
Сейчас вот так:
Мелкие правки:
Открыл сайт на другом телефоне и снова наша "любимая" каша-малаша
1) Pop-up версия корзины
а) Цена изделия налазит на название, когда второе длинное
б) Отступ от кнопки "View cart" слева не равняется отступу от блока "Total: сумма" и кнопки "Checkout"
в) Если добавить товар в корзину, потом нажать на её значок и в pop-up версии перейти на "Checkout" - общая стоимость резко меняется. Сумма берётся с потолка, у меня там бывали и трёхзначные номера.
2) Карточка товаров
а) Отступы какие попало между ценами и карточкой товара.
б) Надписи плывут, залазят друг на друга, ведут себя как им угодно.
г) Delivery time отображается некорректно, на PC и iPhone 6 в две строки (первая - текст, вторая - ориентировочные даты)
Где $125 вообще почему-то ужасно всё, но и тут всё зажато, отступы ужасные, слева цена вылазит, справа цена не дотягивает до конца длины кнопки.
3) На разных устройства на странице chekout при выборе из списка страны United Kingdom или любой другой система подгружает и выдаёт Tanzania или абсолютно другую страну. В следующий раз, всё нормально. Трудно объяснить, просто время от времени это случается. Чаще всего с United Kingdom. Мне кажется, это из-за того, что там по-умолчанию стоит USA, список глючит как-то. Но на самом деле, собака может быть зарыта и в другом, нужно проверить.
Под вопросом:
1) У нас есть текст в описании товаров Details. В карточки каждого товара к нему применяется style (размер и тип шрифта).
Для мобильной версии заданы свои правила, чтобы шрифт отображался крупным. Но для применения их нужно зайти в карточку каждого товара, выбрать Edit, а потом нажать Save.
Можно это как-то автоматизировать, а то у нас 1500 товаров?
мелко:
нормально:
2) Корзина товаров (Знаю, учитывая задачу, судя по всему, понадобится переработка и для PC версии)
Можно ли реализовать её как в мобильной версии rozetka.com.ua?
Просто и красиво сделать вывод информации в две строчки (в одной выводить название и значок закрытия, в другой цену за единицу, выбор количества, цена за выбранное количество единиц и в нашем случае стоимость доставки, итоговую стоимость)
Как-то так. Так же, с удовольствием, выслушаю предложения по улучшению отображения сайта на мобильных устройствах.
Спасибо за внимание и интерес!
