Witam
W poprzednim wpisie wspominałem o innej metodzie na “ogarnięcie” zdjęć, ale nie tylko także układu, treści i chociażby struktury strony. Jest to “stara” metoda, która była stosowana od dawna i nadal można odnaleźć strony, które z powodzeniem ją wykorzystują. Co to takiego?
To oddzielna strona – przygotowana specjalnie pod mniejsze rozdzielczości, zawiera zazwyczaj całkowicie inny:
- układ html-a
- zawartość CSS-a
- inne skrypty
- specjalnie przygotowane zdjęcia
Często firmy tworzyły je w oddzielnych subdomenach, np: moja-domena.pl a wersja mobilna dla nie to było: m.moja-domena.pl, czyli m – jak mobilna.
Poza dużą ilością pozytywnych aspektów wynikających z tego rozwiązania, miała także kilka wad:
- konieczność prowadzenia dwóch stron
- dodatkowe koszty w celu przygotowania dwóch systemów CMS
- konieczność aktualizacji, korekt na obu stronach
- powielanie treści na dwóch stronach co niekoniecznie musiało “spodobać” się google – (duplicate content)
Zmniejszając okno możemy wiele elementów modyfikować za pomocą css-a. Jednak z z grafiką? np zdjęcia produktów? dlaczego duże z desktopowej wersji mają się wczytywać na telefonie ?
Na początek może wyjaśnijmy dlaczego nie powinno na stronie mobilnej pokazywać zdjęć zbyt dużych (wagowo):
- transfer w sieci GSM
- procesor w telefonie komórkowym
- sztuczne skalowanie zdjęć przez przeglądarkę internetową
Jak możemy to rozwiązać ? Tutaj z pomocą przychodzą nam skrypty JS, zamiast umieszczać standardowo w w znaczniku IMG ścieżkę do pliku graficznego, podajemy w specjalnym znaczniku kilka zdjęć z deklaracją dla jakiej rozdzielczości mają się one wyświetlać. Możemy w ten sposób inaczej kadrować zdjęcia na urządzenia mobilne a inaczej na desktopy.
Czy tylko tak to można rozwiązać ? Oczywiście że nie ale to już opisze przy następnym wpisie.
Portfolio – co to takiego – to każdy wie, oferta, realizacje, i inne określenia na pokaz wykonanych prac. Jak to się ma do RWD ? do responsywności ? lub adaptacyjnego zachowania strony www ?
Często jest to bardzo kłopotliwa sprawa chcemy przedstawić swoje osiągnięcia tak aby dobrze wyglądały zarówno na full HD jak i na mniejszych rozdzielczościach monitora.
Najprostszym i jednocześnie dość ciekawym jest ujęcie tego w postaci listy – kafelków – jak na przykład w strony www Szamotuły. Mamy przedstawione wykonane portale internetowe, strony www i inne rozwiązania internetowe szyte na miarę. Każdy klient – jego realizacja została przedstawiona pokrótce na liście a zagłębiając się w szczegóły uzyskujemy więcej informacji.
Ułatwia to zastosowanie rożnych grafik – mniejsze – lżejsza na stronie głównej i większych – prezentujących szczegóły na podstronach z pełna informację o wykorzystanych technologiach. Jest to także przyjazne dla użytkownika. Łatwiejsze poruszanie się po wielu projektach, wczytywanie się tylko w wybrane, te które na stronie głównej nas zaintrygowały.
Te i inne zabiegi pozwalają także łatwiej zoptymalizować stronę pod kątem RWD. Kafelki bardzo dobrze mogą dostosowywać się, są idealnym rozwiązaniem dedykowanym każdemu chcącym przedstawić produkty, realizacje, aktualności, wybrane wydarzenia. Możemy ułożyć w jednym wierszu 4, 3 … każdą dowolną ilość kafelków a zmniejszając rozdzielczość zmniejszać ilość w wierszu aż do jednego na najniższej – na przykład dla 320px. Jak to wykonać szybko i dobrze ?
Tutaj z pomocą przychodzą nam gotowe rozwiązania – oferujące gridy, np: Bootstrap. Zachęcam do zapoznania się z przykładami i możliwościami jakie daje gotowy system ułatwiający tworzenie plików CSS z obsługą RWD.