طراحی سایت واکنش گرا چیست ؟

امتیاز شما به مطلب / امتیاز 5 از ۵ توسط 3 نفر

طراحی سایت واکنش گرا چیست ؟

گروه مطالب :طراحی سایت

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

طراحی سایت واکنش گرا یکی از داغ ترین مسائل در سال 2013 بود. این موضوع به دلیل رشد تلفن های هوشمند و وسایل دیگر موبایل به وجود آمده است. اکثر مردم از صفحه ی نمایش های کوچکتر برای نمایش صفحات سایت استفاده میکنند.

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

وب سایت واکنش گرا چه شکلی است؟

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

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

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

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

یا ممکن است کاربر توانایی حرکت ستون ها را داشته باشد. تصاویر به طور خودکار سایزش تنظیم می شود و دیگر بریده یا به شکل نمایش داده نمی شود.

نکته : با طراحی واکنش گرا وب سایت به صورت خودکار با دستگاهی که در آن نمایش داده می شود تعدیل و تنظیم می شود.

طراحی سایت واکنش گرا چطور کار می کند؟

سایت های واکنش گرا از صفحات متحرک استفاده می کند. تمام مولفه های صفحات بیشتر متناسب با سایز هستند تا پیکسل ها. بنابراین اگر شما سه ستون دارید نباید بگویید پهنای هر کدام چقدر باشد باید پهنای آنها در مقایسه با دیگر ستون ها تنظیم شود. برای مثال ستون 1 باید نصف صفحه را بگیرد ستون 2 باید 30 درصد صفحه را بگیرد و ستون 3 باید 20 درصد را بگیرد.

رسانه هایی مثل تصاویر هم باید سایزبندی شوند. با این روش تصویر می تواند در ستون خودش یا مولفه ی طراحی مربوط به خودش بماند.

مسائل مربوط

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

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

برنامه ها و نسخه های موبایل : در گذشته ممکن بود در مورد ساخت App برای وبسایتتان فکر کنید، App برای Ipad یا یک App برای اندروید.

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

چرا کسب و کارهای کوچک احتیاج به گزینش طراحی سایت واکنش گرا دارند.

اکثر مردم از دستگاه های موبایل استفاده می کنند. در تحقیقات اخیر گزارش شده است که 45 درصد آمریکایی ها صاحب یک تلفن هوشمند و 31 درصد صاحب یک تبلت هستند. ترافیک خود را بررسی کنید. زمانی که ببینید تعداد کسانی که وب سایت شما را به وسیله ی دستگاه های موبایل می بینند چه مقدار است شوکه خواهید شد. (در سایت تحلیلگر گوگل Google Analytic می توانید ببینید)

در سمت چپ مخاطبان و سپس موبایل را بزنید و می توانید ببینید که بازدیدهایتان بوسیله ی چه دستگاهایی صورت گرفته است.

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

بیشتر بخوانید

مطالبی که با توجه مطالعه این صفحه به شما توصیه میشود مطالعه نمائید