50 fantastických nástrojov na responzívny webový dizajn

Autor: Monica Porter
Dátum Stvorenia: 17 Pochod 2021
Dátum Aktualizácie: 17 Smieť 2024
Anonim
50 fantastických nástrojov na responzívny webový dizajn - Tvorivé
50 fantastických nástrojov na responzívny webový dizajn - Tvorivé

Obsah

Ako uviedol / vytvoril Ethan Marcotte vo svojom článku „Responzívny webový dizajn“, ako aj vo svojej najpredávanejšej knihe, na to, aby stránka reagovala, sú potrebné tri prvky:

  1. Flexibilná / tekutá mriežka
  2. Citlivé obrázky
  3. Dotazy na médiá

Existuje veľa ďalších skvelých článkov, ktoré sa zaoberajú motívmi, konceptmi a technikami týkajúcimi sa responzívneho webového dizajnu, preto sa tento článok zameriame na niektoré špičkové nástroje, ktoré vám pomôžu zodpovedne reagovať.

Nástroje na rozbeh

Predtým, ako začnete s vytváraním svojho webu, je najlepšie načrtnúť, ako sa prvky na stránke prispôsobia rôznym veľkostiam prehľadávača rôznych zariadení, na ktoré sa budú zobrazovať, a vyhnúť sa odpojeniu, ktoré často vychádza z primárneho myslenia dizajn desktopu a zvyšok responzívnych iterácií ako dodatočný nápad (pozri najmä komentár Stephanie (Sullivan) Rewis).

01. Responzívne tabuľky s náčrtmi webových stránok

Táto sada listov citlivého náčrtu od Jeremyho P Alforda je skvelým východiskovým bodom na začatie mapovania toho, ako sa budú časti stránok posúvať v rôznych rozlíšeniach.


02. Skicár s responzívnym dizajnom

Ak dávate prednosť tomu, aby ste všetky svoje náčrty mali na jednom mieste, mali by ste zvážiť túto drôtenou knihou 50 listov citlivých náčrtov od spoločnosti App Sketchbook.

03. Reagujúce drôtové rámy

Jednou z ťažkostí pri vytváraní responzívnych webov je použitie wireframov na ukážku toho, ako bude responzívny dizajn fungovať. James Mellers z Adobe zostavil tento experimentálny nástroj, aby ukázal, ako môže fungovať responzívne wireframing zložitých rozložení.


04. Vzory rozloženia viacerých zariadení

Pri plánovaní responzívneho dizajnu je užitočné vidieť, ako k nemu ostatní ľudia pristupovali pred vami, a preto je skvelým miestom na začatie vzory rozloženia viacerých zariadení od Luka Wroblewského, ktoré uvádzajú populárne vzory s odkazmi na príklady.

05. Štýlové dlaždice

Štýlové dlaždice Samanatha Warren navrhujú novú techniku ​​dizajnu v responzívnom veku; Namiesto makiet s pevnou šírkou sú to ako vzorky alebo náladové panely, ktoré ukazujú všeobecný prístup k dizajnu bez toho, aby zachádzali do podrobností.

Nástroje pre flexibilnú / tekutú mriežku

Ako už bolo uvedené skôr, prvým komponentom potrebným pre responzívny dizajn je flexibilná mriežka.Nasledujúce položky sú už vopred pripravené: stačí si ich stiahnuť a budete rýchlo na ceste k responzívnejšiemu webu.


06. Systém Golden Grid

Joni Korpi, ktorý tiež vyvinul Less Framework, nedávno vydal túto novú verziu spoľahlivého mriežkového systému pre responzívny dizajn. Systém Golden Grid, ktorý sa považuje za „skladací“, pretože sa ľahko prispôsobuje od 16 do 8 stĺpcov, na štyri stĺpce, obsahuje aj malé prekrytie prehľadávača, ktoré umožňuje testovanie mriežky na vašich stránkach.

07. Foldy960

Talentovaní páni v spoločnosti Paravel, Inc. vydali upravenú mriežku 960.gs, ktorú používajú ako základ pre svoje responzívne projekty.

08. SimpleGrid

SimpleGrid, autor: Conor Muirhead, bol postavený s citlivou reakciou, takže je ľahké začať a pracovať s vašim responzívnym webovým projektom.

09. Mriežka CSS s rozlíšením 1140 pixelov

