50 fantastických nástrojů pro responzivní webový design

Autor: Monica Porter
Datum Vytvoření: 17 Březen 2021
Datum Aktualizace: 17 Smět 2024
Anonim
2020 NOVÝ Verreal RS: Úplná recenze – Exway Flex a Direct Drive Bound D1 Unboxing!
Video: 2020 NOVÝ Verreal RS: Úplná recenze – Exway Flex a Direct Drive Bound D1 Unboxing!

Obsah

Jak uvedl / vytvořil Ethan Marcotte jak ve svém článku „Responzivní webový design“, tak ve své nejprodávanější knize, je třeba, aby web reagoval na tyto tři prvky:

  1. Flexibilní / tekutá mřížka
  2. Reagující obrázky
  3. Dotazy na média

Existuje spousta dalších skvělých článků, které pokrývají motivy, koncepty a techniky týkající se responzivního webového designu, takže se tento článek zaměříme na některé špičkové nástroje, které vám pomohou zodpovědně reagovat.

Nástroje pro začátek

Než začnete s vytvářením webu, je nejlepší načrtnout, jak se prvky na stránce přizpůsobí různým velikostem prohlížeče různých zařízení, na která se budou zobrazovat, a vyhnout se odpojení, které často vychází z primárního myšlení design plochy a zbytek reagujících iterací jako dodatečný nápad (viz zejména komentář Stephanie (Sullivan) Rewis).

01. Responzivní náčrty webových návrhů

Tato sada listů responzivního náčrtu od Jeremyho P Alforda je skvělým výchozím bodem pro začátek mapování toho, jak se části stránky posunou v různých rozlišeních.


02. Responsive Design Sketchbook

Pokud dáváte přednost tomu, aby všechny vaše skici byly na jednom místě, možná budete chtít zvážit tuto vázanou knihu 50 listů responzivních skic od společnosti App Sketchbook.

03. Reagující drátové modely

Jednou z obtíží při vytváření responzivních webů je používání drátových modelů, které ukazují, jak bude responzivní design fungovat. James Mellers z Adobe sestavil tento experimentální nástroj, aby ukázal, jak může reagovat responzivní drátové vytváření složitých rozvržení.


04. Vzory rozložení pro více zařízení

Při plánování responzivního designu je užitečné zjistit, jak k němu ostatní lidé přistupovali před vámi, a proto je skvělým místem, kde můžete začít s vzory rozložení více zařízení od Luka Wroblewského, které uvádí oblíbené vzory s odkazy na příklady.

05. Stylové dlaždice

Stylové dlaždice Samanatha Warren navrhují novou techniku ​​designu v responzivním věku; namísto návrhových modelů s pevnou šířkou jsou to jako vzorníky nebo náladové desky, které ukazují obecný přístup k návrhu, aniž by šly do podrobností.

Nástroje pro flexibilní / tekutou mřížku

Jak již bylo řečeno, první komponentou potřebnou pro responzivní design je flexibilní / fluidní mřížka.Následující jsou již předpřipraveny: stačí si je stáhnout a budete rychle na cestě k responzivnějšímu webu.


06. Golden Grid System

Joni Korpi, který také vyvinul Less Framework, nedávno vydal tuto novou verzi spolehlivého mřížkového systému pro responzivní design. Systém Golden Grid, který se považuje za „skládací“, protože se snadno přizpůsobuje od 16 do 8 sloupců, na čtyři sloupce, obsahuje také malé překrytí prohlížeče, které vystavuje mřížku na vašich stránkách pro testování.

07. Foldy960

Talentovaní páni ve společnosti Paravel, Inc. uvedli upravenou mřížku 960.gs, kterou používají jako základ pro své responzivní projekty.

08. SimpleGrid

SimpleGrid od Conora Muirheada byl vytvořen s odezvou, takže je snadné začít pracovat s vaším responzivním webovým projektem.

09. Tabulka CSS s rozlišením 1140 pixelů

