Przeczytałem wiele źródeł, które twierdzą, że pierwszy projekt mobilny jest prawie niezbędny, czego nie mogę zaprzeczyć, że ma oczywiste zalety, takie jak szybsze czasy ładowania dla telefonów komórkowych, które generalnie mają niższe prędkości pobierania przez 3G i 4G.

Ale co, jeśli budujesz mniejszą witrynę internetową z bardzo małą liczbą zdjęć.

Chciałbym usłyszeć o opiniach innych na ten temat i czy ludzie myślą, że są wyjątki. Osobiście wolę najpierw zaprojektować / kodować na pulpicie, a następnie zmniejszyć. Ale czy to naprawdę tak ważne, aby najpierw zaprojektować / napisać kod dla telefonu komórkowego, czy też wyniki końcowe nie są wystarczająco znaczące, aby przeszkadzać w pewnych sytuacjach?

Z czysto projektowego punktu widzenia sensowne jest rozpoczęcie od wersji mobilnej.

Najtrudniejszą częścią procesu projektowania jest zawsze przycinanie, nigdy nie dodawanie. Tak więc im mniejsza jest powierzchnia ekranu, tym więcej musisz pomyśleć o tym, co jest ważne w twoim projekcie, jakie informacje naprawdę potrzebujesz pokazać. Zmusisz się również do zastanowienia się nad dostępnością, ponieważ tekst i inne elementy będą mniejsze.

Po zaprojektowaniu „lekkiej” wersji możesz przystąpić do dodawania dodatkowych elementów, takich jak elementy projektu i powiększania, w miarę zdobywania nieruchomości. Jak zauważył @Django, nigdy nie należy pomijać funkcji z projektu.

Przykładem dla Twojej witryny może być menu. Zdecydowałeś się opuścić pozycje menu i zastąpić je ikoną hamburgera, co jest standardową procedurą. Ale jeśli elementy menu są jedną z najważniejszych rzeczy na stronie, nie chcesz ukrywać ich za kliknięciem.

sidenote: Czerwono-niebieski na twojej stronie jest naprawdę zły dla niewidomych, rozważ zmianę tego.

Najpierw mobilna jest najlepsza praktyka - to nie jest prawo, a jeśli zrozumiesz, dlaczego „powinieneś” z niej korzystać, możesz podjąć świadomą decyzję, dlaczego nie chcesz jej używać w konkretnym projekcie, i to w porządku.

Warto zauważyć, że „najpierw mobilny” odnosi się do projektu / UX i samej kompilacji. Komórka pierwszy projekt nie przyspieszy witryny dla użytkowników, ale pierwszy mobilny rozwój będzie .

Spójrzmy na oba.

Mobilny przede wszystkim w projektowaniu

Pierwszy projekt mobilny polega na pomocy w ograniczeniu funkcjonalności i użyteczności do potrzeb . Myślenie jest następujące: zamiast projektować najpierw komputer stacjonarny, a potem starać się umieścić wszystkie funkcje, które wymyśliłeś, na ekranie o rozdzielczości 320 pikseli i zachować dobry UX, zacznij od urządzenia mobilnego ...

Jeśli UX jest zaśmiecony lub uszkodzony przez wszystkie funkcje na telefonie komórkowym, to powinno sprawić, że zapytasz, czy użytkownik naprawdę ich potrzebuje. Czy możesz pozbyć się niektórych z nich i faktycznie poprawić wrażenia? Jeśli tak, to dlaczego je masz? Może mimo wszystko nie są niezbędne, a może nie powinny znajdować się na Twojej stronie.

Teoria polega na tym, że pomaga ci to zredukować swoje funkcje do absolutnie potrzebnych funkcji , a następnie możesz zwiększyć to do pięknego pulpitu.

Mobile pierwszy w rozwoju

Z telefonu pierwszej rozwoju , chodzi o pisanie w wersji mobilnej, a potem wprowadzenie wyjątków w przypadku większych ekranów. Powód, dla którego jest to lepsze (i szybsze) dla użytkowników mobilnych, jest następujący: masz dwa obrazy na stronę internetową, duży na komputer i mniejszy na telefon. Jeśli najpierw kodujesz pulpit, Twój CSS będzie wyglądał mniej więcej tak:

.test2 {
    background-image:url('images/verylargeimage.png');
}

// If on a smaller screen...
@media all and (max-width: 600px) {
    .test2 { 
      background-image:url('images/smallimage.png');
    }
}

Oznacza to, że użytkownik mobilny faktycznie pobiera dane large.jpgzanim CSS je wyłączy. To jest bardzo złe.

Mobile najpierw wygląda tak:

.test2 {
     background-image:url('images/smallimage.png');
}

// If on a larger screen
@media all and (min-width: 600px) {
    .test2 { 
        background-image:url('images/verylargeimage.png');
    }
}

Użytkownik mobilny nigdy nie pobiera plików large.jpg.

Mam nadzieję, że dzięki temu wszystko będzie trochę jaśniejsze, jeśli wcześniej ich nie rozumiałeś!

Geneza „najpierw mobilna”

Idea „najpierw mobilna” w odniesieniu do Responsive Design pochodzi z czasów, gdy przeglądarki urządzeń mobilnych były znacznie mniej wydajne niż te, które można znaleźć na urządzeniach stacjonarnych. Wiele z nich w ogóle nie obsługiwało zapytań o media, więc pomysł zbudowania fantazyjnego projektu pulpitu, a następnie trzymania się stylów za pomocą zapytań o media dla wąskiego obszaru wyświetlania spada na jego twarz.

