2019/07/25، 12:01 PM
مرور کلی نکات طراحی وب سایت Responsive
آموزش طراحی سایت
![[تصویر: %D9%85%D8%B1%D9%88%D8%B1-%DA%A9%D9%84%DB...onsive.jpg]](http://magbot.ir//%D9%85%D8%B1%D9%88%D8%B1-%DA%A9%D9%84%DB%8C-%D9%86%D9%87%D8%A7%DB%8C%DB%8C-%D9%86%D9%82%D8%A7%D8%B7-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-Responsive/%D9%85%D8%B1%D9%88%D8%B1-%DA%A9%D9%84%DB%8C-%D9%86%D9%87%D8%A7%DB%8C%DB%8C-%D9%86%D9%82%D8%A7%D8%B7-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-Responsive.jpg)
قبلا ما در مورد رسانه ها صحبت کردیم، در این مقاله ما خواهیم آموخت نقاط ضعفی را که طراحی وب سایت پاسخگو را متزلزل می نماید.
همه چیز در مورد اندازه صفحه نمایش های مختلف است؟ برای درک قضیه، اجازه دهید با استفاده از یک قیاس به بررسی بپردازیم.
تصور کنید که طرحی برای ساخت یک خانه زیبا و جدید دارید. زیر بنا مهم است، زیرا تمام خانه به آن بستگی دارد. پس از پایه، نخستین سطح خانه اهمیت دارد، چون بقیه خانه روی آن ساخته میشود. در این خانه، طبقه اول یک نقطه شکست یا break points است. در صورتی که ما طبقه اول را اصولی و بر اساس اندازه و متراژ استاندارد بنا نکنیم طبقات بالا تر نیست دچار بی نظمی می شوند حتی اگر بهترین تیم مهندسی مسول طبقات بالا باشد.
نقطه ی شکست در طراحی واکنش گرا م
نقطه شکست در طراحی واکنش گرا ( RWD ) تغییر پهنای مرورگر می باشد. وقتی اندازه صفحه را تغییر می دهد مثلا از اندازه اولیه 960px به 768px هنر طراحی واکنش گرا بایستی وارد عمل شود. در واقع عملکرد نامناسب تغیر اندازه نقطه شکست طراحی واکنشگرا است
نقطه ی شکست متداول
به طور متوسط، هر سایت پاسخگو دارای حداقل دو نقطه شکست است. برای تبلت ها و دستگاه های تلفن همراه. دسکتاپ، تبلت و تلفن همراه بر اساس اندازه صفحه نمایش آی فون و آی پد است، زیرا این دستگاه ها محبوب ترین دستگاه های موجود در دستگاه های تلفن همراه و تبلت هستند.
اما این تغییر اندازه ها بر اساس آی فون و آی پد معیار و استاندارد صحیحی است یا خیر بحث مفصلی می باشد. آیا این بهترین تجربه است یا نه؟
ایجاد نقاط سفارشی
تقریبا هیچ دو وب سایتی مشابه هم ساخته نمی شوند. با توجه به این موضوع، استفاده از نقطه های پایانی استاندارد پیشفرض ممکن است نیازهای واکنشگرایی سایت را خوب پوشش ندهد.
بنابراین، کشف کردن کجا و زمان انتقال نقطه در محدوده نقطه توقف استاندارد مهم است.
ایجاد یک نقطه پایانی سفارشی بسیار ساده است. با این حال، راه های بسیاری وجود دارد که می توان آن را اشتباه انتخاب نمود .
چیدمان صحیح
تصور کنید یک وضعیت بسیار معمولی را که یک وب سایت پاسخگو در تمام ابعاد صفحه نمایش بزرگ محبوب بسیار عالی است، اما طرح در عرضهای کوچکتر مرورگر در منطقه 400px ممکن است خوب عمل نکند.
از آنجا که این یک عرض صفحه نمایش زیاد محبوب نیست، طراح در پشت صحنه فقط تصمیم گرفته از آن بگذارد. این تصمیم خوبی بود؟ نه!
هدف از RWD ایجاد بهترین راه حل در ابعاد مختلف صفحه نمایش مرورگر می باشد و باید پیش بینی آینده را نیز داشته باشید. فقط دستگاههای متداول امروز نباید عامل تعیین کننده ای در مورد نقاط شکست یک سایت پاسخدهنده باشند.
باید چیدمان عناصر بگونه ای باشد که ابعاد نچندان مطرح نیز بخوبی پشتیبانی شود تا در آینده مشکلی پیش نیاید.
یک کارشناس RWD از کجا بایستی شروع کند
از زمان انتشار قابهای واکنشی که در حال حاضر در دسترس هستند، یادگیری استفاده از RWD به طور قابل توجهی ساده شده است. با این حال، مانند هر شروعی، تازه کارها از کد که توسط دیگران اجرا شده استفاده می کنند و پروژه های خود را بر اساس آن می بندند.
پیشنهاد می شود نیازی نیست چرخ را اختراع کنید از قالب ها و نمونه کارهای دیگران استفاده کنید و بمرور کامل شوید
چگونگی ایجاد یک نقطه گذار سفارشی در مسیر مناسب
برنامه های زیادی مانند تغییر اندازه پنجره برای Chrome وجود دارد و برای کارهایی مثل این بسیار عالی هستند، ابعاد جاری در گوشه سمت راست پایین نشان داده می شود. شما می توانید تناقضات را در ظاهر پیدا کنید. یا با یک برنامه مانند Resize Window، شما نیاز به صرف وقت برای دیدن سایت خود در هر پیکسل های مختلف عرضی را از بین می برید.
مقالات مرتبط
![[تصویر: %D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C-%D8...%D8%AF.jpg]](http://magbot.ir//%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C-%D8%AE%D9%88%D8%AF-%D8%B1%D8%A7-%D8%A8%D8%A7-%D8%B4%D9%85%D8%A7%D8%B1%D9%86%D8%AF%D9%87-%D9%87%D8%A7%DB%8C-CSS-%D8%B3%D8%A7%D8%B2%D9%85%D8%A7%D9%86%D8%AF%D9%87%DB%8C-%DA%A9%D9%86%DB%8C%D8%AF/%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C-%D8%AE%D9%88%D8%AF-%D8%B1%D8%A7-%D8%A8%D8%A7-%D8%B4%D9%85%D8%A7%D8%B1%D9%86%D8%AF%D9%87-%D9%87%D8%A7%DB%8C-CSS-%D8%B3%D8%A7%D8%B2%D9%85%D8%A7%D9%86%D8%AF%D9%87%DB%8C-%DA%A9%D9%86%DB%8C%D8%AF.jpg)
محتوای خود را با شمارنده های CSS سازماندهی کنید
![[تصویر: %DA%86%DA%AF%D9%88%D9%86%DA%AF%DB%8C-%D8...%D8%B5.jpg]](http://magbot.ir//%DA%86%DA%AF%D9%88%D9%86%DA%AF%DB%8C-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D8%B3%D8%B1%DB%8C%D8%B9-%D9%81%D8%B1%D9%85-%D9%87%D8%A7-%D8%AF%D8%B1-CSS-%D8%AE%D8%A7%D9%84%D8%B5/%DA%86%DA%AF%D9%88%D9%86%DA%AF%DB%8C-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D8%B3%D8%B1%DB%8C%D8%B9-%D9%81%D8%B1%D9%85-%D9%87%D8%A7-%D8%AF%D8%B1-CSS-%D8%AE%D8%A7%D9%84%D8%B5.jpg)
چگونگی طراحی فرم ها و اشکال در CSS
![[تصویر: %D8%AF%D8%B1-10-%D8%AF%D9%82%DB%8C%D9%82...%D8%AF.jpg]](http://magbot.ir//%D8%AF%D8%B1-10-%D8%AF%D9%82%DB%8C%D9%82%D9%87-%D8%A8%D8%A7-Adobe-Photoshop-%DB%8C%DA%A9-%D8%B7%D8%B1%D8%AD-%D8%AA%D8%A7%DB%8C%D9%BE%D9%88%DA%AF%D8%B1%D8%A7%D9%81%DB%8C-%D8%B2%DB%8C%D8%A8%D8%A7-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%DA%A9%D9%86%DB%8C%D8%AF/%D8%AF%D8%B1-10-%D8%AF%D9%82%DB%8C%D9%82%D9%87-%D8%A8%D8%A7-Adobe-Photoshop-%DB%8C%DA%A9-%D8%B7%D8%B1%D8%AD-%D8%AA%D8%A7%DB%8C%D9%BE%D9%88%DA%AF%D8%B1%D8%A7%D9%81%DB%8C-%D8%B2%DB%8C%D8%A8%D8%A7-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%DA%A9%D9%86%DB%8C%D8%AF.jpg)
در 10 دقیقه با فتوشاپ یک طرح تایپوگرافی زیبا ایجاد کنید
آموزش طراحی سایت
قبلا ما در مورد رسانه ها صحبت کردیم، در این مقاله ما خواهیم آموخت نقاط ضعفی را که طراحی وب سایت پاسخگو را متزلزل می نماید.
همه چیز در مورد اندازه صفحه نمایش های مختلف است؟ برای درک قضیه، اجازه دهید با استفاده از یک قیاس به بررسی بپردازیم.
تصور کنید که طرحی برای ساخت یک خانه زیبا و جدید دارید. زیر بنا مهم است، زیرا تمام خانه به آن بستگی دارد. پس از پایه، نخستین سطح خانه اهمیت دارد، چون بقیه خانه روی آن ساخته میشود. در این خانه، طبقه اول یک نقطه شکست یا break points است. در صورتی که ما طبقه اول را اصولی و بر اساس اندازه و متراژ استاندارد بنا نکنیم طبقات بالا تر نیست دچار بی نظمی می شوند حتی اگر بهترین تیم مهندسی مسول طبقات بالا باشد.
نقطه ی شکست در طراحی واکنش گرا م
نقطه شکست در طراحی واکنش گرا ( RWD ) تغییر پهنای مرورگر می باشد. وقتی اندازه صفحه را تغییر می دهد مثلا از اندازه اولیه 960px به 768px هنر طراحی واکنش گرا بایستی وارد عمل شود. در واقع عملکرد نامناسب تغیر اندازه نقطه شکست طراحی واکنشگرا است
نقطه ی شکست متداول
به طور متوسط، هر سایت پاسخگو دارای حداقل دو نقطه شکست است. برای تبلت ها و دستگاه های تلفن همراه. دسکتاپ، تبلت و تلفن همراه بر اساس اندازه صفحه نمایش آی فون و آی پد است، زیرا این دستگاه ها محبوب ترین دستگاه های موجود در دستگاه های تلفن همراه و تبلت هستند.
اما این تغییر اندازه ها بر اساس آی فون و آی پد معیار و استاندارد صحیحی است یا خیر بحث مفصلی می باشد. آیا این بهترین تجربه است یا نه؟
ایجاد نقاط سفارشی
تقریبا هیچ دو وب سایتی مشابه هم ساخته نمی شوند. با توجه به این موضوع، استفاده از نقطه های پایانی استاندارد پیشفرض ممکن است نیازهای واکنشگرایی سایت را خوب پوشش ندهد.
بنابراین، کشف کردن کجا و زمان انتقال نقطه در محدوده نقطه توقف استاندارد مهم است.
ایجاد یک نقطه پایانی سفارشی بسیار ساده است. با این حال، راه های بسیاری وجود دارد که می توان آن را اشتباه انتخاب نمود .
چیدمان صحیح
تصور کنید یک وضعیت بسیار معمولی را که یک وب سایت پاسخگو در تمام ابعاد صفحه نمایش بزرگ محبوب بسیار عالی است، اما طرح در عرضهای کوچکتر مرورگر در منطقه 400px ممکن است خوب عمل نکند.
از آنجا که این یک عرض صفحه نمایش زیاد محبوب نیست، طراح در پشت صحنه فقط تصمیم گرفته از آن بگذارد. این تصمیم خوبی بود؟ نه!
هدف از RWD ایجاد بهترین راه حل در ابعاد مختلف صفحه نمایش مرورگر می باشد و باید پیش بینی آینده را نیز داشته باشید. فقط دستگاههای متداول امروز نباید عامل تعیین کننده ای در مورد نقاط شکست یک سایت پاسخدهنده باشند.
باید چیدمان عناصر بگونه ای باشد که ابعاد نچندان مطرح نیز بخوبی پشتیبانی شود تا در آینده مشکلی پیش نیاید.
یک کارشناس RWD از کجا بایستی شروع کند
از زمان انتشار قابهای واکنشی که در حال حاضر در دسترس هستند، یادگیری استفاده از RWD به طور قابل توجهی ساده شده است. با این حال، مانند هر شروعی، تازه کارها از کد که توسط دیگران اجرا شده استفاده می کنند و پروژه های خود را بر اساس آن می بندند.
پیشنهاد می شود نیازی نیست چرخ را اختراع کنید از قالب ها و نمونه کارهای دیگران استفاده کنید و بمرور کامل شوید
چگونگی ایجاد یک نقطه گذار سفارشی در مسیر مناسب
برنامه های زیادی مانند تغییر اندازه پنجره برای Chrome وجود دارد و برای کارهایی مثل این بسیار عالی هستند، ابعاد جاری در گوشه سمت راست پایین نشان داده می شود. شما می توانید تناقضات را در ظاهر پیدا کنید. یا با یک برنامه مانند Resize Window، شما نیاز به صرف وقت برای دیدن سایت خود در هر پیکسل های مختلف عرضی را از بین می برید.
محتوای خود را با شمارنده های CSS سازماندهی کنید
چگونگی طراحی فرم ها و اشکال در CSS
در 10 دقیقه با فتوشاپ یک طرح تایپوگرافی زیبا ایجاد کنید
