Glob z kartkami - logo

webfaces.pl

Agnieszka Bury - strony www na WordPressie

Dlaczego my

Ikona pdfPobierz treść artykułu w formacie .pdf Ikona odfPobierz treść artykułu w formacie .odf

Strony realizowane przeze mnie to coś więcej, niż tylko elegancki wygląd. Posiadam 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.

Szybkie wczytywanie strony

Wiem, ż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 przygotowuję 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

piszemę własne motywy, od podstaw
pozwala to na uzyskanie pełnej konroli nad generowanym kodem
dbam o minimalną liczbę odwołań do bazy
w ten sposób skracamy wykonywanie operacji najbardziej czasochłonnych
stosuję 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)

Strony piszę tak, aby ułatwiać wyszukiwarkom (Google i innym) znalezienie i zindeksowanie witryny.

  • tworzę strony o przejrzystej hierarchii i z odnośnikami tekstowymi
  • w treści strony uwzględniam 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żywam zwykle tekstu, a nie grafiki
  • pamiętam o odpowiednim wykorzystaniu atrybutu alt dla treści obrazkowych
  • szczególną uwagę kładę na odpowiednie wypełnienie elementu title, znaczników meta oraz odpowiednie wykorzystanie nagłówków (h1, h2, ...)
  • używam odpowiednich nazw plików (dla html, obrazów, ...)
  • dla większych witryn tworzymy mapę strony
  • dbamyo poprawność kodu HTML, CSS
  • klientom wyjaśniam, 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

Dokonam wszelkich starań, aby minimalizować te rozbieżności:

testuję witrynę w tak wielu przeglądarkach (i ich wersjach) jak to możliwe
testowanie przeprowadzam na bieżąco, podczas kolejnych etapów pracy nad stroną.
używam prawidłowego i przejrzystego języka (X)HTML i CSS
wykorzystuję 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.
posiadam własną bazę najczęstszych błędów przeglądarek
jestem świadom, ż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 mam 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