Ďalším skvelým responzívnym mriežkovým systémom je 1140px CSS Grid od melbournského dizajnéra Andyho Taylora, ktorý prechádza od širokého rozlíšenia desktopu až po mobil.

10. Columnal CSS grid system

Mriežkový systém Columnal, ktorý vytvoril Pulp + Pixels alias kreatívny riaditeľ Nick Gorsline, je založený na mriežkovom systéme 1140px, ale obsahuje niekoľko ďalších vychytávok, ako napríklad návrhársku súpravu s náčrtmi a šablónami wireframing, ako aj štýly ladenia CSS.

11. Sémantický mriežkový systém

Predbežne spracované rozšírenia CSS, ako sú Sass a LESS, sú čoraz populárnejšie a sémantický mriežkový systém spoločnosti Tyler Tate ich maximálne využíva v tomto mriežkovom systéme, ktorý tvrdí, že nepoužíva zbytočné triedy ani prvky. Prečítajte si viac na adrese coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Rovnako ako sémantický mriežkový systém, aj spoločnosť Oddbird's SUSY vytvorila mriežkový systém, ktorý nepoužíva nijaké extra značky ani špeciálne triedy, ale SUSY je zameraný iba na používateľov systému Sass (a jeho rozšírenia, Compass).

13. Gridpak

Gridpak od spoločnosti Erskine Design je jedným z najnovších reagujúcich generátorov mriežky v okolí. Umožňuje vám nastaviť stĺpce a odkvapy na niekoľko hraničných bodov a potom odoslať súbory CSS, JavaScript a PNG, aby celý váš tím pracoval od rovnakého východiskového bodu.

14. Sieťová sada

Nad Gridsetom stále vládne mierny nádych tajomstva, pretože v čase, keď to píšem, ešte nebol vydaný. Ale nástroj od Marka Boultona Design sľubuje na mieru šité, nepredpisovacie gridové systémy a spôsob ukladania a správy vašich sietí online.

15. Lepšia mriežka Photoshopu pre RWD

Elliot Jay Stocks navrhuje opustiť starý de facto štandard mriežky 960px a namiesto toho pracovať od základu 1000px, čo uľahčuje prácu so všetkými percentuálnymi výpočtami. Ak súhlasíte, vytvoril pre vás PSD, s ktorým môžete začať pracovať.

16. Kvapalinové mriežky

Ak je váš dizajn vysoko špecializovaný a potrebujete si vytvoriť vlastnú mriežku, môžete tak urobiť pomocou kalkulačky tekutých mriežok .net Awards, brilantného nováčika, nominovaného Harryho Robertsa.

17. Citlivá kalkulačka

Ďalšia kalkulačka pixelov a percent, ale táto od Stu Robsona ide o krok ďalej ako ostatné, pretože generuje všetky pravidlá CSS, čo znamená, že ich môžete jednoducho skopírovať a vložiť do svojich štýlov.

Nástroje na responzívne obrázky (a text)

Ďalším dôležitým komponentom responzívneho webového dizajnu sú plynulé obrázky. Zatiaľ čo technika na dosiahnutie plynulých obrázkov je jednoduchá, optimalizácia výkonu a načítania stránok pre rôzne zariadenia sa javí ako jedna z najväčších výziev v responzívnom webovom dizajne. Tu je niekoľko zdrojov potrebných na riešenie problému.

18. Citlivé obrázky

Skupina Filament Group navrhla spôsob, ako poslať obrázok primeranej veľkosti na základe rozlíšenia obrazovky. Tento experiment s obrázkami prvého mobilného zariadenia, ktoré sa zodpovedne a zodpovedne zväčšujú, si vyžaduje referenciu dvoch obrázkov rôznych veľkostí.

19. Adaptívne obrázky

Matt Wilcox sa pri vytváraní adaptívnych obrázkov inšpiroval nástrojom responzívne obrázky, ktorý používa PHP a malý JavaScript na poskytovanie vhodných obrázkov do zariadenia používateľa bez toho, aby bolo potrebné ďalšie označenie.

20. Sencha.io Src (predtým Tinysrc)

Sencha poskytuje cloudovú službu, ktorá odosiela optimalizované verzie hostených obrázkov pre veľkosť zariadenia, ktoré ich požaduje. Informácie o tom, ako ju používať, nájdete na adrese docs.sencha.com/io/src/.

21. FitText

