P-Programowanie

Strona responsywna

Ostatania modyfikacja: 3 maja 2019, kategoria: Strony internetowe

Strona responsywna to nowość jeżeli chodzi o strony przeznaczone dla urządzeń mobilnych. Tworzenie stron określonych mianem responsywnych daje nam bardzo dużą elastyczność i wiele możliwości. Strony responsywne same dostosowują się do rozdzielczości urządzenia, na którym są przeglądane, niezależnie czy jest to PC, urządzenie mobilne czy telewizor.

Strony przystosowane do telefonów

Od czasu pojawienia się systemu Android oraz telefonów komórkowych, użytkownicy mobilni stanowią bardzo duży procent odwiedzających. Napisanie strony, która nie jest przystosowania do telefonów jest w dzisiejszych czasach nieodpowiedzialne. Ryzykując w ten sposób musimy liczyć się z faktem stracenia dużej liczby potencjalnych odbiorców i klientów. Nie będę się rozpisywał za wiele na temat stron mobilnych, ponieważ napisałem już o tym artykuł mobilna wersja strony na telefon.

W poprzednim artykule omawiam rozwiązanie, polegające na tworzeniu stron mobilnych w tradycyjny sposób. Zwykle polegało to na przygotowaniu drugiej wersji serwisu, i podmienianiu w zależności od wykrytego systemu. Czasem podmieniany był cały szablon a w innych wypadkach przekierowanie na inną domenę serwisu.

Czym jest strona responsywna?

Obecnie jedynym słusznym rozwiązaniem jest wdrożenie strony responsywnej. Strona responsywna to po prostu responsywny szablon.

Strona responsywna lub ang. responsible web design (RWD) – to strona, która dopasowuje swoją szerokość i układ elementów do rozdzielczości na jakiej jest wyświetlana. Bardzo dobrze współpracują z flat design aczkolwiek nie jest zasadą ich łączenie.

Strony responsywne „narodziły” się od wersji CSS3 (arkusza stylów w wersji 3) ponieważ mocno rozbudowano możliwości Media Queries. Został on wtedy poszerzone o nowe możliwości min-width oraz max-width, dzięki którym możliwe jest rozpoznawanie rozdzielczości okna użytkownika. W zależności od wykrytych rozdzielczości, wczytujemy różne arkusze stylów, które tę samą strukturę HTML wyświetlają w całkiem inny sposób. Niektóre elementy są przesuwane, niektóre (te mniej ważne) całkowicie znikają.

Flat design

Jak zostało napisane wyżej, koncepcja stron responsywnych oraz flat design narodziły się prawie równocześnie i są często łączone. Wynika to z faktu, że responsywność najłatwiej osiągnąć właśnie w nieskomplikowanych szablonach graficznych – w których nie ma nadmiaru grafiki.

Flat design – koncepcja projektowania szablonów stron, której głównym założeniem jest prostota. Elementy strony są kwadratowe lub prostokątne, nie występują Cienie ani dodatkowe ozdoby. Strona jest uproszczona do maksimum, co przekłada się na większą czytelność i przejrzystość szablonu.

Najważniejsze zalety stron responsywnych to:

  • brak konieczności aktualizacji treści w dwóch różnych miejscach (istnieje tylko jedna wersja serwisu)
  • brak zamieszania z przekierowaniem domen, przełączaniem szablonów oraz detekcją urządzeń
  • nie trzeba się martwić o duplicate-content
  • jest to sposób oficjalnie rekomendowany przez Google
  • dostosowuje się nie tylko do różnych urządzeń, ale także do różnych rozdzielczości ekranu (jest najbardziej elastycznym rozwiązaniem)

Jeżeli składasz zamówienie na stronę to strona responsywna będzie kosztować Cię więcej. Jeżeli wykonasz ją sam, wszystko będziesz miał za darmo. 

Aktualizacja maj 2019:
Strony responsywne to obecnie standard na rynku. Każda firma, która zajmuje się projektowaniem stron powinna dostarczyć responsywny szablon, a więc taki, który będzie pasował do każdego urządzenia. W jednym z oświadczeń Google potwierdził, że od roku 2018 strony, które nie są responsywne będą systematycznie tracić zasięgi oraz pozycję w wyszukiwarce.

