Najpierw mobilnie. Od Mobile First do Mobile Native: o czym powinni pamiętać programiści skupiający się wyłącznie na smartfonach

Dom / Technologie

Stworzymy prostą, responsywną nawigację witryny. Nasze rozwiązanie pomoże nam się skupić treść naszą stronę, która jest być może najwyższym priorytetem przy tworzeniu aplikacji na urządzenia mobilne. Nie będzie tu mowy o JavaScript, ale przyjrzymy się temu przy użyciu podejścia Mobile First.

Nawigacja mobilna

Całkowicie akceptowalny projekt responsywny, ale przy standardowych rozmiarach widoku mobilnego (320 x 480 pikseli) tak naprawdę widzisz tylko menu nawigacyjne. Pewnie, że właśnie otwieram strona główna, chciałbym zobaczyć coś innego niż to. London & Partners nie jest jedyną firmą mającą ten problem. Praktykę tę widać w wielu responsywnych projektach w całej sieci.

Jakie są zatem rozwiązania?

Znamy już kilka sposobów obejścia tego problemu, na przykład poleganie na jQuery, które pomaga nam to rozgryźć. Weź wyjaśnienie Chrisa Coyiera na temat menu rozwijanego Pięć prostych kroków.



Duży ekran, mały ekran.

Z za pomocą jQuery tworzone jest zduplikowane menu w postaci listy rozwijanej, początkowo ukryte za pomocą CSS. Gdy zapytania o media wykryją mniejszy ekran, menu rozwijane staje się widoczne, a oryginalna nawigacja niewidoczna. Jest to idealne rozwiązanie dla urządzeń mobilnych, ponieważ listy rozwijane zajmują minimalną ilość miejsca i są specjalne interfejs użytkownika urządzenia (na przykład scroller w iPhonie).

Alternatywnie możesz ukryć nawigację, ale po naciśnięciu przycisku „menu” przejść do trybu widoku. Możesz zobaczyć ten efekt w akcji w najnowszym Bootstrapie Twittera.


Mniejsze ekrany ukrywają łącza nawigacyjne i wyświetlają ikonę „listy” (która szybko stała się postrzegana jako „menu”), która po kliknięciu pokazuje nawigację. Ponownie, odwiedzający mobilni otrzymują możliwie najwięcej treści i mają do dyspozycji opcje nawigacji, jeśli tak zdecydują.


Czyste rozwiązanie CSS

Zastosujemy technikę opisaną przez Łukasza, która obejmuje za pomocą CSS oraz podejście Mobile First. Co mamy na myśli pod pojęciem „podejście Mobile First”? Mówiąc najprościej, będziemy opracowywać bezpośredni układ mobilny, a następnie stopniowo udoskonalać projekt pod kątem większych ekranów. Będziemy używać zapytań o media, które wykrywają stale rosnące rozmiary ekranu, stopniowo dodając styl i funkcjonalność.

Oznacza to, że podczas przeglądania projektu na urządzeniu mobilnym zostanie załadowane tylko niezbędne minimum CSS i zasobów. Oznacza to również, że starsze wersje IE (które nie rozpoznają zapytań o media) będą prezentowane w mobilnej wersji serwisu. Więcej informacji na ten temat znajdziesz w książce Leaving Old Internet Explorer Behind autorstwa Joni Korpi.

1.Oznaczenie

W miarę postępów wyjaśnię ideę tego rozwiązania, więc na razie naszkicujmy pewne znaczniki, zaczynając od dokumentu HTML5 w kolorze blanco.

Mobile First responsywna nawigacja

Po wykonaniu tej czynności dodajmy strukturę strony. Bezpośrednio niezbędne punkty i wszystko na potrzeby naszej demonstracji. Użyłem wypełniacza tekstowego Monty Pythona ze Świętego Graala (dzięki Chrisowi Valleskeyowi), który jest w dobry sposób wywołaj uśmiech na twarzy podczas pracy :)

Nav Niebieski. Nie, racja...

Zamknąć się! Zamkniesz się?! Ale ty jesteś ubrany jak… Camelot! Nie głosujesz na królów.

Chcemy krzaka!!

Spójrz, moje kłamstwo! Zamknąć się! Ale ty jesteś ubrany jak jeden…

  • Nos?
  • Cii! Rycerze, witam was w nowym domu. Jedźmy do Camelotu!
  • Spójrz, moje kłamstwo!
Pomóżcie, pomóżcie, jestem represjonowany!

Dlaczego? Słuchać. Dziwne kobiety leżące w stawach i rozdające miecze nie są podstawą systemu rządów. Najwyższa władza wykonawcza wywodzi się z mandatu mas, a nie z jakiejś farsowej ceremonii wodnej. Bądź cicho! Traszka?!--koniec-->

2. Układ nawigacji

Stworzyliśmy podstawową stronę HTML, więc teraz czas na główną atrakcję; nasza główna nawigacja..

Tak, wszystko widziałeś poprawnie - dodaliśmy to w linii 68 Po ostatni artykuł. Nie zapominaj, że obecnie pracujemy nad urządzeniami mobilnymi, później przyjrzymy się wersji na komputery stacjonarne. Nawigację umieściliśmy na dole naszej strony, co wydaje się dość dziwne. Teraz umieścimy link na górze naszej strony, aby użytkownicy mogli znaleźć nawigację, jeśli chcą.

Nawigacja Menu

3. Zresetuj CSS

W zależności od tego, jak zazwyczaj rozpoczynasz projekty internetowe, ten krok może różnić się od normalnego przepływu pracy. Zawsze byłem zdania, że ​​restart Erica Meyera to dobry początek, zwłaszcza że niedawno go poprawił. Dodamy jego reguły resetowania do arkusza stylów, aby uruchomić nasz css:

/* http://meyerweb.com/eric/tools/css/reset/ v2.0b1 | 201101 UWAGA: PRACA W TOKU UŻYWAJ Z OSTROŻNOŚCIĄ I TESTUJ Z POPUSZCZENIEM */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr , akronim, adres, duży, cite, kod, del, dfn, em, img, ins, kbd, q, s, samp, mały, strajk, silny, sub, sup, tt, var, b, u, i, centrum , dl, dt, dd, ol, ul, li, zestaw pól, formularz, etykieta, legenda, stół, podpis, tbody, tfoot, thead, tr, th, td, artykuł, na bok, płótno, szczegóły, figcaption, figura, stopka , nagłówek, grupa h, menu, nawigacja, sekcja, podsumowanie, czas, znak, audio, wideo ( margines: 0; dopełnienie: 0; obramowanie: 0; konspekt: ​​0; rozmiar czcionki: 100%; czcionka: dziedziczenie; pionowo- wyrównanie: baseline; ) /* Resetowanie roli wyświetlania HTML5 dla starszych przeglądarek */ artykuł, bok, szczegóły, figcaption, rysunek, stopka, nagłówek, grupa h, menu, nawigacja, sekcja ( display: block; ) body ( line-height: 1; ) ol, ul ( styl listy: brak; ) cytat blokowy, q ( cudzysłów: brak; ) cytat blokowy: przed, cytat blokowy: po, q: przed, q: po ( treść: ""; treść: brak; ) / * pamiętaj, aby jakoś wyróżnić wstawki! */ ins (dekoracja tekstu: brak; ) del (dekoracja tekstu: przejście przez linię; ) table ( zwinięcie obramowania: zwinięcie; odstępy obramowania: 0; )

4. Podstawowe style

NA w tej chwili nasza strona wygląda dość nudno.


Poprawmy więc sytuację dodając kilka prostych stylizacji.

