Jump to content

Dizajn i përgjegjshëm i uebit

Shtoni lidhje
Nga Wikipedia, enciklopedia e lirë
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

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ë 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 | Redakto nëpërmjet kodit]

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 | Redakto nëpërmjet kodit]

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 | Redakto nëpërmjet kodit]

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 | Redakto nëpërmjet kodit]

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