Galeria sław projektowania stron internetowych

My, projektanci stron internetowych, zawsze byliśmy sprytni. Jeśli istnieje określony wygląd lub funkcjonalność, którą musimy osiągnąć, zwykle możemy złożyć razem rozwiązanie. Dzieje się tak nawet wtedy, gdy nie ma określonego standardu lub narzędzia, które nas prowadzi. W tym miejscu w grę wchodzi koncepcja hackowania stron internetowych.

Hacki to kreatywne, często okrężne metody, dzięki którym strona internetowa wygląda lub działa w określony sposób. Czasami niosą ze sobą negatywną konotację. Na przykład układy oparte na tabelach HTML zostały słusznie wyszydzone jako niedostępne dla czytników ekranu. Ale nie wszystkie hacki są złe.

Rzeczywiście, są one wdrażane z potrzeby przesuwania granic tego, co jest możliwe. Sieć zawsze miała swoje ograniczenia, a projektanci używali hacków, aby je obejść.

Rzućmy więc okiem na niektóre z najbardziej przydatnych i rozpowszechnionych hacków do projektowania stron internetowych z minionych lat, zainspirowanych dyskusją na Twitterze z innymi projektantami. Choć niekoniecznie trzymają się standardów, które mamy dzisiaj, byli w swoim czasie salą sław.

Układy: tabele HTML i elementy zmiennoprzecinkowe CSS

Nasze pierwsze selekcje trafią razem do tej wirtualnej galerii sław. Chociaż ich szczytowe użycie różniło się o wiele lat, zasadniczo służyły do ​​osiągnięcia tego samego: układów wielokolumnowych.

Tabele HTML

Zanim CSS pojawił się na scenie, wczesne strony internetowe były sprawą jednokolumnową. Nie było dopełniania ani marginesów, ani standardowego sposobu umieszczania treści w poziomych kolumnach. To znaczy, dopóki jakaś przedsiębiorcza dusza nie zdecydowała się użyć do tego celu tabel.

Oczywiście tabele HTML miały przechowywać dane tabelaryczne, a nie układy stron. Ale w rzeczywistości były skutecznym sposobem na wykonanie pracy, dopóki nie pojawił się CSS.

Pływające CSS

Tabele miały wiele wad – m.in. wspomniane wcześniej kwestie dostępności. Powoli renderowały się również w przeglądarce. Kiedy więc wprowadzono pływaki CSS, było to postrzegane jako zmiana gry dla projektantów stron internetowych.

Pływaki nie były znacznikami HTML, więc były bardziej dostępne i mogły zwiększyć wydajność. Nagle układy wielokolumnowe były możliwe dzięki CSS i mogły lepiej dostosować się do takich rzeczy, jak rozmiar ekranu.

Jednak spławiki nie doprowadziły nas do ziemi obiecanej. Jeśli chciałeś, aby kolumny miały równą wysokość, musiał zostać zaimplementowany dodatkowy hack Clearfix.

Każdy z tych przedmiotów jest nadal bardzo przydatny, gdy jest używany zgodnie z ich pierwotnym przeznaczeniem. Ale jeśli chodzi o układy, ich dni na szczęście się skończyły.

Odstępy między elementami: spacje niełamliwe (   ) i Spacer.gif

Projektanci stron internetowych zorientowani na szczegóły często szukali sposobów na rozmieszczenie elementów do dokładnego piksela. Znowu nie było to takie łatwe w tamtych czasach. W ten sposób spacja nierozdzielająca ( ) i spacer.gif zostały wykorzystane do uzyskania większej kontroli nad odstępami.

Spacja nieprzerywalna (   )

Chcesz wbić element w poziomie, ale bez centrowania lub wyrównywania go do prawej? Wystarczy dodać kilka nierozdzielających spacji.

Nie była to jednak taka ścisła nauka. Rzeczywisty rozmiar każdej przestrzeni zależał od rodziny czcionek i rozmiaru czcionki. Nawet biorąc pod uwagę te różnice, ten hack może nadal wyglądać inaczej w zależności od przeglądarki i systemu operacyjnego, z którego korzystał odwiedzający.

Spacer.gif

Ten bardziej dokładny hack dotyczący odstępów pojawił się poprzez utworzenie przezroczystego obrazu .GIF (często nazywanego spacer.gif ) i umieszczenie go na stronie. Fajnym aspektem było to, że ponieważ jest to przezroczysty obraz, projektanci mogli ustawić wysokość i szerokość na dowolną ilość pikseli bez negatywnego wpływu na wygląd lub wydajność.

CSS sprawił, że oba te hacki stały się przestarzałe. Ale czy nie wiesz, że edytor WordPress Gutenberg ma blok Spacer, który robi prawie to samo? To tylko pokazuje, że potrzeba wciąż istnieje.

Typografia: tekst oparty na obrazach

Potrzeba tego była dość prosta. Wczesna sieć była zasadniczo ograniczona do czcionek zainstalowanych w systemie użytkownika. Oczywiście projektanci nie mieli możliwości poznania wszystkich czcionek, do których użytkownicy mieli dostęp – poza podstawowymi, takimi jak Times New Roman, Georgia, Arial i Helvetica.

