50 mjete fantastike për krijimin e faqeve të përgjegjshme

Autor: Monica Porter
Data E Krijimit: 17 Marsh 2021
Datën E Azhurnimit: 17 Mund 2024
Anonim
50 mjete fantastike për krijimin e faqeve të përgjegjshme - Krijues
50 mjete fantastike për krijimin e faqeve të përgjegjshme - Krijues

Përmbajtje

Siç është prezantuar / shpikur nga Ethan Marcotte në artikullin e tij "Responsive Web Design", si dhe librin e tij më të shitur, dikujt i duhen tre elemente për ta bërë një faqe të përgjegjshme:

  1. Një rrjet fleksibël / lëng
  2. Imazhe të përgjegjshme
  3. Pyetjet për media

Ka shumë artikuj të tjerë të shkëlqyeshëm që mbulojnë motivet, konceptet dhe teknikat në lidhje me krijimin e përgjegjshëm të faqes në internet, kështu që ne do ta mbajmë fokusin e këtij artikulli në disa mjete kryesore që do t'ju ndihmojnë të bëheni të përgjegjshëm me përgjegjësi.

Mjetet për fillimin

Para se të filloni me ndërtimin e faqes tuaj, është më mirë të skiconi se si elementët në faqe do të përshtaten për t'iu përshtatur madhësive të ndryshme të shfletuesit të pajisjeve të ndryshme që do të shikohen, dhe për të shmangur shkëputjen që shpesh vjen nga të menduarit kryesisht për dizajni i desktopit dhe pjesa tjetër e përsëritjeve të përgjegjshme si një mendim i mëvonshëm (shih veçanërisht komentin e Stephanie (Sullivan) Rewis).

01. Fletët e Skicave të Përgjegjshme të Dizajnimit të Uebit

Ky grup i skicave të përgjegjshme të skicës, nga Jeremy P Alford, është një pikë e shkëlqyeshme fillestare për të filluar hartimin se si do të zhvendosen seksionet e faqeve në rezolucione të ndryshme.


02. Libri i Skicave me Dizajn të Përgjegjshëm

Nëse preferoni të mbani të gjitha skicat tuaja në një vend, atëherë mund të dëshironi të merrni parasysh këtë libër të lidhur me tela me 50 fletë skica të përgjegjshme nga kompania App Sketchbook.

03. Wireframes të përgjegjshëm

Një nga vështirësitë e ndërtimit të faqeve të internetit të përgjegjshme është përdorimi i kornizave tel për të treguar se si do të funksionojë dizajni i përgjegjshëm. James Mellers i Adobe ka bashkuar këtë mjet eksperimental për të treguar sesi mund të funksionojë kornizimi tel i përgjegjshëm i paraqitjeve komplekse.


04. Modelet e paraqitjes me shumë pajisje

Kur planifikoni një dizajn të përgjegjshëm është e dobishme të shihni se si njerëzit e tjerë e kanë afruar atë para jush, kështu që Modelet e Layout me shumë pajisje të Luke Wroblewski, e cila rendit modelet e njohura me lidhje me shembuj, është një vend i shkëlqyeshëm për të filluar.

05. Pllaka Stili

Pllakat e stilit të Samanatha Warren propozojnë një teknikë të re për dizajnin në epokën e përgjegjshme; në vend se modelet e dizajnit me gjerësi fikse, këto janë si tufa ose humor që tregojnë qasjen e përgjithshme të dizajnit pa hyrë në detaje të imta.

Mjetet për një rrjet fleksibël / lëngu

Siç u tha më herët, përbërësi i parë i nevojshëm për dizajnin e përgjegjshëm është një rrjet fleksibël / lëng.Më poshtë janë ndërtuar tashmë: thjesht duhet t'i shkarkoni dhe shpejt do të jeni në rrugën e një siti më të përgjegjshëm.


06. Sistemi i Rrjetit të Artë

