Wikipedia

Dizajn i përgjegjshëm i uebit

Nuk ka versione të shqyrtuara të kësaj faqe, ndaj mund të mos jetë kontrolluar përputhja e saj me standardet.

Dizajni i përgjegjshëm i uebit ( RWD ) ose dizajni i përgjegjshëm është një qasje ndaj dizajnit të uebit që synon të bëjë që faqet e internetit të paraqiten mirë në një sërë pajisjesh dhe madhësive të dritareve ose ekraneve nga madhësia minimale në maksimum të ekranit për të siguruar përdorshmëri dhe kënaqësi. [1] [2]

Një pamje e ekranit të Wikipedia-s në një ekran kompjuteri.
Një pamje e ekranit të Wikipedia-s në një ekran telefoni celular.
Një pamje e ekranit të Wikipedia me skedën përgjegjëse [[MW:Skin /2022|Vector 2022]], në një ekran kompjuteri (majtas) dhe në një ekran telefoni celular (djathtas). Elementët riorganizohen në një mënyrë më të përshtatshme për pajisje mobile.
Përmbajtja është si uji, një thënie që ilustron parimet e RWD

Një dizajn i përgjegjshëm përshtat paraqitjen e faqes së internetit me mjedisin e shikimit [3] duke përdorur teknika të tilla si rrjete të bazuara në proporcion të lëngjeve, [4] [5] imazhe fleksibël, [6] [7] dhe pyetje mediatike CSS3, [8] [9] [10] një zgjerim i rregullit @media, [11] në mënyrat e mëposhtme:

  • Koncepti i rrjetit fluid kërkon që madhësia e elementit të faqes të jetë në njësi relative si përqindje, në vend të njësive absolute si pikselë ose pika . [12]
  • Imazhet fleksibël janë gjithashtu të madhësisë në njësi relative, në mënyrë që të parandalohen që ato të shfaqen jashtë elementit të tyre që përmban . [13]
  • Kërkesat e medias lejojnë që faqja të përdorë rregulla të ndryshme të stilit CSS bazuar në karakteristikat e pajisjes në të cilën shfaqet faqja, p.sh. gjerësia e sipërfaqes së interpretimit (gjerësia e dritares së shfletuesit ose madhësia fizike e ekranit).
  • Strukturat e përgjegjshme përshtaten automatikisht dhe përshtaten me çdo madhësi të ekranit të pajisjes, pavarësisht nëse është një desktop, një laptop, një tabletë ose një telefon celular.

Dizajni i përgjegjshëm i uebit u bë më i rëndësishëm pasi përdoruesit e pajisjeve celulare u llogaritën për shumicën e vizitorëve të faqes në internet. [14] [15] Në vitin 2015, për shembull, Google njoftoi Mobilegeddon dhe filloi të rrisë renditjen e faqeve të faqeve miqësore me celular kur kërkon nga një pajisje celulare. [16]

Sfidat dhe qasjet e tjera

Redakto

Luke Wroblewski ka përmbledhur disa nga sfidat e dizajnit RWD dhe celular dhe ka krijuar një katalog të modeleve të paraqitjes me shumë pajisje. [17] [18] [19] Ai sugjeroi që, krahasuar me një qasje të thjeshtë HWD, përvoja e pajisjes ose qasjet RESS (dizajni i përgjegjshëm i uebit me komponentë nga ana e serverit) mund të ofrojnë një përvojë përdoruesi që është e optimizuar më mirë për pajisjet mobile. [20] [21] [22] Zbatimi i gjeneratorit CSS nga ana e serverit të gjuhëve të stileve si Sass mund të jetë pjesë e një qasjeje të tillë. Google ka rekomanduar dizajn të përgjegjshëm për faqet e internetit të smartfonëve mbi qasjet e tjera. [23]

Edhe pse shumë botues kanë zbatuar dizajne të përgjegjshme, një sfidë për adoptimin e RWD ishte se disa reklama banerash dhe video nuk ishin të rrjedhshme. [24] Megjithatë, reklamimi i kërkimit dhe reklamimi i ekranit (banner) erdhën për të mbështetur shënjestrimin e platformës specifike të pajisjes dhe formate të ndryshme të madhësisë së reklamave për desktop, smartphone dhe pajisje bazë celulare. URL të ndryshme të faqeve të uljes janë përdorur për platforma të ndryshme, ose Ajax është përdorur për të shfaqur variante të ndryshme reklamash në një faqe. [25] [26] [27] Tabelat CSS lejuan paraqitje hibride fikse dhe fluide. [28]