Ďalším klenotom spoločnosti Paravel, Inc je FitText.js, doplnok jQuery, ktorý umožňuje nadpisu webového typu reagovať na dizajn a zariadenie. Podrobnosti nájdete na stránke trentwalton.com/2011/05/10/fit-to-scale/.

22. slabText

SlabText od Briana McAllistera, inšpirovaný FitTextom a algoritmom SlabType, je plug-in jQuery, ktorý vytvára tučné bloky textu, ktoré zodpovedne menia svoju veľkosť pri zachovaní definovanej šírky.

Nástroje na dotazy médií

Teraz, keď máte predstavu, ako sa zmení vaše rozloženie pre rôzne zariadenia, plynulú mriežku a plynulé obrázky, potrebujete mediálne dotazy na presun prvkov stránky do stavu citlivosti.

23. Respond.js

Jediným problémom s responzívnym dizajnom je, že prehliadače, ktoré nedokážu čítať mediálne dotazy, zostanú pozadu. Toto nemusí byť problém vašej cieľovej skupiny, ale stále je dobrým zvykom vyhovieť používateľom starších prehliadačov. Respond.js, autor Scott Jehl, podporuje iba vlastnosti minimálna a maximálna šírka.

Viac informácií nájdete na filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js, autor Wouter van der Graaf, umožňuje starším verziám IE a ďalších prehľadávačov efektívne testovať a aplikovať všetky druhy mediálnych dotazov.

25. Adapt.js

Nathan Smith, autor pôvodného mriežkového systému 960.gs, napísal skript Adapt.js, ktorý detekuje rozmery prehliadača a slúži iba požadovaným štýlom - napríklad mediálnym dotazom, ale bez mediálnych dotazov, čo znamená, že funguje aj v starších prehliadačoch.

26. Kategorizr

K tejto detekcii zariadení sa pristupuje z opačného uhla - skript Kategorizr Bretta Jankorda predpokladá, že zariadenia sú mobilné, pokiaľ nie sú detekované inak ako stolné počítače alebo tablety, čo vám umožňuje sympatickým spôsobom poskytovať zdroje prehliadačom.

Responzívny dizajn (a mobilné) varné dosky

V duchu efektívneho responzívneho pracovného toku kotlové platne uľahčujú proces presúvania návrhov do prehliadača skôr ako neskôr. Väčšina z týchto šablón kombinuje to najlepšie z vyššie spomenutých nástrojov do jedného elegantného balíka: flexibilnú mriežku vylepšenú skriptmi, zatiaľ čo implementuje filozofiu prvého obsahu zameranú na obsah.

27. 320 a vyššie

Andy Clarke's 320 and Up je mobilný prvý štandard, ktorý sa integruje s mnohými ďalšími modernými nástrojmi pre návrh webových aplikácií, ako sú LESS a Bootstrap (pozri č. 30). Je to ľahký a svižný spôsob, ako rýchlo uviesť web do prevádzky. Skontrolujte tiež náš rozhovor s Andym, v ktorom nám hovorí viac o novej verzii.

28. Bez mriežky

Gridless je štandardný formát HTML5 a CSS3, ktorý môže slúžiť ako základ pre vaše responzívne návrhy so zameraním na typografiu a integrovanú kompatibilitu medzi rôznymi prehliadačmi.

29. Kostra

Na rozdiel od predchádzajúcich dvoch varných platní, ktorých východiskový bod je s najmenším rozlíšením, je vývojová súprava Skeleton, ktorú vytvoril Dave Gamache, založená na mriežkovom systéme 960.gs a je škálovateľná na mobilné zariadenia. Skeleton sa tiež môže pochváliť skvelým štýlovým rámcom pre vývojárov, pomocou ktorého môžu vytvárať štýly navyše.

30. Bootstrap

Bootstrap, ktorý bol založený na Twitteri a je teraz otvorený, je rámec a séria komponentov na rýchle uvedenie stránky do režimu online. Od verzie dva fungujú všetky jeho základné časti zodpovedne.

Pluginy, vložky a polyfill

Aj keď moderné prehliadače a softvér majú tendenciu byť prispôsobené tak, aby reagovali, niekedy musíme na zaistenie konzistentného zážitku použiť ďalšie nástroje.

31. Responzívny doplnok