Joni Korpi, i cili gjithashtu zhvilloi Less Framework, kohët e fundit ka lëshuar këtë version të ri të një sistemi të besueshëm rrjeti për dizajn të përgjegjshëm. Konsiderohet "palosje" pasi përshtatet lehtësisht nga 16, në tetë, në katër kolona, ​​Golden Grid System gjithashtu përmban një mbulesë të vogël të shfletuesit që ekspozon rrjetin në faqet tuaja për testim.

07. Foldy960

Gentët e talentuar në Paravel, Inc. kanë lëshuar rrjetin e modifikuar 960.gs që ata përdorin si bazë për projektet e tyre të përgjegjshme.

08. SimpleGrid

SimpleGrid, nga Conor Muirhead, u ndërtua me përgjegjshmëri të pjekur, kështu që është e lehtë të ngrihesh dhe funksionosh me projektin tënd të uebfaqes së përgjegjshme.

09. Rrjeti CSS 1140px

Një sistem tjetër i shkëlqyeshëm i rrjetit të përgjegjshëm është Rrjeti CSS 1140px nga krijuesi i Melbourne Andy Taylor, i cili kalon nga një rezolucion i gjerë në desktop deri në celular.

10. Sistemi i rrjetit kolonë CSS

Sistemi i rrjetit Columnal, i krijuar nga Pulp + Pixels aka drejtori krijues Nick Gorsline, bazohet në sistemin e rrjetit 1140px, por me disa të mira shtesë si p.sh. një komplet dizenjimi me sketa dhe skema skedash dhe kornizat e telit, si dhe stilet e korrigjimit të kodeve CSS.

11. Sistemi i rrjetit semantik

Zgjerimet e para-përpunuara të CSS si Sass dhe LESS po bëhen gjithnjë e më të popullarizuara dhe sistemi i rrjetit semantik të Tyler Tate i përdor ato për efekt maksimal në këtë sistem rrjeti i cili pretendon të mos përdorë klasa ose elementë të panevojshëm. Lexoni më shumë në coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for- Tomorrow/.

12. SUSY

Ashtu si sistemi i rrjetit semantik, SUSY e Oddbird krijoi një sistem rrjeti që nuk përdor shënime shtesë ose klasa të veçanta, por SUSY u drejtohet vetëm përdoruesve të Sass (dhe shtrirjes së tij, Compass).

13. Gridpak

Gridpak, nga Erskine Design, është një nga gjeneratorët më të rinj të rrjetit të përgjegjshëm përreth. Kjo ju lejon të vendosni kolonat dhe ulluqet tuaja në një numër pikash pushimi, pastaj rezulton skedarët CSS, JavaScript dhe PNG kështu që i gjithë ekipi juaj po punon nga e njëjta pikë fillestare.

14. Rrjetë

Ka ende një ajër të vogël misterioze mbi Gridset pasi, në kohën kur e shkruaj këtë, ai në të vërtetë nuk është lëshuar ende. Por mjeti nga Mark Boulton Design premton sisteme rrjeti të porositura, jo recetë, dhe një mënyrë për të ruajtur dhe menaxhuar rrjetet tuaja në internet.

15. Një rrjet më i mirë Photoshop për RWD

Elliot Jay Stocks propozon që të braktiset standardi i vjetër i rrjetit 960px de facto dhe të punohet nga një bazë 1000px, duke i bërë të gjitha llogaritjet e përqindjes më të lehtë për të punuar. Nëse jeni dakord, ai ka bërë një PSD për ju që të filloni të punoni me të.

16. Rrjeta me lëng

Nëse dizenjimi juaj është shumë i specializuar dhe ju duhet të krijoni rrjetin tuaj të personalizuar, mund ta bëni me llogaritësin e rrjetit të lëngjeve të nominuarit të sapoardhur.

17. Llogaritësi i përgjegjshëm

Një tjetër llogaritës i pikseleve për përqindje, por ky nga Stu Robson shkon një hap më tej se të tjerët duke gjeneruar të gjitha rregullat CSS për ju, që do të thotë që thjesht mund t'i kopjoni dhe ngjisni ato në fletët tuaja të stilit.