Warto też wspomnieć, że w chwili obecnej użytkownicy mobilni stanowią 40% wszystkich czytelników mojego bloga – jest to bardzo dużo. Gdyby nie responsywna strona, nie byliby oni w stanie czytać tego bloga na urządzeniach innych niż komputer.

Tworzenie strony responsywnej

Niezależnie czy chcesz zrobić stronę responsywną od początku, czy chcesz przerobić stary szablon na szablon responsywny, musisz wiedzieć o kilku najważniejszych rzeczach. Pierwszym krokiem zawsze jest dodanie odpowiednich wpisów meta. Zapewniają one poprawne wyświetlanie strony na urządzaniach mobilnych, m.in. zapobiegają skalowaniu.

Meta-tag viewport zapewnia poprawne dostosowanie szerokości oraz brak powiększenia. Jeżeli zapomnisz go umieścić, strona będzie prezentować się źle.

Kolejnym najważniejszym krokiem jest zaplanowanie kompozycji szablonu. Musisz zdecydować jakie elementy mają być wyświetlane na pełnej rozdzielczości, a jakie na telefonie. W standardowej konfiguracji, na pełnej rozdzielczości wyświetlana jest część główna strony oraz boczne menu, co daje razem dwie kolumny. Oczywiście niektóre strony mogą wcale nie mieć menu, lub mieć aż 2 boczne kolumny + środkową będącą treścią strony.

Musisz mieć świadomość, że każda strona dopasowana do urządzań mobilnych musi być zbudowana „na jednej kolumnie”. Jedna kolumna jest jedynym rozwiązaniem, jakie zapewnia nam poprawne skalowanie. Kiedy szablon ma jedną kolumnę, ustawiamy jego szerokość na width:100%, dzięki temu szerokość kolumny dopasuje się do ekranu niezależnie od jego wielkości.

Takiej samej zasady trzymam się na tym blogu. Wdrożyłem proste rozwiązanie szablonu responsywnego. W pełnej okazałości strona posiada 2 kolumny, po zmianie wielkości okna cała prawa kolumna menu znika. Wiąże się to oczywiście z ukryciem niektórych informacji ale nie ma innego wyjścia. Musisz przemyśleć, jakie informacje zostaną ukryte dla użytkowników urządzeń mobilnych. Ja telefonom wyświetlam tylko:

  • logo
  • menu nawigacyjne
  • treść strony.

Znika ankieta, wtyczka facebooka, linki oraz informacje o autorze. Niestety na ekranie 320×480 nie zmieścimy tyle co na 160×900. Gdybym się uparł, mógłbym zmieścić jeszcze jeden moduł w układzie jednej kolumny, nad menu lub pod menu, jednak nie są to informacje niezbędne więc nic nie stoi na przeszkodzie aby je ukryć.

Arkusz stylów

Jeżeli zastanowisz się nad kompozycją, czas wziąć się za arkusz stylów.

Jak widzisz są tu tylko dwie reguły media queries. To ile ich dodasz zależy od Twojego serwisu. Umieszczenie tego kodu w arkuszu stylów powoduje, że dla urządzeń z szerokością ekranu w granicach 1-680px prawe menu znika, natomiast dla urządzeń z rozdzielczością większą niż 680px menu się pojawia. Osobiście na blogu stosuję 3 takie reguły i więcej mi nie potrzeba, używam flat design więc blog posiada mało elementów. Rozbudowane serwisy posiadają po 5-7 reguł, które znacząco zmieniają wygląd strony nawet przy nieznacznych zmianach rozdzielczości.

Istnieje ważna zasada podczas planowania kompozycji. Możesz a nawet musisz ukrywać odpowiednie elementy na mniejszych rozdzielczościach używając display: none. Nie wolno natomiast utworzyć dwóch osobnych menu, jednego dla telefonów drugiego dla komputerów. Nie można pokazywać ich i ukrywać w zależności od wykrytej rozdzielczości. Jest to powielanie treści, przez co strona może być nieciekawa dla wyszukiwarki, a w ekstremalnym wypadku grozi banem duplicate-content.