Ka pasur shumë mënyra për të vërtetuar dhe testuar dizajnet RWD, [29] duke filluar nga verifikuesit e faqeve celulare dhe emuluesit celularë deri te mjetet e testimit të njëkohshëm si Adobe Edge Inspect . [30] Shfletuesit dhe veglat e zhvilluesve Chrome, Firefox dhe Safari kanë ofruar mjete të përgjegjshme të ndryshimit të madhësisë së pamjes së pamjes së dizajnit, siç bëjnë palët e treta. [31] [32]

Historia

Redakto

Specifikimi i W3C i HTML+ deklaroi se faqet e internetit duhet të jepen sipas preferencave të përdoruesit. [33] Sidoqoftë, personalizimi i paraqitjes së faqes së internetit mungonte. Shumë zhvillues të uebit iu drejtuan tabelave të zakonshme HTML si një mënyrë për të personalizuar paraqitjen dhe për të sjellë një reagim bazë në faqet e tyre të internetit në të njëjtën kohë.

Faqja e parë e madhe që shfaqi një plan urbanistik që përshtatet në një mënyrë jo të parëndësishme me gjerësinë e pamjes së shfletuesit ishte Audi .com i lançuar në fund të vitit 2001, [34] i krijuar nga një ekip në razorfish i përbërë nga Jürgen Spangl dhe Jim Kalbach (arkitektura e informacionit), Ken Olling (dizajn) dhe Jan Hoffmann (zhvillimi i ndërfaqes). Aftësitë e kufizuara të shfletuesit nënkuptonin që për Internet Explorer, faqosja mund të përshtatej në mënyrë dinamike në shfletues, ndërsa, për Netscape, faqja duhej të ringarkohej nga serveri kur ndryshonte madhësinë.

Cameron Adams krijoi një demonstrim në 2004. [35] Deri në vitin 2008, një numër termash të ndërlidhur si "fleksibël", "likuid", [36] "lëng" dhe "elastik" po përdoreshin për të përshkruar paraqitjet. Kërkesat e medias CSS3 ishin pothuajse gati për kohën kryesore në fund të 2008/fillim të 2009. [37] Ethan Marcotte shpiku termin dizajn të përgjegjshëm të uebit [38] - dhe e përcaktoi atë në kuptimin e rrjetës së lëngshme / imazheve fleksibël / pyetjeve të medias - në një artikull të majit 2010 në A List Apart . [39] Ai përshkroi teorinë dhe praktikën e dizajnit të përgjegjshëm të uebit në librin e tij të shkurtër të vitit 2011 të titulluar Dizajni i përgjegjshëm i uebit . Dizajni i përgjegjshëm u rendit si #2 në Tendencat kryesore të Dizajnit të Uebit për 2012 nga revista .net pas përmirësimit progresiv në #1. [40]

Mashable e quajti 2013-ën Vitin e Dizajnit të Përgjegjshëm të Uebit. [41]

Konceptet e ndërlidhura

Redakto

Dizajni i parë në celular dhe përmirësimi progresiv janë koncepte të lidhura që i paraprijnë RWD. [42] Shfletuesit e telefonave celularë bazë nuk e kuptojnë JavaScript-in ose pyetjet e medias, kështu që një praktikë e rekomanduar ishte krijimi i një faqe interneti bazë dhe përmirësimi i tij për telefonat inteligjentë dhe kompjuterët personalë, në vend që të mbështeteshin në degradimin e këndshëm për të bërë një sajt kompleks dhe me imazhe të rënda të funksionojë. Telefonat celular. [43] [44] [45] [46]

Referime