Dalším skvělým responzivním mřížkovým systémem je 1140px CSS Grid od melbournského designéra Andyho Taylora, který přechází od širokého rozlišení stolního počítače až po mobilní zařízení.

10. Columnal CSS grid system

Mřížkový systém Columnal, který vytvořil Pulp + Pixels aka kreativní ředitel Nick Gorsline, je založen na mřížkovém systému 1140px, ale s některými dalšími vychytávkami, jako je designová sada s náčrtky a šablonami drátového rámce, stejně jako styly ladění CSS.

11. Sémantický mřížkový systém

Předběžně zpracovaná rozšíření CSS, jako jsou Sass a LESS, jsou stále populárnější a sémantický mřížkový systém Tyler Tate je využívá k maximálnímu účinku v tomto mřížkovém systému, který tvrdí, že nepoužívá žádné zbytečné třídy nebo prvky. Přečtěte si více na adrese coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Stejně jako sémantický mřížkový systém vytvořil SUSY společnosti Oddbird mřížkový systém, který nepoužívá žádné další značení ani speciální třídy, ale SUSY je zaměřen pouze na uživatele Sass (a jeho rozšíření, Compass).

13. Gridpak

Gridpak od společnosti Erskine Design je jedním z nejnovějších responzivních generátorů mřížky. Umožňuje vám nastavit sloupy a žlaby na několik hraničních bodů a poté odeslat soubory CSS, JavaScript a PNG, takže celý váš tým pracuje ze stejného výchozího bodu.

14. Síťová sada

Nad Gridsetem stále panuje mírná záhada, protože v době, kdy to píšu, ještě nebyl vydán. Ale nástroj od Marka Boultona Design slibuje zakázkové, nepředepisovatelné gridové systémy a způsob, jak ukládat a spravovat vaše sítě online.

15. Lepší mřížka Photoshopu pro RWD

Elliot Jay Stocks navrhuje upustit od starého standardu mřížky 960px de facto a místo toho pracovat ze základny 1000px, což usnadňuje práci se všemi procentuálními výpočty. Pokud souhlasíte, vytvořil PSD, se kterým můžete začít pracovat.

16. Kapalinové mřížky

Pokud je váš design vysoce specializovaný a potřebujete vytvořit vlastní vlastní mřížku, můžete tak učinit pomocí skvělé kalkulačky tekutých mřížek .net Awards, která je skvělým nováčkem nominovaným Harrym Robertsem.

17. Citlivá kalkulačka

Další kalkulačka pixelů k procentům, ale tato od Stu Robsona jde o krok dále než ostatní generováním všech pravidel CSS, což znamená, že je můžete jednoduše zkopírovat a vložit do svých stylů.

Nástroje pro responzivní obrázky (a text)

Další důležitou součástí responzivního webového designu jsou plynulé obrázky. Zatímco technika pro dosažení plynulých obrázků je přímočará, optimalizace výkonu a vytížení stránky pro různá zařízení se jeví jako jedna z největších výzev v responzivním designu webu. Zde je několik zdrojů k řešení problému.

18. Responzivní obrázky

Skupina vláken navrhla způsob, jak poslat obrázek odpovídající velikosti na základě rozlišení obrazovky. Tento experiment s obrázky pro mobily, které se škálovávají zodpovědně a zodpovědně, vyžaduje, aby byly k dispozici dva obrázky různých velikostí.

19. Adaptivní obrázky

Matt Wilcox se inspiroval nástrojem Responsive Images k vytvoření Adaptive Images, který používá PHP a malý JavaScript k poskytování vhodných obrázků do zařízení uživatele, aniž by vyžadoval další označení.

20. Sencha.io Src (dříve Tinysrc)

Sencha poskytuje cloudovou službu, která odesílá optimalizované verze hostovaných obrázků pro velikost zařízení, které je požaduje. Informace o tom, jak jej používat, najdete na adrese docs.sencha.com/io/src/.

