Responsive Web Layouts dla mobilnych ekranów Wprowadzenie, porady i przykłady
Projektanci mają teraz trudniejsze niż wcześniej. Musimy nie tylko projektować urządzenia stacjonarne, ale także urządzenia mobilne, takie jak tablet i smartfony, a ponieważ mówimy tu o wielu różnych rozmiarach i rozdzielczościach ekranu, jest to ogromne zadanie. W świetle tego, elastyczne projektowanie stron internetowych może być najlepszym rozwiązaniem. Oferuje więcej niż tylko prosty mobilny szablon; zamiast tego cały układ witryny jest wystarczająco elastyczny, aby zmieścić się w każdej możliwej rozdzielczości ekranu.
Przy takim schemacie projektowania płynów istnieją oczywiste korzyści i wady. Zastanów się nad moimi przykładami poniżej, w jaki sposób responsywne projektowanie stron internetowych może sprawić, że przejście na urządzenia mobilne będzie łatwiejsze.
Jak działa responsywny projekt
Kiedy używam słowa “czuły” jeśli chodzi o projektowanie stron internetowych, mam na myśli to, że cały układ odpowiada na rozdzielczość ekranu użytkownika. Wyobraź sobie ten scenariusz: czytasz stronę internetową na jednym tablecie, a następnie przełączasz się na inne urządzenie z tego lub innego powodu. Okno przeglądarki jest teraz zmieniane. Reaktywny układ stron internetowych będzie zawierał schematy i układ, który z wdziękiem rozpada się i wymyśla na nowo. Z perspektywy użyteczności jest to genialna technika.
Elastyczne projektowanie polega na tworzeniu jednolitego doświadczenia niezależnie od wielkości ekranu przeglądarki lub urządzenia. Znalazłem idealny przykład z „A List Apart”, aby zilustrować mój punkt widzenia, który obejmuje również obrazy dynamiczne. Szerokość jest ustawiana w CSS przy użyciu wartości procentowych dla większości wewnętrznych elementów kontenera. Większe strony internetowe również dobrze reagują na usuwanie dynamicznych treści, takich jak JavaScript, gdy nie są obsługiwane.
Dlaczego warto projektować na telefon komórkowy??
Stało się oczywiste, że coraz więcej użytkowników korzysta z urządzeń mobilnych, a nie tylko z Internetu. Komputery typu Tablet zaczęły się zmieniać w kontekście, gdy użytkownicy są online w klasie. Projektowanie dla urządzeń mobilnych jest z pewnością wymaganiem współczesnych standardów sieciowych. Jedynym problemem jest wybór metody rozwoju i odpowiednie ukierunkowanie na odbiorców.
Po rozpoczęciu kodowania określonych rozdzielczości ekranu otrzymujesz zbyt wiele arkuszy stylów, z którymi możesz sobie poradzić. Zapytania o media w CSS3 mogą być używane do tworzenia układów specyficznych dla iPhone'a zarówno w widoku pionowym, jak i poziomym. Ponieważ możesz z góry określić gęstość pikseli, łatwo jest zmienić dowolny szablon HTML dla telefonu komórkowego.
(Źródło obrazu: bradfrostweb)
Ale kiedy kodujesz układ do responsywnego projektowania, domyślnie uwzględniane są aspekty mobilne. Zarówno użytkownicy komputerów stacjonarnych, jak i mobilnych będą mieli podobne doświadczenia i nie będziesz musiał martwić się o zewnętrzne właściwości CSS. Jedyne badanie, które musisz wykonać, to zaplanowanie najmniejszego możliwego ekranu. Dane o ruchu Google Analytics mogą być w tym bardzo pomocne.
Prawdopodobnie nie sprawisz, że Twoja witryna będzie działać w 100% na każdym urządzeniu z każdą przeglądarką. Ale możesz kierować większość na podstawie średniej szerokości ekranu. Starsze modele iPhone'a używają rozdzielczości wyświetlacza 320 × 480, która nie jest tak niewiarygodna. Fotografowałbym przy minimalnej szerokości 240 pikseli, a nawet mniejszej, jeśli możesz ją zmieścić.
Usuwanie domyślnego powiększenia
Jeśli spędziłeś jakiś czas na przeglądaniu Internetu na smartfonie, zauważysz, jak strony internetowe są skalowane, aby w pełni wyświetlać się na ekranie. Jest to dla wygody użytkownika, ponieważ większość stron internetowych nie ma mobilnego odpowiednika, dlatego najbezpieczniejszy jest pełny układ.
Ale gdy zaczniesz budować responsywny projekt mobilny, auto-zoom może naprawdę zepsuć elementy układu. W szczególności obrazy i zawartość nawigacji mogą wyglądać na małe lub zbyt duże w układzie. Istnieje specjalny metatag, który można dołączyć do nagłówka dokumentu, który resetuje go w większości urządzeń z systemem Android i iPhone.
Jest to znane jako metatag viewport który ustawia niektóre niestandardowe zmienne w treści. Apple ma stronę z dokumentacją dotyczącą kilku innych metatagów, które powinieneś sprawdzić, chociaż są one specjalnie dostosowane do stron internetowych na iOS. The skala początkowa Wartość jest ważna, ponieważ domyślnie powoduje to pełne powiększenie strony internetowej.
Ostatnia wartość dla skalowalny dla użytkownika całkowicie usunie tę funkcję powiększenia, aby użytkownik nie mógł zmienić rozmiaru układu. Spowoduje to zablokowanie projektu w jednym rozmiarze w oparciu o pełną szerokość urządzenia. Zwróć uwagę, że nawet jeśli wyłączysz funkcję zoomu, dobry responsywny projekt będzie nadal dostosowywał się podczas przechodzenia z portretu na krajobraz na dowolnym urządzeniu! Ale sensowne jest zablokowanie responsywnego projektu i usunięcie ogólnych opcji skalowania.
Dynamiczne skalowanie obrazu
Obrazy są kolejnym ważnym aspektem praktycznie każdej strony internetowej. Użytkownicy mobilni mogą nie patrzeć na strumieniowe przesyłanie filmów, ale zdjęcia to zupełnie inna historia. Są to również najwięksi sprawcy, jeśli chodzi o układy wyłamujące się z modelu pudełkowego.
img max-width: 100%;
Standardową zasadą dla CSS jest zastosowanie właściwości max-width do wszystkich obrazów. Ponieważ zawsze będą ustawione na 100%, nigdy nie zauważysz zniekształceń. Gdy użytkownik zmieni rozmiar okna przeglądarki mniejszy niż obraz może obsłużyć automatycznie dostosuje się do 100% szerokości zmniejszonej. Problem polega na tym, że Internet Explorer nie może zrozumieć tej właściwości, więc musisz użyć arkusza stylów specyficznego dla IE szerokość: 100%;.
Elastyczne obrazy są również możliwe, jeśli używasz wtyczek JavaScript lub jQuery. Istnieje kilka naprawdę inteligentnych programistów, którzy poświęcili czas na stworzenie niesamowicie responsywnej zawartości obrazu. Ten wątek jest tylko jednym z wielu w Stack Overflow, który oferuje dziwaczne, ale wygodne podejście do rozwiązywania błędów IE6 / 7.
Osobiście polecam trzymanie się naturalnej zmiany rozmiaru obrazu CSS. Jeśli Twoja witryna działa w przeglądarce mobilnej z włączoną obsługą JavaScript, może najprawdopodobniej obsługiwać CSS. Jeśli naprawdę chcesz zagłębić się głębiej, sprawdź ten 24-stronicowy artykuł Obrazy dla projektów adaptacyjnych…
Dotykanie wzorów
Twórcy stron internetowych mogą zapomnieć, że użytkownicy telefonów komórkowych nie korzystają już z telefonów z klawiaturą, takich jak BlackBerry. Większość smartfonów korzysta obecnie z interfejsów ekranu dotykowego, co sprawia, że scenariusz różni się od ustawień myszy i klawiatury.
Jako takie musisz rozważyć alternatywne rozwiązania w elementach mobilnych. Rozwijane menu mogą działać lepiej, gdy są wyświetlane jako pojedyncze menu po prawej stronie. Większość użytkowników może łatwiej klikać linki po prawej stronie niż po lewej, ale każda kolumna działa w celu zmniejszenia przestrzeni. Korzystając z wcięć marginesów, łatwo jest zidentyfikować hierarchię łączy bez konieczności stosowania żadnego kodu jQuery.
Dobrą praktyką jest również zwiększenie rozmiaru tych łączy nawigacyjnych. Użytkownicy mobilni nie mają luksusu dużych ekranów dostępnych na komputerach stacjonarnych, a nawet laptopach. Trzeba trzymać tekst duży, z góry, puknąć i odczytać za wszelką cenę. Możesz nawet chcieć zmienić rozmiar, jeśli użytkownik przełącza się między widokiem pionowym i poziomym - dość częste powtarzanie się podczas przeglądania internetu mobilnego.
Niestandardowe układy CSS
Ogólnie najlepiej jest dostosować swój układ i pozwolić na naturalną degradację treści. Jeśli masz pasek boczny i obszar zawartości, powinieneś ustawić je w szerokości procentów lub ems, wszystko, co zmieni się w oknie przeglądarki. Jeśli złożysz wniosek min-width to w końcu oderwie część układu; więc teraz zawartość paska bocznego jest wyświetlana nad treścią strony.
(Źródło obrazu: Pepperson)
Gdy zastanawiasz się, jak wpływa to na ogólny projekt, znacznie łatwiej jest tworzyć zewnętrzne arkusze stylów. Najprawdopodobniej jednak napotkasz rozdzielczości ekranu, które są zbyt małe, aby renderować układ. Jest to idealny scenariusz dodawania niestandardowych właściwości CSS w celu usunięcia części strony lub całkowitego sformatowania zawartości.
Włącz / wyłącz dodatkową zawartość
Przykłady dużych bloków treści obejmują formularze internetowe, dynamiczne menu, suwaki obrazów i inne podobne pomysły. Zamiast całkowicie usuwać te elementy w miarę zmniejszania się układu, dlaczego nie po prostu ukryć je w “zminimalizowany” zawartość div? Możesz użyć CSS lub JavaScript do wykonania zmian, ale ostatecznie będziesz prawdopodobnie potrzebował kodu JS, aby utworzyć przycisk przełączania.
Ta alternatywa jest idealna do utrzymania dynamiki strony domowej i bogatych multimediów internetowych. Zamiast całkowicie usunąć rozwijaną nawigację lub zmienić strukturę strony, możesz ją ukryć w obrębie zawartości div. Jeśli użytkownik chce wyświetlić linki, dotknij przycisku przełączania, aby otworzyć / zamknąć menu.
To formatowanie jest proste, intuicyjne i łatwe w obsłudze na urządzeniach z ekranem dotykowym. Wewnątrz div możesz umieścić każde z rozwijanych menu obok siebie w formacie kolumny. W miarę zmiany rozmiaru okna będą one naturalnie spadać poniżej siebie i zwiększać wysokość strony. Jednak opcja zwijania całego menu jest łatwo dostępna i wystarczy jedno dotknięcie. To przełączanie div jest również idealne dla suwaków obrazu we współpracy z dynamiczną zmianą rozmiaru zdjęć.
Korzystanie z zapytań o media
Jeśli ekran mobilny złamie układ 2 lub 3 kolumn, każdy z obszarów zawartości zostanie ułożony nad sobą. Cała strona wydaje się krwawić i może być bardzo myląca bez wyraźnych bloków. Lepszym pomysłem jest dodanie dolnej granicy każdej kolumny, tylko dla urządzeń mobilnych, przy użyciu zewnętrznego arkusza stylów, takiego jak mobile.css.
Dzięki tym nowym stylom twoja treść jest podzielona na podzielne sekcje. Powyższy atrybut nośnika został specjalnie zaprojektowany do kierowania na starsze urządzenia iPhone w widoku poziomym. Dotyczy to również urządzeń z ekranami mniejszymi niż 480 pikseli. Wykorzystaj to na swoją korzyść, aby określić, w którym punkcie układu “rozpada się”.
Istnieje kilka dodatkowych opcji, których można użyć do wykrywania orientacji urządzenia. Ten fantastyczny przewodnik po mediach CSS może dać kilka pomysłów. Dodatkowo nowy projekt mobilny 320 i nowsze oferuje szablon dla mobilnego CSS @głoska bezdźwięczna style. Można je włączyć bezpośrednio do tego samego pliku mobile.css i zastosować reguły dla wielu różnych urządzeń.
/ * Smartfony (pionowe i poziome) ----------- * / ekran tylko @media i (szerokość min-urządzenia: 320px) i (maksymalna-szerokość urządzenia: 480px) / * Style * / / * Smartfony (poziomo) ----------- * Tylko ekran i @media oraz (min-szerokość: 321px) / * Style * / / * Smartfony (portret) ---- ------- * Tylko ekran / @media i (maksymalna szerokość: 320px) / * Style * / / * iPady (portret i krajobraz) ----------- * / @ ekran tylko dla multimediów i (szerokość min-urządzenia: 768px) i (max-device-width: 1024px) / * Style * /
(Źródło: Hardboiled CSS3 Media Queries)
Pomocne narzędzia
- Szkielet - Piękny Boilerplate do Responsive Mobile Design
- Przejście od adaptacji do pełnej odpowiedzi
Showcase: Piękne Responsive Designs
Mam nadzieję, że te wskazówki i techniki projektowania zachęcą Cię do budowania ekscytujących responsywnych układów nie tylko dla ekranów mobilnych, ale dla każdego popularnego urządzenia z przeglądaniem stron internetowych. Aby kreatywne soki płynęły, stworzyłem małą wizytówkę responsywnych projektów internetowych. Sprawdź niektóre z bardziej unikalnych funkcji i podziel się swoimi przemyśleniami na temat projektu lub tematu w obszarze dyskusji.
wieszanie księżyca
Macdonald Hotels
CSS-Tricks
Happy Cog
Teixido
Kreator CSS
Architekci informacji
SZTUKA = PRACA
Hardboiled Web Design
Sony USA
Przyszłość przyjazna
Nie możemy przestać myśleć
Autentyczne prace
Projekt łokcia
320 i więcej
Widelec CMS
Szczęśliwy bit
Pulpa elektryczna
Foster Props
Plexical
Ciasta Preeti
Więcej zagrożeń
Centrum Informacji Stomatologicznej
ribot - projekt interfejsu
Cześć Fisher
Szczyt Social Marketer
William Csete
Woolly Robot
Meltmedia
Bądźcie czujni!
W jutrzejszym poście będziemy prezentować niektóre darmowe responsywne motywy WordPress możesz pobrać do użycia. Pamiętaj, aby dostroić się do tego.
