Jedno zadanie sprawia, że ​​profesjonaliści z sieci rozpraszają uwagę bardziej niż prawie wszyscy: testowanie, czy ich projekt działa równie dobrze w wielu przeglądarkach i na różnych urządzeniach.

Lista przeglądarek i platform, które można zweryfikować, ciągle się wydłuża, a jako projektanci, nasi klienci stają się coraz krótsi; IE6 będzie prawdopodobnie występować w koszmarach przez wiele lat!

Jednak coraz ważniejsza staje się praca w coraz szerszym zakresie sytuacji.

W tym artykule opisano najczęstsze problemy, które pojawiają się podczas testowania z "zwykłymi podejrzanymi" i wyjaśniono, dlaczego wkrótce może zajść potrzeba zmiany taktyki. Twoja cała perspektywa testowania zgodności może się zmienić.

Fantastyczna piątka

Podczas wojen z przeglądarkami projektanci musieli cierpieć przez ciągłe kłótnie między Internet Explorerem i jego rywalem (niektóre rzeczy nigdy się nie zmieniają). Przełom nastąpił, gdy nowsze przeglądarki zobowiązały się do wspierania standardów internetowych, co stopniowo podważyło dominację Internet Explorera na rynku przeglądarek.

Czasy się zmieniają. Rosnąca popularność urządzeń do przeglądania na urządzeniach mobilnych i nowych silników renderujących sprawiła, że ​​projektanci postanowili ograniczyć potrzebę testowania na każdym urządzeniu, jakie można sobie wyobrazić.

Projektanci teraz uciekają się do grania w grę liczbową, zazwyczaj testując swoją pracę w pięciu lub sześciu najpopularniejszych przeglądarkach, a następnie rejestrując resztę. Choć wydaje się to łatwą poprawką, przedstawia kilka problemów, ponieważ w przeciwieństwie do druku, jeden rozmiar z pewnością nie pasuje do wszystkich.

Udział w rynku przeglądarki. Źródło: aplikacje sieciowe.

Chociaż rynek jest zdominowany przez pięć przeglądarek, projektanci nie powinni lekceważyć pomarańczowego plastra "Inni". Użytkownicy w innych przeglądarkach nadal muszą być zakwaterowani.

Kluczem do dokładnego zaprezentowania uroczego projektu twojej stronie dla użytkownika końcowego jest silnik renderujący. Można założyć, że gdybyś przetestował stronę w najpopularniejszej przeglądarce dla każdego z silników renderujących Trident, Gecko, Commit i Presto, mógłbyś bezpiecznie zignorować inne urządzenia, które dzielą te same silniki, ponieważ pokryłbyś ogromną większość użytkowników .

Generalnie zgadzam się, że testowanie w tych przeglądarkach samo wychwyci wszelkie problemy, które są widoczne dla użytkownika, ale testowanie w szerszym zakresie przeglądarek, urządzeń i systemów ma swoje zalety. Warto przeanalizować potencjalne problemy i zdecydować, czy konieczne są dalsze testy, aby zapewnić odwiedzającym jak najlepsze wrażenia.

Ikony Internet Explorer, Firefox, Chrome, Safari i Opera.

Trident (Internet Explorer), Gecko (Firefox), Webkit (Chrome i Safari) i Presto (Opera).


Beyond the Breaking Point

Obecnie oczywistą kwestią jest zależność od urządzenia (lub wtyczki), która wpływa na przeglądarki nie tylko na poziomie przeglądarki, ale także na poziomie renderowania. Wierni Apple są świadomi problemów związanych z iPhonem i iPadem z Flash - a ponieważ Adobe i Apple zaczęli się nawzajem buntować, wciąż o tym słyszymy.

Podczas gdy Flash rzeczywiście sam sobie radzi z ogólnym renderowaniem treści, testowanie tylko w najpopularniejszych przeglądarkach niekoniecznie musi powodować problemy. Podczas gdy główne technologie (zarówno otwarte, jak i zamknięte) są zagrożone wykluczeniem, rozszerzenie bazy testowej może mieć kluczowe znaczenie.

Strona internetowa z obsługą Flash.

Flash wyświetla się poza przeglądarką, ale nie każda przeglądarka może korzystać z tej technologii.

Kolejną kwestią są wersje silników renderujących. Posiadanie najnowszej i najlepszej przeglądarki jest kluczem do korzystania z nowych technologii, jednak dalsze korzystanie ze starszych wersji (zwłaszcza różnych wcieleń przeglądarki Internet Explorer) wymaga, abyśmy ograniczali się nie tylko do najnowszych wersji renderera, ale także do tych, które mogą nadal funkcjonować w środowiskach, w których aktualizacja oprogramowania byłaby nieodpowiednia lub niemożliwa.

Nawet w trybie zgodności testowanie w obecnych przeglądarkach nie uwzględnia starych wersji przeglądarek, które korzystają z wcześniejszych wersji silników renderujących.

Internet Explorer 6.0

Internet Explorer 6.0 wykorzystuje starszą i bardziej szkodliwą wersję mechanizmu renderującego przeglądarki pulpitu Trident.

Problemy z renderowaniem mogą również wystąpić, jeśli występują różnice między urządzeniem i platformą. Nie trzeba dodawać, że testowanie witryny pod kątem telefonów komórkowych i kieszonkowych surferów może doprowadzić Cię na skraj szaleństwa, szczególnie biorąc pod uwagę, jak różne mogą się pojawić wszystkie rzeczy.

Projektowanie takiego małego ekranu może być dość trudne, zwłaszcza że konwencje na urządzenia mobilne są wciąż w powijakach. Ale ten problem dotyczy również platform komputerowych. Często zdarza się, że problemy z wyświetlaniem pojawiają się między wersjami Firefoksa w wersjach dla systemu Windows i Mac - w rzeczywistości niepokojąca jest myśl.

Mobilna wersja A List Apart.

List Apart dba o to, by różnice w renderowaniu były oddzielne dla urządzeń mobilnych.

Innym kluczowym komponentem, który może różnić się od przeglądarki do przeglądarki, jest silnik JavaScript. Na początku jedynym pytaniem na temat JavaScript było, czy go używać.

Obecnie przeglądarki z tym samym mechanizmem renderowania wizualnego często mają różne silniki JavaScript (np. Chrome i Safari to doskonały przykład). Używanie wielu przeglądarek do testowania zdolności twojej strony do renderowania tych wspaniałych skryptów jQuery jest równie ważne, zwłaszcza jeśli twój projekt ma dużo funkcjonalnej interaktywności.

Witryna Chrome Experiments.

Eksperymenty Chrome pokazują wydajność renderowania przeglądarki Google.

I na koniec temat, na który niektórzy ludzie wiwatują, a inni wzdychają: dostępność! W oczach wielu ludzi dostępność i sposób, w jaki przeglądarka renderuje witrynę, nie są ze sobą powiązane. Warto jednak zauważyć, że użytkownicy odwiedzający Twoją witrynę mogą zmusić ich do korzystania z określonej przeglądarki, która obsługuje czytnik ekranu komputera lub jego urządzenie ułatwiające dostęp.

W takich przypadkach przeglądarki mniejszości mogą zostać całkowicie pominięte. Pamiętaj, że twój projekt powinien również działać dla tych osób, których potrzeby są często zapomniane.

Przeglądarki Opera wbudowane w czytnik ekranu.

Opera może mieć niewielki udział w rynku, ale jej opcje głosowe mogą być ratunkiem dla osób o specjalnych potrzebach.


Kuracja długoterminowa

Biorąc pod uwagę wszystkie potrzeby związane z dostępnością, różne silniki JavaScript, problemy między różnymi platformami, różnice w wyświetlaniu, zależności technologiczne, takie jak Flash i rewolucja mobilna, można usprawiedliwiać się z powodu niezadowolenia z poziomu potrzebnych testów. Mimo to spójrz na potrzeby grupy docelowej, aby przekonać się, czy rozszerzenie bieżącej pracy testowej może przynieść długoterminowe wyniki.

Poświęć trochę czasu na komunikację z odwiedzającymi. Być może możesz przeprowadzić ankietę z pytaniem, które przeglądarki i urządzenia są włączone, a następnie sprawdzić statystyki, aby sprawdzić, czy wspomnieli o sposobach poprawy lub rozszerzenia interakcji w Twojej witrynie.

Może się okazać, że potrzebujesz mobilnego projektu, lub może jest entuzjazm dla aplikacji na iPhone'a, lub możesz po prostu uzyskać więcej raportów o błędach dla mniejszościowych przeglądarek. Zachęcanie do przekazywania informacji zwrotnych jest najważniejsze w ewolucyjnym procesie projektowania.

Pulpit statystyk przeglądarki Piwik.

Pakiety statystyczne dają jasny obraz tego, które urządzenia zostały użyte do odwiedzenia Twojej witryny.

Docieranie do klientów na coraz szerszą skalę jest czymś, co każdy właściciel witryny powinien wziąć pod uwagę w kontekście użyteczności. Dobra komunikacja tworzy emocjonalny związek z odwiedzającymi; czują, że ich zainteresowanie jest sprawdzane, a czas jest dobrze wykorzystany, a to może zmienić kliknięcie w klienta.