Na stronie muszą znajdować się pojedyncze elementy, a ich położeniem sterujemy za pomocą arkusza stylów.

Responsywne menu

Strona responsywna to też responsywne menu oraz wszystkie elementy znajdujące się na niej. Budowa responsywnego menu może pochłonąć dużo czasu. Menu responsywne charakteryzuje się tym, że zawsze jest pionowe i rozwija się dopiero po kliknięciu.

Podstawowe menu można wykonać za pomocą zwykłego stylu CSS bez żadnych dodatkowych bibliotek. Ważne jest, aby zbudować menu na znacznikach ul li. Są to HTMLowe znaczniki listingu, i bardzo wygodnie można zmieniać ich orientację pionową/poziomą. Cała sztuczka polega na tym, aby dla dużych rozdzielczości ekranu nadać elementom listy atrybut floatleft a dla małych float: none. Dokładnie taki mechanizm zastosowałem na blogu więc zmieniając szerokość okna przeglądarki możesz zobaczyć jak działa.

 

responsywne menu

Istnieją gotowe narzędzia służące do zaprojektowania responsywnego menu np. SlickNav. Skrypt ten jest na tyle popularny, że bardzo często spotykamy go w płatnych szablonach. Dodatkową zaletą jest to, że SlickNav jest całkowicie darmowy także do zastosowań komercyjnych. Przerobienie menu na menu responsywne to dwie linijki kodu.

Jedynym warunkiem do użycia tego skryptu jest posiadanie menu zbudowanego w hierarchii ul li.

Obrazki

Ważnym aspektem, na który należy zwrócić szczególną uwagę są obrazki. W szablonie responsywnym obrazki muszą się automatycznie skalować wraz z szerokością strony. Aby osiągnąć taki efekt, można dodać do arkusza stylów takie globalne ustawienie dla obrazków:

Oczywiście reguła sprawdzi się tylko dla obrazków będących statyczną częścią treści strony np. zdjęć w artykule strony.

Elementy graficzne szablonu

Jeżeli korzystasz z koncepcji flat-design a więc uproszczenia strony do minimum – budowa szablonu nie będzie skomplikowana. Tak jak w przypadku obrazków, szerokość elementów graficznych (np. logo lub tytuł menu) powinna być podana w wartościach procentowych.

Jeżeli nie jest możliwe ustalenie wartości procentowych, należy ustawić wartości procentowe dla pojemnika będącego rodzicem, a następnie podmieniać element graficzny (np. logo) na mniejsze gdy braknie na nie miejsca – w zależności od wykrytej rozdzielczości.

Tworząc szablon responsywny możemy ustalać wysokość elementów graficznych stosując bezwzględną jednostkę px. Wynika to z faktu, że strona responsywna musi dostosować się do urządzenia tylko poziomo, pionowo nigdy miejsca nam nie braknie, najwyżej strona zacznie się przewijać.

Strony ze skomplikowaną szatą graficzną

Jeżeli jesteś właścicielem firmy, ze skomplikowanym motywem graficznym (np. restauracje), niezbędna podczas przeróbki będzie pomoc grafika, który wykonywał szablon strony. W takim wypadku dla większości elementów graficznych nie można ustalić wymiarów procentowych, ponieważ w przypadku zmiany rozmiaru okna grafika będzie niewyraźna (skalowanie).

Niestety, w takim scenariuszu, wszystkie elementy graficzne trzeba ukrywać i zastępować mniejszymi odpowiednikami. Często skomplikowany szablon graficzny trzeba po prostu lekko uprościć.

Procentowe rozmiary elementów

W szablonie responsywnym powinniśmy używać jednostek procentowych. Priorytetem jest nadanie procentowej szerokości, aby mogła się zmieniać wraz ze zmianą rozdzielczości. Nie powinniśmy ustalać sztywnych rozmiarów żadnych obrazków, one także powinny skalować się razem z szablonem.

