Dawno, dawno, o godzinę drogi od miejsca, w którym obecnie mieszkam, pracował projektant stron internetowych, który kochał swoje kompozycje Photoshopa i układy o stałej szerokości. No cóż, nie chcę zepsuć zakończenia, ale tym projektantem byłem ja.
Potem, kiedy zajmowałem się własnym biznesem, społeczność twórców internetowych popadła w szał na tę nowatorską koncepcję zwaną "responsive design". Jak każdy młody, jasnowłosy, krzaczasty zawodowiec zrobiłby to, zbadałem. Ostatecznie, najnowsza, najnowsza rzecz powinna zawsze mieć co najmniej przelotne spojrzenie.
To, co odkryłem, jednak przeraziło mnie. Nazwano złego mózgowego Ethan Marcotte uwolnił a nikczemny plan aby projektanci stron internetowych pracowali ciężej! Jego książka pozostawiła ludzi wydzierających się i bredzących o tym, jak powinniśmy "rozważyć użytkowników mobilnych" i "sprawić, aby nasze strony działały na jak największej liczbie platform" ... pogan.
Oczywiście, opierałem się tak długo, jak tylko mogłem. Walczyłem ciężko i odważnie przeciwko tej fali zdrowego rozsądku i inteligentnego biznesu; ale wszystko na nic. Potem wróciłem do wymówek: "Ale nie mam żadnych urządzeń mobilnych do przetestowania!" I to, drogi czytelniku, chodzi o sedno. Okazuje się, że absolutnie jej nie potrzebujesz.
Z biegiem czasu opracowałem kilka podstawowych wskazówek, które pozwolą Ci, niezależnie od telefonu komórkowego lub tabletu, zaprojektować strony internetowe, które sprawią, że będzie wyglądać dobrze w większości przeglądarek mobilnych.
... budujesz coś większego niż mała, oparta na treści strona internetowa. Duże witryny i strony z aplikacjami powinny być zdecydowanie testowane na rzeczywistych platformach mobilnych. To znaczy, pewnie, prawdopodobnie mógłbyś to udawać, ale nie radziłbym tego.
Kiedy pracujesz z nieznanymi zmiennymi, najlepszą opcją jest utrzymywanie rzeczy głupich. Tak, powołuję się na prawie stukniętą regułę KISS, ponieważ działa.
Bez szafy pełnej smartfonów i tak dalej, musisz polegać na tym, co wiedzą inni. Na szczęście spędziliśmy dużo czasu i energii, badając możliwości popularnych przeglądarek mobilnych i ich wzajemne porównanie.
Dowiedz się, jaka jest Twoja grupa docelowa, a następnie dowiedz się, jakiego rodzaju przeglądarki używają. Jak zawsze, Google jest twoim przyjacielem. Następnie wszystko, co musisz zrobić, to zaprojektować statystyki.
Jeśli większość rynku docelowego na urządzenia mobilne korzysta z systemu Android / iOS w takiej czy innej formie, masz szczęście! Ich domyślne przeglądarki (i najpopularniejsze alternatywy, takie jak Firefox) są w większości nowoczesne. Zaawansowane techniki rozmieszczania, podstawowe efekty CSS3, jQuery ... te najprawdopodobniej całkiem dobrze się sprawdzą.
Jeśli Twoi docelowi odbiorcy korzystają z innych platform, musisz przeprowadzić bardziej szczegółowe badania na ich temat i dowiedzieć się, co mogą i czego nie mogą zrobić.
Co teraz robisz, jeśli nie masz zbyt wielu informacji o swoich użytkownikach? Spróbuj przynajmniej dowiedzieć się, gdzie są. Większość witryn ma przynajmniej ogólny region, z którego pochodzi większość użytkowników. Uzyskaj statystyki dla tego regionu.
W przeciwnym razie zaprojektuj najgorszy scenariusz.
Aby ułatwić ci pracę, znalazłem stronę internetową z dość szczegółowym porównaniem tego, co robią i nie obsługują bardziej popularne przeglądarki mobilne. Sprawdź to na mobilehtml5.org .
I oczywiście zawsze jest popularny caniuse.com
Wiem, że niektórzy projektanci przysięgają, tworząc niestandardowy kod specyficzny dla każdego projektu, ale kiedy pracujesz na ślepo, że tak powiem, wymyślanie koła nie jest praktyczną opcją. Ramy, które zostały już przetestowane na platformach mobilnych, zabierają wiele domysłów z tego procesu.
Zgadywanie jest złe. Unikaj tego.
Oczywiście nie testowałem osobiście żadnego z tych frameworków, więc musisz znaleźć taki, który wykona to, co chcesz, i zbadać, porównując go z możliwościami twojej planowanej platformy mobilnej. Mimo to możesz zacząć od kilku:
To te, które prawdopodobnie możesz nazwać szczytem twojej głowy. Charakteryzuje je ich sama złożoność. Wprowadzają układy układów, elementy interfejsu użytkownika i wtyczki jQuery w jeden potężny pakiet.
Najbardziej znane z nich są Bootstrap i Fundacja . Nie będę ich tutaj porównywał, więc jeśli potrzebujesz więcej informacji, przejdź do Google "Bootstrap vs. Foundation". Wszystko, co naprawdę musisz wiedzieć na razie, to fakt, że w każdym systemie każdy komponent został szeroko przetestowany przez dość dużą grupę fanów i jest przygotowany do pracy mobilnej.
Nie starają się zrobić dla ciebie wszystkiego, ale raczej dają ci wystarczająco dużo, aby zacząć. To sprawia, że dostosowywanie rzeczy jest nieco łatwiejsze, ale tworzenie i / lub stylizacja bardziej złożonych elementów interfejsu użytkownika zależy od Ciebie.
Ta kategoria obejmuje Szkielet , LESS Framework 4 i tak dalej…
To jest w rzeczywistości moja ulubiona kategoria. Wolę zacząć od pustego ekranu i systemu układu w gotowości, co pozwala mi stworzyć rodzaj strony, którą chcę bez konieczności nadpisywania dużej ilości CSS, lub próbować wyodrębnić określone części z dowolnej struktury.
Te struktury, w przeważającej części, nie wydają się zajmować układem lub strukturą strony. Zostały one zaprojektowane w celu zapewnienia łatwego sposobu dodawania fantazyjnych elementów interfejsu aplikacji zgodnych z urządzeniami mobilnymi (czytaj: widżety).
Testowałem tylko jeden, ale moje badania mówią, że trzy najlepsze (lub przynajmniej najbardziej popularne) ramy w tej kategorii są jQuery Mobile , KendoUI , i Wijmo .
Okazuje się, że dostępność nie jest tylko dla osób niewidomych lub całkowicie niewidomych. Wiele starszych przeglądarek mobilnych ma tak ograniczone możliwości, że przypomina przeglądanie ze wszystkimi CSS i Javascript wyłączonymi.
W tym przypadku najlepiej jest upewnić się, że twoja strona internetowa może być użyta w takich warunkach. Wyłącz wszystkie te ładne rzeczy i upewnij się, że użytkownicy mogą bez nich osiągnąć cele witryny.
Emulatory urządzeń zwykle nie są stuprocentowo dokładne, ale możesz przetestować najważniejsze rzeczy, takie jak układ i tak dalej. Błędy, które napotkałem, są często mniejszymi rzeczami, takimi jak nie renderowanie czcionek internetowych. Nie martw się, powinny działać dobrze na rzeczywistym sprzęcie.
Ale jakich emulatorów powinieneś używać?
Ten działa trochę wolniej, ale działa jak urok. Musisz pobrać cały zestaw deweloperski, ale warto mieć program, który naśladuje nie tylko domyślną przeglądarkę Androida, ale cały system operacyjny. Dodatkowo możesz przetestować swoją witrynę na różnych wirtualnych "urządzeniach".
Inny który działa w zasadzie jak w reklamie. Możesz go pobrać, wybrać swoje "urządzenie" i gotowe.
Firefox ma kilka opcji testowania zawartości mobilnej. Pierwszym z nich jest prosty emulator, który naśladuje funkcjonalność renderowania mobilnego projektu Firefox Mozilli, kryptonim: Fennec.
Nie jest to zbyt skomplikowane, ponieważ zapewnia proste, skalowalne okno, więc możesz samodzielnie ustawić rozmiar ekranu, który chcesz przetestować.
The druga opcja to dodatek do wersji Firefox na komputer. Nazwany Symulator Firefox OS, zapewnia całą platformę do zabawy, nie tylko przeglądarkę (podobnie jak Android SDK).
Nie byłem w stanie przetestować ten emulator , ponieważ wymaga zainstalowania bardzo dużego zestawu SDK, a instalacja została podsłuchana, przynajmniej dla mnie. Mimo to jest to możliwe do przetestowania według własnego uznania.
Blackberry oferuje wiele symulatory dla BB10. Być może to ja, ale nie miałem wiele sukcesów w prowadzeniu żadnego z nich. Chciałbym usłyszeć od każdego, kto sprawi, że będą działać.
Ostatni, ale na pewno nie najmniej, Apple zapewnia darmowy symulator iOS które można wykorzystać do testowania urządzeń Apple w ramach Xcode. Niestety, ponieważ jest częścią Xcode, to tylko Mac.
Jeśli masz budżet (lub możesz przetestować bardzo szybko, ponieważ ich czas jest ograniczony czasowo), nie możesz zrobić zbyt daleko BrowserStack . Pozwoli Ci to przetestować na wielu komputerach i ogromnej liczbie telefonów komórkowych. Nie tak responsywne jak prawdziwe, pokażą ci problemy z takimi układami.
Przeglądarki mobilne mają tendencję do zabawy z ustawieniami zoomu, a więc moje doświadczenie było. Jeśli chcesz, aby Twoja witryna wyglądała tak, jak robi się, gdy zmniejszysz okno przeglądarki do rozmiarów mobilnych, użyj tego pięknego fragmentu kodu HTML w nagłówku dokumentu:
Pozwólcie, że to powtórzę: minimalizm kołysze się na telefonach komórkowych. Minimalistyczna estetyka dopasowuje się do mniejszych rozmiarów ekranu z mniejszą ilością zmian i regulacji, oszczędzając mi wiele czasu. Może niektórym z was nie przeszkadza, ale nie mogę tego wystarczająco podkreślić.
Ten kolaż informacji to tylko wierzchołek góry lodowej, oczywiście, i nie ma żadnego związku z faktycznym testowaniem twoich stron na prawdziwym sprzęcie mobilnym, ale powinien pozwolić ci zacząć, i mam nadzieję, że zarabiasz wystarczająco dużo z mobilnego projektu, by pozwolić sobie na to urządzenie tak bogato zasługują.
Wyróżniony obraz / miniatura, obraz urządzenia mobilnego przez Shutterstock.