Ce înseamnă Responsive Design?

În continuarea discuției de aici, unde @eionut este nelămurit cu acest subiect.

Există două variante în privința firmei respective:

  1. Voiau să scape de tine, prin urmare au băgat strategia „unde ți-e fesul?”, unde orice ai fi răspuns ar fi fost automat greșit;
  • Sunt niște amatori care habar n-au cât de amatori sunt.

În oricare din cazuri, nu vrei să lucrezi cu ei.

Acum, referitor la responsive: incredibil de mulți pleacă de la două premise:

  • responsive înseamnă versiune de mobil;
  • responsive se face doar cu grid.

Ambele premise sunt cât se poate de false. În primul rând, responsive înseamnă optimizarea site-ului astfel încât să fie vizibil bine pe orice rezoluție. Că în acest moment s-a nimerit ca nevoia să fie doar de optimizare pe ecrane mici este fix asta: o nimereală.

Vin tare din urmă ecranele 4k, unde fără o optimizare minimă vei avea un site care ocupă cam un sfert din ecran, restul fiind alb. Apoi ai ecranele cu densități diferite, unde unitatea pixel nu coincide cu un pixel fizic. Și tot felul de lucruri de genul ăsta. Un site care se adaptează pe toate ecranele e resposnive. Un site care se adaptează bine doar pe ecranele de telefon… ei bine, e site optimizat pentru telefon :slight_smile: Putem porni o discuție separată despre cei ce consideră că responsive înseamnă doar iphone, dar poate cu altă ocazie.

Problema cu gridul… Trebuie să fii ușor ignorant pentru a pune semnul de egal între ele și să decretezi că una fără alta nu se poate. Poți să faci layout cu grid-uri care nu e responsive la fel de bine cum poți face site layout responsive fără grid-rui. Am urmat ambele căi fără nici un fel de probleme…

4 Likes

Deci, inteleg ca un design e responsiv daca se adapteaza si functioneaza pe orice dispozitiv, fara sa fie “conectat” la specificatiile unui device anume sau unei game de deviceuri.
Legat de premisele false, nu e tot o premisa falsa sa faci designul sa functioneze doar la breakpointuri “standard” (ex. - 320px, 480px, 768px, 992px, 1200px - “logica bootstrap”)?

Cum ar trebui inteleasa si cat de actuala e aceasta afirmatie a lui Ethan Marcotte (mai 2010)?

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. http://alistapart.com/article/responsive-web-design

Pe acelasi subiect - https://responsivedesign.is/

Absolut! Este doar o medie a dimensiunilor folosite. nu ți s-a întâmplat niciodată ca un anumit modul să arate nasol de la 890? Ce faci? Pui un breakpoint acolo sau lași utilizatorii cu ecrane între 769-991 să se chinuie?

Folosind griduri, de cele mai multe ori este mai comod să adaugi câteva breakpoints și ai rezolvat problema.

gândește-te la grid ca la un… pattern în design. Ceva ce poate fi replicat în mai multe locuri fără nici un fel de probleme.

Dar în nici un caz un zistem de griduri e ceva absolut indispensabil.

Cât despre ce zice Ethan… Are dreptate până la partea cu griduri.

E ca și cum ai spune că nu poți face geometrie pe o foaie dictando. :slight_smile:

1 Like

Pana la urma si “foaia de dictando” e tot un grid, cu o singura coloana pe care poti sa-ti desenezi cate coloane vrei si pana la urma tot la grid ajungi.

Mi se pare mie sau bootstrapul e o strutocamila? Pana acum nu l-am folosit si dupa interviul de ieri m-am contrat cu un prieten - el zicea ca gridul in bootstrap e fix si ca aia e responsive design, eu ca n-are cum, ca daca gridul e fix n-are cum sa fie responsiv design. Din cate-mi dau seama, in bootstrap, daca ai continutul intr-un div cu clasa container (nu container fluid), responsive design, by default, in sensul in care il inteleg eu, e doar pana in 768px, dupa care continutul “isi modifica forma” doar cand intra alt media query, altfel ramane fix.
Cel putin aparent Foundation e mai aproape de ideea de responsive design decat Boostrap. Din cate vad, cel putin continutul e fluid.

1 Like

Bootstrap are și el conceptul de fluid design pe full width, prin clasa container-fluid. Doar că e foarte puțin luat în considerare. Altfel, ai width: 100%; max-width: 1020px pe container și aia e. Apoi, toate elementele gridului au lățimi în procente.

Nu am lucrat foarte mult cu Zurb, deci nu mă pot pronunța.

În ansamblu, da. Este un fel de schelet pentru a face prototipuri rapide. Problema este că a fost adoptat foarte mult pentru toate site-urile, că deh… venea de la twitter. Dar se pare că nimeni n-a observat că nici măcar twitter nu-l folosește :smiley:

3 Likes

Doar ce am vazut clipul de aici :
http://aneventapart.com/news/post/laziness-in-the-time-of-responsive-design-by-ethan-marcotte-aea-video - si mi s-a parut destul de relevant si interesant in contextul discutiei.

3 Likes

Bună prezentarea, dar nu spune nimic diferit de ce am zis și eu mai sus :slight_smile:

1 Like

Posibil, dar tipul intra in detalii. Si (presupun ca) stii vorba aia, detaliile fac diferenta.

Plus ca tipul vine si cu exemple practice, nu doar cu (scuza-mi indrazneala/tupeul) vorbe goale. I get it, nu sunt vorbe goale, dar unui incepator i-se pot parea vorbe goale, iar motivul pentru care am ales cuvintele vorbe goale a fost pentru a atrage atentia asupra faptului ca nu sunt vorbe goale, in caz ca vre-un incepator (la nivelul de junior si/sau mai jos) ajunge sa citeasca discutia asta. (Psihologie inversa + debunking. Sau cherry picking, daca vrei… dar primul rand din comentariu este legit on-topic.)

1 Like

eram mic si prost si amator, aflasem de responsive si am zis DA, trebuie sa fac asa, si asa, si asta, si aia … apoi a publicat domnul un articol si m-am calmat

1 Like