Pozostając na szczycie rzeczy na etapie testowania, wykracza to poza naprawę wad wizualnych. Szersze pole testowe może prowadzić do nowych funkcji i unikalnych sposobów poruszania się po stronie internetowej. Jedną nagrodą może być głębsza więź ze stałymi gośćmi i fanami Twojej witryny.

Włącz silnik

To, jak rozszerzyć proces testowania, wykracza poza zakres tego artykułu, ale najprostszym sposobem poprawy wyglądu witryny i wygody użytkownika jest zapewnienie, że wszystko wygląda dobrze na ekranie.

Poniżej znajduje się lista wielu przeglądarek, zarówno mobilnych, jak i stacjonarnych, które mogą pomóc w poszerzeniu horyzontu podczas testowania. Podczas gdy niektóre spowodują, że Twój projekt będzie taki sam, te przeglądarki powinny pomóc Ci ustalić skalę testów, które musisz wykonać.

Więcej przeglądarek bez wątpienia zostanie utworzonych (a niektóre mogą już istnieć), więc pomyśl też o przyszłości.

Silniki renderowania często spotykane na urządzeniach platformowych.

Zarówno platformy stacjonarne, jak i mobilne mają szeroki zakres silników renderujących.

Chociaż dołączono przeglądarki zbudowane z Trident, Gecko, Webkit i Presto (wraz z ich starszymi wersjami Tasman, Mozilla i KHTML), inne silniki renderowania z bazą użytkowników nie zostały tutaj uwzględnione z powodu bardzo ograniczonego zakresu urządzeń, które je obsługują.

Urządzenia i przeglądarki z unikatowymi silnikami renderującymi (tekstowymi, wizualnymi i mobilnymi), które nie zostały tutaj wymienione, mogą być testowane indywidualnie i potencjalnie mogą zwiększyć zgodność projektu.

Polecam przeglądarki podświetlone poniżej dla każdej platformy. Z wyjątkiem Maca, który korzysta z Tasmana, wszystkie te używają mechanizmu renderującego Trident:

Przeglądarki korzystające z mechanizmu renderującego Trident lub Tasman.


Wszystkie te zastosowania silnika renderującego pulpitu Gecko (wcześniej Mozilla):

Przeglądarki korzystające z mechanizmu renderowania Gecko.


Wszystkie te używają mechanizmu renderującego Webkit (lub widelca KHTML w przypadku Konquerora):

Przeglądarki korzystające z mechanizmu renderowania Webkit.


Ponieważ Presto jest autorską platformą, nic dziwnego, że ogranicza się do projektów Opera:

Przeglądarki korzystające z mechanizmu renderowania Presto.

Nad tęczą

Być może twoja strona jest całkowicie wolna od błędów. Być może wygląda świetnie w każdej sytuacji. Ale jeśli weźmiesz pod uwagę samą skalę wymagań dotyczących kompatybilności na różnych platformach, to już nie ta wielka piątka daje dokładny obraz użytkowników sieci jako całości.

Jeśli zabierzecie tylko jedną rzecz z tego artykułu, zrozumcie, że warto poświęcić więcej czasu na analizę potrzeb odwiedzających, ponieważ pomoże to w ponownej ocenie fazy testów, aby objąć szerszy zakres scenariuszy.

Poświęć dodatkowy czas na przeglądanie przeglądarek dla każdego silnika renderującego i nie zapominaj o następujących: innych systemach operacyjnych, które mogą mieć różnice; inne rodzaje urządzeń (takich jak telefony komórkowe), które mogą wyglądać zupełnie inaczej; unikalne rendery w JavaScript, które mają wpływ na szybkość; starsze wersje przeglądarek internetowych; i ogólnie szerszy zakres, jaki jest potrzebny, gdy kod ewoluuje i zmienia samą sieć.

Podsumowanie

W świecie, w którym ludzie są gotowi zainwestować czas, wysiłek i pieniądze w to, aby ich strony internetowe były jak najbardziej przyjazne dzięki obsłudze wyszukiwarek i mediów społecznościowych, zapewniając, że twój projekt działa (zamiast skupiać się na perfekcji pikseli - pamiętaj, że sieć nie jest wydrukować) może być bardziej wartościowy dla setek lub tysięcy osób, które uzyskują dostęp do Twojej witryny na różne sposoby.

To z pewnością może oznaczać różnicę między przyciąganiem klientów a frustracją użytkowników "Cześć i żegnaj".


Napisany wyłącznie dla WDD przez Alexander Dawson

W jaki sposób testujesz swoje starannie wykonane projekty, aby działały elastycznie? Czy planujesz zoptymalizować przebieg pracy testowania, aby był mniej restrykcyjny? Czy Twoja witryna może zachęcić odwiedzających do wzmianki o jej projekcie?