Responsywny układ nabiera rozpędu (czuły), ostatnio zrobiłem kolejny projekt z adaptacją na różne ekrany. Dla Twoich czytelników, którzy już zaczynają przechodzić do tej wspaniałej i złożonej metody projektowania, postanowiłem podzielić się niektórymi sekretami i sztuczkami, które odkryłem podczas tworzenia witryny, Myśleć, byłoby pomocne.

Dla tych, którzy jeszcze nie słyszeli o takim określeniu jak układ adaptacyjny, mogę powiedzieć, że taki układ można nazwać posłusznym ludzkim językiem. Ten typ układu dostosowuje się do wszystkich możliwych ekranów urządzeń, z których przyszedł odwiedzający., a ostatnio jest ich, delikatnie mówiąc, dużo (netbooki, tabletki, iPhone'a, Urządzenia oparte na Androidzie … ). Wszystkie te urządzenia mają funkcję, działają z różnymi ekranami, ale niektóre z nich nawet odbudowują poszczególne elementy, więc na przykład iPhone jest bardzo nieprzydatny, Twój projekt tworzy własne przyciski i pola formularzy w Twojej witrynie.

Układ adaptacyjny – gdzie zacząć

Porozmawiajmy, od czego zacząć tworzenie układu adaptacyjnego i jakie mogą być z tym trudności.

Czego użyć do układu:

Myślę, że się nie mylę, jeśli, Powiem, że musisz zacząć od nauczenia się prostej definicji przeglądarki za pomocą CSS3. Oznacza to, że możesz tworzyć różne style dla różnych ekranów urządzeń, a twój projekt podczas zwężania okna przeglądarki zmienił się w ten sposób, aby ułatwić odwiedzającym witrynę pracę z nim.
Oto właściwie te style, wystarczą ci na początek:

Za pomocą powyższego kodu możesz ustawić ustawienia dla poszczególnych bloków i stylizować je dla różnych ekranów urządzeń., ale poza tym potrzebujesz, aby urządzenia zrozumiały, że Twoja witryna jest dla nich stworzona. Ten kod może nam pomóc rzutnia.

Powyższy kod uniemożliwi użytkownikowi powiększanie lub pomniejszanie witryny według własnego uznania., style, o których mówiliśmy powyżej, powinny mu wystarczyć.

Bonus za responsywne strony internetowe

Wyszukiwarki są już znacznie lepsze w rozpoznawaniu witryn adaptacyjnych i zmienianiu dla nich wyników.. To jest twoja strona, wykonane zgodnie z zasadami układu adaptacyjnego, prawdopodobnie, będzie dla nich wyższy, który wyszukuje informacje z urządzeń mobilnych, niż proste i nudne strony, które trzeba zmniejszać i powiększać na ekranie, coś o nich przeczytać.. Taki wniosek nasunął mi się z doświadczenia tworzenia strony internetowej dla kancelarii prawnej i analizowania jej statystyk. Google i Yandex uwielbiają wygodne strony, ale biorąc pod uwagę, Co takie strony są 3 – 4 razy droższe, nie każdy może sobie pozwolić na zamówienie adaptacyjnego projektu i rozwoju dla tego projektu. Koszt wynika z faktu, że musisz narysować projekt pod 3-4 urządzenia i układ również dla różnych urządzeń, a takie frameworki CSS jak Bootstrap nie zawsze są w stanie rozwiązać wszystkie zadania, które wymyślił klient ).

Porozmawiajmy trochę o Bootstrapie

Pierwsza rzecz, o której chciałem powiedzieć Bootstrap, nie szukaj dokumentacji nigdzie poza oficjalną stroną, mają tam dokumentację, jak dobrze opisaną, że mało kto potrafi lepiej i krok po kroku opisać wszystkie cechy tego mega-frameworka. Szybkość układu znacznie wzrasta, ale tylko wtedy, gdy klient potrzebuje prostej strony bez fikcji. Ale kiedy strona jest wykonana zgodnie ze wszystkimi wymaganiami klienta, czasem lepiej wyjść z tego frameworka i zacząć robić wszystko po prostu ręcznie. Ramy są dla nich idealne, kto chce się nauczyć tworzyć interfejsy, np. do paneli administracyjnych, gdzie wyjątkowość projektu nie odgrywa większej roli, ale to musi być wygodne. Backend strony wykonany na bootstrapie okazuje się bardzo wygodny i zwięzły, wysoce zalecane.

Możesz przeczytać więcej o frameworku Bootstrap na ich stronie oficjalna strona internetowa i musisz zacząć czytać od lewej do prawej w menu głównym, nie ma nic zbędnego i wszystko, czego potrzebujesz.

Teksty w układzie adaptacyjnym

