Jak przerobić stronę na responsywną?

Nie jest tajemnicą, że różne ekrany mają różne rozdzielczości. Jeden ekran jest w stanie wyświetlać większy obszar, a inny mniejszy. Różnice te w dzisiejszych czasach potrafią być naprawdę duże, ponieważ z jednej strony mamy użytkowników, którzy posiadają ogromne monitory, a z drugiej, niemal każdy z nas nosi w swojej kieszeni niewielki telefon, który również powinien móc poradzić sobie z daną stroną tak, by użytkownik nie musiał dodatkowo przewijać jej w poziomie.

Budowa responsywnych stron to dzisiaj już standard. Wielu użytkowników internetu nawet nie posiada żadnego stacjonarnego urządzenia i cały swój ruch wykonuje na swoim telefonie lub tablecie. Dla mnie jako pecetowca jest to trochę przykre, ale wygląda na to, że od kilku lat ruch mobilny zaczyna dominować w sieci. Wszystko co prawda zależy między innymi od typu i przeznaczenia danej witryny, ale sam posiadam stronę internetową z całkiem przyzwoitym ruchem, na której niemal 90% stanowi ruch mobilny.

Zobacz także: Jak sprawdzić responsywność strony internetowej.

W tym wpisie przedstawię kilka rozwiązań dla osób, które już posiadają stronę internetową, ale z jakiegoś powodu jest ona nieresponsywna.

Budowa szablonu od postaw

Jeżeli posiadasz jakąś stronę internetową, która nie jest responsywna, przykro mi to stwierdzić, ale najlepszym wyjściem może okazać się budowa jej od kompletnego zera. W wielu dziedzinach życia naprawianie czegoś wychodzi nawet drożej od kupna nowego produktu, tutaj bardzo często bywa podobnie.

O ile można w dość prosty sposób przerobić stronę na taką, której nie trzeba będzie przewijać w poziomie, należy zadbać także o odczucia użytkowników, czyli tak zwany UX (User Experience). Z tym jest już nieco więcej zabawy, do której trzeba całej masy testów i dostosowywania elementu po elemencie.

W wielu przypadkach znacznie łatwiej będzie zbudować nowy projekt. Jeżeli stary bardzo Wam się podobał, nic nie stoi na przeszkodzie, by przy tworzeniu nowego layoutu zachować dawny klimat.

Być może Cię to przeraża, bo spędziłeś nad budową swojej strony długie miesiące, lub zainwestowałeś w nią całe mnóstwo pieniędzy. Pamiętaj, że nawet jeżeli masz nie wiadomo jak zaawansowany portal, nie musisz zmieniać kodu odpowiedzialnego za jego logikę, czyli na przykład za rejestrację w serwisie. Wystarczy zmienić ich wygląd, czyli sam “szablon”. Do tego potrzebujesz jedynie zmian w kodzie CSS, a czasami także HTML, czy JS. Prawdopodobnie nie musisz jednak ruszać wszystkiego.

Wprawiony profesjonalista powinien być w stanie zbudować przyzwoicie wyglądający i responsywny szablon strony internetowej nawet w jakieś kilka-kilkanaście godzin. Oczywiście wszystko zależy od złożoności projektu, bo czasami nie wystarczy nawet kilka tygodni.

Do tego celu najprościej wykorzystać jakąś bibliotekę pozwalającą na szybkie tworzenie responsywnych stron z wykorzystaniem HTML i CSS. Możesz zainteresować się na przykład Bootstrapem. Szablon, na którym obecnie stoi ten blog stworzyłem od podstaw w kilka godzin. Nie jest on super skomplikowany, ale powinien prezentować się dobrze zarówno na urządzeniach o dużych, jak i małych rozdzielczościach.

Proste sposoby na przerobienie strony na responsywną

O ile strona nie jest zbudowana na przykład na tabelkach, sprawa powinna być stosunkowo prosta. Być może nie trzeba będzie ruszać struktury kodu HTML i wystarczy po prostu zmienić trochę rzeczy w CSS.

Oto kilka protipów:

1. Na bieżąco podglądaj wprowadzane zmiany na różnych rozdzielczościach. Ja zwykle wykorzystuję do tego devtoolsy, którymi zmniejszam lub zwiększam szerokość strony.

2. Używaj procentów zamiast pixeli przy ustalaniu szerokości. Załóżmy, że twój kontener z treścią ma sztywną szerokość 1200 pixeli. Podejrzewam, że na rozdzielczości 1920 x 1080 (Full HD) wygląda znakomicie. Niestety, ale nieco gorzej sprawa może wyglądać na urządzeniu mobilnym, na którym ta szerokość może wynosić na przykład około 400 pixeli. Wówczas element będzie aż trzy razy szerszy! Jeżeli zamiast 1200 pixeli zdefiniujesz np. 70%, albo ustawisz w CSS dodatkowo max-width elementu na np. 100%, element powinien wyświetlać się na mniejszych urządzeniach równie dobrze. Przy operowaniu na procentach pamiętaj właśnie o max-width lub używaj media queries, jeżeli ustawisz kontener z treścią na te 70% szerokości, może on wyglądać dość źle na bardzo szerokich monitorach typu ultrawide. Zbyt szeroką treść po prostu czyta się źle.

3. Używaj frameworka lub bibliotek, które ułatwią Ci pracę. Nie jest to co prawda niezbędne, ale dla przykładu, Bootstrapowy Grid System pozwala w naprawdę banalny sposób układać elementy na ekranie tak, by były responsywne. Trzeba tutaj co prawda trochę zmian w strukturze kodu HTML, ale uważam, że w wielu przypadkach po prostu warto. Jest z tym o wiele mniej zabawy niż z ustawianiem każdego elementu ręcznie.

4. Korzystaj z media queries. Różne elementy powinny różnie zachowywać się w zależności od danej rozdzielczości. Dla przykładu, logo Webporady.pl na bardzo wąskich rozdzielczościach zamienia się na samą ikonkę “wP”. Dzięki temu navbar nie jest “dwupiętrowy”, a samo logo nie ma zbyt małej, niemożliwej do przeczytania bez lupy, czcionki.

5. Używaj zawijania wierszy. Na skrajnie niskich rozdzielczościach problem mogą stanowić także zbyt długie słowa. Nawet przy stosunkowo niewielkich czcionkach, mogą nie mieścić się one na ekranie. Z tego względu warto umieścić w swoich stylach word-break: break-word;. Powinno nam to pozwolić na to, by zbyt długie wyrazy przechodziły do kolejnych linijek, jeżeli alternatywą miałoby być wystawanie poza ekran.