Wartości stałe powinniśmy natomiast nadawać czcionkom, trudno przewidzieć jak będzie wyglądać czcionka, której rozmiar zależny jest od innych elementów. Ja na blogu stosuję rozmiar 15-17px i jest to jednostka stała. Czcionki dla komputerów PC są średnio o 1-2px większe niż czcionki dla urządzeń mobilnych.

Względne rozmiary czcionek

Ciekawym rozwiązaniem, które warto znać, jest używanie dla czcionek tzw. jednostek względnych. W CSS są to np. jednostki em oraz rem. Jeżeli jakiś obiekt ma ustawioną czcionkę o wartości font-size: 2.5em, oznacza to, że czcionka ma być 2.5 razy większa niż wartość odziedziczona z rodzica. Cały mój responsywny szablon na tym blogu oparty jest właśnie o jednostki em. Jedynym miejscem gdzie nadaję wartość bazową w jednostce bezwzględnej jest główny element strony czyli body.

Jaka jest korzyść tego rozwiązania? Dla różnych rozdzielczości ekranu zmieniam tylko i wyłączanie rozmiar czcionki elementu body. Wszystkie inne elementy strony dziedziczą z niego i rozmiary czcionek zmieniają się automatycznie.

Podgląd responsywny strony

Bardzo dobry dodatek do testowania naszego szablonu udostępnia najnowsza wersja przeglądarki Firefox. Pozwala ona z opcji włączyć Narzędzia dla twórców witryn > Widok responsywny. Dzięki temu możemy podglądać jak strona responsywna zachowuje się w różnych rozdzielczościach:

testowanie strony responsywnej

Taki sam dodatek posiada wbudowany przeglądarka Google Chrome. Aby go włączyć należy uruchomić narzędzia deweloperskie klawiszem F12 a następnie widok responsywny skrótem klawiaturowym CTRL+SHIFT+M.

Prosty szablon responsywny

Nie przeczę, że zbudowanie zaawansowanej strony w sposób responsywny może być trudne i czasochłonne. Jednak prosty szablon na potrzeby bloga, każdy da radę zrobić samodzielnie. Przykładem jestem ja ponieważ dałem radę najpierw napisać dla siebie szablon w koncepcji flat design, a po kilku miesiącach przerobić go na szablon responsywny. Pokażę Ci jak łatwo stworzyć prosty responsywny szablon.

Na potrzeby artykułu stworzyłem mało skomplikowany szkielet szablonu. Jego kod HTML jest następujący:

Posiada też kod CSS:

Szablon na na wszystkich rozdzielczościach wygląda tak samo. Jedyną jego zaletą jest szerokość wyrażona w procentach, więc dostosowuje się do szerokości okna przeglądarki. Oto efekt:

szablon responsywny

Nie ma co analizować kodu ponieważ jest to podstawowy szkielet szablonu, najprostszy jaki mógł powstać. W kodzie HTML #content znajduje się wcześniej niż #menu. Z jednej strony jest to lepsze rozwiązanie ze względu na SEO, z drugiej gorsze jeżeli będziemy brać pod uwagę np. osoby niepełnosprawne.

Chcemy aby szablon był responsywny i aby prawe menu przesuwało się na górę i zamieniało w menu poziome. W tym celu musimy dodać do arkusza stylów znacznik media queries zmieniający kod CSS poniżej określonej rozdzielczości. Ja użyję rozdzielczości progowej 900px.

Aby menu przeskoczyło na górę, trzeba nadać mu atrybut position: absolute. To przez to, że w kodzie HTML menu jest w kodzie jako drugie. Skoro będzie to menu poziome, należy ustawić jego szerokość na width: 100%. Należy także zwiększyć szerokość treści strony, ponieważ obecnie zajmuje ona tylko 75%. Po przeskoczeniu menu powinna zajmować width: 98%.

Aby linki w menu układały się poziomo wystarczy zmienić im atrybut display i ustawić go na inline. To już wszystko. Ostatnim zabiegiem kosmetycznym jest ukrycie napisu Menu główne oraz dodanie poziomych kresek po każdym elemencie menu. Cały opisany kod wygląda następująco:

