محتوا
- ابزاری برای شروع کار
- 01. پاسخگو طرحهای طراحی صفحات وب
- 02. کتاب طراحی پاسخگو
- 03. قاب های پاسخگو
- 04. الگوهای طرح چند دستگاه
- 05. کاشی های سبک
- ابزارهایی برای شبکه انعطاف پذیر / سیال
- 06. سیستم شبکه طلایی
- 07. Foldy960
- 08. SimpleGrid
- 09. شبکه CSS 1140px
- 10. سیستم شبکه CSS ستونی
- 11. سیستم شبکه معنایی
- 12. سوسی
- 13. گریدپاک
- 14. شبکه توری
- 15. یک شبکه فتوشاپ بهتر برای RWD
- 16. شبکه های مایع
- 17. ماشین حساب پاسخگو
- ابزارهایی برای تصاویر پاسخگو (و متن)
- 18. تصاویر پاسخگو
- 19. تصاویر تطبیقی
- 20. Sencha.io Src (Tinysrc سابق)
- 21. متن FitText
- 22. slabText
- ابزاری برای س mediaالات رسانه
- 23. پاسخ دهید. js
- 24. CSS3-Mediaqueries.js
- 25. Adapt.js
- 26. دسته بندی
- دیگهای بخار طراحی پاسخگو (و موبایل)
- 27. 320 به بالا
- 28. بدون شبکه
- 29. اسکلت
- 30. بوت استرپ
- پلاگین ها ، shims و polyfills
- 31. پلاگین پاسخگو
- 32. سرنگونی
- 33. جدول رسانه ای
- "آزمایش ، آزمایش: 1-2-3 ..."
- 34. تغییر اندازه MyBrowser
- 35. ریسپانسیو
- 36. تست طراحی پاسخگو
- 37. مسئول
- 38. پاسخگو است
- 39. Screenqueri.es
- 40. آپتوس
- 41. نشانک طراحی پاسخگو
- 42. نشانک تست پاسخگو طراحی
- 43. اسکرین فلای
- 44. شاخص پرس و جو رسانه
- 45. شیم
- 46. درایو
- 47. Adobe Shadow
- 48. شبیه ساز موبایل اپرا + اشکال زدایی از راه دور
- الهام بیشتر
- 49. MediaQueri.es
- 50.RWD
- این را دوست داشتید؟ اینها رو بخون!
همانطور که توسط Ethan Marcotte در مقاله "طراحی وب پاسخگو" و همچنین کتاب پرفروش خود معرفی و ساخته شده است ، برای پاسخگو بودن سایت به سه عنصر نیاز است:
- یک شبکه انعطاف پذیر / سیال
- تصاویر پاسخگو
- داستان های رسانه
بسیاری از مقالات عالی دیگر وجود دارد که انگیزه ها ، مفاهیم و تکنیک های مربوط به طراحی وب پاسخگو را پوشش می دهند ، بنابراین ما تمرکز این مقاله را بر روی برخی از ابزارهای برتر نگه می داریم که به شما کمک می کنند تا پاسخگو باشید.
ابزاری برای شروع کار
قبل از شروع به ساخت سایت ، بهتر است نحوه سازگاری عناصر موجود در صفحه را متناسب با اندازه های مختلف مرورگر دستگاه های مختلفی که مشاهده می شوند ، بیان کنید و از قطع ارتباطی که معمولاً ناشی از تفکر عمدتاً در مورد آن است ، جلوگیری کنید. طراحی دسک تاپ و بقیه تکرارهای پاسخگو به عنوان یک فکر بعدی (به ویژه به نظر استفانی (سالیوان) روویس مراجعه کنید).
01. پاسخگو طرحهای طراحی صفحات وب
این مجموعه برگه های طراحی پاسخگو ، توسط Jeremy P Alford ، نقطه شروع بسیار خوبی برای شروع نقشه برداری از نحوه تغییر بخشهای صفحه در رزولوشن های مختلف است.
02. کتاب طراحی پاسخگو
اگر ترجیح می دهید تمام طرح های خود را در یک مکان نگه دارید ، ممکن است بخواهید این کتاب سیم پیچ شده از 50 صفحه طرح پاسخگو را توسط شرکت App Sketchbook در نظر بگیرید.
03. قاب های پاسخگو
یکی از دشواری های ساخت وب سایت های پاسخگو ، استفاده از قاب های مفتولی برای نشان دادن نحوه عملکرد طراحی پاسخگو است. James Mellers از Adobe این ابزار آزمایشی را برای نشان دادن چگونگی پاسخگویی به شبکه های سیم پیچیده طرح های پیچیده گردآوری کرده است.
04. الگوهای طرح چند دستگاه
هنگام برنامه ریزی یک طراحی پاسخگو ، مفید است که ببینید دیگران قبل از شما چگونه با آن برخورد کرده اند ، بنابراین الگوهای طرح چند دستگاهی Luke Wroblewski ، که الگوهای معروف را با پیوندهایی به مثالها لیست می کند ، مکانی عالی برای شروع است.
05. کاشی های سبک
کاشی های سبک ساماناتا وارن تکنیک جدیدی را برای طراحی در عصر پاسخگویی پیشنهاد می کنند. به جای ماکت های طراحی با عرض ثابت ، این موارد مانند نمونه ها یا تابلوهای خلقی است که رویکرد طراحی کلی را بدون ورود به جزئیات دقیق نشان می دهد.
ابزارهایی برای شبکه انعطاف پذیر / سیال
همانطور که قبلاً گفته شد ، اولین م componentلفه مورد نیاز برای طراحی پاسخگو ، شبکه انعطاف پذیر / سیال است.موارد زیر قبلاً از قبل ساخته شده اند: شما فقط باید آنها را بارگیری کنید و به سرعت به یک سایت پاسخگو تر خواهید رسید.
06. سیستم شبکه طلایی
جونی کورپی ، که همچنین Less Framework را توسعه داده است ، اخیراً این نسخه جدید از یک سیستم شبکه قابل اعتماد را برای طراحی پاسخگو منتشر کرده است. Golden Grid System که به راحتی از 16 ، هشت ، چهار ستون سازگار است ، "تاشو" تلقی می شود ، همچنین دارای یک پوشش کوچک مرورگر است که شبکه را در صفحات شما برای آزمایش نشان می دهد.
07. Foldy960
مشاوران با استعداد در Paravel ، Inc شبکه اصلاح شده 960.gs را که به عنوان پایه پروژه های پاسخگو خود استفاده می کنند ، منتشر کرده اند.
08. SimpleGrid
SimpleGrid ، توسط Conor Muirhead ، با پاسخگویی پخته شده ساخته شده است ، بنابراین آسان است که با پروژه وب سایت پاسخگو خود شروع به کار کنید.
09. شبکه CSS 1140px
یکی دیگر از سیستم های شبکه پاسخگو عالی ، شبکه CSS 1140px توسط اندی تیلور ، طراح ملبورن است که از رزولوشن گسترده دسکتاپ به تلفن همراه تبدیل می شود.
10. سیستم شبکه CSS ستونی
سیستم Columnal grid ، ایجاد شده توسط مدیر خلاق Pulp + Pixels ، نیک گورسلین ، بر اساس سیستم شبکه 1140px ساخته شده است ، اما دارای برخی از موارد خوب مانند کیت طراحی با برگه های طرح و قالب های سیم کشی ، و همچنین سبک های اشکال زدایی CSS است.
11. سیستم شبکه معنایی
پسوندهای CSS از پیش پردازش شده مانند Sass و LESS محبوبیت بیشتری پیدا می کنند و سیستم شبکه Semantic Tyler Tate از آنها برای حداکثر تأثیر در این سیستم شبکه ای استفاده می کند که ادعا می کند از هیچ کلاس یا عنصر غیر ضروری استفاده نمی کند. بیشتر بخوانید در coding.smashingmagazine.com/2011/08/23/ طرح-صفحه-سیستم-شبکه-معنایی-برای-فردا /.
12. سوسی
مانند سیستم شبکه معنایی SUSY Oddbird یک سیستم شبکه ایجاد کرده است که از هیچ علامت گذاری اضافی یا کلاس های خاصی استفاده نمی کند ، اما SUSY فقط برای کاربران Sass (و برنامه افزودنی آن ، قطب نما) است.
13. گریدپاک
Gridpak ، توسط Erskine Design ، یکی از جدیدترین ژنراتورهای شبکه پاسخگو در اطراف است. این به شما امکان می دهد ستون ها و ناودانهای خود را در تعدادی از نقاط شکست تنظیم کنید ، سپس پرونده های CSS ، JavaScript و PNG را خارج کنید بنابراین تمام تیم شما از همان نقطه شروع کار می کنند.
14. شبکه توری
هنوز هم کمی رمز و راز بر سر Gridset وجود دارد ، زیرا در زمان نوشتن این مقاله ، هنوز منتشر نشده است. اما این ابزار توسط مارک بولتون دیزاین نویدبخش سیستم های شبکه ای بدون سفارش ، و روشی برای ذخیره و مدیریت شبکه های آنلاین شما است.
15. یک شبکه فتوشاپ بهتر برای RWD
سهام الیوت جی پیشنهاد می کند که استاندارد قدیمی شبکه 960px را کنار بگذاریم و در عوض از پایه 1000px کار کنیم و کار با همه محاسبات درصد را آسان تر کنیم. اگر موافق باشید ، او PSD برای شما ساخته تا بتوانید با آن کار کنید.
16. شبکه های مایع
اگر طراحی شما بسیار تخصصی است و شما باید شبکه سفارشی خود را ایجاد کنید ، می توانید این کار را با ماشین حساب شبکه مایعات هری رابرتز نامزد تازه وارد تازه وارد درخشان .net Awards انجام دهید.
17. ماشین حساب پاسخگو
یک پیکسل دیگر برای محاسبه درصد ، اما این یکی توسط استو رابسون با تولید تمام قوانین CSS برای شما یک قدم فراتر از دیگران است ، به این معنی که فقط می توانید آنها را در صفحه سبک خود کپی و جایگذاری کنید.
ابزارهایی برای تصاویر پاسخگو (و متن)
یکی دیگر از م componentلفه های مهم طراحی وب پاسخگو ، تصاویر روان است. در حالی که تکنیک دستیابی به تصاویر روان ساده است ، به نظر می رسد بهینه سازی عملکرد و بارگذاری صفحه برای دستگاه های مختلف یکی از بزرگترین چالش ها در طراحی وب پاسخگو است. در اینجا چند منبع برای نزدیک شدن به موضوع آورده شده است.
18. تصاویر پاسخگو
گروه فیلامان راهی برای ارسال تصویری با اندازه مناسب بر اساس وضوح صفحه طراحی کرد. این آزمایش با تصاویر همراه اول که مقیاس پذیری و مسئولیت پذیری را می طلبد ، داشتن دو تصویر در اندازه های مختلف برای مراجعه است.
19. تصاویر تطبیقی
مت ویلكاكس از ابزار Responsive Images برای ایجاد تصاویر تطبیقی الهام گرفته است ، كه از PHP و كمي JavaScript برای ارائه تصاویر مناسب بدون نیاز به علامت گذاری اضافی در دستگاه کاربر استفاده می كند.
20. Sencha.io Src (Tinysrc سابق)
Sencha یک سرویس ابری ارائه می دهد که نسخه های بهینه شده تصاویر میزبانی شده را برای اندازه دستگاهی که آنها را درخواست می کند ، ارسال می کند. برای آگاهی از نحوه استفاده از آن ، به docs.sencha.com/io/src/ مراجعه کنید.
21. متن FitText
یک جواهر دیگر از Paravel ، Inc FitText.js است ، یک پلاگین jQuery برای ایجاد تیتر یک عنوان وب با توجه به طراحی و دستگاه. برای جزئیات بیشتر به trentwalton.com/2011/05/10/fit-to-scale/ مراجعه کنید.
22. slabText
با الهام از FitText و الگوریتم SlabType ، slabText برایان مک آلیستر یک پلاگین jQuery است که باعث ایجاد متن های پررنگ می شود که در حالی که در عرض مشخصی هستند ، به طور واکنشی تغییر اندازه می دهند.
ابزاری برای س mediaالات رسانه
اکنون که ایده ای درباره چگونگی تغییر طرح شما برای دستگاه های مختلف ، شبکه مایع و تصاویر روان دریافت کرده اید ، برای تغییر عناصر صفحه به حالت پاسخگویی ، به پرسش های رسانه ای نیاز دارید.
23. پاسخ دهید. js
مسئله ای که در طراحی پاسخگو وجود دارد این است که مرورگرهایی که نمی توانند درخواست های رسانه را بخوانند از قلم افتاده اند. این ممکن است در مورد مخاطبان مورد نظر شما مشکلی ایجاد نکند ، اما با این وجود می توان کاربران را در مرورگرهای قدیمی جای داد. Respond.js ، توسط Scott Jehl ، فقط از ویژگی های عرض عرض و حداکثر عرض پشتیبانی می کند.
برای اطلاعات بیشتر به filamentgroup.com/lab/respondjs_fast_css3_media_query_for_internet_explorer_6_8_and_more/ مراجعه کنید.
24. CSS3-Mediaqueries.js
CSS3-Mediaqueries.js ، توسط Wouter van der Graaf ، نسخه های قدیمی اینترنت اکسپلورر و سایر مرورگرها را قادر می سازد تا به طور موثر انواع درخواستهای رسانه را آزمایش و اعمال کنند.
25. Adapt.js
ناتان اسمیت ، نویسنده سیستم شبکه اصلی 960.gs ، Adapt.js را نوشته است ، اسکریپتی که ابعاد مرورگر را تشخیص می دهد و فقط سبک های مورد نیاز را ارائه می دهد - مانند جستجوی رسانه اما بدون پرس و جو رسانه ، به این معنی که در مرورگرهای قدیمی نیز کار می کند.
26. دسته بندی
این تشخیص دستگاه از زاویه مخالف است - اسکریپت طبقه بندی Brett Jankord فرض می کند که دستگاه ها متحرک هستند ، مگر اینکه به صورت دسک تاپ یا رایانه لوحی تشخیص داده شود ، به شما امکان می دهد منابع را به روشی دلسوزانه به مرورگرها ارائه دهید.
دیگهای بخار طراحی پاسخگو (و موبایل)
با توجه به گردش کار کارآمد ، صفحات دیگ بخار روند انتقال طرح ها به مرورگر را زودتر از دیرتر تسهیل می کنند. اکثر این دیگهای بخار بهترین ابزارهای ذکر شده را در یک بسته بندی شسته و رفته ترکیب می کنند: یک شبکه انعطاف پذیر با اسکریپت ها تقویت شده ، در حالی که فلسفه های محتوای اولیه را اجرا می کنید.
27. 320 به بالا
اندی کلارک 320 و بالاتر یک بویلر همراه است که با بسیاری از ابزارهای مدرن دیگر طراحی وب مانند LESS و Bootstrap ادغام می شود (شماره 30 را ببینید). این یک روش سبک و چابک برای راه اندازی سریع سایت است. همچنین مصاحبه ما با اندی را بررسی کنید ، که در آن او درباره نسخه جدید به ما می گوید.
28. بدون شبکه
Gridless یک دیگ بخار HTML5 و CSS3 است که می تواند با تمرکز بر تایپوگرافی و سازگاری بین مرورگر پخته شده ، پایه ای برای طراحی های پاسخگو شما باشد.
29. اسکلت
بر خلاف دو دیگ بخار قبلی ، که نقطه شروع آن با کمترین وضوح تصویر است ، کیت توسعه اسکلت ، ایجاد شده توسط دیو گاماچ ، بر اساس سیستم شبکه 960.gs ساخته می شود و تا موبایل تقسیم می شود. Skeleton همچنین دارای یک چارچوب سبک عالی برای توسعه دهندگان است تا بتوانند سبک ها را در بالای آن بسازند.
30. بوت استرپ
بوت استرپ توسط توییتر ساخته شده و اکنون به صورت منبع آزاد در اختیار شما قرار گرفته است ، یک چارچوب و مجموعه ای از ملفه ها برای دستیابی سریع سایت به اینترنت است و از نسخه دو ، تمام قسمتهای اصلی آن پاسخگو کار می کنند.
پلاگین ها ، shims و polyfills
اگرچه مرورگرها و نرم افزارهای مدرن تمایل به پاسخگویی دارند ، اما گاهی اوقات ما مجبوریم از ابزارهای اضافی برای ارائه یک تجربه سازگار استفاده کنیم.
31. پلاگین پاسخگو
Marios Lublinski یک افزونه وردپرس نوشته است که نوید می دهد هر موضوع WP فعلی را به یک موضوع پاسخگو تبدیل می کند. چگونه این کار می کند من هنوز نمی دانم چون به عنوان زمان نوشتن این مقاله منتشر نشده است ، اما اگر به قول خود عمل کند باید بسیار مفید باشد.
32. سرنگونی
مدیریت سرریز محتوا به خوبی در مرورگرهای دسک تاپ کار می کند ، اما مرورگرهای قدیمی تلفن همراه آن را متناقض اداره می کنند. تکمیل تخلیه از گروه زحمت کش رشته باعث کاهش تخریب پایدار در دستگاه ها می شود و اطمینان حاصل می کند که همه کاربران تلفن همراه بهترین تجربه ممکن را دارند.
33. جدول رسانه ای
پلاگین jQuery مارکو پگورارو ، MediaTable ، با Respond.js کار می کند تا به شما کمک کند از مشکل نحوه نمایش جداول داده های بزرگ در دستگاه های صفحه کوچک ، ایجاد ستون های پاسخگو و اضافه کردن ضامن نمایش / پنهان کردن در صورت مناسب جلوگیری کنید.
"آزمایش ، آزمایش: 1-2-3 ..."
یکی دیگر از جنبه های گردش کار پاسخگو این است که دستگاه ها و رزولوشن های هدف خود را بشناسید و سپس در آنها آزمایش کنید.
34. تغییر اندازه MyBrowser
resizeMyBrowser ، توسط توسعه دهنده frontend Chen Luo ، دارای چندین ابعاد از پیش تعیین شده برای پنجره مرورگر شما است تا بتواند صفحات طراحی شده با پاسخ را آزمایش کند یا در صورت عدم یافتن موردی که متناسب با نیاز شما باشد ، از پیش تعیین شده جدیدی ایجاد می کند.
35. ریسپانسیو
دقیقاً مانند resizeMyBrowser ، Respivepx که توسط Remy Sharp ساخته شده است ، صفحات شما را در پنجره ای بارگیری می کند که می توانید عرض و ارتفاع را آزمایش کنید تا تعیین کند که پرسش های رسانه شما چگونه شلیک می کنند و نقاط شکست در طراحی کدام یک هستند.
36. تست طراحی پاسخگو
ابزاری فوق العاده مفید توسط طراح و توسعه دهنده مت کرسلی: به سادگی URL سایت پاسخگو خود را در Responsive Design Testing وارد کنید تا ببینید چگونه در اندازه های مختلف مرورگر ارائه می شود.
37. مسئول
یک URL وارد کنید و The Responsinator نحوه نمایش آن در بسیاری از اندازه های رایج دستگاه - با کارایی رباتیک بی رحمانه - را به شما نشان می دهد. تاما پاگسلی و اندی هووی مسئول این یکی هستند.
38. پاسخگو است
Responsive.is یکی دیگر از شبیه سازهای درون صفحه ای است ، به شما امکان می دهد URL را تایپ کنید و سپس به سرعت اندازه آن را بین طیف وسیعی از پیش تنظیمات مختلف تغییر دهید. این توسط تیم پشت برنامه Typecast در آینده ساخته شده است.
39. Screenqueri.es
یکی دیگر از ابعاد مرورگر ، اما Screenqueri.es از Mandar Shirke با داشتن یک مجموعه گسترده از ایستگاه از پیش تنظیم شده تلفن همراه و رایانه لوحی ، و همچنین یک شبکه و حاکمان که اندازه گیری دقیق را بسیار آسان تر می کند ، تفاوت خود را ایجاد می کند.
40. آپتوس
برنامه دیگری برای آزمایش سایت ها در چندین اندازه مشخص ، اما Aptus بومی Mac است. این قابلیت از طریق Mac App Store قابل استفاده است و بومی بودن ویژگی های اضافی مانند عکس های صفحه آسان و پشتیبانی آفلاین را به همراه دارد.
41. نشانک طراحی پاسخگو
ویکتور کولون یک بوک مارک بسیار ساده اما موثر ساخته است. هنگامی که آن را در هر صفحه وب فعال می کنید ، یک نوار ابزار اضافه می کند که به شما امکان می دهد بین چهار بعد صفحه مشترک جابجا شوید ، بنابراین می توانید نحوه عملکرد سایت خود را در اندازه های مختلف ببینید.
42. نشانک تست پاسخگو طراحی
این بوک مارکت توسط Benjamin Keen با اجازه دادن به شما برای تعیین اندازه دستگاه خود و هر تعداد یا تعداد دلخواه ، امکان شخصی سازی بیشتر را فراهم می کند. هنگامی که فعال می شود ، سایت را در تمام اندازه های انتخاب شده ، در کنار هم برای مقایسه آسان نشان می دهد.
43. اسکرین فلای
Screenfly ، توسط QuirkTools ، به شما امکان می دهد سایتی را با رزولوشن های مختلف در دسک تاپ ، تبلت ، موبایل و تلویزیون آزمایش کنید. در حال حاضر آزمایش دسک تاپ به Safari محدود شده است ، در حالی که رایانه لوحی و تلفن همراه گزینه های بیشتری برای دستگاه ها و مرورگرها دارند. تلویزیون محدود به اپرا است.
44. شاخص پرس و جو رسانه
یوهان بروک یک روش CSS خالص برای آزمایش اینکه آیا یک س mediaال رسانه توسط مرورگر ایجاد شده است ، ارائه می دهد. Media Query Indicator یکی دیگر از ابزارهای خوب برای آزمایش و بازی با نقاط شکست طراحی است.
45. شیم
یکی از ابزارهای مورد استفاده در طراحی مجدد بوستون گلوب ، پسر پوستر جنبش RWD ، Shim یک برنامه Node.js است که یک صفحه وب را در چندین دستگاه در همان شبکه Wifi اجرا می کند ، آزمایش دستگاه بین دستگاه را بسیار آسان تر می کند .
46. درایو
اگر برای اجرای Shim سرور Node.js در دسترس ندارید ، Scott Jehl نسخه ساده تری به نام Drive-In ساخته است که اساساً به همان روش کار می کند ، اما با استفاده از PHP ، Apache و یک پرونده .htaccess.
47. Adobe Shadow
Adobe با استفاده از این ابزار رفع اشکال از راه دور ، فشار خود را به سمت فن آوری های وب ادامه می دهد. Shadow و برنامه افزودنی Chrome را در Mac یا Windows ، بعلاوه سرویس گیرنده Shadow در Android یا iPhone نصب کنید و می توانید صفحات وب را بین دستگاههای مختلف به اشتراک بگذارید.
48. شبیه ساز موبایل اپرا + اشکال زدایی از راه دور
یک راه ساده تر برای رفع اشکال صفحات تلفن همراه نصب Opera و Opera Mobile Emulator و اتصال این دو با گزینه Remote Debug است. راه اندازی ساده و سریع ، و دارای مزایای تست بیش از WebKit است.
الهام بیشتر
آیا می خواهید درباره چگونگی پاسخگویی دیگران به طرح های خود ایده بگیرید؟
49. MediaQueri.es
اگر قبلاً آن را ندیده اید ، سایت Mediaqueri.es دارای تعداد سایتهایی است که به طرف پاسخگو عبور می کنند.
50.RWD
Ethan Marcotte یک حساب توییتر را اجرا می کند که آخرین اخبار ، ابزارها و ویترین های دنیای RWD را به ارمغان می آورد.
دنیس جیکوبز سخنران ، نویسنده ، مربی طراحی وب و بشارت دهنده خلاقیت را دوست دارد ، در حالی که پیتر گاستستون نویسنده کتاب The CSS3 و یک توسعه دهنده وب باسابقه است که در Broken Links وبلاگ می نویسد.
این را دوست داشتید؟ اینها رو بخون!
- نکات حرفه ای برای ساخت یک وب سایت تلفن همراه
- تکنیک های برتر CSS و JavaScript
- نحوه ساخت برنامه
- بهترین فونت های وب رایگان برای طراحان
- موارد بعدی را برای واقعیت افزوده کشف کنید
- بافت های رایگان را بارگیری کنید: وضوح بالا و اکنون آماده استفاده است
