[FONT=tahoma]در چند سال اخیر ابزارهای رایگان متن باز و منابع مهم اطلاعاتی, سرویس های خود را به صورت بر خط ارایه می کنند. [/FONT][FONT=tahoma]بسیاری از این ابزارها برای طراحی [/FONT][FONT=tahoma]صفحات Responsive طراحی شده اند که مطالب مربوط به کد زنی CSS و دیگر ویژگی های معمولی را به صورت خودکار انجام می دهند. کارایی این ابزارها می تواند بسیار جالب باشد و طراحان را برای استفاده از دیگر منابع دچار تردید کند. با وجود اینکه مرورگرها, افزونه های قدرتمندی در این زمینه دارند و کار طراحی و تست صفحات را بسیار راحت تر کرده اند, اما در ادامه به طور مختصر به ۲۳ ابزار آنلاین در سراسر وب اشاره خواهیم کرد. [/FONT]
[INDENT]

  1. [color=#000080][COLOR=#000080]Responsive Testing Tool[/color][/COLOR] [FONT=tahoma]- تست صفحات در سایزهای متفاوت[/FONT]
  2. [color=#000080][FONT=tahoma][COLOR=#000080]Style Tiles [/color][/FONT][/COLOR][FONT=tahoma]- طراحی بسری لایه ها و اجزای صفحه[/FONT]
  3. [FONT=tahoma][color=#000080][COLOR=#000080]resizeMyBrowser[/color][color=#333333] – تغییر اندازه صفحه برای تست صفحات[/color][/COLOR][/FONT]
  4. [color=#000080][FONT=tahoma][COLOR=#000080]Retina Images[/color][color=#333333] – تست صفحات برای نمایشگرهای رتینا[/color][/FONT][/COLOR]
  5. [color=#000080][FONT=tahoma][COLOR=#000080]Bootstrap[/color][color=#333333] – یک بستر ساده و قدرتمند برای طراحی[/color][/FONT][/COLOR]
  6. [color=#000080][FONT=tahoma][COLOR=#000080]The Responsinator[/color][color=#333333] – تست صفحات در گوشی های آیفون[/color][/FONT][/COLOR]
  7. [color=#000080][FONT=tahoma][COLOR=#000080]Responsivepx[/color][color=#333333] – رتبه بندی و آنالیز صفحات[/color][/FONT][/COLOR]
  8. [color=#000080][FONT=tahoma][COLOR=#000080]Designmodo Responsive Testing[/color][color=#333333] – تست اندازه صفحات[/color][/FONT][/COLOR]
  9. [color=#000080][FONT=tahoma][COLOR=#000080]PhotoSwipe[/color][color=#333333] – یک گالری عکس مخصوص گوشی های هوشمند[/color][/FONT][/COLOR]
  10. [color=#000080][FONT=tahoma][COLOR=#000080]Adaptive Images[/color][color=#333333] – ابزاری جالب برای بهینه سازی عکس برای صفحات کوچک[/color][/FONT][/COLOR]
  11. [color=#000080][FONT=tahoma][COLOR=#000080]Responsive Img[/color][color=#333333] – بهینه سازی عکس های صفحات[/color][/FONT][/COLOR]
  12. [color=#000080][FONT=tahoma][COLOR=#000080]RWD Calculator[/color][color=#333333] – تبدیل پیکسل به اندازه بر حسب درصد[/color][/FONT][/COLOR]
  13. [color=#000080][FONT=tahoma][COLOR=#000080]Blueberry[/color][color=#333333] – اسلاید عکس با طراحی responsive[/color][/FONT][/COLOR]
  14. [color=#000080][FONT=tahoma][COLOR=#000080]Sidr [/color][color=#333333]- ایجاد منو برای گوشی های لمسی[/color][/FONT][/COLOR]
  15. [color=#000080][FONT=tahoma][COLOR=#000080]jPanelMenu [/color][color=#333333]- پنل مناسب با طراحی responsive[/color][/FONT][/COLOR]
  16. [color=#000080][FONT=tahoma][COLOR=#000080]TinyNav.js [/color][color=#333333]- تولید منو مخصوص صفحات کوچک[/color][/FONT][/COLOR]
  17. [color=#000080][FONT=tahoma][COLOR=#000080]FlexNav [/color][color=#333333]- منوی مناسب با طراحی responsive[/color][/FONT][/COLOR]
  18. [color=#000080][FONT=tahoma][COLOR=#000080]Responsive Wireframes [/color][color=#333333]- تولید لایه های responsive برای صفحات[/color][/FONT][/COLOR]
  19. [color=#000080][FONT=tahoma][COLOR=#000080]Interface Sketches [/color][color=#333333]- طرح های sketch رایگان[/color][/FONT][/COLOR]
  20. [color=#000080][FONT=tahoma][COLOR=#000080]Responsable CSS [/color][color=#333333]- طراحی responsive لایه ها و CSS[/color][/FONT][/COLOR]
  21. [color=#000080][FONT=tahoma][COLOR=#000080]Cool Kitten [/color][color=#333333]- اسکرول responsive صفحات[/color][/FONT][/COLOR]
  22. [color=#000080][FONT=tahoma][COLOR=#000080]Viewport Resizer [/color][color=#333333]- تست responsive بودن وبسایت ها و آنالیز رفتاری آن ها[/color][/FONT][/COLOR]
  23. [color=#000080][FONT=tahoma][COLOR=#000080]Stackable.js [/color][color=#333333]- جدول هوشمند با طراحی مناسب برای صفحات مختلف[/color][/FONT][/COLOR]

[/INDENT]

[FONT=tahoma]با استفاده از هر یک از این ابزارها می توانید به مسیر طراحی خود شکل دهید و سرعت کارهای خود را بالاتر ببرید. همچنین می توانید برای خطایابی و تست طراحی های فعلی خود نیز استفاده کنید تا ببینید چقدر از استاندارهای روز فاصله دارید و در چه زمینه های کمبود وجود دارد. منتظر نظرات شما هستیم.
[/FONT]
[align=left][FONT=tahoma]http://www.pc-article.ir[/FONT][/align] [align=left][FONT=tahoma]http://www.spyrestudios.com[/FONT][/align]