Dodaję go na końcu arkusza stylów, szablonu zaprezentowanego wyżej. Oto efekt podczas zmiany wielkości okna:

szablon1

szablon2

szablon3

Mimo, że dodałem tylko jeden element media queries zmieniający orientację menu, szablon będzie poprawnie wyświetlany na wszystkich urządzeniach mobilnych oraz na wszystkich rozdzielczościach. W kodzie CSS brakuje skalowania obrazków, jednak te nie zostały użyte w przykładzie.

Myślę, że tworzenie stron w sposób responsywny to nie dodatkowa umiejętność i nowa technologia dla bogatych, tylko standard, którego trzeba się trzymać podczas projektowania strony lub bloga. Jak widzisz, prosty zabieg dopasowania strony do rozdzielczości, wymaga tylko kilku dodatkowych linijek.

Przykład szablonu zaprezentowanego w artykule możesz zobaczyć klikając w link www.p-programowanie.pl/pliki/responsywny. Aby sprawdzić jak działa po prostu zmniejsz okno przeglądarki.

Testowanie strony responsywnej

W dość łatwy sposób możesz przetestować działanie responsywności na dowolnej stronie internetowej. Firma Google udostępnia narzędzie o nazwie „test optymalizacji mobilnej”, które pozytywny wynik zwróci tylko dla poprawnie działającej strony responsywnej.

Narzędzie dostępne jest pod adresem: https://search.google.com/test/mobile-friendly

strona responsywna

Przeskanowanie strony jest bardzo proste i nie wymaga żadnej specjalistycznej wiedzy. Jeżeli wszystko działa poprawnie, Twoim oczom powinien się ukazać taki tekst jaki widoczny jest na powyższym zdjęciu.

Na pewno warto użyć tego narzędzia, jeżeli odbieramy stronę od jakiś firm trzecich. Da to poglądowy obraz tego, czy usługa została wykonana fachowo. Podkreślam jeszcze raz, strony responsywne to już standard.

Biblioteka Bootstrap

W dzisiejszych czasach wszystkie dostępne szablony stron internetowych są responsywne. Dotyczy to zarówno WordPressa jak i innych systemów. Jeżeli decydujesz się na zaprojektowanie strony responsywnej własnoręcznie od zera, koniecznie skorzystaj z gotowych narzędzi.

Jednym z najpopularniejszych narzędzi będzie w tym wypadku biblioteka Bootstrap. Jest to zestaw stylów CSS, które są w dość mądry sposób poukładane i ustandaryzowane. Za pomocą tej biblioteki możesz tworzyć zaawansowane szablony stron internetowych, które od razu będą w całości responsywne. Przykłady stron opartych o Bootstrap znajdziesz na stronie https://getbootstrap.com/docs/4.3/examples/.

Dosłownie nikomu nie doradziłbym tworzenia własnej strony responsywnej bez użycia Bootstrapa. Ja na moim blogu go nie posiadam, ale wynika to z faktu, że dawniej to narzędzie nie było aż tak popularne jak teraz.

Podsumowanie

Artykuł wyszedł dość długi, z tego powodu dodam krótkie, treściwe podsumowanie:

  • strona responsywna to już nie tylko fajny dodatek – to konieczność, bo inaczej stracimy pozycję w Google
  • projektując stronę responsywną zawsze oprzyj ją na bibliotece Bootstrap
  • jeżeli jakaś firma zajmuje się Twoją stroną, zweryfikuj ją w narzędziu Google
  • strona responsywna bardzo dobrze współpracuje z prostym, przejrzystym projektem graficznym (flat design)
  • szerokość wszystkich elementów musi być procentowa, wysokość może być już statyczna
  • rozmiary czcionek opieraj o relatywne jednostki emrem
  • jakieś elementy strony będziesz musiał ukryć na mniejszych rozdzielczościach – to normalne

 

Użytkownik absolwent napisał:

19 sierpnia 2014


