Wprowadzenie
Ci, którzy już zajmowali się rozwojem frontendu Magento, prawdopodobnie znają Magento Motyw RWD (Responsive Web Design). Ten responsywny szablon jest dostarczany z podstawowym pakietem Magento, który można wykorzystać do budowy sklepów internetowych gotowych do użycia w telefonach komórkowych.
Mobile-ready nie może być mylony z mobile-first, ponieważ mobile-first jest podejściem, które działa lepiej z urządzeniami mobilnymi, ponieważ stawia bezbłędne mobilne użycie jako najwyższy wymóg. Wraz z pojawieniem się i rozpowszechnieniem smartfonów nasze korzystanie z Internetu uległo radykalnej zmianie. W dzisiejszym świecie coraz więcej osób korzysta ze swoich smartfonów lub tabletów, aby zbierać informacje w sieci, a także robić zakupy. Dlatego ważne jest, aby zakupy online za pomocą urządzeń mobilnych były proste, jasne i szybkie.
W większości przypadków nasi klienci przypisują nas do optymalizacji wyglądu sklepu internetowego, oprócz komputerów stacjonarnych, dla urządzeń mobilnych pracujących w 100%, aby osiągnąć bezbłędny interfejs użytkownika / UX.
Temat RWD, bądźmy szczerzy, może spełnić te kryteria tylko do pewnego stopnia. Piszę o tym szczegółowo poniżej. Po kilku projektach rozwojowych postanowiliśmy stworzyć osobny motyw za pomocą frameworka Bootstrap, opartego na rozwiązaniu RWD.
Realizacja
Jakie są powody, dla których, moim zdaniem, RWD nie jest najlepszym rozwiązaniem do stworzenia mobilnego sklepu e-commerce XXI wieku?
- Jest mobilny, a nie mobilny (w pierwszej kolejności nadal obsługuje wyświetlanie na pulpicie)
- Nieaktualny system gridowy (RWD używa kilkuletniego, niestandardowego systemu gridowego, z którym trudno jest stworzyć unikalne projekty przyjazne dla urządzeń mobilnych, podczas gdy NILA używa jednej z najbardziej aktualnych fronted frameworków, Bootstrap , z 12-kolumnowym systemem siatki, elastyczne wsparcie - idealne rozwiązanie dla szybkich zmian)
- Nie jest modułowy (nie można modyfikować osobno podstron i układów, wszystko jest zarządzane za pomocą plików CSS)
- Nie ma OOP CSS (ponieważ RWD zawiera tylko jeden skompilowany plik CSS, więc trudno jest zmodyfikować podstawowe ustawienia, takie jak kolor, typ czcionki itp.)
- Słaba obsługa przeglądarki (brak wyraźnej obsługi OSX / iOS)
- Projekt
Nasi graficy opracowali wygląd NILA oparty na RWD. Staraliśmy się, aby było to bardziej zrozumiałe podczas stosowania aspektów mobilnych. Oznacza to, że używamy procesu budowania bazy do góry zarówno pod względem projektu, jak i wdrożenia. Dla odcieni kolorów wybraliśmy niebieskawo-szary, co zaowocowało bardzo klarownym „minimalistycznym” podejściem.
Tworzenie nowej skóry
Najpierw stworzyliśmy nową skórkę w pakiecie RWD. Nie korzystaliśmy z nowego pakietu, ponieważ struktura szablonu NILA jest oparta na RWD i dlatego możemy szybciej rozwijać.
W praktyce nadpisaliśmy szablony i układy, których potrzebowaliśmy ze skóry NILA, podczas gdy w obecnej wersji zarządzamy resztą struktury z RWD.
Użyliśmy najnowszej wersji Bootstrap (3.3.6), CSS został zaimplementowany z Less (językiem arkusza stylów) pod względem orientacji obiektu. Opakowanie