Aby strona dobrze wyglądała na wszystkich ekranach, nie wystarczy tylko przestawić bloki, zmienić ich rozmiar i przeznaczenie za pomocą frameworki css i JavaScript, trzeba też pamiętać, jak zachowuje się tekst na różnych ekranach. Jeśli na małym ekranie telefonu w 480 tekst w pikselach wygląda dobrze 12 piksele, następnie na większym ekranie ten tekst trzeba zwiększyć, ponieważ na dużych monitorach nikt nie patrzy na tekst jeden po drugim, i przeczytaj to z daleka. Trochę pogrzebania w internecie, znalazłem świetną wtyczkę napisaną w jqery. Wtyczka nazywa się FitText i znajduje się tutaj. Wszyscy, co musisz zrobić, polega na podłączeniu wtyczki i wywołaniu jej w celu uzyskania wymaganych elementów strony.

Wtyczka ma jedną funkcję, działa tylko z elementami blokowymi (blok, blok w linii).

Problemy z układem adaptacyjnym:

1. Twoje style będą wyglądać inaczej na iPhonie, Radzę zaopatrzyć się w to urządzenie do testów przy wykonywaniu layoutu.
2. Na iPhonie transformacja działa inaczej., i różne urządzenia. Kiedy ujawniasz obrót 3D obiektu w CSS3 = 0 stopni, wtedy obiekt może w tajemniczy sposób obrócić się pod pewnym kątem, zamiast zniknąć.
3. W przypadku układu adaptacyjnego projektant stron internetowych musi być przeszkolony we wszystkich subtelnościach i znać program Photoshop, Radzę zaopatrzyć się w przykłady wysokiej jakości responsywnych projektów w formacie PSD, dla przykładów, jak robić lub nie robić. Będziesz także potrzebował góry cierpliwości i żadnych wymówek. (dlaczego programista musi nauczyć się Photoshopa lub SEO, które słyszę coraz częściej). Moja rada dla Ciebie z doświadczenia, nigdy nie pracuj ze znanymi projektantami, które nie mają nic wspólnego z projektowaniem stron internetowych. Miałem złe doświadczenia i mróz ze strony projektanta.
4. Podczas pracy z Bootstrap będziesz musiał udoskonalić framework, jeśli klient potrzebuje układu większego niż 1200 szerokość pikseli. Chociaż nie ma dużo pracy, ale w przypadku złożonych projektów jest wiele problemów, pływał, wiemy…
5. Responsywny projekt często trzeba przetestować w różnych przeglądarkach, a nawet w różnych wersjach., to samo dotyczy różnych urządzeń. Na przykład, na iphone3 i iphone4 różnica jest duża, mniejsza różnica między iphone4 i iphone5. Będziesz także potrzebować urządzeń z Androidem, ponieważ istnieją pewne sztuczki przy wybieraniu bloku lub pisaniu w formie tekstowej. Jeśli nie ma pieniędzy, aby kupić kilka urządzeń, wtedy możesz skorzystać ze specjalnych usług, takich jak ta https://viewlike.us/, ale zmienia tylko rozmiar ekranu i nie zmienia wyświetlania elementów, jak to robią urządzenia.

Jak dotąd nie zauważyłem większych trudności w tym zakresie, ale jak wiesz napisz to sprawdzę i dodam. Czasami w niektórych przypadkach musisz określić typ urządzenia przed załadowaniem strony w przeglądarce, w takich przypadkach radzę skorzystać z klasy napisanej w php. Skrypt pomoże określić rozmiar ekranu osoby odwiedzającej witrynę i urządzenia, z którego przyszedł przed załadowaniem strony, po stronie serwera. Skrypt do wykrywania przeglądarki użytkownika w PHP.

Jeśli potrzebujesz, aby Twoje bloki zmieniały się płynnie na stronie, możesz użyć animacji CSS3 w swoich stylach dla wszystkich bloków.

Jeśli Twój projekt nie pozwala na płynną transformację wszystkich elementów na stronie, wtedy możesz po prostu wymienić (*) na (dowolny element łuku) lub wyłącz animację dla poszczególnych bloków, jak w poniższym przykładzie.

w tym przykładzie anuluje wszystkie możliwe animacje w CSS za blok z klasą .blok klasowy i całą jego zawartość.

Myślę, że po przeczytaniu artykułu staje się jasne, dlaczego projektowanie adaptacyjne jest tak skomplikowane i drogie dla klientów.. Chcesz idealnie dostrojoną stronę internetową?. Zapłać lepiej za godzinę, a nie dla projektu, bo trudno ocenić skalę pracy, gdy jest tak zagmatwana i kontroli jest dużo. Nie krępuj się brać pieniędzy i znać swoją wartość, każda praca musi być płatna, abyś miał jeszcze pieniądze na relaks po projekcie i uspokojenie nerwów :kupa śmiechu: .

Myslę, że to wystarczy, ale jeśli jest więcej interesujących informacji na ten temat, Na pewno napiszę. Jeśli masz własne biblioteki lub wtyczki do układu adaptacyjnego, piszcie w komentarzach tutaj lub w mediach społecznościowych. sieci, dodamy materiał.

*/