سایزهای استاندارد طراحی واکنش گرا

هر قالب بر اساس استانداردهای این صفحه واکنش گرا خواهد شد

طراحی سایت واکنش گرا یا ریسپانسیو مهم ترین رکن طراحی قالب و سایت می باشد و اگر وب سایتی واکنش گرا نباشد باعث مخدوش شدن تصویر سایت شما در ذهن کاربر خواهد شد و حتی شانس کمتری برای نمایش در موتورهای جستجو مانند گوگل دارد.

امروزه تعداد بسیار زیادی دستگاه های مختلف متصل به اینترنت وجود دارد که هر کدام صفحه نمایشی با اندازه و ریزولوشن متفاوت دارند.دستگاه هایی که هرکدام کاربرد متفاوتی دارند که از مهم ترین آنها می توان به موبایل، تبلت، لپ تاپ و کامپیوتر دسکتاپ اشاره کرد. اما از بین همه آنها فقط چند رزولوشن خاص هستند که در هر گروه بیشترین استفاده را دارند.

بنابراین با توجه به وجود این طیف گسترده از دستگاه ها، تهیه استانداردی که بتواند مهم ترین و پرکاربردترین رزولوشن ها را شامل شود و همچنین بتوان به آن به عنوان استانداردی بین کارفرما و کارگزار استناد کرد، ضروری بود.

این استاندارد به صورت شفاف و صریح تعداد رزولوشن هایی که قالب در آنها به درستی به نمایش در خواهد آمد را بیان می کند. این رزولوشن ها در جدول زیر آمده است:

 

اندازه رزولوشن

گروه

دستگاه های مطرح

360x740

موبایل

Samsung Galaxy Note 9, S7/S8/S8+/S9/S9+

375x667

موبایل

iPhone 6/6S/7/8

412x732

موبایل

Pixel Series

414x736

موبایل

iPhone 6/6S/7/8 Plus

768x1024

موبایل، تبلت

iPad Mini 1/2/3

800x1280

تبلت

Samsung Galaxy Tab 10

1024x1366

تبلت ، دسکتاپ

iPad Pro

1080x1920

تبلت، دسکتاپ

iPhone 7/8 Plus

1280x1024

تبلت

 

1366x768

لپ تاپ، دسکتاپ

 

 

نکته مهمی که باید مورد توجه قرار بگیرد عدد اول قبل ازxاست چرا که ممکن است دستگاهی با عرض یکسان اما با ارتفاعی متفاوت وجود داشته باشد اما بدون مشکل نمایش داده می شود. به طول مثال سایز 360x740 را در نظر بگیرید. عدد اول آن یعنی 360 مهم ترین فاکتور است. اگر در قالبی این سایز بهینه سازی شده باشد در سایزهای دیگر به طول مثال 360x840 هم بدون مشکل نمایش داده خواهد شد.