Brak obsługi zapytań o media jest w rzeczywistości pierwszym zapytaniem o media.

- Bryan Rieger

Czy mobilność jest nadal najważniejsza?

Pomimo faktu, że przeglądarki urządzeń mobilnych dogoniły ich odpowiedniki na komputery, „najpierw mobilne” jest nadal najbardziej logicznym sposobem pisania swoich stylów.

Wolę myśleć w kategoriach „unikania cofania wcześniejszych deklaracji stylu”. Podejście addytywne, zamiast zapisywania stylów, a następnie zastępowania ich później, prawie zawsze prowadzi do bardziej zwartego arkusza stylów. Style odpowiednie dla większości / wszystkich urządzeń powinny znajdować się poza zapytaniami o media, podczas gdy style, które są istotne tylko dla określonej rzutni, powinny znajdować się za zapytaniem o media.

Porównaj podejście „na pulpicie”:

.column {
    float: left;
    width: 50%;
}

@media all and (max-width: 50em) {
    .column {
        float: none;
        width: auto;
    }
}

Podejście „najpierw mobilne”:

@media all and (min-width: 50em) {
    .column {
        float: left;
        width: 50%;
    }
}

Wyniki są takie same, ale później jest bardziej zwarty. Przykładowe style bezwstydnie skopiowane z 7 nawyków bardzo skutecznych zapytań medialnych Brada Frosta .

Istnieje kilka rzadkich wyjątków, w których „najpierw na pulpicie” jest bardziej odpowiednie niż na odwrót. Najbardziej godne uwagi jest to, gdy robisz rzeczy takie jak responsywne tabele. Szersze rzutnie będą wymagać domyślnych stylów dla tabel, ale wąska rzutnia będzie chciała zastąpić to wszystko, aby zawartość mogła być ułożona pionowo.

Nie niszcz swoich arkuszy stylów

Jedną rzeczą, której absolutnie nie powinieneś robić, jest rozbicie swoich responsywnych stylów na pojedyncze pliki CSS i użycie atrybutu media na elemencie link. Ma to niepożądaną konsekwencję pobierania przez UA wszystkich połączonych arkuszy stylów (tzn. Nie ma w tym usprawnienia szybkości).

<!-- this is bad, don't do this -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

Więc kod powinien być najpierw mobilny, ale co z podejściem do projektu?

Uważam, że to nie ma znaczenia. Układy wszystkich rzutni związanych z projektem muszą być wykonane (może to obejmować zaledwie 2 lub nawet 5, jeśli uwzględnisz jakiekolwiek drobne punkty przerwania, których możesz potrzebować!), Kolejność nie ma w końcu znaczenia. Wielu projektantów nie ma dyscypliny, aby zacząć od układu pulpitu i przekonuje się, że rozpoczęcie od układu mobilnego jest łatwiejsze.

Jeśli chcesz zacząć od układu pulpitu, musisz unikać pokusy wypełnienia całej tej wspaniałej białej przestrzeni bałaganem, który nie poprawia zawartości tej strony. Czy naprawdę potrzebujesz tego zdjęcia w rozdzielczości 800 x 600 z uśmiechniętą kobietą trzymającą telefon? Pobranie niepotrzebnego puchu kosztuje tylko użytkownika mobilnego i jest tylko wizualną rozrywką dla użytkownika komputera, aby pominąć.

Przetestowałem twoją stronę www.cosmosdesign.co.nz na różnych rozmiarach ekranów i działa dobrze na wszystkich ekranach. Jeśli chodzi o twoje pytanie dotyczące pierwszego projektu mobilnego, chciałbym powiedzieć, że twoje podejście do projektowania musi uwzględniać twoją grupę docelową wraz z wieloma innymi czynnikami, takimi jak obrazy, treść itp. Jeśli twoja grupa docelowa będzie korzystać z tej witryny głównie na komputerach stacjonarnych / laptopach, możesz z pewnością kontynuuj swoje podejście, ale jeśli jest to strona internetowa, która będzie najczęściej wyświetlana na telefonach i kartach, musisz przemyśleć swoją strategię jeszcze raz.

Możesz również rozważyć zaprojektowanie strony responsywnej za pomocą Bootstrap (dostępnych jest również wiele innych opcji), a także zoptymalizować swoje zdjęcia pod kątem witryny mobilnej, co również skróci czas ładowania.

Według mnie głównym powodem, dla którego najpierw należy korzystać z urządzeń mobilnych, jest unikanie sytuacji, w której witryna mobilna nie robi wszystkiego, co robi wersja na komputery. Istnieje mnóstwo stron internetowych, w których muszę poprosić o wersję na komputer w telefonie, aby coś zrobić, ponieważ chociaż telefon może to zrobić, ich wersja mobilna nie. To mnie wkurza.

To powiedziawszy, myślę, że komputer stacjonarny jest w porządku, o ile później nie oszczędzasz na funkcjach mobilnych, jak większość firm.

Również wiele ram projektowych czyni to bardzo prostym. Użyłem lite projektowania materiałów, aby stworzyć dość złożoną aplikację na komputery. Naprawdę musiałem tylko zmienić kilka rzeczy, kiedy zaktualizowałem ją do wersji mobilnej - większość pracy została już wykonana.