Czy naprawdę konieczne jest najpierw zaprogramowanie strony mobilnej?

10

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?

ccc
źródło
2
Nie jestem pewien, jakie jest twoje pytanie. Czy brzmi „Czy powinienem utworzyć witrynę mobilną”, czy też „czy najpierw powinienem utworzyć witrynę mobilną”? Pierwsza z nich brzmi „Tak - 50% trafień w sieci to urządzenia mobilne”, druga to „Ty decydujesz, wolę komputer, a potem zmieniasz treść”. Na marginesie, ta strona działa bardzo dobrze na urządzeniach mobilnych. Sugeruję zwinięcie menu - zajmuje ono cały ekran telefonu komórkowego.
Metasomatism
@Metasomatism Pytanie dotyczy wydajności kodu i sposobu wczytywania go na różne urządzenia. Mogę wypróbować ten link, jeśli nie zyska on tutaj przyczepności (nie chcę podwójnie pisać). Zmodyfikowałem nawigację dla urządzeń mobilnych, jeśli masz na myśli białą nawigację składaną nad zawartością, to jest intencja. :)
ccc
1
Mój najnowszy projekt zacząłem od podejścia „najpierw mobilnego” i myślę, że zrobię to dla każdego kolejnego projektu, w którym pożądana jest witryna mobilna. Ograniczając się, lepiej mogę skupić się na najważniejszych rzeczach, a nie myśleć o jakichś wymyślnych rzeczach. Uważam też, że łatwiej jest skalować w górę (ponieważ mam niewiele rzeczy do umieszczenia na dużym obszarze) w porównaniu do skalowania w dół (wiele rzeczy do umieszczenia na małym obszarze). Ale myślę, że może to być różne dla różnych osób.
ROAL,
3
Myślę, że pomocne byłoby przeczytanie mojego responsywnego podkładu
Zach Saucier,
1
Mobile najpierw polega na skupieniu się na najważniejszych rzeczach, zarówno w programowaniu w celu dostarczania zasobów, jak i projektowaniu prezentacji treści. W związku z tym jest to świetny sposób na rozpoczęcie projektowania responsywnej strony internetowej, ponieważ ograniczasz się do minimum elementów treści i wyborów układu i jesteś zmuszony do ustalania priorytetów.
kontur

Odpowiedzi:

24

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.

PieBie
źródło
Jestem także ślepy na kolory: p ... To ten kolor pasuje do stylu, którego szukam. Każda z 4 stron będzie kolorowana inaczej. Jeśli uważasz, że to zły pomysł, daj mi znać. :)
ccc
Nie ma za co @MarcusPorter i dziękuję za zaakceptowanie mojej odpowiedzi. Czasami pomaga zapytać innych, co myślą, jeśli masz wątpliwości;) I z pewnością nie jest złym pomysłem nadanie każdej stronie własnego koloru. Chociaż jestem ciekawy, jak decydujesz się na kolory lub kombinacje kolorów, jeśli jesteś
ślepy
3
Co? Nie. Nie powinieneś budować dwóch witryn. To głupie i nie było takiej drogi od 2005 roku. Budujesz jedną stronę, która dostosowuje się do środowiska. Nazywa się responsive webdesign
PieBie
1
Nie miałem na myśli funkcji, miałem na myśli falbanki, wypełnienia, może nawet obrazy. Oczywiście nigdy nie ma funkcji. Dobrym przykładem może być menu: tak naprawdę nie dodajesz menu, gdy strona się powiększa, ale zastępujesz przycisk pełnym menu.
PieBie
2
@piebie: W rzeczywistości strony o dużej zawartości ponownie zaczęły tworzyć osobne infrastruktury mobilne. Sprawdź na przykład projekt AMP.
David Mulder,
11

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ś!

Django Reinhardt
źródło
2
W rzeczywistości jest to tylko częściowo słuszne. Według wyników testu mobilnego Tima Kadlec z 2012 r. Dotyczących pobierania obrazów , tylko bardzo stare przeglądarki mobilne (Android 3.0, Blackberry 6, Safari 4 itp.) Pobiorą oba obrazy. Każda inna przeglądarka mobilna pobierze tylko odpowiedni obraz.
cimmanon,
@cimmanon Masz absolutną rację. Dzięki za powiadomienie mnie o tym. Zamieniłem to na przykład, który zamiast tego nie przeszedł testów Kadlec.
Django Reinhardt
Według linku właściwym sposobem będzie background-imageindywidualne ustawienie na komputer stacjonarny i mobilny.
hlcs
4

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ąć.