Piszesz że „Na potrzeby artykułu stworzyłem mało skomplikowany szkielet szablonu. Jego kod HTML jest następujący:”

a w deklaracji doctype masz XHTML „”

radzę rzadziej używać ctrl+c i ctrl+v

Poza tym nie poruszyłeś wszystkich wątków responsywności m. in. bootstrap.

Pozdrawiam,

absolwent prywatnej uczelni.

Użytkownik Karol napisał:

19 sierpnia 2014


Dobrze odróżniam X/HTML, choć nie różnią się byt wiele. Nigdy nie używam CTRL+C pisząc jakikolwiek artykuł, w każdym zdarzają się jakieś drobne błędy. Bootstrap nijak ma się do RWD, choć można w nim takie strony tworzyć. Artykuł miał mówić o podstawach RWD i tak też jest. Oprócz bootstrap’a istnieje kilka innych dużych frameworków dla fron-end’owców. Opisując bootstrapa należało by to na pewno rozbić na osobny artykuł, a na dodatek musiało by ich powstać wiele, ponieważ nie sposób opisać jakikolwiek framework w jednym artykule. Pozdrawiam również!

Użytkownik absolwent napisał:

20 sierpnia 2014


Powyższy przykład layoutu jest skopiowany bo już go kiedyś widziałem, jak szukałem tutoriala jak zrobić responsive website.

Ale zapomniałeś choćby o responsywności dla ramek z youtube (a to ważne bo nie tylko zdjęcia się wrzuca na stronkę).

style css
np.

#kontener embed,
#kontener object,
#kontener iframe {
max-width: 100%;
max-height: 100%;
}

Poza tym przydałby się link np z http://quirktools.com/screenfly/

Użytkownik Jarek K napisał:

12 września 2014


Witam, wtrącę się do dyskusji. Przede wszystkim na początek gratulację dla Karola za same chęci tworzenia bloga i mam nadzieję, że starasz się żeby był jak najlepszy ale wiemy wszyscy (zainteresowani), że to jest niezwykle obszerny temat więc warto rozwinąć niektóre tematy na przykład w tej konstruktywnej krytyce użytkownika absolwent. Napisać kolejny post o responsywności ramek z youtube moim zdaniem ciekawy temat i wilk syty i owca cała:)

Użytkownik Grzegorz napisał:

30 listopada 2014


Bardzo dużo informacji w pigułce. Dobra robota. Warto zwrócić uwagę, że to coraz częściej używana metoda pomimo kosztów pracy.

Użytkownik Piszczuś napisał:

15 grudnia 2014


Witam, bardzo fajnie wszystko opisane :) Pokazane przykłady, co jest ważne by zobaczyć również efekt skompilowanego kodu.

Czytałem wiele stron i rzadko się zdarzało, a nawet prawie w ogóle, że autor nie zamieścił w treści kodu , a to akurat mi pomogło, ponieważ strona wyświetlała się na komórce jako skalowana, a po dodaniu tagu wszystko działa, jak należy :)

Pozdrawiam i życzę wielu sukcesów i równie dobrych artykułów!

Użytkownik Dawid napisał:

11 lutego 2015


Witam, zagadnienie bardzo zrozumiale opisane i co najważniejsze z konkretnymi przykładami. Przydatny artykuł, na pewno jeszcze nie raz tu zajrzę ;) Pozdrawiam.

Użytkownik Eleven Byte napisał:

20 lutego 2015


Moim zdaniem aktualnie responsive design to już nie jest jakiś wymysł, czy nowość, a standard. To, że wciąż spotykamy strony, które za dobrze nie działają na telefonach, to jeszcze nic nie znaczy i aktualnie każdy, kto na poważnie prowadzi swoją stronę powinien zaprojektować wersję mobilną. Szczególnie jeśli wysyłamy newsletter. W 2014 roku 50% wiadomości została przeczytana na komórkach. Teraz jeśli mamy przekierowanie na naszą stronę, która nie ma wersji mobilnej to zaliczamy małego faila. Swoją drogą właśnie nawet maile aktualnie się dostosowuje pod komórki.