21. FitText

Ještě dalším klenotem společnosti Paravel, Inc je FitText.js, zásuvný modul jQuery, který umožňuje nadpis webového typu reagovat na design a zařízení. Podrobnosti najdete na trentwalton.com/2011/05/10/fit-to-scale/.

22. slabText

SlabText od Briana McAllistera, inspirovaný FitTextem a algoritmem SlabType, je plug-in jQuery, který vytváří tučné bloky textu, které reagují na velikost při zachování definované šířky.

Nástroje pro dotazy médií

Nyní, když máte představu, jak se vaše rozvržení změní pro různá zařízení, proměnlivou mřížku a plynulé obrázky, potřebujete mediální dotazy, aby se prvky stránky posunuly do stavu odezvy.

23. Respond.js

Jediným problémem s responzivním designem je, že prohlížeče, které neumí číst dotazy médií, zůstanou pozadu. To nemusí být problém s vaší cílovou skupinou, ale stále je dobrým zvykem vyhovět uživatelům ve starších prohlížečích. Respond.js, Scott Jehl, podporuje pouze vlastnosti min-width a max-width.

Více viz 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 verzím IE a dalších prohlížečů efektivně testovat a aplikovat všechny druhy mediálních dotazů.

25. Adapt.js

Nathan Smith, autor původního mřížkového systému 960.gs, napsal skript Adapt.js, který detekuje rozměry prohlížeče a slouží pouze požadovaným stylům - jako jsou mediální dotazy, ale bez mediálních dotazů, což znamená, že funguje i ve starších prohlížečích.

26. Kategorizr

K detekci zařízení přistupujeme z opačného úhlu - skript Kategorizr od Bretta Jankorda předpokládá, že zařízení jsou mobilní, pokud nejsou detekována jinak jako stolní počítače nebo tablety, což vám umožňuje sympatickým způsobem poskytovat prostředky do prohlížečů.

Reagující design (a mobilní) kotlové desky

V duchu efektivního responzivního pracovního postupu usnadňují kotlové desky proces přesunu návrhů do prohlížeče dříve než později. Většina z těchto šablon kombinuje to nejlepší z výše zmíněných nástrojů do jednoho elegantního balíčku: flexibilní mřížka vylepšená skripty při implementaci filozofie obsahu na prvním místě.

27. 320 a více

Andy Clarke's 320 and Up je mobilní platforma, která se integruje s mnoha dalšími moderními nástroji pro webový design, jako jsou LESS a Bootstrap (viz # 30). Je to lehký a agilní způsob, jak rychle zprovoznit web. Podívejte se také na náš rozhovor s Andy, ve kterém nám řekne více o nové verzi.

28. Bez mřížky

Gridless je základní deska HTML5 a CSS3, která může sloužit jako základ pro vaše responzivní návrhy se zaměřením na typografii a integrovanou kompatibilitu mezi prohlížeči.

29. Kostra

Na rozdíl od předchozích dvou kotlových desek, jejichž výchozí bod je s nejmenším rozlišením, je vývojová sada Skeleton, kterou vytvořil Dave Gamache, založena na mřížkovém systému 960.gs a je škálovatelná na mobilní zařízení. Skeleton se také může pochlubit skvělým rámcem stylů, na kterém mohou vývojáři stavět styly.

30. Bootstrap

Bootstrap, který byl vytvořen společností Twitter a nyní je otevřený, je rámec a řada komponent pro rychlé získání webu online a od verze dvě všechny jeho hlavní části fungují citlivě.

Pluginy, podložky a polyfill

Ačkoli moderní prohlížeče a software mají tendenci být přizpůsobeny pro responzivitu, někdy musíme použít další nástroje, abychom zajistili konzistentní zážitek.

31. Reagující plugin

Marios Lublinski napsal plug-in WordPress, který slibuje, že promění jakékoli aktuální téma WP na responzivní. Jak to funguje Zatím nevím, protože nebyla vydána v době psaní tohoto článku, ale pokud splní svůj slib, měla by být velmi užitečná.