Cimmanon
źródło
„To nie ma aż tak wielkiego znaczenia” - oczywiście, że ma znaczenie. I na tym właśnie powinno polegać to pytanie. Kodowanie / programowanie jest tutaj generalnie nie na temat, więc nie jest tak naprawdę istotne (jest oczywiście istotne, ale nie powinno być głównym punktem)
Cai,
1
Czy potrafisz dostrzec różnicę między responsywnym projektem, w którym układ mobilny został zaprojektowany przed układem pulpitu? Fraza „najpierw mobilna” pochodzi od kodowania w responsywnym designie. Nie ma znaczenia, który układ zostanie zaprojektowany jako pierwszy, o ile oba zostaną wykonane.
cimmanon,
Inni mówili już o tym w odpowiedziach. Zaprojektowanie strony internetowej na komputer pełnej funkcji, a następnie zabranie rzeczy, ponieważ nie pasują lub nie działają na urządzeniach mobilnych, nie jest łatwe, a często będziesz mieć niezręczne elementy / funkcje nie na miejscu. Projektowanie najpierw na urządzenia mobilne, a następnie dodawanie funkcji na komputery jest łatwe. To takie proste. Ale to naprawdę ma znaczenie. Może nie do osoby kodującej stronę, ale robi to projektantowi.
Cai,
Nie odpowiedziałeś na moje pytanie: czy możesz powiedzieć, które zostało zrobione pierwsze? Fakt, że wiele osób źle projektuje układy pulpitu i umieszcza wiele śmieci na swoich stronach, nie ma nic wspólnego z tym, który układ powinien zostać zaprojektowany jako pierwszy. Obie muszą być zrobione, więc to, co należy zrobić najpierw, będzie bardziej zależeć od indywidualnych preferencji / umiejętności projektanta.
cimmanon,
Mówię tylko, że wpływa to na proces projektowania. Weźmy dwa scenariusze: 1. Projektujesz responsywną witrynę, biorąc pod uwagę urządzenia mobilne i komputery stacjonarne oraz wszystko pomiędzy nimi. Świetny. 2. Projektujesz witrynę przeznaczoną tylko na komputery, aż do ostatecznego zatwierdzenia, a Twój klient mówi „och, ja też muszę pracować na urządzeniach mobilnych ...”, a on wciąż chce funkcji X, Y i Z, które by nie działały mobilne, ale nie wziąłeś tego pod uwagę, kiedy projektowałeś na komputery ... Który scenariusz jest łatwiejszy?
Cai,
2

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.

Wazza
źródło
Masz rację, jeśli chodzi o odbiorców docelowych. Biorąc pod uwagę, że moją grupą docelową są małe firmy itp. Wyobrażam sobie, że moja grupa demograficzna obejrzałaby moją witrynę na komputerach stacjonarnych. Jakiś czas temu wypróbowałem bootstrap jakiś czas temu i nie wyglądało na to, że to dla mnie, dzięki za sugestię.
ccc
Tak, wiem, że frameworki takie jak Bootstrap zwiększają kod i wysiłek, ale na pewno warto go wysilić, jeśli potrzebujesz pomocy, możesz mnie zapytać.
wazza
Mam wrażenie, że wciąż uczę się css, walczyłem z tą jedną stroną. W przyszłości będę musiał spróbować ponownie na jednym z moich klientów.
ccc
Więc jeśli jesteś pewien swojej grupy docelowej, możesz bardzo dobrze przejść do tego podejścia, ale chciałbym cię ostrzec, że czasami jest to trudne (jeśli nie używasz frameworka), aby zmniejszyć skalę na mniejsze ekrany później, gdy masz dużo treści i funkcjonalności na twojej stronie. Wszystkiego najlepszego.
wazza
Tak, masz rację. Również PieBie udzielił dobrych rad na ten temat, jeśli chcesz przeczytać.
ccc
-2

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.

Mateusz
źródło
Czasami funkcje są celowo pomijane na urządzeniach mobilnych, ponieważ nie są w stanie poradzić sobie z ich intensywnością
Zach Saucier
jasne, jeśli to problem, to problem. Ale prawie nigdy nie stanowi to problemu, ponieważ współczesne telefony są teraz dość potężnymi komputerami.
Matthew
W wielu witrynach naprawdę zdarza się, że muszę pobrać wersję komputerową, ponieważ wersja mobilna nawet nie sortuje elementów na liście, ukrywa kartę dyskusji lub niektóre wygodne filtrowanie nie działa. To naprawdę wygląda bardziej jak „zrobić pulpit, a następnie - szybko, szybko, końce osi czasu wczoraj - port do telefonu.
H22
Jeśli masz naprawdę ciężką witrynę, do tego stopnia, że ​​staje się ona aplikacją internetową, możesz lepiej przenieść ją do aplikacji, zamiast próbować wkuwać wszystko w witrynie mobilnej. Na przykład Facebook podzielił swoją witrynę na komputery stacjonarne na dwie aplikacje: Facebook i Messenger.
PieBie
Chociaż Facebook jest całkiem dobry, udostępniając wszystko w aplikacji mobilnej - nadal możesz tam wysyłać wiadomości bez Messengera.
Matthew