Użytkownik Polso napisał:

11 marca 2015


Czy strony w IFRAME też mogą być w responsywnym layoucie, czy trzeba całkowicie pozbyć się ramek na stronie?

Użytkownik Karol napisał:

11 marca 2015


Ramki IFRAME nie powinny być stosowane w szablonie responsywnym, a tak w ogóle to nie powinny być już używane wcale. Jeżeli ma Pan absolutną potrzebę użycia takiej ramki z jakiś tajemniczych względów (np. jakiś komponent jest w niej osadzony), musi Pan obudować ramkę DIVem.

Poprzez CSS ustawiamy szerokość diva na 100% oraz dajemy mu atrybut „overflow:hidden”. Ramce IFRAME także ustawiamy szerokość na 100%. Wtedy będzie się odpowiednio skalować.

Użytkownik RP napisał:

28 marca 2015


„Ramki IFRAME nie powinny być stosowane w szablonie responsywnym, a tak w ogóle to nie powinny być już używane wcale.”
Jak można powinno się unikać iframe ze względów na SEO. Roboty mają utrudniony dostęp do treści zawartej w iframkach.
Samo stosowanie nie jest naganne. Obecnie dzięki HTML5 znacznik jakby wraca do łask :) Stwierdzenie że nie powinien być używany wcale i w ogóle – stosowałbym raczej ostrożniej…

Użytkownik Greggu napisał:

28 czerwca 2015


Bardzo interesujący i przydatny artykuł. Jasno zwięźle podane informacje poparte przykładami oraz kodem.

Proszę tego nie odbierać jako jakąś złośliwość, ale zwracam uwagę na błąd: „trzeba ukrywać i zastąpywać… „. Poprawiłbym na „zastępować”:)
Pozdrawiam

Użytkownik Paulina napisał:

26 sierpnia 2015


Dzięki za świetny kurs!

Użytkownik Wiktor napisał:

03 stycznia 2016


Bardzo przydatny artykuł, aczkolwiek skoro korzystamy z CSS3 i chcemy być przyjaźni dla Google, to powinniśmy stosować również HTML5.

Początkowo nie byłem przekonany do HTML5 i CSS3, bo myślałem, że jeszcze bardziej skomplikują, ale ostatnio wziąłem się za nadrabianie zaległości i muszę stwierdzić, że zmiany są na plus. Kod jest teraz krótszy i bardziej czytelny, a co za tym idzie można pisać z głowy. Ja nigdy nie pamiętałem jak zacząć stronę, samo zadeklarowanie typu dokumentu i kodowania wymagało kopiowania, a teraz bez problemu lecę z głowy.

Użytkownik Adam napisał:

14 stycznia 2016


Czytając wiele opracowań nie mogłem zrozumieć tematu responsywności. Dzięki za informacje.Nauczyłem się dużo.Teraz postaram się to wdrożyć na bardziej skomplikowane szablony.Może mi się uda.

Użytkownik Paweł M napisał:

09 sierpnia 2016


Dzięki za przystępne przedstawienie informacji o tworzeniu stron responsywnych.

Użytkownik netteria.net napisał:

28 kwietnia 2017


Fajny i obszernie omawiający zagadnienie artykuł. Od siebie dodam, że obrazki w css warto zdefiniować width:auto9; będą ładnie się skalowały na stronie. Warto użyć bootsrapa, który jest świetny do budowy responsywnych stron internetowych.

Użytkownik kolejny absolwent napisał:

19 sierpnia 2017


Wybacz porównanie, ale stosowanie „absolute” do tworzenia responsywnych szablonów jest jak używanie szczura do podrapania się po plecach.

Użytkownik Daniel napisał:

22 marca 2018