/*rozpocznij nasze style*/ body ( czcionka: 16px/1.4em "PT Sans", bezszeryfowa;; kolor: #1c1c1c; ) p, ul ( margines: 0 0 1.5em; ) ul ( list-style: disc ; dopełnienie: 0 0 0 20px; ) a ( kolor: #1D745A; ) h1 ( ) h2 ( rodzina czcionek: "PT Serif", serif; rozmiar czcionki: 32px; wysokość linii: 1.4em; margines: 0 0 .4em; grubość czcionki: pogrubiona; ) /*układ*/ .wrapper ( ) artykuł ( obramowanie na dole: 1px solid #d8d8d8; dopełnienie: 10px 20px 0 20px; margines: 10px 0; ) /*nagłówek*/ nagłówek ( tło: #1c1c1c; dopełnienie: 15 pikseli 20 pikseli; ) /*krótsza poprawka http://nicolasgallagher.com/micro-clearfix-hack/*/ nagłówek:przed, nagłówek:po (treść:""; display:table; ) nagłówek :after ( clear:both; ) /* Dla IE 6/7 (wyzwalacz hasLayout) */ header ( zoom:1; ) h1.logo a ( kolor: #d8d8d8; dekoracja tekstu: brak; waga czcionki: pogrubienie; transformacja tekstu: rozmiar czcionki: 20px; float: lewy; odstęp między literami: 0,2 em; dekoracja: brak;

rozmiar czcionki: 12px;


grubość czcionki: pogrubiona; wysokość linii: 22px; wysokość: 22px; transformacja tekstu: wielkie litery; odstępy między literami: 0,1 em; -webkit-border-radius: 2px;-moz-border-radius: 2px; promień obramowania: 2px; ) a.to_nav:hover, a.to_nav:focus ( kolor: #1c1c1c; tło: #ccc; ) To wszystko podstawy (czcionki, wysokość linii, kolory itp.), ale naprawdę ważne jest to, że narysowałem przycisk „menu” po prawej stronie, wewnątrz pliku, dokładnie tam, gdzie można się go spodziewać. Jeśli najedziesz na to kursorem, zobaczysz stan zamrożenia - oczywiście nie jest to konieczne w przypadku urządzeń z ekran dotykowy

, ale podobny charakter działania zostanie przeniesiony na wersje niekompatybilne


Internet Explorera

. Co my

określony

/*nawigacja*/ #primary_nav ul ( styl listy: brak; tło: #1c1c1c; dopełnienie: 5px 0; ) #primary_nav li a ( wyświetlacz: blok; dopełnienie: 0 20px; kolor: #fff; dekoracja tekstu: brak ; grubość czcionki: pogrubiona; odstęp między literami: 0,1 em; wysokość linii: 2 em; granica na dole: 1px solid ) #primary_nav li :last-child a ( obramowanie na dole: brak; ) #primary_nav li a:hover, #primary_nav li a:focus ( kolor: #1c1c1c; tło: #ccc; ) /*footer*/ footer (rodzina czcionek: " PT Serif", serif; styl czcionki: kursywa; wyrównanie tekstu: do środka; czcionka- rozmiar: 14 pikseli;

Znacznie lepiej. Poprawiliśmy linki do menu, które są ładne i duże (przeczytaj blog Luke'a Wroblewskiego Touch Target Sizes, aby uzyskać więcej szczegółów) i ponownie zdefiniowaliśmy stan: fokus, aby uzyskać opinie użytkowników.


6. Stać się dużym

OK, pracowaliśmy z naszym prostym szablonem mobilnym, ale teraz czas na bardziej zaawansowane ulepszenia. Użyjemy zapytań o media, aby określić, kiedy nasz układ mobilny nie jest już odpowiedni.

Ale w którym momencie tak się dzieje? Istnieje wiele sposobów podejścia do zapytań o media, ale będziemy pracować w oparciu o założenie, że ekran mobilny ma wymiary 320 x 480 pikseli. Ma 320 pikseli szerokości przy oglądaniu w orientacji „pionowej” i 480 pikseli przy oglądaniu w orientacji „poziomej”, więc sensowne jest ustawienie naszego pierwszego zapytania o media tak, aby określało dowolny ekran większy niż 480 pikseli.

Następnym krokiem będzie jednak prawdopodobnie tablet. iPad ma rozdzielczość 980 x 768 pikseli, więc możemy śmiało założyć, że wszystko, co jest mniejsze niż 768 pikseli, będzie odpowiednie dla naszego mobilnego układu. Wszystko, co jest większe niż 768 pikseli, może działać z układem nawigacji na pulpicie, w wersji „na komputer”.

Teraz możemy zacząć dodawać reguły, więc skonfigurujmy zapytanie o media:

/*zapytania o media*/ @ekran tylko dla multimediów i (min. szerokość: 768 pikseli) ( )

To zapytanie o media uruchomi wszystkie zawarte w nim style, jeśli najmniejsza wartość widocznego obszaru wynosi 768 pikseli. Proszę zwrócić uwagę na włączenie jedyny słowo kluczowe, które gwarantuje, że Internet Explorer 8 nie zostanie pomylony i nie podejmie próby przetworzenia żądania. Więcej szczegółowych informacji znajdziesz w .

Zacznijmy naszą pracę od zniknięcia przycisku „menu”:

Tylko ekran @media i (min-width: 768px) ( a.to_nav ( display: none; ) )

Gdy przeglądarka jest nieco szersza, przycisk menu nie będzie już wyświetlany.

7.Przesuń nawigację

Teraz musimy przenieść naszą główną nawigację na górę strony. Zrobimy to usuwając go z obiegu dokumentów i umieszczając na samej górze.

@media only screen i (min-width: 768px) ( a.to_nav ( display: none; ) .wrapper ( pozycja: względna; szerokość: 768px; margines: auto; ) #primary_nav ( pozycja: bezwzględna; góra: 5 pikseli; prawo : 10px; tło: brak; ) #primary_nav li ( display: inline; ) #primary_nav li a ( float: lewy; obramowanie: brak; dopełnienie: 0 10px; -webkit-border-radius: 2px; -moz-border-radius : 2px; promień obramowania: 2px;

Aby było to możliwe musimy najpierw poprawnie umieścić jego rodzica (.wrapper). Możemy to zrobić tutaj w zapytaniu o media lub zdefiniować to na początku naszego arkusza stylów.

Po całkowitym zainstalowaniu menu musimy usunąć niektóre elementy kotwiące. Nie musisz robić nic specjalnego, wystarczy, że lista produktów będzie wyświetlana liniowo, usuniesz obramowania i duże spacje. Stany najechania, o których mówiliśmy wcześniej, są oczywiście świetne, więc nie musimy ich zmieniać.


8. I na koniec...

Jeśli uważnie obserwowałeś, zauważyłeś, że w nawigacji wciąż mamy link „powrót do góry” – nie jest nam teraz potrzebny, prawda?

Możemy go usunąć na kilka sposobów, ale żeby było jasne o co chodzi, najpierw dodajmy klasę do elementu listy:

  • Szczyt

    • A potem możemy się go pozbyć w naszym zapytaniu o media:

    #primary_nav li.top (wyświetlanie: brak; )

    Wniosek

    To wszystko! Istnieje wiele sposobów wdrożenia tego pomysłu (ikona listy to tylko jeden z nich) i oczywiście możesz nadal dodawać zapytania o media, aby pracować na większych ekranach. Mam nadzieję, że teraz masz ku temu powód. Stworzyliśmy prostą, responsywną nawigację dotykową, korzystając z podejścia mobilnego, koncentrując się na treści i użyteczności. Kto potrzebuje czegoś więcej?!

    Dodatkowe zasoby

    Oto kilka przydatnych linków wymienionych w tym artykule, zebranych w jedną wygodną listę:

    • Łukasza Wróblewskiego
    • Chrisa Coyiera
  • Tworzenie aplikacji mobilnych

    • O Mobile First napisano już sporo i istnieją dobre książki na ten temat. A jednak większość programistów i firm nie wykorzystuje go w swoich projektach lub w ogóle nie wie o takim podejściu.

    Dlatego chcę Wam o tym krótko i na przykładach opowiedzieć, będzie to przydatna informacja dla tych, którzy nie słyszeli o tym podejściu.
    Spróbuję odpowiedzieć na trzy główne pytania:

    • Czym jest Mobile First i jakie są jego zalety
    • Wdrożenie podejścia
    • Statystyki wyników
    Co to jest Mobile First? W tym roku liczba użytkowników korzystających z urządzeń mobilnych w celu uzyskania dostępu do Internetu sięgnęła 60%. Dlatego ruch mobilny nabiera coraz większego znaczenia i właściciele stron internetowych muszą brać te statystyki pod uwagę. Jak pokazuje praktyka, użytkownicy telefony komórkowe i tablety spędzają mniej czasu w Internecie i preferują strony z pierwszych linii wyników wyszukiwania. Użytkownicy komputerów PC mogą natomiast spędzać więcej czasu na wyszukiwaniu informacji. Dlatego Twoja witryna musi być dobrze zoptymalizowana pod kątem wyszukiwarki(SEO) i spełniać wszystkie wymagania Mobile First, tak aby wizyta użytkownika na Twojej stronie była jak najbardziej wygodna i zrozumiała poprzez jego urządzenie mobilne.

    Dlatego niektóre z najważniejszych wymagań w rozwoju Mobile First to:

    • Najpierw pokaż najważniejsze treści
    • Strona internetowa powinna być lekka i zoptymalizowana, ponieważ... prędkość połączenia sieć komórkowa może być słaby w zależności od lokalizacji użytkownika
    • Strona internetowa nie powinna ładować więcej zasobów, niż potrzebuje użytkownik, aby uzyskać potrzebne mu informacje, ponieważ... Internet mobilny jest wciąż drogi. Dodatkowe informacje należy wczytać wyłącznie na żądanie użytkownika
    Mobile First to więc metoda tworzenia zoptymalizowanej strony internetowej dla różnych urządzeń mobilnych, biorąc pod uwagę prędkość połączenia sieciowego. Oraz znaczenie wyświetlania podstawowej treści użytkownikowi końcowemu.

    Gigant wyszukiwania Google napisał niedawno o znaczeniu tego podejścia:

    „W naszym rankingu wyników zwiększymy wskaźnik przyjazności dla urządzeń mobilnych. Zmiany te wpłyną na wyszukiwanie mobilne we wszystkich językach świata i będą miały znaczący wpływ na wyniki wyszukiwania. Dlatego użytkownikom łatwiej będzie znaleźć wyniki zoptymalizowane pod kątem ich urządzeń.”
    Film o znaczeniu Mobile First od Oliviera Rabenschlaga – szefa Agencji Rozwoju Kreatywnego Google.

    Zalety podejścia Mobile First Przypomnę, że dziś liczba użytkowników korzystających z urządzeń mobilnych do surfowania po Internecie sięgnęła 60%. Dlatego też korzystanie z Mobile First podczas tworzenia witryny internetowej zapewnia przede wszystkim ogromne korzyści tym użytkownikom.
    • Jedna witryna internetowa dla wszystkich urządzeń
    • Użytkownicy w pierwszej kolejności otrzymają ważną treść strony
    • Szybkie ładowanie strony przy niskich prędkościach połączenia
    • Wygodny interfejs do nawigacji na ekranie mobilnym
    • Minimalna ilość zasobów sieciowych wymagana do wyświetlenia głównej treści - oszczędność internet mobilny ruch drogowy
    • Najwyższe pozycje w wynikach wyszukiwania Google
    Implementacja Implementacja podejścia zostanie zademonstrowana przy użyciu frameworka Moff.js (Mobile First Framework). Jest to framework JavaScript dostosowany do programowania Mobile First.

    Rozważymy to podejście na przykładzie strony ze szczegółowymi informacjami o samochodzie.

    Określenie istotnej części treści Zazwyczaj na takiej stronie znajduje się bardzo dużo danych. I musimy zdecydować, które z nich są ważne przede wszystkim dla użytkownika.

    Szczegółowy wykaz danych na stronie:

    Wyobraźmy sobie, że najważniejszą rzeczą na tej liście jest główne zdjęcie, nazwa producenta, modele, wyposażenie, cena, lista cech i wyposażenia.

    Pierwsza strona mobilna. Nazwa firmy Opis firmy Uwaga dotycząca Nissana Versy 2015

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    • Z wyjątkiem sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    • Model: Versa Uwaga
    Nadwozie: Hatchback 4D
    • Silnik: 4-cylindrowy DOHC 1,6 l, 16 V
    • Paliwo: benzyna
    • Standard
    • Asystent hamulca
    • Podwójne przednie boczne poduszki powietrzne
    • Odszraniacz tylnej szyby
    • Pojemnik w drzwiach pasażera
    • Pojemnik w drzwiach kierowcy
    • Poduszka powietrzna wykrywająca obecność pasażera
    • Kontrola trakcji
    • odtwarzacz CD
    • Komputer podróży
    • Elektroniczna kontrola stabilności
    • Przedni stabilizator
    • Wspomaganie kierownicy
    • Wycieraczka tylnej szyby
    Przednie lampki do czytania
    • Górna poduszka powietrzna
    • Kontakt
    • Hamulce ABS

    Stworzony przez Company.com

    Prawo autorskie Mapa witryny W idealnym przypadku jest to ilość ruchu, jaką użytkownik może przeznaczyć na uzyskanie tych danych. Postaramy się to osiągnąć przy minimalnej różnicy.

    Na początek napiszmy style wyświetlania stron

    urządzenia mobilne. Dopiero potem style są dostosowywane do innych rozmiarów ekranu za pomocą zapytania o media. @media (min. szerokość: 768 pikseli) ( /*Style tabletów i komputerów stacjonarnych*/ ) Dodawanie dodatkowych informacji

    Teraz musimy dodać pozostałe dane w taki sposób, aby użytkownik o nich wiedział i mógł je uzyskać, żądając ich.
    Używamy tutaj pomocników Data Events, które pomagają uzyskać informacje na żądanie. Po kliknięciu linku na adres podany w atrybucie href zostanie wysłane żądanie Ajax. Wynik żądania zostanie zapisany do elementu określonego w atrybucie data-load-target. Ważnym punktem jest to, że atrybut data-load-screen wskazuje przy jakich wartościach ekranu miniaturki będą ładowane automatycznie. Rozmiary ekranów pochodzą ze struktury CSS Twitter Bootstrap. Natomiast w atrybucie data-load-module podajemy identyfikator zarejestrowanego modułu, z którym nastąpi połączenie po wstawieniu wyniku żądania ajax.

  • Żądanie ajax jest wysyłane na adres URL podany w łączu, a wynik jest wstawiany na stronę
  • Zarejestrowany moduł (galeria pojazdów) jest podłączony
  • Uwzględniono zależności (jQuery i Slick-carousel)
  • Ładowanie głównego pliku modułu
  • Inicjalizacja modułu
    • Następnie przyjrzyjmy się rejestracji tego modułu. Deklaracja klasy modułu Framework Moff posiada system modułowości, za pomocą którego implementujemy klasę modułów pojazdów-galerii.

    Moduły w Moff są niezależnymi elementami aplikacji, które posiadają własną logikę biznesową i mogą posiadać zależności od bibliotek zewnętrznych.

    Moff.modules.create("VehicleGallery", funkcja() ( var _module = this; var _mainImage; funkcja setMainImage() ( _mainImage = _module.find(.vehicle_images_main img"); ) funkcja zainicjowaćSlickJs() ( $(_module. find(.vehicle_images_thumbs-list")).slick((nieskończony: prawda, slidesToShow: 5, slidesToScroll: 1 )) ) funkcja handleMainImage() ( $(_module.scope).on("kliknij", ".vehicle_images_thumbs- item img",changePreview); ) funkcja zmianyPreview() ( var indeks = this.src.match(/thumb(\d+)/); _mainImage.src = "obrazy/podgląd" + indeks + ".jpg"; ) to .scopeSelector = ".vehicle_images"; this.init = funkcja() ( setMainImage(); zainicjowaćSlickJs(); handleMainImage(); ));
    Podczas inicjalizacji klasy uruchamiamy slick-carousel, aby utworzyć karuzelę naszych miniatur i skonfigurować moduł obsługi do ich przeglądania.

    Rejestracja modułu Rejestracja modułu odbywa się przy użyciu obiektu, który zawiera unikalny identyfikator i może zawierać zależności modułów oraz główny plik klasy modułu.

    Moff.amd.register(( id: "galeria-pojazdów", zależy: ( js: ["/bower_components/jquery/dist/jquery.min.js", "/bower_components/slick-carousel/slick/slick.min. js"], css: ["/bower_components/slick-carousel/slick/slick.css"] ), plik: ( js: ["js/vehicle-gallery.js"] ), afterInclude:function() ( Moff. moduł.initClass("Galeria pojazdów");
    W naszym przykładzie jako zależności określiliśmy jQuery i jego wtyczkę typu Slick-Carousel, która tworzy karuzelę z miniatur. Zależności są ładowane synchronicznie, w określonej kolejności. A po zależnościach ładowana jest klasa modułu Vehicle-gallery.js. Następnie po wczytaniu pliku modułu i jego zależności inicjujemy moduł za pomocą zdarzenia afterInclude.

    Statystyki wyników. Podsumujmy efekty tworzenia strony Mobile First.

    Dolny wykres pokazuje, że niezoptymalizowana strona jest o 73% cięższa niż strona Mobile First. W ten sposób możemy zaoszczędzić 186,94 KB, których użytkownik może nie potrzebować przeglądając Twoją stronę.

    Wniosek W ten sposób pozbywamy się ładowania duża ilość zasoby wtórne, ale które będą dostępne na żądanie użytkownika.

    W tym artykule omówiono tylko jeden przykład ładowania. dodatkowe informacje. Pełny przykład można obejrzeć na stronie internetowej frameworka.

    Data publikacji: 29.03.2013

    Nota autora: Na początku tego roku byłem na początkowym etapie przebudowy strony internetowej naszej firmy. Planowaliśmy już zastosować podejście do projektowania stron internetowych, które są bezpośrednio responsywne, co jest preferowanym rozwiązaniem w przypadku obsługi wielu urządzeń. Po tym, jak podczas szczerych dyskusji w An Event Apart w Bostonie dowiedziałem się o ograniczeniach i wyzwaniach związanych z responsywnym projektowaniem stron internetowych, zdałem sobie sprawę, że nasze rozwiązanie wymaga drobnych poprawek.

    Na szczęście projekt, który mieliśmy przed sobą, był doskonałą okazją do eksperymentowania i rzucania sobie wyzwań w celu ulepszenia naszego adaptacyjnego przepływu pracy. W tym artykule szczegółowo opiszę kroki, które podjęliśmy, łącznie z pewnymi zmianami, które poczyniliśmy w trakcie pracy nad stworzeniem lepiej responsywnej witryny internetowej.

    Wyznaczanie celów

    Pierwszym krokiem, jaki zrobiliśmy w naszym projekcie, było stworzenie listy korzyści i barier naszego adaptacyjnego podejścia. Nasza lista wyglądała następująco:

    ZALETY

    1. Budowa, wsparcie i promocja jednej strony internetowej.

    2. Obsługuje wiele rozmiarów ekranów, a nie tylko bardzo duże monitory komputery stacjonarne i małe urządzenia przenośne.

    3. Przyszłościowy, ponieważ układ będzie się zmieniać w zależności od rozmiaru ekranu, a nie tylko rozmiaru popularnych obecnie urządzeń.

    PRZESZKODY

    1. Treści przeznaczone wyłącznie dla urządzeń z dużym ekranem są często przesyłane strumieniowo na małe ekrany i po prostu „wycinane” za pomocą zapytań o media CSS, co powoduje niepotrzebne pobieranie.

    2. Ze względu na układ „no size” nie jesteśmy w stanie zmienić pierwotnej kolejności takiego układu (lub całkowicie wyeliminować z niego elementów nieistotnych) w zależności od urządzenia lub rozmiaru ekranu.

    Prawdopodobnie zauważysz, że zidentyfikowane przez nas wady podejścia adaptacyjnego to te obszary, w których najlepsze jest jedynie mobilne rozwiązanie problemu. W przypadku naszej nowej strony internetowej chcieliśmy tego, co najlepsze z obu światów – korzyści, jakie może zaoferować podejście responsywne i dedykowane rozwiązanie mobilne.

    Zaczynając od treści

    Jedną z typowych różnic między projektami responsywnymi i dostosowanymi do urządzeń mobilnych lub tylko do urządzeń mobilnych jest treść lub właściwości przekazywane do przeglądarki. Dedykowana witryna mobilna często odzwierciedla tylko podzbiór treści znajdujących się w „normalnej” wersji witryny. Jest to jedna z toczących się debat pomiędzy tymi dwoma podejściami, w której zwolennicy witryn internetowych dostępnych wyłącznie na urządzeniach mobilnych często argumentują, że użytkownicy mobilni chcą mieć dostęp wyłącznie do treści, które są dla nich „ważne”.

    Problem z tym sposobem myślenia polega na tym, że to, co jest „ważne” dla użytkownika – dowolnego użytkownika – zmienia się w zależności od sytuacji. Ograniczanie dostępu do treści tylko ze względu na urządzenie, z którego korzystasz, to niezawodny sposób na złość i rozczarowanie tych, którzy nie pasują do idealnego scenariusza, jaki sobie wyobrażałeś, podejmując decyzję, co zachować, a co usunąć ze swojej witryny mobilnej.

    Zawsze wierzyliśmy, że wszyscy użytkownicy powinni mieć dostęp do całej zawartości witryny internetowej, ale chcieliśmy mieć pewność, że jest to faktycznie odpowiednie dla naszej witryny i naszych użytkowników. Aby określić właściwe podejście, zwróciliśmy się do naszych analityków i nie znaleźliśmy zauważalnej różnicy między rodzajem treści żądanych przez gości mobilnych i odwiedzających z urządzeń innych niż mobilne. Treści popularne wśród użytkowników komputerów stacjonarnych były równie popularne wśród użytkowników mobilnych.

    Ponadto usiedliśmy i rozmawialiśmy z niektórymi naszymi obecnymi klientami, którzy stanowią większość odbiorców naszej witryny, i zadaliśmy im kilka pytań, w tym: „Po jakie treści wchodzisz na naszą witrynę, gdy jesteś na komputerze ?” i: „A co z tabletem lub telefonem?” Wywiady były oczywiście bardziej szczegółowe, ale już widać, co nas zainteresowało. Po raz kolejny okazało się, że wyszukiwana treść była taka sama niezależnie od używanego urządzenia.

    Dane wyznaczają kierunek

    Fakty, które odkryliśmy podczas naszych badań, utwierdziły nas w przekonaniu, że podejście responsywne, zapewniające dostęp do tych samych treści na każdym urządzeniu, było właściwym wyborem dla naszej witryny. Badanie to pozwoliło nam również określić, jakie treści na naszej stronie internetowej w ogóle nie były odwiedzane. Kiedy znaleźliśmy strony, które nie były używane przez naszych odbiorców, wycinaliśmy je z mapy witryny. To samo zrobiono z najmniej popularnymi treściami w hierarchii treści i naszymi planami przeprojektowania.

    Rozpoczynając projekt od sprawdzenia treści i zbierając dane na temat tego, co jest ważne dla naszych odbiorców, a co nie, mogliśmy przejść do etapu projektowania z rozsądnym planem dotyczącym treści, które projekt naszej witryny powinien obsługiwać.

    Tworzenie projektu punktów skrajnych

    Słyszałem argumenty przemawiające za projektowaniem w przeglądarce i doceniam korzyści, jakie zapewnia to podejście. Po kilku próbach projektowania w przeglądarce odkryłem, że mój własny proces projektowania jest najłatwiejszy i najwygodniejszy do rozpoczęcia w Photoshopie. Absolutnie nie wierzę, że jest to właściwa decyzja dla wszystkich, ale w moim przypadku jest to prawda i dlatego rozpocząłem ten projekt.

    Do projektowania responsywnego stosuję metodę, którą nazywam „projektowaniem krawędzi”. Zaczynam od stworzenia desktopowej wersji strony. Opracowuję w nim układ typograficzny tekstów projektu, styl i ogólny kierunek wizualny - a także układ panoramicznego widoku strony internetowej. Kiedy już jestem zadowolony z tej wersji strony, pracuję na małym ekranie lub w wersji „mobilnej”, obierając ten sam kierunek wizualny, ale dostosowując układ do mniejszego ekranu. Na koniec tego procesu mam już wizualne przykłady dwóch bardzo różnych układów stron internetowych – wersje tego projektu dla największego i najmniejszego ekranu. Te dwa przykłady będą moim przewodnikiem podczas tworzenia front-endu strony internetowej.

    Najpierw mobilność

    Podejście „” do projektowania adaptacyjnego nie jest pomysłem nowym. Ta technika, w której najpierw tworzysz mobilny układ witryny internetowej, a następnie używasz zapytań o media w celu dopasowania i dodawania elementów do tego układu w miarę zwiększania się rozmiaru ekranu, jest rozważana już od jakiegoś czasu. najlepsza praktyka w responsywnym projektowaniu stron internetowych. Podejście to nie jest nowe, jest nadal bardzo ważne, a w połączeniu z naszym planem „zacznij od treści” pomogło nam skupić energię na jednym z niedociągnięć zidentyfikowanych w projektach adaptacyjnych – problemie przekazywania nieistotnych treści.

    Zaczynając od treści, zadbaliśmy o to, aby cała zawartość naszej witryny była istotna i odpowiednia dla wszystkich użytkowników, zarówno mobilnych, jak i nie tylko. Oznaczało to, że nie musieliśmy się martwić o przekazywanie dużej ilości treści w znacznikach, ale po prostu musieliśmy wizualnie to ukryć za pomocą za pomocą CSS. Podejście zorientowane na urządzenia mobilne oznaczało, że obrazy te będą udostępniane wyłącznie urządzeniom, dla których były przeznaczone. Na przykład nasz nowy projekt wymagał grafiki tła o fakturze akwareli.

    Obraz, dość duży, miał stać się częścią projektu tylko na dużych ekranach (od 660 px i większych). Ponieważ nasz CSS zaczyna się od projektu mobilnego, te duże grafiki nigdy nie są wysyłane na urządzenia z małymi ekranami, ponieważ zapytanie o media ładujące ten obraz jest wywoływane tylko przez duże ekrany. Zapytanie o media, które stosuje tło do element HTML, wygląda tak:

    Tylko ekran @media i (min. szerokość: 660 pikseli) ( html ( tło: url(/images/bg-watercolor.jpg) bez powtarzania, stałe na środku u góry; ) )

    Tylko ekran @media i (min. szerokość: 660 pikseli) (

    HTML (

    tło: url (/images/bg - akwarela. jpg) nie - powtórz stałe na środku u góry;

    Oprócz korzystania z tego obraz tła Zapytanie o media działające w rozdzielczości 660 pikseli wprowadza także szereg innych zmian w układzie witryny, przechodząc od układu uznawanego za układ małego ekranu do różnych wersji szerokoekranowych.

    Tworzenie dla projektu, a nie dla urządzeń

    Kiedy zaczęliśmy stosować projektowanie responsywne w naszych projektach internetowych, skupiliśmy się na znanych urządzeniach i rozmiarach ekranów, a nasze zapytania o media często je odzwierciedlały (iPhone'y, iPady - zarówno w orientacji pionowej, jak i poziomej - laptopy, komputery stacjonarne z panoramicznym ekranem itp. .d). Z biegiem czasu odkryto, że nie było to najlepsze podejście, ponieważ dotyczyło tylko tych urządzeń i rozmiarów ekranów, które są obecnie popularne, a nie tych, które mogą pojawić się w przyszłości. Jedną z największych zalet responsywnego projektowania stron internetowych jest jego przyszłościowy charakter. Dlatego, aby w pełni to wdrożyć mocne strony odeszliśmy od budowania urządzeń, zamiast pozwalać, aby projekt dyktował punkty kontrolne zapytania mediów.

    Metoda mobilna była podstawą CSS naszej witryny. Mając to na uwadze, uruchomiliśmy stronę w przeglądarce i przeskalowaliśmy ją do najmniejszego rozmiaru naszego układu (ustawiliśmy CSS na minimalną szerokość 320px). Stopniowo zwiększano rozmiar okna przeglądarki, aby zobaczyć reakcję znaczników. W miarę powiększania się okna zauważyliśmy, że oznaczenia zaczęły się deformować. To właśnie w tych momentach musieliśmy ustawić nowe zapytania o media, aby dostosować znaczniki.

    Aby zrozumieć tę metodę, stworzyliśmy grafikę i ustawiliśmy ją jako tło pulpitu. Pionowe linie miały szerokość 320 pikseli (nasz najmniejszy rozmiar), następnie były rozmieszczone co sto pikseli, zaczynając od 400, i służyły jako linie pomocnicze podczas skalowania okna przeglądarki w celu określenia, gdzie projekt zaczynał się psuć, a następnie użyliśmy tych przybliżone wartości pikseli w końcowych zapytaniach o media, które zostały dodane do CSS.

    Podejście polegające na dodawaniu zapytań o media w oparciu o wymagania projektowe, a nie znane rozmiary urządzeń, pozwala witrynie lepiej reagować na szeroki zakres rozmiarów ekranów. Jednak w rezultacie wypełnia plik CSS większą liczbą zapytań o media, niż w przypadku zastosowania punktów przerwania specyficznych dla urządzenia. Mimo że liczba zapytań o media jest większa, same zapytania są zwykle bardzo małe, ponieważ w każdym z nich wprowadza się bardzo niewiele zmian, zamiast tworzyć drastyczne zmiany, których normalnie wymagałyby zapytania o media oparte na urządzeniu.

    Jednym z obszarów naszej witryny, w którym nastąpił wyraźny wzrost zapytań mediów, jest nawigacja.

    Nawigacja adaptacyjna

    Nawigacja to jeden z najtrudniejszych aspektów projektowania responsywnego. Nasza strona internetowa składa się zasadniczo z czterech głównych obszarów nawigacji.

    1. Nawigacja główna;

    2. To, co nazywamy „nawigacją pomocniczą”, która łączy się z różnymi portalami i usługami, z których korzystają nasi klienci;

    3. Nawigacja stopką;

    4. Nawigacja po poszczególnych sekcjach prezentowana jest na podstronach serwisu (dla układów wielkoekranowych) w lewej kolumnie.

    Ponieważ nasz CSS jest dostosowany przede wszystkim do urządzeń mobilnych, jednym z pierwszych problemów było skonfigurowanie nawigacji dla układu małego ekranu. Oznacza to wyłączenie wyświetlania wszystkich sekcji nawigacyjnych z wyjątkiem nawigacji głównej.

    #helpNav, .subNav, nawigacja w stopce (wyświetlanie: brak; )

    #helpNav, .subNav, nawigacja stopki (

    wyświetlacz: brak;

    Co więcej, wspomniałem już, że naszym celem nie jest dostarczanie treści na urządzenia, a dopiero potem „wyłączanie”. Właściwie taki był cel, ale w naszej nawigacji musieliśmy się pogodzić z tym, jak to zrobić. Nie udało nam się znaleźć innego, prostego, ale obsługiwanego rozwiązania. Na szczęście treści, które dostarczamy i których nie udostępniamy, to tylko kilka wpisów, więc ich wpływ na pobieranie przez użytkowników jest minimalny.

    Nawigacja pomocnicza to jedyny obszar witryny, który według nas nie był odpowiedni dla większości użytkowników, ponieważ te linki i portale były przeznaczone wyłącznie dla użytkowników komputerów stacjonarnych. To mocne założenie i odważne stwierdzenie. Główną przyczyną tego były same portale, będące aplikacjami stron trzecich, na które nie mieliśmy wpływu i które nie były zoptymalizowane pod kątem urządzeń mobilnych z małymi ekranami, a oferowane przez nie usługi były dostosowane do obsługi klientów korporacyjnych z dużymi ekranami komputerów stacjonarnych.

    Ta sytuacja zainspirowała nas do podjęcia decyzji o usunięciu tej sekcji z wersji na mały ekran, a przez miesiące funkcjonowania witryny nie otrzymaliśmy żadnych komentarzy ani skarg od naszych baza użytkowników. Jeśli chodzi o pozostałe dwa obszary nawigacyjne, sekcję nawigacji podstron oraz sekcję stopki, treść ta prezentowana jest w ramach głównej nawigacji na urządzeniach z małym ekranem. Dlatego domyślnie wyłączamy te trzy obszary.

    Później, gdy rozmiar ekranu wzrośnie i przekroczymy punkt 660 pikseli, w którym zaczyna się pojawiać projekt szerszego ekranu, nadamy tym obszarom nawigacyjnym wymagane style.

    Oto kod CSS naszej dodatkowej nawigacji:

    #helpNav (wyświetlanie: blok; pozycja: bezwzględna; góra: 1px; prawa: 0px; szerokość: 100%; wyrównanie tekstu: prawa; ) #helpNav ul ( padding-left: 10px; ) #helpNav li ( display: inline; dopełnienie po prawej: 6 pikseli; dopełnienie po lewej stronie: 6 pikseli; kolor tła: #2f6a98; ) #helpNav a (rozmiar czcionki: 12 pikseli; dopełnienie: 0 6 pikseli; kolor: #FFF; promień obramowania: 20 pikseli; ) #helpNav a :hover (kolor tła: #f66606; )

    #helpNav (

    wyświetlacz: blok;

    pozycja: absolutna;

    góra: 1px;

    po prawej: 0 pikseli;

    szerokość: 100%;

    tekst - wyrównaj: do prawej;

    #helpNavul (

    dopełnienie - po lewej: 10px;

    #helpNavli (

    wyświetlacz: wbudowany;

    dopełnienie - po prawej: 6px;

    dopełnienie - po lewej: 6px;

    tło - kolor: #2f6a98;

    #helpNav a (

    rozmiar czcionki: 12px;

    dopełnienie: 0 6px;

    kolor: #FFF;

    obramowanie - promień: 20px;

    #helpNav a:hover (

    Oraz obszary nawigacji podstron:

    SubNav (wyświetlanie: blok; szerokość: 25%; pływak: lewy; ) .subNav h4 ( dopełnienie-dół: 8px ) .subNav ul ( styl listy: dysk; kolor: #c65204; dopełnienie: 0 0 20px 20px; ). subNav li ( dopełnienie-dół: 14px; ) .subNav a ( kolor: #186483; rozmiar czcionki: 21px; rodzina czcionek: "RokkittRegular", Times, "Times New Roman", serif; wysokość linii: 1; )

    SubNav(

    wyświetlacz: blok;

    szerokość: 25%;

    pływak: w lewo;

    SubNav h4 (

    dopełnienie - dół: 8px

    SubNavul(

    styl listy: dysk;

    kolor: #c65204;

    dopełnienie: 0 0 20px 20px;

    SubNavli (

    dopełnienie - dół: 14px;

    SubNav a (

    kolor: #186483;

    rozmiar czcionki: 21px;

    wysokość linii: 1;

    Na koniec nawigacja w stopce:

    stopka nav ( display: block; margines-góra: 40px; ) stopka nav ul ( styl listy: brak; ) stopka nav li ( padding-bottom: 24px; szerokość: 19%; padding: 0 5% 20px 0; float: lewy; ) .innerNav li ( szerokość: 100%; float: brak; dopełnienie-dolne: 4px; ) stopka nav a ( kolor: #575454; rozmiar czcionki: 12px; ) .innerNav a ( waga czcionki: normalna; )

    nawigacja stopki (

    wyświetlacz: blok;

    margines - górny: 40px;

    stopka nawigacyjna ul (

    styl listy: brak;

    navli stopki (

    dopełnienie - dół: 24px;

    szerokość: 19%;

    dopełnienie: 0 5% 20px 0;

    pływak: w lewo;

    WewnętrznaNavli(

    szerokość: 100%;

    pływak: brak;

    dopełnienie - dół: 4px;

    nawigacja stopki a (

    kolor: #575454;

    rozmiar czcionki: 12px;

    Wewnętrzna nawigacja a (

    waga czcionki: normalna;
    Piksele lub ems

    Zauważysz, że w naszych zapytaniach o media używaliśmy wartości pikseli. Dzięki pikselowym zapytaniom o media, podobnie jak inni programiści front-end, zaczęliśmy projektować responsywnie i przyjęliśmy tę praktykę jako część naszego przepływu pracy. Jednak w duchu „budowania lepiej responsywnej witryny internetowej” zwrócę uwagę na artykuł na temat zapytań o media wymiarowe przy użyciu emów, na który zwrócono nam uwagę podczas redagowania tej sekcji. Zasadniczo do poprawy wygląd site podczas zwiększania powiększenia, zdecydowanie zaleca się konwersję zapytań o media px na zapytania o media em, dzieląc wszystkie wartości pikseli przez rozmiar czcionki.

    Ten wspaniały artykuł zainspirował nas do ponownego przemyślenia naszego myślenia o zapytaniach o media opartych na pikselach i jest kolejnym przykładem tego, jak stale udoskonalamy podejście responsywne. Chociaż w tym konkretnym projekcie nie używaliśmy em w zapytaniach o media, obecnie z nimi eksperymentujemy i warto wspomnieć o tym podejściu.

    Główna nawigacja

    Nasza główna nawigacja jest prezentowana na szerokich ekranach jako poziomy rząd u góry układu. Na małych ekranach struktura głównej nawigacji zmienia się tak, że u góry każdej strony znajduje się duży przycisk Menu prowadzący do nawigacji u dołu strony. Aby to osiągnąć, do nagłówka dodaliśmy link z identyfikatorem menuLink i klasą tabButtonr, co stanowi niemal początek znacznika. Następnie na samym końcu znacznika umieściliśmy sekcję z identyfikatorem mainNav. Wewnątrz tej sekcji znajduje się nasza główna nawigacja, która jest po prostu nieuporządkowaną listą, w której znajduje się kilka innych nieuporządkowanych list dla menu sekcji podstrony. Posiadamy również kotwicę o identyfikatorze toTop, która pełni funkcję linku na górę strony.

    Kontynuując zasadę „najpierw mobilny”, stylizowaliśmy łącze menu u góry układu małego ekranu tak, aby wyglądało jak przycisk.

    #menuLink a ( float: prawy; margines: -56px 8px 0 0; ) .tabButton a ( kolor: #FFF; rodzina czcionek: "RokkittRegular", Times, "Times New Roman", serif; rozmiar czcionki: 20px; kolor tła: #45829b; dopełnienie: 10px 12px; promień obramowania: 10px; .tabButton a:hover (kolor tła: #f66606; )

    #menuLink a (

    pływak: prawo;

    margines: - 56px 8px 0 0;

    Przycisk Tab a (

    kolor: #FFF;

    czcionka - rodzina: "RokkittRegular" , Times , "Times New Roman" , serif ;

    rozmiar czcionki: 20px;

    tło - kolor: #45829b;

    dopełnienie: 10px 12px;

    obramowanie - promień: 10px;

    TabButton a: najedź (

    tło - kolor: #f66606;

    Nasze główne menu nawigacyjne jest ustawione na wyświetlanie na małym ekranie:

    #mainNav ( margines na górze: 30px; szerokość: 100%; ) #mainNav #toTop a ( float: prawo; margines: 0 8px 0 0; rozmiar czcionki: 20px; ) #mainNav nav ( góra dopełnienia: 80px; ) #mainNav ul (styl listy: brak; ) #mainNav li ( tło: #45829b; obramowanie-dół: 1px solid #abc7d2; dopełnienie: 4px 10px 4px 15px; ) #mainNav li:hover ( kolor tła: #f66606; ) #mainNav a (rozmiar czcionki: 24px; kolor: #FFF; rodzina czcionek: „RokkittRegular”, Times, „Times New Roman”, serif; )

    #mainNav (

    margines - górny: 30px;

    szerokość: 100%;

    #mainNav #toTop a (

    pływak: prawo;

    margines: 0 8px 0 0;

    rozmiar czcionki: 20px;

    #mainNav nawigacja (

    dopełnienie - góra: 80px;

    #mainNavul (

    styl listy: brak;

    #mainNavli (

    tło: #45829b;

    obramowanie - dół: 1px bryła #abc7d2;

    dopełnienie: 4px 10px 4px 15px;

    #mainNav li:hover (

    tło - kolor: #f66606;

    #mainNav a (

    rozmiar czcionki: 24px;

    kolor: #FFF;

    czcionka - rodzina: "RokkittRegular" , Times , "Times New Roman" , serif ;

    Nasze podmenu, które nie są wyświetlane w pierwotnej pozycji, można teraz wyświetlać zgodnie z wymaganiami strony. Każde z tych podmenu ma unikalny identyfikator, taki jak ServicesTab, a każda sekcja witryny internetowej ma klasę przypisaną do znacznika treści. Klasa sekcji „Firma” to CompanyPage. Używamy tej klasy do stylizacji całej sekcji witryny. Aby włączyć podmenu, używamy klasy sekcji podmenu, zgodnie z wymaganiami, gdy sekcja jest aktywowana.

    CompanyPage #companyTab ul, .newsPage #newsTab ul, .contactPage #contactTab ul, .servicesPage #servicesTab ul (wyświetl: blok; )

    Strona firmowa #firmaTab ul,

    AktualnościPage #newsTab ul,

    Strona kontaktowa #contactTab ul,

    UsługiStrona #usługiTab ul (

    wyświetlacz: blok;

    Zwiększamy się

    W miarę pojawiania się większych układów ekranów – ponownie z zapytaniami o media o rozdzielczości 660 pikseli i większej – radykalnie zmieniamy układ głównej nawigacji. W pierwszej kolejności wyłączamy wyświetlanie przycisków menuLink i toTop, gdyż nie są już potrzebne:

    #menuLink a, #toTop a (wyświetlanie: brak; )

    #menuLink a, #toTop a (

    wyświetlacz: brak;

    #mainNav ( pozycja: bezwzględna; góra: 92 piksele; margines: 18 pikseli 2% 0 2%; szerokość: 96%; wyrównanie tekstu: środek; ) #mainNav nav ( dopełnienie: 5 pikseli 0; górna granica: 1 pikseli bryła #bacfd7; obramowanie na dole: 1px stałe #bacfd7; ) #mainNav li (tło: brak; wyświetlacz: wbudowany; obramowanie na dole: 0; obramowanie po prawej: 1px stałe #bebebe; dopełnienie: 0 6px 0 8px; margines: 4px 0; ) #mainNav a (rozmiar czcionki: 16 pikseli; kolor: #45829b; ) #mainNav a:hover ( kolor: #f66606; )

    #mainNav (

    pozycja: absolutna;

    góra: 92px;

    margines: 18px 2% 0 2%;

    szerokość: 96%;

    tekst - wyrównaj: do środka;

    }

    #mainNav nawigacja (

    dopełnienie: 5px 0;

    obramowanie - góra: 1px solidna #bacfd7;

    obramowanie - dół: 1px solid #bacfd7;

    }

    #mainNavli (

    tło: brak;

    wyświetlacz: wbudowany;

    granica-dół: 0;

    rozmiar: 16 pikseli;

    kolor: #45829b;

    }

    #mainNav a:hover (

    kolor: #f66606;

    }

    Style te określają wygląd głównej nawigacji. Aby jednak dopasować go do projektu, a nie do urządzenia, będziemy musieli wprowadzić drobne poprawki w miarę zwiększania się rozmiaru ekranu. W sumie nasza główna czcionka nawigacyjna ma osiem różnych rozmiarów układu panoramicznego, zmieniających się w miarę poszerzania ekranu i zwiększania obszaru roboczego. Ustalenie, jak najlepiej wyświetlić tę nawigację w sposób, który sprawi, że będzie łatwa w użyciu i atrakcyjna wizualnie, było jedną z przeszkód, jakie napotkaliśmy podczas pracy nad responsywnym projektem.

    Postępujemy według tego schematu kilkukrotnie, ostatecznie zwiększając rozmiar czcionki do 27px, gdy witryna osiągnie swój cel. największy rozmiar. Dzięki temu nawigacja witryny jest dopasowana do projektu i ekranu używanego, aby jak najlepiej ją przeglądać.

    Uzyskanie pomocy z CMS

    Naszym preferowanym CMS jest ExpressionEngine i specyfika następnej części artykułu jest specyficzna dla tej platformy, ale podstawową ideę tego, co osiągnęliśmy dzięki ExpressionEngine, z pewnością można zastosować na innych popularnych platformach CMS.

    Jedną z największych przeszkód w podejściu adaptacyjnym jest to, że nie można zapewnić innego znacznika lub innego kodu źródłowego różne urządzenia. To jest przeszkoda, którą chcieliśmy pokonać przy pomocy naszego CMS-a. Eksperymentując i badając, natknęliśmy się na artykuł zatytułowany Going True Adaptive with ExpressionEngine. Korzystając z metodologii opisanej szczegółowo w tym artykule, mogliśmy użyć skryptu wykrywania urządzenia do ustawienia zmiennej w systemie mobilnym lub stacjonarnym. Następnie mogliśmy załadować znaczniki do naszej witryny w oparciu o to, które z tych zmiennych napotkaliśmy.

    Idąc dalej i stosując wykrywanie urządzeń, mogliśmy wprowadzić inne bardzo drobne zmiany, aby jeszcze bardziej poprawić komfort korzystania z urządzeń mobilnych. Dla nas było to coś w rodzaju stopniowego ulepszania, podczas którego zbudowaliśmy wysokiej jakości rozwiązanie, a następnie staraliśmy się je popchnąć do przodu, aby zapewnić nieco zoptymalizowane wrażenia. Koniecznie przeczytajcie podobną opinię Chrisa Coyiera na temat łączenia szablonów RWD i mobilnych, gdzie argumentuje on za mieszaniem i dopasowywaniem różnych technik w swojej strategii mobilnej.

    Zacznijmy od małych rzeczy

    Można oczywiście użyć tych zmiennych, aby dostarczyć zupełnie różne znaczniki i kod źródłowy na różne urządzenia, ale nasze początkowe podejście było nieco mniej ekstremalne. Ponieważ już zdecydowano, że dowolna wersja naszej witryny będzie miała dostęp do wszystkich treści, wstępnie złożyliśmy wniosek tę metodę zmienne, które w niewielkim stopniu regulują ilość dostarczanych treści. Na przykład na stronie głównej naszej witryny internetowej wyświetlamy zwiastuny wielu treści znajdujących się w witrynie. W sekcjach „Kultura” i „Wyróżnienie projektu” każdemu postowi towarzyszy zdjęcie.

    Obrazy są miłym dodatkiem, ale zdecydowanie nie kluczowym, dlatego w ogóle nie pokazujemy ich użytkownikom mobilnym. Powtarzam, nie mam na myśli tego, że używamy CSS do ich wyłączania, co i tak załaduje dane do przeglądarki; zamiast tego używamy ustawionych zmiennych, aby wykluczyć obrazy ze znaczników, jeśli nie powinny być wyświetlane.

    Składnia jest dość prosta. Po ustawieniu zmiennych - powyższy artykuł wyjaśnia, jak łatwo można to zrobić, dodając plik systemowy config.php to mały skrypt - możesz użyć tych zmiennych jako instrukcji if.

    img src = "(obrazek zwiastuna)" alt = "(tytuł)" / > { / if } { if global : site_version == "mobile" } { title } { / if } !}

    To jest składnia ExpressionEngine, ale możesz ją przeczytać i łatwo zobaczyć, co się dzieje. W przypadku napotkania pełnej zmiennej dostarczamy obraz zwiastuna z wpisu artykułu w bazie danych. Jeśli zamiast tego napotkamy zmienną mobile, wówczas podajemy tytuł tytułu artykułu.

    To samo podejście zastosowano do sekcji „Aktualności” i „Blog” na stronie głównej, wyświetlając trzy krótkie zwiastuny, jeśli napotkana została pełna zmienna, i tylko jeden, jeśli na urządzeniu mobilnym. Składnia wygląda następująco:( exp : kanał : wpisy kanał = „wiadomości” ( jeśli globalne : wersja_strony == „pełna” ) limit = „3” ( / if ) ( jeśli globalne : wersja_strony == „mobile”) limit = „1” ( / jeśli ) )

    Tutaj możesz zobaczyć, że uzyskujemy dostęp do kanału ExpressionEngine o nazwie news. Naszą zmienną wykorzystujemy do określenia, ile bieżących elementów będzie wyświetlanych z tego kanału za pomocą parametru limit.

    Pójdźmy o krok dalej

    W dziale Kultura serwisu publikujemy artykuły, którym często towarzyszy wiele zdjęć. W przeciwieństwie do obrazów zwiastunów na stronie głównej witryny, obrazy w artykułach same w sobie są niezbędne dla tej treści, ponieważ pomagają utrzymać lub zwiększyć atrakcyjność artykułu. Chociaż te obrazy są ważne, są również dość duże – każdy o szerokości 650 pikseli, a większość artykułów zawiera co najmniej trzy obrazy, czasem nawet dziesięć. Ponieważ urządzenia mobilne będą wyświetlać obrazy w mniej więcej połowie ich pierwotnego rozmiaru, ładowanie obrazów w pełnym rozmiarze stanie się dość ważne. Aby sobie z tym poradzić, spójrzmy jeszcze raz na definicję urządzenia i zmienne.

    Dla każdego artykułu tworzymy dwa zestawy obrazów: jeden pełnowymiarowy o szerokości 650 pikseli i drugi o prawie połowę mniejszej wielkości. Następnie używamy zmiennych w naszym artykule (ale najpierw musimy włączyć kod ExpressionEngine w szablonie naszej strony) i dodajemy znaczniki dla obu zestawów obrazów - ale tylko jeden z nich jest dostarczany do przeglądarki. Urządzenia mobilne odbierają małe obrazy, podczas gdy wszystkie inne otrzymują obrazy w pełnym rozmiarze.
    To samo podejście dotyczy dużej powierzchni reklamowej strony głównej. Te obracające się banery i obrazy reklamują ważne rzeczy, takie jak nadchodzące wydarzenia, nowe usługi i ogłoszenia lepiej niż reszta strony głównej. Billboard to kolejny przyjemny pod każdym względem element, który jest przeznaczony wyłącznie dla duże wyświetlacze. Ponownie używamy zmiennych, aby dostarczyć główną sekcję billboardu, a także obsługujący ją JavaScript, na odpowiednie urządzenie - co pozwala nam skutecznie wysyłać różne znaczniki do różne urządzenia i wyeliminowanie kolejnej przeszkody, którą zidentyfikowaliśmy na początku projektu.

    Korzystając z podejścia mobile-first i naszego CMS, jesteśmy w stanie dostarczyć nasze strona główna dla użytkowników komputerów stacjonarnych przy 738,3 KB i znacznie zmniejsza go do zaledwie 174,4 KB dla użytkowników mobilnych.

    Alternatywne plany

    Jedno z pytań, które zawsze mnie niepokoiło w związku z podejściem wyłącznie mobilnym i wykrywaniem urządzeń, brzmi: „Co się stanie, jeśli wykrywanie się nie powiedzie? Czy „normalna” wersja strony internetowej jest wyświetlana na urządzeniu mobilnym, co unieważnia starannie przygotowany projekt mobilny? Ta funkcja jest jednym z głównych powodów, dla których unikałem stosowanego w przeszłości rozwiązania przeznaczonego wyłącznie do urządzeń mobilnych do wykrywania urządzeń.

    W naszym adaptacyjnym przepływie pracy używamy wykrywania urządzeń, co daje nam świetne alternatywy na wypadek, gdyby z jakiegoś powodu wykrywanie urządzeń nie działało. Ponieważ stosujemy podejście adaptacyjne, nawet jeśli przeglądarka mobilna zostanie dostarczona pełna wersja, znaczniki będą pasować do tego urządzenia, ponieważ nasz CSS odpowiednio je dopasuje.

    Ponadto, ponieważ wszystko jest dostosowane przede wszystkim do urządzeń mobilnych, elementy nieprzeznaczone dla małych ekranów, takie jak wspomniana wcześniej ogromna grafika w tle, w ogóle nie są odzwierciedlane. Jedyną rzeczą, która nas zawiedzie, będzie to, co zrobiliśmy ze zmiennymi wygenerowanymi w celu zdefiniowania urządzenia. Jeśli wystąpi najgorszy scenariusz i wykrycie urządzenia nie powiedzie się wersja mobilna otrzyma po prostu kilka dodatkowych obrazów, znaczniki lub kod JavaScript. Ogólne wrażenie będzie nadal odpowiednie dla urządzenia mobilnego. Całkiem nieźle jak na „najgorszy scenariusz”.

    Postęp, nie idealny

    Kilka lat temu klient powiedział mi coś, co pamiętam do dziś. Mówiąc o swojej stronie internetowej powiedział:

    « Nie martw się o to, aby moja witryna była idealna. Po prostu pracuj nad jego udoskonaleniem. Jej ciągłe doskonalenie będzie krokiem we właściwym kierunku».

    Ten pomysł inspiruje mnie od lat i przypomina mi, żeby nie odrzucać najlepszego tylko dlatego, że nie jest idealne.

    Wiem to tę decyzję– nie jest doskonały i nie ma w tym nic złego, ponieważ stanowi ulepszenie naszego poprzedniego adaptacyjnego przepływu pracy. Pomogło nam to pokonać niektóre zidentyfikowane przeszkody i teraz możemy wprowadzić te ulepszenia do projektów, nad którymi pracujemy. Tak, nadal istnieje wiele zawiłości, na które nie możemy jeszcze skutecznie wpłynąć, takich jak dostarczanie wysokiej jakości obrazów na wyświetlacze HD, a także korzystanie z zapytań o media opartych na technologii em, o czym pisaliśmy wcześniej, ale w odniesieniu do tego i innych projektów idą we właściwym kierunku.

    Kto wie… Może pewnego dnia ktoś zbuduje „idealną stronę internetową”. W tej chwili skupiamy się na postępie, a nie na perfekcji, wprowadzając po drodze drobne ulepszenia i pracując nad zbudowaniem bardziej responsywnej strony internetowej.

    Jak myślisz?

    Jak budować responsywne strony internetowe? Czy używasz definicji charakterystyki czy definicji urządzenia? Kiedy zalecasz użycie jednego lub drugiego? Czekamy na Twoje komentarze!

    Adaptacyjny układ serwisu pozwala na automatyczne dopasowanie stron internetowych do ekranów tabletów i smartfonów. Ruch w Internecie mobilnym rośnie z roku na rok i aby skutecznie go obsłużyć, trzeba oferować użytkownikom responsywne strony internetowe z przyjaznym interfejsem.

    Wyszukiwarki korzystają z szeregu kryteriów oceny responsywności witryny podczas przeglądania na urządzeniach mobilnych. Google stara się ułatwić korzystanie z Internetu posiadaczom smartfonów i tabletów, oznaczając w mobilnych wynikach wyszukiwania strony przystosowane do urządzeń mobilnych specjalnym oznaczeniem mobile-Friendly. Yandex ma również algorytm, który preferuje witryny z wersją mobilną/responsywną dla użytkowników korzystających z wyszukiwania mobilnego.

    Wyświetlanie strony na urządzeniach mobilnych możesz sprawdzić w serwisach i.


    Ryż. 1. Wyniki wyszukiwania mobilnego Yandex i Google z dopiskiem o przyjazności serwisu dla urządzeń mobilnych Co to jest układ adaptacyjny?

    Układ adaptacyjny zakłada brak poziomego paska przewijania i skalowalnych obszarów przy oglądaniu na dowolnym urządzeniu, czytelny tekst i duże obszary na klikalne elementy. Korzystając z zapytań o media, możesz kontrolować układ i rozmieszczenie bloków na stronie, przestawiając szablon tak, aby dostosowywał się do różnych rozmiarów ekranów urządzeń.

    W artykule podano podstawowe techniki tworzenia responsywnej strony internetowej. W przypadku projektowania responsywnego szerokość głównego kontenera witryny jest ustawiana w % i może wynosić 100% szerokości okna przeglądarki lub mniej. Szerokość kolumn siatki jest również podawana w %. W projektowaniu responsywnym szerokość głównego kontenera i kolumn siatki jest ustalana za pomocą wartości w px.

    Technika adaptacyjnego układu płynnego omówiona w tej lekcji będzie doskonale działać na szablonie z dwiema kolumnami, dzięki czemu witryna będzie adaptacyjna i wygodna do przeglądania na urządzeniach mobilnych. Szablon zakłada inny układ głównej zawartości stron; w tej lekcji zostanie omówiony układ strony głównej.

    Układ strony głównej

    Strona składa się z trzech głównych bloków: nagłówka (nagłówka), kontenera zawierającego główną treść i pasek boczny oraz stopki (stopki). Przyjmijmy 768 i 480 pikseli jako punkty zwrotne w projektowaniu.

    W pierwszym momencie ukryjemy menu górne i przesuniemy pasek boczny pod kontener z postami. W drugim punkcie zmienimy położenie elementów nagłówka i anulujemy rozmieszczenie przycisków sieci społecznościowe w postach i anuluj zawijanie kolumn stopki strony.


    Ryż. 2. Przykład układu adaptacyjnego 1. Metatagi i sekcja

    1) Dodaj do sekcji niezbędne pliki— link do użytych czcionek, biblioteki jQuery, a także wtyczki bez prefiksów (aby nie pisać przedrostków przeglądarki dla właściwości):

    Adaptacyjny układ strony internetowej

    2. Nagłówek strony

    W nagłówku strony umieścimy następujące elementy kontenera:
    logo

    Wybór redaktora

    © 2024 ermake.ru - O naprawie komputerów PC - Portal informacyjny