Wraz z tym pojawiła się okropna decyzja o tworzeniu obrazów pełnych tekstu w Photoshopie. Chociaż pozwalało to na użycie praktycznie dowolnej czcionki, odbywało się to kosztem dostępności. Ponadto użycie obrazu w miejsce tagu nagłówka HTML również wyrzuciło semantykę strony – potencjalnie szkodliwe dla SEO.

Przyklejone nagłówki i nawigacja: ramki

Ramki HTML prawdopodobnie wyprzedziły swój czas, ponieważ wiele zadań, do których je kiedyś używaliśmy, jest teraz wykonywanych za pomocą CSS i JavaScript.

Koncepcja była dość prosta. Każda pojedyncza „ramka” w układzie była w rzeczywistości osobną stroną. Był to łatwy sposób na oddzielenie nagłówka, stopki lub nawigacji od reszty treści witryny. Na przykład dokonanie zmiany w nawigacji oznaczało pojedynczą zmianę w jednym pliku. Jest to podobne do tego, co robiły dołączenia po stronie serwera, tylko z kilkoma innymi korzyściami projektowymi.

Najważniejszym z nich była umiejętność tworzenia „lepkich” nagłówków i nawigacji. Gdy użytkownik przewijał zawartość, nadal mógł łatwo poruszać się po witrynie.

Ta technika spełniła swoje zadanie, ale była daleka od ideału. Nie był zbyt elastyczny pod względem różnych rozmiarów ekranu i nie był zbyt dobry dla SEO. Pojawiły się również pewne obawy dotyczące bezpieczeństwa związane z potencjalnym ładowaniem ramki z niecnego adresu URL.

Optymalizacja obrazu: obrazy w plasterkach

W czasach przed powszechną dostępnością łączy szerokopasmowych optymalizacja obrazu była kluczowa. Nawet obraz o wielkości 50 KB może obciążać stronę przy wolnym połączeniu.

Ciekawe rozwiązanie dostarczył gigant oprogramowania Adobe. Dzięki oprogramowaniu ImageReady projektanci mogli podzielić pojedynczy obraz na dowolną liczbę mniejszych kawałków. Każdy pojedynczy wycinek można następnie zoptymalizować, teoretycznie przyspieszając ich pobranie.

Ale to nie wszystko. Oprogramowanie może następnie wyeksportować plasterki do tabeli HTML. Stamtąd możesz skopiować i wkleić ten kod HTML na swoją stronę.

Problem z tą techniką był dwojaki. Po pierwsze, renderowanie układu tabeli może zająć więcej czasu – potencjalnie zabijając jakąkolwiek osiągniętą optymalizację. Po drugie, utrzymanie go może być naprawdę trudne. Na przykład dodanie elementu nawigacyjnego do dużej grafiki nagłówka może wymagać rozpoczęcia od początku z zupełnie nowym zestawem wycinków – co wymaga zmiany szablonu.

Podczas gdy optymalizacja obrazu jest nadal ważna, łącze szerokopasmowe na szczęście daje nam trochę więcej swobody przy dużych plikach. Mimo to nowoczesne wersje programu Photoshop nadal oferują dzielenie obrazów i eksport HTML.

Umieszczanie Internet Explorera: <!--[if IE]>

Do dziś nie jest niczym niezwykłym, że projektanci stron internetowych (w tym ja) przeklinają zawzięte istnienie Internet Explorera. Jego dziedzictwo żyje, po części dlatego, że niektórzy użytkownicy po prostu z niego nie zrezygnują.

Z tego powodu zawsze wydaje się, że omijamy wiele zastrzeżonych dziwactw i ograniczeń IE. Przez wiele lat obejmowało to używanie komentarza warunkowego do wykrywania użytkowników IE i obsługiwania alternatywnych stylów.

Był nieco uniwersalny, ponieważ można było zastosować style do wszystkich wersji IE <!--[if IE]> , lub kierować je na starsze wersje <!--[if lt IE 11]> . Możesz również użyć go w odwrotnej kolejności, szukając wersji większych lub równych konkretnemu wydaniu <!--[if gte IE 10]> .

Microsoft musiał mieć trochę sympatii dla projektantów stron internetowych, ponieważ umożliwił działanie tych warunkowych komentarzy w IE. Na szczęście ich nowa przeglądarka Edge nie wymaga takich bzdur.

Wskazówki dotyczące projektowania stron internetowych, które warto zapamiętać

Hacki w naszej galerii sław z pewnością nie były jedynymi, których używali projektanci stron internetowych. Istnieje niezliczona liczba obejść, które pomogły nam dokonać pozornie niemożliwego. Ale to, co wyróżnia tę listę, to ich masowe wykorzystanie, a w niektórych przypadkach wsparcie ze strony dużych korporacji.

I chyba najlepszą rzeczą, jaką możemy o nich powiedzieć, jest to, że działały. Wykorzystaliśmy je jako środek do celu. Jasne, mogły one zostać połączone przez strzępienie taśmy klejącej, ale uzyskanie tego szlachetnego projektu do rzeczywistego renderowania w przeglądarce wydawało się prawdziwym osiągnięciem.

Jeszcze lepsze jest to, że pomogli utorować drogę do tego, czym jest dzisiaj sieć. Większość pozycji na tej liście została zastąpiona przez standardy HTML i CSS, z których wszyscy korzystają.