32. Svržení

Zpracování přetečení obsahu funguje dobře v prohlížečích pro stolní počítače, ale starší mobilní prohlížeče s ním zacházejí nekonzistentně. Polyfill Overthrow od pracovité skupiny Filament Group přidává konzistentní ladnou degradaci napříč zařízeními a zajišťuje, že všichni uživatelé mobilních telefonů získají nejlepší možný zážitek.

33. MediaTable

Zásuvný modul jQuery od Marco Pegoraro, MediaTable, pracuje s Respond.js, aby vám pomohl obejít problém, jak zobrazit velké datové tabulky na zařízeních s malou obrazovkou, vytvářet responzivní sloupce a tam, kde je to vhodné, přidat přepínač Zobrazit / skrýt.

"Testování, testování: 1-2-3 ..."

Dalším aspektem responzivního pracovního postupu je znát vaše cílová zařízení a rozlišení a poté je otestovat.

34. resizeMyBrowser

resizeMyBrowser, vývojářem frontendu Chen Luo, má několik přednastavených dimenzí pro okno prohlížeče pro testování responzivně navržených stránek nebo vytvoření nové předvolby, pokud nemůžete najít tu, která vyhovuje vašim potřebám.

35. responzivnípx

Stejně jako resizeMyBrowser, responzivnípx, vytvořený Remy Sharpem, načte vaše stránky do okna, kde můžete otestovat šířku a výšku, abyste zjistili, jak dobře se vaše mediální dotazy spouští a kde jsou v návrhu zarážky.

36. Responzivní testování designu

Neuvěřitelně užitečný nástroj od designéra a vývojáře Matta Kersleyho: jednoduše zadejte adresu URL svého responzivního webu v Responsive Design Testing a zjistěte, jak se vykresluje v různých velikostech prohlížeče.

37. Responsinátor

Zadejte URL a The Responsinator vám ukáže, jak se zobrazuje v mnoha běžných velikostech zařízení - s nemilosrdnou robotickou účinností. Tama Pugsley a Andy Hovey jsou zodpovědní za tento.

38. Responsive.is

Další emulátor zařízení na stránce, Responsive.is, umožňuje zadat adresu URL a poté rychle změnit její velikost mezi řadou různých předvoleb. Vyrábí jej tým, který stojí za připravovanou aplikací Typecast.

39. Screenqueri.es

Ještě jeden nástroj pro dimenzi prohlížeče, ale Screenqueri.es od Mandar Shirke se odlišuje tím, že má rozsáhlou sadu předvoleb pro mobilní zařízení a tablety, stejně jako mřížku a pravítka, díky nimž je jemné měření mnohem jednodušší.

40. Aptus

Další aplikace pro testování webů ve více definovaných velikostech, ale Aptus je nativní pro Mac. Je k dispozici prostřednictvím obchodu Mac App Store a nativní přináší další funkce, jako jsou snadné snímky obrazovky a offline podpora.

41. Responzivní záložka designu

Victor Coulon vytvořil velmi jednoduchý, ale efektivní bookmarklet; když jej aktivujete na libovolné webové stránce, přidá panel nástrojů, který vám umožní přepínat mezi čtyřmi běžnými rozměry obrazovky, abyste viděli, jak se váš web vykresluje v různých velikostech.

42. Responzivní testovací záložka

Tato záložka od Benjamina Keena umožňuje další přizpůsobení tím, že vám umožní definovat vlastní velikosti zařízení a libovolné množství nebo málo. Je-li aktivován, zobrazuje stránky ve všech vybraných velikostech vedle sebe pro snadné srovnání.

43. Screenfly

Screenfly od společnosti QuirkTools vám umožňuje otestovat web v různých rozlišeních na počítači, tabletu, mobilu a televizi. Testování na ploše je aktuálně omezeno na Safari, zatímco tablety a mobilní zařízení mají více možností pro zařízení a prohlížeče. Televize je omezena na operu.