Mjetet për imazhe të përgjegjshme (dhe tekst)

Një tjetër komponent thelbësor i dizajnit të përgjegjshëm të internetit janë imazhet fluide. Ndërsa teknika për arritjen e imazheve fluide është e drejtpërdrejtë, optimizimi i performancës dhe ngarkesës së faqes për pajisje të ndryshme duket se është një nga sfidat më të mëdha në krijimin e përgjegjshëm të faqes në internet. Këtu janë disa burime për t'iu qasur çështjes.

18. Imazhe të përgjegjshme

Grupi i Filamentit shpiku një mënyrë për të dërguar një imazh të madhësisë së duhur bazuar në rezolucionin e ekranit. Ky eksperiment me imazhe të celularëve të parë që shkallëzojnë me përgjegjësi dhe përgjegjësi kërkon që të ketë dy imazhe me madhësi të ndryshme për t'u referuar.

19. Imazhe adaptive

Matt Wilcox mori frymëzim nga mjeti Responsive Images për të krijuar Imazhe Adaptive, i cili përdor PHP dhe pak JavaScript për të shërbyer imazhe të përshtatshme në pajisjen e përdoruesit pa kërkuar ndonjë shënim shtesë.

20. Sencha.io Src (ish Tinysrc)

Sencha ofron një shërbim cloud që dërgon versione të optimizuara të imazheve të pritura për madhësinë e pajisjes që i kërkon ato. Për të mësuar se si ta përdorni, shihni Docs.sencha.com/io/src/.

21. FitText

Megjithatë, një gur i çmuar tjetër nga Paravel, Inc është FitText.js, një shtojcë jQuery për ta bërë tipin e faqes së internetit të përgjegjshme ndaj modelit dhe pajisjes. Për detaje shih trentwalton.com/2011/05/10/fit-to-scale/.

22. pllakaTeksti

Frymëzuar nga FitText dhe algoritmi SlabType, slabText i Brian McAllister është një plug-in jQuery që bën blloqe të theksuara të tekstit që ndryshojnë me madhësi në mënyrë të përgjegjshme duke mbajtur një gjerësi të përcaktuar.

Mjetet për pyetjet mediatike

Tani që keni një ide se si paraqitja juaj do të ndryshojë për pajisje të ndryshme, një rrjet të rrjedhshëm dhe imazhe fluide, keni nevojë për pyetje mediatike për të zhvendosur elementët e faqes në një gjendje të përgjegjshmërisë.

23. Përgjigju.js

Çështja e vetme me dizajnin e përgjegjshëm është që shfletuesit që nuk mund të lexojnë pyetjet e medias të lihen pas. Kjo mund të mos jetë problem me audiencën tuaj të synuar, por gjithsesi është një praktikë e mirë për të akomoduar përdoruesit në shfletuesit e vjetër. Respond.js, nga Scott Jehl, mbështet vetëm vetitë me gjerësi min dhe gjerësi maksimale.

Për më shumë shikoni filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js, nga Wouter van der Graaf, mundëson që versionet e vjetra të IE dhe shfletuesve të tjerë të testojnë dhe zbatojnë në mënyrë efektive të gjitha llojet e pyetjeve mediatike.

25. Përshtat.js

Nathan Smith, autori i sistemit origjinal të rrjetit 960.gs, ka shkruar Adapt.js, një skenar i cili zbulon dimensionet e shfletuesit dhe shërben vetëm në format e kërkuara të stilit - si pyetje mediatike, por pa pyetje mediatike, që do të thotë se funksionon edhe në shfletuesit e vjetër.

26. Kategorizuesi

Ky është zbulimi i pajisjes i afruar nga këndi i kundërt - skenari i kategorizimit i Brett Jankord supozon se pajisjet janë të lëvizshme përveç nëse zbulohen ndryshe si desktop ose tabletë, duke ju mundësuar të shërbeni burime për shfletuesit në një mënyrë simpatike.