Dziękuję Ci bardzo za umieszczenie tej publikacji.
Pozwoliła mi ona nie tylko zrezygnować z wielkiego CMS jakim jest DLE, lecz i za razem powrócić do tego co lubię robić przy pomocy dla wielu „głupiego pajączka”.
Dałeś mi świeże spojrzenie na szeroką gamę osób korzystających z internetu w dzisiejszych czasach.
Czytając pierwszy komentarz do tego artykułu tak naprawdę nie wiedziałem czy zacząć się śmiać czy za razem płakać.
Prostota jest genialna. Jak wiadomo, wrażenie ekskluzywności przyciąga głupi pieniądz. Dziękuje raz jeszcze szczególnie za tą całkowitą prostotę i przejrzystość jaką ujawniłeś.

Użytkownik Kasia napisał:

11 kwietnia 2018


Jeśli grafika e-mail dostosowuje się do każdego urządzenia względem szerokości (wszedzie ta sama prosta grafika) czy mozemy juz mowic o rsponsywnosci strony czy dopiero wtedy jak jego wersja bedzie trscia wpasowana pod typ urzadzenia czyli bedzie miala inny uklad? (w pierwszym przypadku ma taki sam uklad)

Użytkownik Karol napisał:

12 kwietnia 2018


@Kasia
Dostosowanie się elementów do szerokości urządzenia to już responsywność. Nawet pojedynczy obrazek skalujący się względem szerokości to zachowanie responsywne. Układu lepiej wcale nie zmieniać, jednak czasem (ze względu na poziom skomplikowania) jest to po prostu niezbędne.

Użytkownik Shark napisał:

14 lipca 2018


Wszystko pięknie ale opis jak zrobić stronę responsywną ma się słabo do tych zrzutów szaroczarnych – Programowanie. Dokładnie chodzi o wyświetlanie menu. Mam na stronie menu w jednej lini powyżej treści głównej i dodatkowej (dwie kolumny) i na mobilnych urzadzeniach chciałbym mieć linki jeden pod drugim. Nie napisałeś jak to zrobić a pokazałeś zrzuty.

Użytkownik aga napisał:

14 września 2018


Uzupełniłem wiedzę z tego tematu. Mam jednak problem. Strona responsywna z adresem HTTPS gubi mi menu przy na urządzenia mobilne, a przy adresie z HTTP wszystko jest OK.
Jak ktoś wie gdzie jest problem, to z góry dziękuję za poradę.

Użytkownik Emeryt napisał:

07 listopada 2018


Zawartość merytoryczna została już obficie skomentowana. Ja daję duży plus za język, dobry polski język, którym autor umie się posługiwać.
Wyjątkiem jest tajemnicza sugestia „daj lajka na fejsie” ;-)
I może jeszcze „Ilość znaków” (lepiej byłoby: „Liczba znaków”) w liczniku pod okienkiem, w którym piszę ten komentarz.

Użytkownik Marcin napisał:

09 marca 2019


Czy autor jest absolutnie pewien, że nie można powielać menu dla różnych mediów, bo Google uzna to za duplikat? Nie jestem ekspertem od SEO, ale na tyle, na ile znam temat to wydaje mi się, że takie wątpliwości można mieć przy ukrywaniu / duplikowaniu dłuższych treści. Wtedy Google mogłoby się „obrazić”, że wciskamy na stronę np. dwa razy ten sam artykuł (ale i to wielu SEO-wców na pewno by podważało). Traktowanie zwykłego menu w dwóch wersjach jako duplikat i obawa, że otrzyma się bana czy filtry to chyba jednak lekka przesada?

Użytkownik Oskar napisał:

13 kwietnia 2019


Słabo wykonana ta przykładowa responsywność (https://www.p-programowanie.pl/pliki/responsywny/), skoro przy rozdzielczości 375 x 812 czwarty element menu dalej jest widoczny.

Użytkownik Karol napisał:

14 kwietnia 2019


@Oskar
Istnieją jakieś granice dla jakich dostosowujemy responsywność strony. Przykładowa strona miała pokazać, jak przy danej rozdzielczości X przeskakuje menu. Nic nie stoi na przeszkodzie aby dodać kolejną regułę, która dla mniejszych rozdzielczości ustawi menu kaskadowo. Swoją drogą nawet stare dotykowe telefony mają rozdzielczość na poziomie 1080×1920.

Zachęcam Cię do zostawienia komentarza!

Ilość znaków: 0