44. Indikátor dotazu na média

Johan Brook nabízí čistý způsob CSS k testování, když prohlížeč spustil mediální dotaz. Indikátor dotazu na média je dalším dobrým nástrojem pro testování a hraní s body zlomu designu.

45. Podložka

Shim je aplikace Node.js, která je jedním z nástrojů používaných při redesignu Boston Globe, plakátového chlapce hnutí RWD, který provozuje webovou stránku napříč více zařízeními ve stejné síti Wifi, což usnadňuje testování napříč zařízeními .

46. ​​Vjezd

Pokud nemáte server Node.js pro provozování Shim, vytvořil Scott Jehl jednodušší verzi nazvanou Drive-In, která funguje zásadně stejným způsobem, ale s použitím PHP, Apache a souboru .htaccess.

47. Adobe Shadow

Společnost Adobe pokračuje v prosazování webových technologií pomocí tohoto nástroje pro vzdálené ladění. Nainstalujte si Shadow a rozšíření Chrome pro Mac nebo Windows, plus klienta Shadow pro Android nebo iPhone, a můžete sdílet webové stránky mezi mnoha různými zařízeními.

48. Opera Mobile Emulator + vzdálené ladění

Jednodušší způsob ladění mobilních stránek je instalace Opera a emulátoru Opera Mobile Emulator a jejich propojení pomocí možnosti Vzdálené ladění. Jednoduché a rychlé nastavení a jeho výhodou je testování na více než WebKit.

Další inspirace

Chcete získat představu o tom, jak ostatní reagují na své návrhy?

49. MediaQueri.es

Pokud jste to ještě neviděli, web Mediaqueri.es má stále rostoucí počet webů, které přešly na citlivou stránku.

50. @RWD

Ethan Marcotte provozuje účet na Twitteru, který přináší nejnovější zprávy, nástroje a vitríny ze světa RWD.

Denise Jacobs zbožňuje, že je řečníkem, autorem, trenérem webdesignu a evangelistou kreativity, zatímco Peter Gasston je autorem knihy The Book of CSS3 a zkušeného webového vývojáře, který bloguje v Broken Links.

Líbilo se vám to? Přečtěte si tyto!

  • Profesionální tipy pro vytváření mobilních webových stránek
  • Nejlepší techniky CSS a JavaScript
  • Jak vytvořit aplikaci
  • Nejlepší webová písma zdarma pro designéry
  • Objevte, co bude v oblasti rozšířené reality pokračovat
  • Stáhněte si zdarma textury: vysoké rozlišení a ihned připravené k použití
Předchozí Článek

3 způsoby, jak opravit chyby perspektiv ve Photoshopu
Další Článek

Sedm zlatých pravidel pro vytváření skvělých ikon iOS 7
Doporučujeme Vám Vidět
Rebrand tohoto pivovaru zůstává věrný svým kořenům
Číst

Rebrand tohoto pivovaru zůstává věrný svým kořenům

Smět 2024
Minne ot ká agentura Duffy & Partner dala polečno ti ummit Brewing Company plnou rebrand, čímž vytvořila celkovou hlavní identitu a značku pro jednotlivé produkty. To bylo impl...
Prvních 16 bezplatných symbolických písem
Číst

Prvních 16 bezplatných symbolických písem

Smět 2024
Známá ada pí em Zapf Dingbat , kterou navrhl Hermann Zapf v roce 1978, nám v průběhu let po kytla pou tu zábavy.Nejpamátnější je příběh Davida Car ona o tom, ja...
5 nejlepších tipů, jak uspět v nepředvídatelném světě
Číst

5 nejlepších tipů, jak uspět v nepředvídatelném světě

Smět 2024
šokujícími vítěz tvími Brexitu ve Velké Británii a Trumpa v U A, které označují začátek nejvole tivějšího období pro podnikání, kter&#...