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.
Kolejne podejście do RWD, co tym razem ciekawego znaleźliśmy w sieci? Kilka rozwiązań, które mogą nam pomóc. Po zapoznaniu się z nimi wybrałem dwa, które wydały się ciekawe – dla nas.
Czy są identyczne? Nie. Różnią się pomiędzy sobą wieloma elementami:
- zgodność z starszymi przeglądarkami
- ilość gotowych rozwiązań w CSS
- ilość dodatkowych bibliotek JavaScriptu
Czy mają wspólne cechy? Tak, oto kilka z nich:
- łatwiejsze tworzenie stron w technologi RWD
- szybsze pisanie kodu
- gotowe elementy ułatwiające pracę
Na pytanie, które nasuwa się samoistnie, który jest lepszy …. no cóż na chwilę obecną nie potrafię odpowiedzieć. Oba są moimi faworytami.
Taka mała ciekawostka, znalezione w internecie i warto się z tym zapoznać.
Optymalizując grafikę nie możemy zapomnieć o naszej faviconie, i tutaj zaczynają się schody. Każde urządzenie, system ,wersja przeglądarki lubi inny rozmiar. Warto poczytać i przygotować odpowiedni zestaw ikon. Jest jak widać potrzebne kilka rozmiarów i dodatkowych wpisów w sekcji meta na stronie.