Pllaka kaldaje me dizajn të përgjegjshëm (dhe celular)

Në frymën e një rrjedhe pune efikase të përgjegjshme, pllakat e bojlerit lehtësojnë procesin e zhvendosjes së projekteve në shfletues më shpejt sesa më vonë. Shumica e këtyre tabelave të kaldajave kombinojnë mjetet më të mira të përmendura më lart në një paketë të pastër: një rrjet fleksibël i shtuar me skripta, ndërsa zbatojnë filozofitë e para celulare, me përmbajtje.

27. 320 e lart

Andy Clarke's 320 dhe Up është një kazan me celular i parë që integron me shumë mjete të tjera moderne të dizajnimit të internetit, të tilla si LESS dhe Bootstrap (shih # 30). Shtë një mënyrë e lehtë dhe e shkathët për të ngritur dhe funksionuar shpejt një sit. Shikoni gjithashtu intervistën tonë me Andy, në të cilën ai na tregon më shumë rreth versionit të ri.

28. Pa rrjetë

Gridless është një kazan me HTML5 dhe CSS3 që mund të shërbejë si bazë për planet tuaja të përgjegjshme, me fokus në tipografi dhe pajtueshmëri të shfletuesit të pjekur.

29. Skeleti

Ndryshe nga dy pllakat e kaldajave, pikënisja e të cilave është me rezolucionin më të vogël, kompleti i zhvillimit të Skeletit, krijuar nga Dave Gamache, bazohet në sistemin e rrjetit 960.gs dhe shkon deri në celular. Skeleton gjithashtu mburret me një kornizë të shkëlqyeshme stili për zhvilluesit për të ndërtuar stile në krye të tyre.

30. Bootstrap

E ndërtuar nga Twitter dhe tani me burim të hapur, Bootstrap është një kornizë dhe një seri përbërësish për marrjen e shpejtë të një faqe në internet, dhe që nga versioni dy të gjitha pjesët e saj kryesore punojnë me përgjegjësi.

Plugins, shims dhe polyfills

Megjithëse shfletuesit dhe softuerët modernë priren të jenë të përgatitur për të përgjegjshëm, nganjëherë na duhet të përdorim mjete shtesë për të siguruar një përvojë të qëndrueshme.

31. Shtojcë e përgjegjshme

Marios Lublinski ka shkruar një plugin në WordPress që premton të kthejë çdo temë aktuale të WP në një temë të përgjegjshme. Se si funksionon kjo unë ende nuk e di pasi nuk është publikuar si koha e këtij shkrimi, por nëse e përmbush premtimin e tij duhet të jetë shumë e dobishme.

32. Rrëzimi

Trajtimi i tejmbushjes së përmbajtjes funksionon mirë në shfletuesit desktop, por shfletuesit e vjetër të celularëve e trajtojnë atë në mënyrë jo konsistente. Polifillimi i përmbysjes nga Grupi i zellshëm i fijeve shton degradimin e hijshëm të qëndrueshëm në të gjithë pajisjet, duke u siguruar që të gjithë përdoruesit e celularëve të kenë përvojën më të mirë të mundshme.

33. Tabela mediatike

Shtojca jQuery e Marco Pegoraro, MediaTable, punon me Respond.js për t'ju ndihmuar të kapërceni problemin se si të shfaqni tabela të mëdha të të dhënave në pajisje me ekran të vogël, duke bërë kolona të përgjegjshme dhe duke shtuar një këmishë shfaqje / fshehje aty ku është e përshtatshme.

"Testimi, testimi: 1-2-3 ..."

Një aspekt tjetër i rrjedhës së punës së përgjegjshme është të njihni pajisjet dhe rezolucionet tuaja të synuara dhe më pas të provoni në to.

34. ndrysho madhësinëMyBrowser