Marios Lublinski napísal doplnok WordPress, ktorý sľubuje, že premení každú aktuálnu tému WP na responzívnu. Ako to funguje Zatiaľ neviem, pretože to nebolo vydané v čase písania tohto článku, ale ak splní svoj prísľub, malo by to byť veľmi užitočné.

32. Zvrhnutie

Manipulácia s pretečením obsahu funguje dobre v prehliadačoch pre počítače, ale staršie mobilné prehliadače to riešia nekonzistentne. Polyfill Overthrow od pracovitej skupiny Filament Group dodáva konzistentnú ladnú degradáciu naprieč zariadeniami a zaisťuje, aby všetci mobilní používatelia získali čo najlepší zážitok.

33. MediaTable

Doplnkový modul jQuery od Marco Pegoraro, MediaTable, pracuje s Respond.js, aby vám pomohol prekonať problém, ako zobraziť tabuľky veľkých údajov na zariadeniach s malou obrazovkou, vytvárať responzívne stĺpce a podľa potreby prepínať Zobraziť / skryť.

„Testovanie, testovanie: 1-2-3 ...“

Ďalším aspektom responzívneho pracovného toku je poznať svoje cieľové zariadenia a rozlíšenia a potom ich otestovať.

34. resizeMyBrowser

resizeMyBrowser, frontendového vývojára Chen Luo, má pre okno vášho prehliadača niekoľko prednastavených dimenzií na testovanie stránok s responzívnym dizajnom alebo na vytvorenie novej predvoľby, ak nenájdete ten, ktorý vyhovuje vašim potrebám.

35. responzívnapx

Rovnako ako resizeMyBrowser, responzívnypx, ktorý vytvoril Remy Sharp, načíta vaše stránky v okne, kde môžete otestovať šírku a výšku, aby ste určili, ako dobre sa vaše mediálne dotazy spúšťajú a kde sú v dizajne zarážky.

36. Testovanie responzívneho dizajnu

Neuveriteľne užitočný nástroj od dizajnéra a vývojára Matta Kersleyho: jednoducho zadajte adresu URL svojho responzívneho webu v časti Responzívne testovanie dizajnu a uvidíte, ako sa vykresľuje pri rôznych veľkostiach prehľadávača.

37. Responzor

Zadajte webovú adresu a program Responsinator vám ukáže, ako sa zobrazuje v mnohých bežných veľkostiach zariadení - s bezohľadnou robotickou účinnosťou. Za túto sú zodpovedné Tama Pugsley a Andy Hovey.

38. Responsive.is

Ďalší emulátor zariadenia na stránke, Responsive.is, vám umožňuje zadať adresu URL a potom ju rýchlo zmeniť medzi rôznymi predvoľbami. Vyrába ho tím, ktorý stojí za pripravovanou aplikáciou Typecast.

39. Screenqueri.es

Ešte jeden nástroj na dimenziu prehľadávača, ale Screenqueri.es od Mandar Shirke sa odlišuje tým, že má rozsiahlu sadu predvolieb pre mobilné zariadenia a tablety, ako aj mriežku a pravítka, ktoré jemné meranie oveľa uľahčujú.

40. Aptus

Ďalšia aplikácia na testovanie webov vo viacerých definovaných veľkostiach, ale Aptus je natívny pre Mac. Je prístupný v obchode Mac App Store a jeho natívnosť prináša ďalšie funkcie, ako sú ľahké snímky obrazovky a podpora offline.

41. Záložka s responzívnym dizajnom

Victor Coulon vytvoril veľmi jednoduchý, ale efektívny bookmarklet; keď ho aktivujete na ľubovoľnej webovej stránke, pridá panel s nástrojmi, ktorý vám umožní prepínať medzi štyrmi bežnými rozmermi obrazovky, aby ste videli, ako sa vaše stránky vykresľujú v rôznych veľkostiach.

42. Záložka reagujúcich na test dizajnu

Táto záložka od Benjamina Keena umožňuje ďalšie prispôsobenie tým, že vám umožňuje definovať vaše vlastné veľkosti zariadenia a ľubovoľné množstvo alebo len málo z nich. Po aktivácii zobrazí stránku vo všetkých vybraných veľkostiach vedľa seba pre ľahké porovnanie.

43. Screenfly