Redakto
  1. ^ Marcotte, Ethan (25 maj 2010). "Responsive Web design". A List Apart. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  2. ^ Schade, Amy (2014-05-04). "Responsive Web Design (RWD) and User Experience". Nielsen Norman Group. Marrë më 2017-10-19. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  3. ^ Marcotte, Ethan (25 maj 2010). "Responsive Web design". A List Apart. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  4. ^ "Core concepts of Responsive Web design". 8 shtator 2014. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  5. ^ Marcotte, Ethan (3 mars 2009). "Fluid Grids". A List Apart. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  6. ^ Marcotte, Ethan (7 qershor 2011). "Fluid images". A List Apart. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  7. ^ Hannemann, Anselm (7 shtator 2012). "The road to responsive images". net Magazine. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  8. ^ Gillenwater, Zoe Mickley (15 dhjetor 2010). Examples of flexible layouts with CSS3 media queries. Stunning CSS3. fq. 320. ISBN 978-0-321-722133. Arkivuar nga origjinali më 20 gusht 2020. Marrë më 30 qershor 2024. {{cite book}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  9. ^ Gillenwater, Zoe Mickley (21 tetor 2011). "Bizfly Martech". {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  10. ^ "Responsive design—harnessing the power of media queries". Google Webmaster Central. 30 prill 2012. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  11. ^ "@media rule". w3.org. W3C. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  12. ^ Marcotte, Ethan (3 mars 2009). "Fluid Grids". A List Apart. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  13. ^ Marcotte, Ethan (7 qershor 2011). "Fluid images". A List Apart. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  14. ^ "Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper". Cisco. 30 janar 2015. Marrë më 4 gusht 2015. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  15. ^ "Mobile share of U.S. organic search engine visits 2021". Statista. Marrë më 29 tetor 2021. {{cite news}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  16. ^ "Official Google Webmaster Central Blog: Rolling out the mobile-friendly update". Official Google Webmaster Central Blog. Marrë më 4 gusht 2015. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  17. ^ Wroblewski, Luke (17 maj 2011). "Mobilism: jQuery Mobile". {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  18. ^ Wroblewski, Luke (6 shkurt 2012). "Rolling Up Our Responsive Sleeves". {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  19. ^ Wroblewski, Luke (14 mars 2012). "Multi-Device Layout Patterns". {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  20. ^ Wroblewski, Luke (29 shkurt 2012). "Responsive Design ... or RESS". {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  21. ^ Wroblewski, Luke (12 shtator 2011). "RESS: Responsive Design + Server Side Components". {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  22. ^ Andersen, Anders (9 maj 2012). "Getting Started with RESS". {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  23. ^ "Building Smartphone-Optimized Websites". {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  24. ^ Snyder, Matthew; Koren, Etai (30 prill 2012). "The state of responsive advertising: the publishers' perspective". .net Magazine. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  25. ^ "Server-Side Device Detection: History, Benefits And How-To". Smashing magazine. 24 shtator 2012. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  26. ^ Wroblewski, Luke (6 shkurt 2012). "Rolling Up Our Responsive Sleeves". {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  27. ^ JavaScript and Responsive Web Design Google Developers
  28. ^ "The Role of Table Layouts in Responsive Web Design". Web Design Tuts+. Marrë më 21 maj 2015. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  29. ^ Young, James (13 gusht 2012). "Top responsive web design problems... testing". .net Magazine. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  30. ^ Rinaldi, Brian (26 shtator 2012). "Browser testing... with Adobe Edge Inspect". {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  31. ^ "Responsive Design View". Mozilla Developer Network. Marrë më 21 maj 2015. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  32. ^ Malte Wassermann. "Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions - Best developer device testing toolbar". maltewassermann.com. Marrë më 21 maj 2015. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  33. ^ "An Overview of HTML+". w3.org. W3C. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  34. ^ Kalbach, Jim (July 22, 2012). "The First Responsive Design Website: Audi (circa 2002)." Stampa:Sps
  35. ^ Adams, Cameron (21 shtator 2004). "Resolution dependent layout: Varying layout according to browser width". The Man in Blue. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)[lidhje e vdekur]
  36. ^ "G146: Using liquid layout". w3.org. Marrë më 21 maj 2015. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  37. ^ "Media Queries". w3.org. Marrë më 21 maj 2015. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  38. ^ "OutSeller Group - Organize, Optimize, Maximize". outseller.net. Arkivuar nga origjinali më 2 shkurt 2017. Marrë më 21 maj 2015. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  39. ^ Marcotte, Ethan (25 maj 2010). "Responsive Web design". A List Apart. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  40. ^ Grannell, Craig (9 janar 2012). "15 top web design and development trends for 2012". .net Magazine. Arkivuar nga origjinali më 11 shtator 2013. Marrë më 29 tetor 2021. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  41. ^ Cashmore, Pete (11 dhjetor 2012). "Why 2013 Is the Year of Responsive Web Design". {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  42. ^ "What is Responsive Web Design". 23 korrik 2012. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  43. ^ Wroblewski, Luke (3 nëntor 2009). "Mobile First". {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  44. ^ Firtman, Maximiliano (30 korrik 2011). Programming the Mobile Web. fq. 512. ISBN 978-0-596-80778-8. {{cite book}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  45. ^ "Graceful degradation versus progressive enhancement". 3 shkurt 2009. Arkivuar nga origjinali më 13 nëntor 2014. {{cite web}}: Mungon ose është bosh parametri |language= (Ndihmë!)
  46. ^ Parker, Todd; Wachs, Maggie Costello; Jehl, Scott (shkurt 2010). Designing with Progressive Enhancement. fq. 456. ISBN 978-0-321-65888-3. Marrë më 1 mars 2010. {{cite book}}: Mungon ose është bosh parametri |language= (Ndihmë!)
Marrë nga "https://sq.wikipedia.org/wiki/Dizajn_i_përgjegjshëm_i_uebit"