resizeMyBrowser, nga zhvilluesi i frontendit Chen Luo, ka disa dimensione të paravendosura për dritaren e shfletuesit tuaj për të provuar faqet e dizajnuara në mënyrë të përgjegjshme ose për të krijuar një paravendosje të re nëse nuk mund të gjeni atë që i përshtatet nevojave tuaja.

35. përgjegjëspx

Ngjashëm me resizeMyBrowser, responsivepx, ndërtuar nga Remy Sharp, ngarkon faqet tuaja në një dritare ku mund të provoni gjerësinë dhe lartësinë për të përcaktuar se sa mirë po hapin pyetjet tuaja të medias dhe ku janë pikat e ndërprerjes në dizajn.

36. Testimi i Dizajnit të Përgjegjshëm

Një mjet tepër i dobishëm nga projektuesi dhe zhvilluesi Matt Kersley: thjesht futni URL-në e sitit tuaj të përgjegjshëm në Testimin e Dizajnit të Përgjegjshëm për të parë se si jep në madhësi të ndryshme të shfletuesit.

37. Përgjegjësi

Futni një URL dhe Përgjegjësi do t'ju tregojë se si shfaqet në shumë madhësi të zakonshme të pajisjes - me efikasitet të pamëshirshëm robotik. Tama Pugsley dhe Andy Hovey janë përgjegjës për këtë.

38. I përgjegjshëm.është

Një tjetër emulator i pajisjes në faqe, Responsive.is ju lejon të shkruani një URL dhe më pas ta ndryshoni atë me shpejtësi midis një sërë paravendosjeve të ndryshme. Madeshtë bërë nga ekipi prapa aplikacionit të ardhshëm Typecast.

39. Screenqueri.es

Një mjet më shumë për përmasat e shfletuesit, por Screenqueri.es nga Mandar Shirke diferencon vetveten duke pasur një set të gjerë të paravendosjeve të celularëve dhe tabletave, si dhe një rrjet dhe rregullatorë që e bëjnë matjen e imazhit shumë më të lehtë.

40. Aptus

Një tjetër aplikacion për testimin e faqeve në madhësi të shumëfishta të përcaktuara, por Aptus është vendas në Mac. Avashtë e disponueshme nga Mac App Store dhe të qenit vendas sjell veçori shtesë si pamje të lehta të ekranit dhe mbështetje jashtë linje.

41. Bookmarklet i Dizajnit të Përgjegjshëm

Victor Coulon ka bërë një bookmarklet shumë të thjeshtë, por efektiv; kur e aktivizoni në ndonjë faqe në internet, ajo shton një shirit veglash që ju lejon të kaloni midis katër dimensioneve të zakonshme të ekranit, në mënyrë që të shihni se si faqja juaj jep në madhësi të ndryshme.

42. Bookmarklet i Testit të Projektimit të Përgjegjshëm

Kjo bookmarklet nga Benjamin Keen lejon më shumë personalizim duke ju lejuar të përcaktoni madhësitë e pajisjes suaj, dhe aq ose shumë sa dëshironi. Kur aktivizohet, ajo tregon faqen në të gjitha madhësitë e zgjedhura, krah për krah për krahasim të lehtë.

43. Fluturak

Screenfly, nga QuirkTools, ju lejon të provoni një sit në rezolucione të ndryshme në desktop, tablet, celular dhe televizion. Testimi i desktopit aktualisht është i kufizuar në Safari, ndërsa tableti dhe celulari kanë më shumë mundësi për pajisjet dhe shfletuesit. Televizioni është i kufizuar në Opera.

44. Treguesi i pyetjes mediatike

Johan Brook ofron një mënyrë të pastër CSS për të provuar kur një pyetje mediatike është shkaktuar nga shfletuesi. Media Query Treguesi është një tjetër mjet i mirë për testimin dhe lojën me pikat e prishjes së dizajnit.

45. Shim

