Jak zdefiniował Ethan Marcotte w ALA 306 , termin „responsive design” odnosi się do techniki stosowania różnych reguł stylu do kodu HTML w zależności od wielkości ekranu użytkownika. Aby uzyskać dodatkowe wyjaśnienie responsywnego projektu, oto ładna talia autorstwa Mike'a Bollingera .
W tym modelu wysyłasz dokładnie ten sam kod HTML do klienta, niezależnie od tego, czy ekran jest mały, czy duży. Jeśli jednak zasoby (głównie obrazy), do których odwołuje się CSS, nie są wyświetlane dla niektórych rozdzielczości ekranu, mogą nie zostać pobrane. Na przykład w przypadku dużych ekranów, których można używać high-res.pngw CSS, a także w przypadku małych ekranów low-res.png- klient sieciowy może pobrać obraz tylko w aktywnym stylu. (Zobacz komentarz @ DBUK dla co najmniej jednego ważnego klienta, który obecnie pobiera oba! Mam nadzieję, że klienci będą inteligentni!)
Ta technika może mieć sens w twoim przypadku lub bardziej sensowne może być utworzenie oddzielnej witryny mobilnej.
Różne urządzenia mogą oznaczać różne konteksty użytkowania. Telefony komórkowe są zawsze w kieszeni - w jaki sposób użytkownik mógłby korzystać z Twojej witryny w sklepie spożywczym? Czy chcesz wysłać im całą witrynę? A może tylko kilka funkcji? A może zupełnie inne funkcje? Co zrobić, jeśli siedzą na kanapie, a telewizor swobodnie przegląda iPada?
Urządzenia mobilne mają zwykle wolniejsze procesory, mniej pamięci i wolniejsze połączenia (wszystkie te „prawdy” stają się coraz mniej prawdziwe z roku na rok, btw) - możesz chcieć wysłać osobną witrynę mobilną wyłącznie ze względu na wydajność.
Zaryzykowałbym, że ogólnie rzecz biorąc, im bardziej statyczna, tekstowa i oparta na treści strona (tj. Blog), tym większa szansa na użycie istniejącego HTML i responsywnego projektu. Im bardziej interaktywna, multimedialna i sterowana przez użytkownika strona (tj. Sklep), tym większa szansa, że powinieneś dostosować osobne witryny do poszczególnych typów urządzeń.
Nie zapominaj też, że w dzisiejszych czasach pojawia się również pytanie, czy korzystanie z urządzeń mobilnych powinno być witryną czy aplikacją .
Elastyczne projektowanie nie powinno pobierać takiej samej ilości danych na każde urządzenie, ponieważ nie wszystkie urządzenia mają takie same wymagania multimedialne. Witryny mobilne powinny używać obrazów lo-res i mieć mniej graficzny charakter niż witryny dla komputerów stacjonarnych / laptopów / tabletów. A jeśli chcesz połączyć witryny mobilne i zwykłe, musisz wziąć to pod uwagę, w przeciwnym razie Twoja witryna nie reaguje zbyt szybko, prawda?
Peteorpeter z przesuwanymi szyjkami prowadzi do wzmianki o skrypcie Responsive Images firmy Filament Group, który pozwala wyświetlać obraz odpowiedniej wielkości dla odpowiedniego urządzenia za pomocą JavaScript, najlepiej bez pobierania więcej niż jednej wersji. W przypadku zasobów obrazu układu zwykle odbywa się to za pomocą zapytań o media określających różne style dla różnych rozdzielczości ekranu.
źródło
Myślę, że wiele firm zajmie dużo czasu, aby zaktualizować swoje witryny, do diabła, wciąż istnieją pewne przy użyciu tabel. Responsywne i mobilne pierwsze podejście to zdecydowanie modne słowa.
Jak wspomniano powyżej, powinieneś używać obrazów lo-res dla swojego telefonu komórkowego / urządzeń o niższej rozdzielczości. Zapytania o media pomogą Ci kierować reklamy na wszystkie niższe rozdzielczości. Słyszałem jednak, że mobilne safari zignoruje wyświetlanie: żadna reguła i nie pobierze również wersji komputerowych obrazów. Ponadto, jeśli przejdziesz responsywną trasę obrazu, wywiera to duży nacisk na mobilny procesor - 3 bajty na 1 piksel ... myślę. Istnieje wiele rozwiązań pozwalających ominąć pobieranie dodatkowej zawartości - niektóre dość hackerskie - https://docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE&hl=pl_US#gid=0
Więcej informacji na temat wad responsywnego projektowania stron internetowych można znaleźć na stronie http://www.webdesignshock.com/responsive-design-problems/ . Nie pozwól jednak, aby ten blog Cię zniechęcał. Book Apart napisał fantastyczną książkę na ten temat - http://www.abookapart.com/products/responsive-web-design . Zdecydowanie warto pobrać wersję e-booka.
źródło
display: nonedo ukrywania zdjęć przed użytkownikami mobilnymi. To po prostu zła praktyka.