Screenfly od spoločnosti QuirkTools vám umožňuje testovať web v rôznych rozlíšeniach na počítači, tablete, mobilnom telefóne a televízii. Testovanie na pracovnej ploche je v súčasnosti obmedzené na Safari, zatiaľ čo tablet a mobil majú viac možností pre zariadenia a prehliadače. Televízia je obmedzená na operu.

44. Indikátor dotazov na médiá

Johan Brook ponúka čistý spôsob CSS na testovanie, keď prehliadač spustil mediálny dopyt. Indikátor mediálnych dotazov je ďalším dobrým nástrojom na testovanie a hranie sa s bodmi zlomu návrhu.

45. Podložka

Jedným z nástrojov použitých pri redizajne Boston Globe, plagátu hnutia RWD, je aplikácia Node.js, ktorá spúšťa webovú stránku na viacerých zariadeniach v rovnakej sieti Wifi, čo uľahčuje testovanie viacerých zariadení. .

46. ​​Vjazd

Ak nemáte server Node.js, ktorý by umožňoval spustenie aplikácie Shim, vytvoril Scott Jehl jednoduchšiu verziu s názvom Drive-In, ktorá funguje v zásade rovnakým spôsobom, ale s použitím súborov PHP, Apache a súboru .htaccess.

47. Adobe Shadow

Spoločnosť Adobe pokračuje v presadzovaní webových technológií pomocou tohto nástroja na vzdialené ladenie. Nainštalujte si aplikáciu Shadow a rozšírenie Chrome pre Mac alebo Windows a klienta Shadow pre Android alebo iPhone. Webové stránky môžete zdieľať medzi rôznymi zariadeniami.

48. Opera Mobile Emulator + vzdialené ladenie

Jednoduchší spôsob ladenia mobilných stránok je inštalácia prehliadača Opera a emulátora Opera Mobile Emulator a ich prepojenie pomocou možnosti Remote Debug. Jednoduché a rýchle nastavenie a jeho výhodou je, že testuje viac ako WebKit.

Ďalšia inšpirácia

Chcete získať predstavu o tom, ako ostatní reagujú na svoje návrhy?

49. MediaQueri.es

Ak ste to ešte nevideli, web Mediaqueri.es má neustále rastúci počet webov, ktoré prešli na responzívnu stránku.

50. @RWD

Ethan Marcotte prevádzkuje účet na Twitteri, ktorý prináša najnovšie správy, nástroje a vitríny zo sveta RWD.

Denise Jacobs zbožňuje byť rečníčkou, autorkou, trénerkou webdizajnu a evanjelistkou kreativity, zatiaľ čo Peter Gasston je autorom knihy The Book of CSS3 a skúseným webovým vývojárom, ktorý bloguje v Broken Links.

Páčilo sa vám to? Prečítajte si tieto!

  • Profesionálne tipy na vytváranie mobilných webových stránok
  • Najlepšie techniky CSS a JavaScript
  • Ako zostaviť aplikáciu
  • Najlepšie bezplatné webové písma pre návrhárov
  • Objavte, čo bude v oblasti rozšírenej reality nasledovať
  • Stiahnite si bezplatné textúry: vysoké rozlíšenie a ihneď pripravené na použitie
Predchádzajúci Článok

Kde sú teraz?
Nasledujúci Článok

10 krokov k tomu, aby ste tento rok pracovali na voľnej nohe
Sovietsky
Koľko by ste mali zaplatiť za svoju prácu?
Čítať

Koľko by ste mali zaplatiť za svoju prácu?

Smieť 2024
1 Prvá vec, ktorú mu íte urobiť, je zi tiť, aké ú vaše motivácie pre prácu na prvom mie te. Od tráňte peniaze ako faktor a potom pro tredníctvom komunik...
4 tipy na zlepšenie výkonu vašej stránky
Čítať

4 tipy na zlepšenie výkonu vašej stránky

Smieť 2024
Analytik výkonno ti webu Henri Helvetica bude zdieľať jeho profe ionálne tipy, ako zvýšiť výkonno ť vášho webu naVytvorte New York2018.Zí kajte lí tok hneď.Výko...
Tajomstvá neuveriteľnej novej typografie Sawdust pre Wired
Čítať

Tajomstvá neuveriteľnej novej typografie Sawdust pre Wired

Smieť 2024
Jeden z najuznávanejších ča opi ov v brit kom novinovom tánku (a kutočne aj v App tore), Wired UK je titul, na ktorý a mnohí dizajnéri obracajú kvôli inšpir...