Një nga mjetet e përdorura në ridizajnimin e Boston Globe, djali poster i lëvizjes RWD, Shim është një aplikacion Node.js i cili ekzekuton një faqe në internet nëpër pajisje të shumta në të njëjtin rrjet Wifi, duke e bërë testimin ndër-pajisje shumë më të lehtë .

46. ​​Hyrja në makinë

Nëse nuk keni një server Node.js në vend për të ekzekutuar Shim, Scott Jehl ka bërë një version më të thjeshtë të quajtur Drive-In i cili funksionon në të njëjtën mënyrë, por duke përdorur PHP, Apache dhe një skedar .htaccess.

47. Adobe Shadow

Adobe vazhdon shtytjen e tyre në teknologjitë në internet me këtë mjet të largët të korrigjimit të gabimeve. Instaloni Shadow dhe shtesën e Chrome në Mac ose Windows, plus klientin Shadow në Android ose iPhone dhe mund të ndani faqet e internetit midis shumë pajisjeve të ndryshme.

48. Emeratori Opera Mobile + Korrigjimi i gabuar në distancë

Një mënyrë më e lehtë për të korrigjuar faqet e lëvizshme është instalimi i Opera dhe Emulator Opera Mobile dhe lidhja e të dyjave me opsionin e tyre të Remote Debug. I thjeshtë dhe i shpejtë për tu konfiguruar, dhe ka përfitimin e shtuar të testimit në më shumë sesa WebKit.

Frymëzim i mëtejshëm

Dëshironi të merrni një ide se si të tjerët po i bëjnë planet e tyre të përgjegjshme?

49. MediaQueri.es

Nëse nuk e keni parë tashmë, faqja Mediaqueri.es ka një numër gjithnjë në rritje të faqeve që kanë kaluar në anën e përgjegjshme.

50. @RWD

Ethan Marcotte drejton një llogari në Twitter që sjell lajmet, mjetet dhe vitrinat më të fundit nga bota e RWD.

Denise Jacobs adhuron të jetë folëse, autore, trainer për krijimin e faqeve në internet dhe ungjillëzuese e krijimtarisë, ndërsa Peter Gasston është autori i Librit të CSS3 dhe një zhvillues veteran i faqeve në internet që bën blog në Broken Links.

Te pelqen kjo? Lexoni këto!

  • Këshilla pro për ndërtimin e një faqe në internet për celularë
  • Teknikat kryesore të CSS dhe JavaScript
  • Si të krijoni një aplikacion
  • Fontet më të mira falas në internet për dizajnerët
  • Zbuloni se çfarë është më tej për Realitetin e Zgjeruar
  • Shkarkoni tekstura falas: rezolucion të lartë dhe gati për t’u përdorur tani
Artikulli I Mëparshëm

SHQYRTIMI: Aplikacioni Geló për iPhone
Artikulli Tjetër

18 teknika thelbësore të akuarelit për çdo artist
Zgjedhja E Lexuesve
Studio i jep dyqaneve një identitet mahnitës me temë piratësh
Lexo Më Shumë

Studio i jep dyqaneve një identitet mahnitës me temë piratësh

Mund 2024
Rizenjimi i një vitrine vjen me të gjitha llojet e fidave; nga modelet e hfaqje ë dritareve tek modelet e paketimit, gjithçka duhet të për htatet në një mark...
Fotomontazhet e bukura transformojnë kalimtarët
Lexo Më Shumë

Fotomontazhet e bukura transformojnë kalimtarët

Mund 2024
Lindur në panjë, por tani që jeton dhe punon në Pari , arti ti dhe grafi ti Nacho Ormaechea ka krijuar këtë eri kolazhe h të bukura dixhitale. Çdo kenë p&#...
Cilat janë pengesat kryesore për UX të mirë sot?
Lexo Më Shumë

Cilat janë pengesat kryesore për UX të mirë sot?

Mund 2024
Përvoja e përdorue it tani kon iderohet i një di iplinë jetë ore, e pavarur brenda dizajnit të internetit. Dhe me 'projektue in UX' të vendo ur plotë i ...