Tartalom
- Eszközök az induláshoz
- 01. Reszponzív webdesign vázlattáblák
- 02. Reszponzív tervrajzfüzet
- 03. Reszponzív drótvázak
- 04. Többeszközös elrendezési minták
- 05. Stílus csempe
- Eszközök rugalmas / folyékony rácshoz
- 06. Arany rácsrendszer
- 07. Foldy960
- 08. SimpleGrid
- 09. Az 1140px CSS rács
- 10. Oszlopos CSS rácsrendszer
- 11. Szemantikus rácsrendszer
- 12. SUSY
- 13. Gridpak
- 14. Rács
- 15. Jobb Photoshop rács az RWD számára
- 16. Folyadékrácsok
- 17. Reszponzív számológép
- Eszközök az érzékeny képekhez (és szövegekhez)
- 18. Reszponzív képek
- 19. Adaptív képek
- 20. Sencha.io Src (korábban Tinysrc)
- 21. FitText
- 22. födémText
- Eszközök média lekérdezésekhez
- 23. Válasz.js
- 24. CSS3-Mediaqueries.js
- 25. Adapt.js
- 26. Kategorizr
- Rugalmas kialakítású (és mobil) kazánok
- 27. 320 és feljebb
- 28. Rács nélküli
- 29. Csontváz
- 30. Bootstrap
- Dugók, alátétek és polifillek
- 31. Reszponzív bővítmény
- 32. Megdöntés
- 33. MediaTable
- "Tesztelés, tesztelés: 1-2-3 ..."
- 34. resizeMyBrowser
- 35. responsivepx
- 36. Reszponzív tervvizsgálat
- 37. A válaszadó
- 38. Reszponzív.is
- 39. Screenqueri.es
- 40. Aptus
- 41. Reszponzív Design Bookmarklet
- 42. Reszponzív tervezési teszt könyvjelző
- 43. Screenfly
- 44. Média lekérdezés mutató
- 45. Shim
- 46. Behajtás
- 47. Adobe Shadow
- 48. Opera Mobile Emulator + Remote Debug
- További inspiráció
- 49. MediaQueri.es
- 50. @ RWD
- Tetszett ez? Olvassa el ezeket!
Ahogy Ethan Marcotte bemutatta / kitalálta mind az "Responsive Web Design" cikkében, mind a legkeresettebb könyvében, három elemre van szükség ahhoz, hogy a webhely könnyen reagáljon:
- Rugalmas / folyékony rács
- Reszponzív képek
- Média lekérdezések
Rengeteg más nagyszerű cikk foglalkozik az adaptív web tervezés motívumaival, koncepcióival és technikáival, ezért a cikk néhány legfontosabb eszközre összpontosítunk, amelyek segítenek Önnek felelősségteljesen reagálni.
Eszközök az induláshoz
Mielőtt elkezdené a webhely építését, a legjobb, ha felvázolja, hogyan alkalmazkodnak az oldal elemei, hogy illeszkedjenek a megtekinteni kívánt eszközök különböző böngészőméreteihez, és elkerülje azt a bontást, amely gyakran az elsődleges gondolkodásból fakad. az asztali tervezés és a többi reszponzív iteráció utólagos gondolatként (lásd különösen Stephanie (Sullivan) Rewis megjegyzését).
01. Reszponzív webdesign vázlattáblák
Ez a Jeremy P Alford adaptív vázlatlapkészlet kiváló kiindulópont annak feltérképezéséhez, hogy az oldalrészek hogyan mozognak különböző felbontásokban.
02. Reszponzív tervrajzfüzet
Ha az összes vázlatát egy helyen kívánja megtartani, akkor érdemes megfontolni ezt a drótkötésű, 50 érzékeny vázlatlapot tartalmazó könyvet az App Sketchbook cégtől.
03. Reszponzív drótvázak
A reszponzív webhelyek felépítésének egyik nehézsége a drótvázak használata annak bemutatására, hogy az adaptív tervezés hogyan fog működni. James Mellers, az Adobe összeállította ezt a kísérleti eszközt annak bemutatására, hogy a komplex elrendezések adaptív drótvázolása hogyan működik.
04. Többeszközös elrendezési minták
A reszponzív tervezés megtervezésekor hasznos megnézni, hogy mások hogyan közelítettek meg előtted, ezért Luke Wroblewski Többeszközös elrendezési mintái, amely népszerű mintákat sorol fel a példákra mutató linkekkel, remek kiindulópont.
05. Stílus csempe
Samanatha Warren Stíluslapkái új technikát javasolnak a tervezéshez az érzékeny korban; A rögzített szélességű makettek helyett ezek olyan minták vagy hangulatjelek, amelyek szemléletes részletek nélkül mutatják be az általános tervezési megközelítést.
Eszközök rugalmas / folyékony rácshoz
Amint azt korábban elmondtuk, az adaptív tervezéshez az első komponens egy rugalmas / folyékony rács.Az alábbiak már előre elkészültek: csak le kell töltenie őket, és gyorsan úton lehet lenni egy érzékenyebb webhelyre.
06. Arany rácsrendszer
Joni Korpi, aki a Less Framework-et is fejlesztette, nemrégiben kiadta a megbízható rácsrendszer új verzióját az adaptív tervezés érdekében. Úgy vélik, hogy "összecsukható", mivel 16, nyolc és négy oszlop között könnyen alkalmazkodik. Az Arany Rács Rendszer egy kis böngészőfedéllyel is rendelkezik, amely tesztelés céljából kiteszi az Ön oldalainak rácsát.
07. Foldy960
A Paravel, Inc. tehetséges emberei kiadták a módosított 960.gs rácsot, amelyet alapul szolgálnak a válaszadó projektjeikhez.
08. SimpleGrid
A Conor Muirhead által írt SimpleGrid-t sürgősen elkészített válaszkészséggel építették fel, így könnyen reagálni képes weboldali projektjével lehet elindulni.
09. Az 1140px CSS rács
Egy másik nagyszerű adaptív rácsrendszer a melbourne-i tervező, Andy Taylor 1140 képpontos CSS Gridje, amely a széles asztali felbontástól a mobilig terjed.
10. Oszlopos CSS rácsrendszer
A Pulp + Pixels, azaz Nick Gorsline kreatív igazgató által létrehozott Columnal rácsrendszer az 1140px rácsrendszeren alapul, de néhány extra finomsággal, például vázlatokkal és drótvázas sablonokkal ellátott tervező készlet, valamint CSS hibakeresési stílusok.
11. Szemantikus rácsrendszer
Az előre feldolgozott CSS kiterjesztések, mint a Sass és a LESS, egyre népszerűbbek, és Tyler Tate szemantikus rácsrendszere maximálisan kihasználja őket ebben a rácsrendszerben, amely állítólag nem használ felesleges osztályokat vagy elemeket. További információ: coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.
12. SUSY
A szemantikus rácsrendszerhez hasonlóan az Oddbird's SUSY létrehozott egy rácsrendszert, amely nem használ külön jelölést vagy speciális osztályokat, de a SUSY csak a Sass (és annak kiterjesztése, az Compass) felhasználóinak szól.
13. Gridpak
Az Erskine Design által készített Gridpak az egyik legfrissebb érzékeny rács-generátor. Ez lehetővé teszi, hogy az oszlopokat és az ereszcsatornákat számos törésponton állítsa be, majd CSS, JavaScript és PNG fájlokat adjon ki, így az egész csapat ugyanazon a kiindulóponton dolgozik.
14. Rács
Még mindig van egy kis rejtély a Gridset felett, mivel amikor ezt írtam, még nem jelent meg. De a Mark Boulton Design eszköze egyedi, nem vényköteles rácsrendszereket ígér, és módot kínál a rácsok online mentésére és kezelésére.
15. Jobb Photoshop rács az RWD számára
Elliot Jay Stocks azt javasolja, hogy hagyja el a régi 960px de facto rács szabványt, és inkább 1000px alapról dolgozzon, megkönnyítve ezzel az összes százalékos számítást. Ha beleegyezik, készített egy PSD-t, amellyel elkezdheti a munkát.
16. Folyadékrácsok
Ha a tervezése rendkívül specializált és saját egyedi rácsot kell létrehoznia, akkor ezt a .net Awards ragyogó újonnan jelölt Harry Roberts folyadékrács-kalkulátorával teheti meg.
17. Reszponzív számológép
Egy másik pixel százalékos kalkulátor, de ez Stu Robson egy lépéssel tovább halad, mint mások, azáltal, hogy az összes CSS-szabályt létrehozza az Ön számára, vagyis egyszerűen átmásolhatja és beillesztheti őket a stíluslapjaiba.
Eszközök az érzékeny képekhez (és szövegekhez)
A reszponzív web-tervezés másik fontos eleme a folyékony képek. Míg a folyékony képek elérésének technikája egyszerű, a teljesítmény és az oldalterhelés optimalizálása a különböző eszközök számára a válaszadóképes webtervezés egyik legnagyobb kihívásának tűnik. Íme néhány forrás a probléma megközelítéséhez.
18. Reszponzív képek
A Filament Group kidolgozta a megfelelő felbontású kép küldésének módját a képernyő felbontása alapján. Ez a kísérlet az első olyan mobil képekkel, amelyek válaszosan és felelősségteljesen skálázódnak, két különböző méretű kép referenciáját igényli.
19. Adaptív képek
Matt Wilcox ihlette az Responsive Images eszközt az Adaptive Images létrehozásához, amely PHP-t és egy kis JavaScript-et használ a megfelelő képek kiszolgálásához a felhasználó eszközén anélkül, hogy külön jelölést igényelne.
20. Sencha.io Src (korábban Tinysrc)
A Sencha felhőszolgáltatást nyújt, amely a tárolt képek optimalizált verzióit küldi az őket igénylő eszköz méretéhez képest. A használatáról a docs.sencha.com/io/src/ webhelyen tájékozódhat.
21. FitText
A Paravel, Inc. egy másik gyöngyszeme a FitText.js, egy jQuery plug-in, amely a címsortípust reagálni kívánja a tervezésre és az eszközre. További részletek: trentwalton.com/2011/05/10/fit-to-scale/.
22. födémText
A FitText és a SlabType algoritmusok ihlette Brian McAllister slabText egy jQuery plug-in, amely vastag szövegblokkokat készít, amelyek választhatóan átméreteznek, miközben megtartják a meghatározott szélességet.
Eszközök média lekérdezésekhez
Most, hogy van elképzelése arról, hogy az elrendezés hogyan fog változni a különböző eszközök, a folyékony rács és a folyékony képek esetében, média lekérdezésekre van szüksége ahhoz, hogy az oldal elemei reagálóképessé váljanak.
23. Válasz.js
A reszponzív kialakítással az a kérdés, hogy azok a böngészők, amelyek nem tudják elolvasni a média lekérdezéseket, elmaradnak. Lehet, hogy ez nem jelent problémát a célközönséggel kapcsolatban, de mégis jó gyakorlat a felhasználók befogadása régebbi böngészőkben. A Scott Jehl által készített Respond.js csak a min-width és max-width tulajdonságokat támogatja.
További információ: filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.
24. CSS3-Mediaqueries.js
Wouter van der Graaf, a CSS3-Mediaqueries.js segítségével az IE és más böngészők régebbi verziói hatékonyan tesztelhetnek és alkalmazhatnak mindenféle média lekérdezést.
25. Adapt.js
Nathan Smith, az eredeti 960.gs rácsrendszer szerzője megírta az Adapt.js parancsfájlt, amely felismeri a böngésző méreteit, és csak a szükséges stíluslapokat szolgálja ki - például média lekérdezéseket, de média lekérdezés nélkül, vagyis régebbi böngészőkben is működik.
26. Kategorizr
Ez az eszközfelismerés ellentétes szögből közelíthető meg - Brett Jankord Kategororizr szkriptje feltételezi, hogy az eszközök mobilak, hacsak másként nem észlelik őket asztali vagy táblagépként, lehetővé téve az erőforrások szimpatikus kiszolgálását a böngészők számára.
Rugalmas kialakítású (és mobil) kazánok
A hatékony, adaptív munkafolyamat szellemében a kazánlemezek előbb-utóbb megkönnyítik a tervek böngészőbe történő áthelyezését. Ezeknek a kazánlemezeknek a többsége a fent említett eszközök legjobbjait ötvözi egy csinos csomagban: egy rugalmas rács, amelyet szkriptekkel egészítenek ki, miközben megvalósítják a mobil, filozófiát.
27. 320 és feljebb
Andy Clarke 320-as és Up-os modellje egy mobil-első kazán, amely integrálódik számos más modern web-tervező eszközzel, mint például a LESS és a Bootstrap (lásd: 30. sz.). Ez egy könnyű és mozgékony módszer a webhely gyors működéséhez. Nézze meg Andyvel készített interjúnkat is, amelyben többet mesél az új verzióról.
28. Rács nélküli
A Gridless egy HTML5 és CSS3 kazán, amely alapja lehet az Ön adaptív terveinek, különös tekintettel a tipográfiára és a böngészők közötti kompatibilitásra.
29. Csontváz
Az előző két kazántól eltérően, amelyeknek a kiindulási pontja a legkisebb felbontású, a Dave Gamache által létrehozott Skeleton fejlesztőkészlet a 960.gs rácsrendszerre épül, és mobilra skálázódik. A csontváz remek stíluskerettel is büszkélkedhet a fejlesztők számára, hogy stílusokat építsenek a tetejükre.
30. Bootstrap
A Twitter által épített és mára nyílt forráskódú Bootstrap egy keretrendszer és alkatrészsorozat a webhely gyors online eléréséhez, és a második verziótól kezdve az összes központi része reagálva mőködik.
Dugók, alátétek és polifillek
Bár a modern böngészők és szoftverek általában reagálnak, néha extra eszközöket kell használnunk az állandó élmény biztosítása érdekében.
31. Reszponzív bővítmény
Marios Lublinski írt egy WordPress beépülő modult, amely azt ígéri, hogy bármelyik aktuális WP témát érzékeny témává alakítja. Hogy működik ez, még nem tudom, mivel még nem jelent meg az írás idejeként, de ha beváltja az ígéretét, akkor nagyon hasznos lehet.
32. Megdöntés
A tartalom túlcsordulásának kezelése jól működik az asztali böngészőkben, de a régebbi mobil böngészők következetlenül kezelik. A szorgalmas Filament Group Overthrow polifillje következetes, kecses lebontást eredményez az eszközök között, biztosítva, hogy minden mobilfelhasználó a lehető legjobb élményt kapja.
33. MediaTable
Marco Pegoraro jQuery beépülő modulja, a MediaTable, a Respond.js-szel együttműködve segít megkerülni azt a problémát, hogy miként jelenítsen meg nagyméretű adattáblákat kis képernyős eszközökön, reagáló oszlopokat készítsen, és adott esetben hozzáadjon egy show / hide kapcsolót.
"Tesztelés, tesztelés: 1-2-3 ..."
Az adaptív munkafolyamat másik szempontja, hogy megismerje a céleszközöket és a felbontásokat, majd tesztelje őket.
34. resizeMyBrowser
A resizeMyBrowser, a frontend fejlesztője, Chen Luo által, több előre beállított dimenzióval rendelkezik a böngészőablakban, hogy tesztelje az adaptívan tervezett oldalakat, vagy új preset-t hozzon létre, ha nem találja az Ön igényeinek megfelelőt.
35. responsivepx
Hasonlóan a resizeMyBrowser alkalmazáshoz, a Remy Sharp által épített responsivepx az oldalakat egy ablakba tölti be, ahol tesztelheti a szélességet és a magasságot annak megállapításához, hogy a média lekérdezései mennyire működnek, és hol vannak a töréspontok a tervezésben.
36. Reszponzív tervvizsgálat
A tervező és fejlesztő, Matt Kersley hihetetlenül hasznos eszköze: egyszerűen írja be az adaptív webhely URL-jét az Responsive Design Testing mezőbe, hogy lássa, hogyan jelenik meg különböző böngészőméretekben.
37. A válaszadó
Írjon be egy URL-t, és a Responsinator megmutatja, hogyan jelenik meg sok általános eszközméretben - kíméletlen robot hatékonysággal. Tama Pugsley és Andy Hovey felelős ezért.
38. Reszponzív.is
Egy másik, az oldalon belüli eszközemulátor, az Responsive.is segítségével beírhat egy URL-t, majd gyorsan átméretezi azt a különböző előre beállított értékek között. A készülő Typecast alkalmazás mögött álló csapat készítette.
39. Screenqueri.es
Még egy böngésződimenziós eszköz, de a Mandar Shirke-től származó Screenqueri.es megkülönbözteti magát azzal, hogy széleskörű mobil- és táblagép-előre beállított készletet, valamint rácsot és vonalzókat tartalmaz, amelyek sokkal könnyebbé teszik a finom mérést.
40. Aptus
Egy másik alkalmazás webhelyek tesztelésére több meghatározott méretben, de az Aptus Mac-őshonos. Ez elérhető a Mac App Store-on keresztül, és a natív lét extra szolgáltatásokat nyújt, például egyszerű képernyőképeket és offline támogatást.
41. Reszponzív Design Bookmarklet
Victor Coulon nagyon egyszerű, de hatékony könyvjelzőt készített; amikor bármely weboldalon aktiválja, hozzáad egy eszköztárat, amely lehetővé teszi a négy általános képernyőméret közötti váltást, így láthatja, hogyan jelenik meg webhelye különböző méretekben.
42. Reszponzív tervezési teszt könyvjelző
Ez a könyvjelző Benjamin Keen további testreszabást tesz lehetővé azáltal, hogy megadhatja saját készülékméreteit, és annyit vagy keveset, amennyit csak akar. Aktiválásakor az összes kiválasztott méretben megjeleníti a webhelyet egymás mellett az egyszerű összehasonlítás érdekében.
43. Screenfly
A QuirkTools által készített Screenfly lehetővé teszi egy webhely tesztelését különböző felbontásokon asztali, táblagépes, mobil és televíziós eszközökön. Az asztali tesztelés jelenleg a Safarira korlátozódik, míg a táblagép és a mobil több lehetőséget kínál az eszközök és a böngészők számára. A televízió az Operára korlátozódik.
44. Média lekérdezés mutató
Johan Brook tiszta CSS-módszert kínál annak tesztelésére, hogy a böngésző média lekérdezést váltott-e ki. A Media Query Indicator egy másik jó eszköz a tervezés töréspontjainak tesztelésére és játékára.
45. Shim
A Boston Globe, az RWD mozgalom poszterfiújának újratervezésében használt egyik eszköz, a Shim egy Node.js alkalmazás, amely ugyanazon Wifi-hálózaton több eszközön futtat egy weboldalt, így sokkal könnyebb az eszközök közötti tesztelés .
46. Behajtás
Ha nincs egy Node.js szerver a Shim futtatásához, Scott Jehl egy egyszerűbb verziót készített a Drive-In néven, amely alapvetően ugyanúgy működik, de PHP, Apache és .htaccess fájlokat használ.
47. Adobe Shadow
Az Adobe ezzel a távoli hibakereső eszközzel folytatja a webes technológiák bevezetését. Telepítse az árnyékot és a Chrome kiterjesztést Mac vagy Windows rendszerre, valamint a Shadow klienst Androidra vagy iPhone-ra, és megoszthatja a weboldalakat számos eszköz között.
48. Opera Mobile Emulator + Remote Debug
A mobil oldalak hibakeresésének egyszerűbb módja az Opera és az Opera Mobile Emulator telepítése, és a kettő összekapcsolása a Távoli hibakeresés opcióval. Egyszerű és gyors telepítés, és további előnye, hogy több mint WebKit teszteli.
További inspiráció
Szeretne ötletet kapni arról, hogy mások hogyan reagálják a terveiket?
49. MediaQueri.es
Ha még nem látta, a Mediaqueri.es webhelyen egyre több olyan webhely található, amelyek átjutottak a válaszadó oldalra.
50. @ RWD
Ethan Marcotte Twitter-fiókkal rendelkezik, amely a legfrissebb híreket, eszközöket és kirakatokat mutatja be az RWD világából.
Denise Jacobs imádja, hogy előadó, szerző, webdesign-oktató és kreativitás-evangélista, míg Peter Gasston a The Book of CSS3 szerzője és egy veterán webfejlesztő, aki a Broken Links-n blogol.
Tetszett ez? Olvassa el ezeket!
- Profi tippek egy mobil weboldal készítéséhez
- A legnépszerűbb CSS és JavaScript technikák
- Hogyan készítsünk egy alkalmazást
- A legjobb ingyenes webes betűtípusok a tervezők számára
- Fedezze fel a kibővített valóság következő lépéseit
- Ingyenes textúrák letöltése: nagy felbontású és használatra kész
