Technika tworzenia stron responsywnych

Witam,

Temat stron responsywnych jest dla mnie nowością i chciałbym się w nie bardziej zagłębić. Zastanawia mnie tylko jak najlepiej robić, najpierw stworzyć stronę a potem dopiero dorabiać do niej responsywność czy lepiej przy tworzeniu każdego elementu strony. Chodzi mi głównie o sposób, który jest najszybszy oraz, przy którym można popełnić najmniej błędów. :slight_smile:

Najpierw robisz zwykłą stronę, ale myślisz także o responsywności, później jedynie wprowadzasz poprawki.

Do RWD używa się najczęściej media-queries i wartości procentowych.

Yhym rozumiem. A co z progami responsywności? Jakie najlepiej przyjąć?:slight_smile:

Progi responsywności. Hmm, dobre pytanie, nad którym nie jeden już popadł w shizofremię.

Podstawowym elementem powinna być analiza starej strony oraz odwiedzających. Na podstawie tego można wysnuć pewnie wnioski i dostosować się do ludzi, a nie kazać ludziom dostosowywać się do strony.

Jeśli nie masz tego, proponuje poszukać ogólnopolskich (tudzież ogólnoświatowych) statystyk rozdzielczości ekranów i wielkości przeglądarek. Potem zaopatrujesz się w rozpiskę najpopularniejszych rozmiarów ekranów smartfonów i jesteś w domu.

Niektórzy lubią proste rozwiązania czyli np jeden lub góra dwa break pointy - czyli progi. np 768 jest popularny (iPad), 480 (lub 320) bo to bardzo lubiana rozdziałka smartów. 1024 jest legendarne, ale… nie polecam osobiście. 1250~(i okolice) wydaje się być sensowniejsze w dzisiejszych czasach.

No i portret :wink:

A co do pytania z pierwszego posta.

Jest tyle zasad co ludzi. Niektóre sa popularniejsze, niektóre mniej ;p Osobiście preferuje coś w stylu: od początku myślimy o responsywności, układamy treść z myślą o responsywności, potem wygląd.

W praktyce jednak przeważnie jest tak, że albo dostajesz design do ręki i zrób z niego coś co będzie działać. Albo: “Nie mamy aktualnie pieniędzy na responsive, więc zróbcie prostą, a potem jak będą sales, to zrobimy responsive, tak mówię ja bo jestem project manażerem!”

Dzięki za wyjaśnienie. :slight_smile: