Nasze strony to coś więcej, niż tylko elegancki wygląd. Posiadamy wiedzę zdobytą podczas studiów informatycznych oraz kilkunastoleniego doświadczenia w programowaniu. Strony tworzone przez webfaces.pl są realizowane z naciskiem na optymalizację techniczną. Tutaj dowiesz się, dlaczego to jest ważne.
Dlaczego my
Pobierz treść artykułu w formacie .pdf
Pobierz treść artykułu w formacie .odf
Szybkie wczytywanie strony
Wiemy, że wolne wczytywanie strony w łagodnym przypadku tylko irytuje odwiedzających, w najgorszym skutkuje całkowitym zaniechaniem odwiedzin. Na każdym z etapów tworzenia strony przygotowujemy ją z myślą jej szybkiego wczytywania.
Najczęściej wykorzystywane przez nas techniki:
Optymalizacja kodu
- wykorzystanie odpowiednich struktur HTML w połączeniu z CSS
- pozwala na znaczne (wielokrotne!) zmniejszenie objętości strony, co przyspiesza jej wczytywanie
- ekspercka znajomość CSS-a
- bardzo dobra znajomość CSS umożliwia nam wykorzystanie go w sposób optymalny, np. poprzez ograniczenie liczby reguł i klas do minimum
- umieszczenie kodu CSS, JavaScript w osobnych plikach
- technika ta pozwala na szybkie wczytywanie plików w czasie chodzenia po witrynie, poprzez współpracę z pamięcią podręczną.
- kompresja kodu
- (na życzenie klienta) wykorzystujemy narzędzia kompresji kodu, zmiejszające rozmiary plików
Optymalizacja grafiki
- grafiki przygotowujemy w optymalnych formatach
- jpg, png, gif... Rozszerzenie ma znaczenie. Wiemy, w jaki sposób przeformatować obrazek, aby łączył w sobie jakoś z małą objętością.
- wykorzystanie techniki wtapiania grafiki w tło
- połączenie obrazka z kolorystycznie dopasowanym tłem pozwala na symulację dużego obszaru wizualnego z zaledwie kilkudziesięciobajtowym plikiem graficznym.
- wykorzystanie właściwości repeat-x, repeat-y do symulacji dużych obszarów tła
- dzięki zastosowaniu tej wiedzy strona może sprawiać wrażenie na bogato wypełnioną grafiką, a jednocześnie będzie wczytywana szybko.
- odpowiedni rozmiar obrazków
- dbamy o niewielki rozmiar grafik, nie skalujemy obrazków za pomocą HTML-a.
Optymalizacja witryn opartych o CMS
- piszemy własne motywy, od podstaw
- pozwala to na uzyskanie pełnej konroli nad generowanym kodem
- dbamy o minimalną liczbę odwołań do bazy
- w ten sposób skracamy wykonywanie operacji najbardziej czasochłonnych
- stosujemy cache'owanie po stronie serwera
- dzięki temu strony wyświetlane są tak szybko, jak pisane bezpośrednio w HTML-u/CSS-ie
Strona przyjazna wyszukiwarkom (Google i innym)
Nasze strony piszemy tak, aby ułatwiać wyszukiwarkom (Google i innym) znalezienie i zindeksowanie witryny.
- tworzymy strony o przejrzystej hierarchii i z odnośnikami tekstowymi
- w treści strony uwzględniamy słowa kluczowe - słowa wpisywane w wyszukiwarkach przez potencjalnych odwiedzających
- do wyświetlania ważnych nazw, elementów zawartości i odnośników używamy zwykle tekstu, a nie grafiki
- pamiętamy o odpowiednim wykorzystaniu atrybutu alt dla treści obrazkowych
- szczególną uwagę kładziemy na odpowiednie wypełnienie elementu title, znaczników meta oraz odpowiednie wykorzystanie nagłówków (h1, h2, ...)
- używamy odpowiednich nazw plików (dla html, obrazów, ...)
- dla większych witryn tworzymy mapę strony
- dbamy o poprawność kodu HTML, CSS
- naszym klientom wyjaśniamy, czym jest PageRank i co sami mogą zrobić w zakresie lepszego pozycjonowania (rozpowszechnianie linków do strony, umieszczenie strony w katalogach sieciowych itd.)
Poprawne wyświetlanie w różnych przeglądarkach
Ta sama strona może być różnie wyświetlana, w zależności od użytej przeglądarki:
- Firefox
- Internet Explorer
- Chrome
- Safari
- Opera
Dokonujemy wszelkich starań, aby minimalizować te rozbieżności:
- testujemy witrynę w tak wielu przeglądarkach (i ich wersjach) jak to możliwe
- testowanie przeprowadzamy na bieżąco, podczas kolejnych etapów pracy nad stroną.
- używamy prawidłowego i przejrzystego języka (X)HTML i CSS
- wykorzystujemy narzędzia W3C Markup oraz W3C CSS Validation Service do sprawdzania poprawności naszych kodów. Strona napisana bez błędów składniowych, to najlepszy sposób na zapewnienie prawidłowego wyglądu witryny we wszystkich przeglądarkach.
- posiadamy własną bazę najczęstszych błędów przeglądarek
- jesteśmy świadomi, że bezbłędnie napisana strona nie gwarantuje jej poprawnego wyświetlania. Starsze (choć nie tylko) wersje przeglądarek posiadają błędy, które to uniemożliwiają. Znamy najczęstsze z nich, dzięki czemu szybko poprawiamy niezgodności w wyświetlaniu witryny.
Zgodność ze standardami sieciowymi
Projektując stronę, zawsze mamy na uwadze standardy sieciowe zdefiniowane przez W3C. Dzięki temu:
- wszystkie podstrony posiadają spójny wygląd (zdefiniowany w oddzielnych arkuszach stylu)
- poprawia się czytelność stron, które stają się łatwiejsze do utrzymania w przyszłości
- poprawia się pozycja stron w rankingach silników wyszukiwawczych (wyszukiwarkach) - łatwiej indeksuje się strony zawierające czystą treść (semantyczna struktura HTML), niż strony HTML zawierające dodatkowo definicje stylów
- poprzez oddzielenie struktury semantycznej HTML od prezentacji, stronę można łatwo dostosować do różnych urządzeń takich jak: telefony komórkowe, tablety internetowe, smartfony, czytniki ekranu
Zapewnienie dostępności
Dostęp do informacji i technologii komunikacyjnych jest jednym z praw człowieka. Dlatego staramy się, aby tworzone przez nas strony były dostępne dla osób z różnymi możliwościami. Chcemy przez to ułatwić życie w społeczeństwie osobm starszym, ludziom niedowidzącym lub niewidzącym, mieszańcom terenów wiejskich bądź krajów rozwijających się. Kilka przykładów to:
- zastępczy tekst dla grafiki (alternative text)
- wszystkie funkcje strony dostępne przez klawiaturę
- transkrypcja w przypadku zasobów audio
Użyteczność i funkcjonalność
Aby strona była użyteczna i funkcjonalna, wystarczy trzymać się kliku prostych zasad. Dzięki nim użytkownicy strony będą zadowoleni. Będą wiedzieć, że uzyskali to, czego oczekiwali. Znajdą szybko pożądane informacje. Polecą stronę innym. A w przyszłości chętnie na tę stronę powrócą.
- w układzie strony zachowujemy hierarchię ważności - treści ważne są u góry, mniej ważne - na dole; ważne są w pewien sposób wyróżnione
- dużo uwagi poświęcamy przejrzystemu projektowi nawigacji
- uwzględniamy przyzwyczajenia użytkowników np. dotyczące położenia logo (górny, lewy narożnik ekranu), oznaczeń odnośników (wyróżnione innym kolorem bądź podkreśleniem), ogólnego układu strony (nagłówek, pasek boczny, stopka)
- stosujemy czytelne czcionki, unikamy grafik z napisami na rzecz napisów (umożliwia to skopiowanie), stosujemy poprawną interpunkcję
- na każdej podstronie użytkownik widzi, w którym miejscu się znajduje i wie, jak przejść do strony głównej
- treść zawsze otwiera się w tym samym oknie
- nie blokujemy przycisku "wstecz" w przeglądarce
- unikamy Flasha; zawsze testujemy, czy strona spełnia swoje funkcje przy wyłączonej obsłudze JavaScript
- testujemy strony w przeglądarkach tekstowych (links/lynx)
- na życzenie klienta uwzględniamy w projekcie możliwość istnienia wielu wersji językowych strony