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

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

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

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

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

خب تا اینجا فهمیدیم که طراحی ریسپانسیو چیست و چرا اهمیت دارد. در ادامه میخواهیم ببینیم که طراحی سایت ریسپانسیو چه مزایای دارد؛

 

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

 

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

 

مجددا داشتن چند سایت برای جند نوع دستگاه یعنی اینکه هرگونه تغییر یا بروزرسانی را باید بصورت جداگانه بر روی تک تک آنها پیاده کنید. و یا محتوا را بصورت جداگانه در آنها بارگذاری کنید. درحالیکه با یک وب سایت واکنش گرا میتوانید یک بار تغییرات را برای تمامی دستگاه ها اعمال کنید.

 

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

 

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

 

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

 

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

 

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

 

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

معایب طراحی واکنش گرا مشخصا کمتر از مزایای آن است؛

 

 

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

 

 

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

 

 

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

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

 

در این بخش به پایه های اساسی طراحی سایت ریسپانسیو و اجزای ساختمانی مختلف آن میپردازیم:

 

اساس طراحی ریسپانسیو ترکیبی از کدهای HTML و CSS است دو زبان بسیاری مهمی که محتوا و چیدمان یک صفحه در مروزگر کنترل میکنند.
کدهای HTML عمدتا ساختار, عناصر و محتوای یک صفحه در وب را کنترل میکنند. بعنوان مثال برای اضافه کردن یک تصویر به یک وب سایت باید از این کد HTML استفاده کنید:

 

<img src=”image.gif” alt=”image” class=”full-width-img”>

میتوانید یک “class” یا “id” تنظیم کنید و بعدا از کدهای CSS برای اضافه کردن قابلیت های مختلف استفاده کنید.
از CSS برای ویرایش طرح و چیدمان عناصری که در یک صفحه با HTML قرار میدهید، استفاده میشود. کد CSS میتواند در بخش <style> یک سند HTML یاه بعنوان یک فایل جداگانه گنجانده شود. برای مثال میتوانیم عرض تمام تصاویر HTML را بصورت زیر ویرایش کنیم:

 

} img
width: 100%;
{

و یا میتوانیم با اضافه کردن یک نقطه و قرار دادن عبارت “full-width-img” یک کلاس مشخص را هدف بگیریم.

  } full-width-img .
width: 100%;
{

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

 

 

مدیا کوئری یک بخش اساسی از CSS3 است که به شما این امکان را میدهد تا بتوانید محتوایتان را برای انطباق با عوامل مختلف مثل اندازه صفحه یا وضوح نمایش تغییر دهید.
مدیا کوئری شبیه “if query” در برخی زبان های برنامه نویسی است، به این منظور که قبل از اجرای کد مناسب بررسی میکند که ببیند آیا نمای صفحه به اندازه کافی عریض است یا خیر.

 

} media screen and (min-width: 780px)
}.full-width-img
margin: auto;
width: 90%;
{

اگر صفحه نمایش حداقل ۷۸۰ پیکسل عرض داشته باشد، تصاویر کلاس “full-width-img” ۹۰ درصد صفحه را اشغال میکنند و بطور خودکار با حاشیه هایی به همان نسبت در مرکز قرار میگیرند.

چیدمان سیال – Fluid Layouts

درحالیکه اغلب اوقات چیدمان ها بر اساس fluid layout صورت میگیرد ولی برخی طراحان معتقدند که به اندازه کافی پویا یا بعبارتی انعطاف پذیر نیست. Flexbox یک ماژول CSS است که بعنوان یک روش کارآمدتر برای چیدمان چندین عنصر طراحی شده است، حتی زمانی که اندازه محتویات موجود در صفحه ناشناخته باشد. روش کارکرد آن اینگونه است که یک کانتینر flex یا بعبارتی محفظه انعطاف پذیر، آیتم های موجود را برای پر کردن فضای خالی گسترش میداد و یا برای جلوگیری از خارج شدن آنها از کادر، اندازه ها را کوچک میکند. این کانتینرهای انعطاف پذیر تعدادی ویژگی منحصر بفرد دارند مثل justify content که با استفاده از عناصر HTML معمولی نمیتوان آنهارا ویرایش کرد.

 

 

ابتدایی ترین نوع تصاویر ریسپانسیو از همان مفهوم چیدمان سیال پیروی میکند و از یک واحد پویا برای کنترل کردن عرض یا ارتفاع استفاده میکند. کد CSS نمونه ای که قبلا هم گفتیم و این را انجام میدهد:

 

img }
width: 100%;
{

واحد % یکی از مقادیر ارتفاع یا عرض را پوشش میدهد و از تناسب اندازه تصویر برای اسکرین مورد نظر اطمینان حاصل میکند. مشکل این رویکرد این است همه افراد حتی کاربران موبایل با سایز کامل تصویر را دانلود کنند. برای اینکه بتوانید از نسخه های مختلف مقیاس بندی برای دستگاه ها مختلف باید از مقدار srcset در HTML برای تگ های img استفاده کنید تا بیش از یک اندازه تصویر را داشته باشید.

 

<img srcset=”large-img.jpg 1024w,
middle-img.jpg 640w,
small-img.jpg 320w”
src=”small.jpg”
/>

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

 

سرعت

وقتیکه میخواهید یک طراحی واکنش گرا برای وب سایت تان داشته باشید، باید سرعت بارگذاری را در اولویت قرار دهید. صفحاتی که در ۲ ثانیه بارگذاری میشوند میانگین نرخ پرش ۹ درصدی دارند، درحالیکه صفحاتی که ۵ ثانیه طول میکشند به نرخ پرش ۳۸ درصدی منجر میشوند. روش هایی که برای ریسپانسیو کردن سایت تان استفاده میکنید نباید منجر به تاخیر بیش از حد استاندارند، در اولین رندر از سایت شود. راه های مختلفی وجود دارد که میتوانید سرعت بارگیری صفحات را افزایش دهید:
• بهینه سازی تصاویر
• پاک کردن کش سایت
• فشرده سازی حجم کدهای سایت

 

متن ریسپانسیو

از آنجایی که اندازه متن در موبایل و دسکتاب با هم متفاوت است، با کاهش عرض صفحه نمایش دستگاه، اندازه متن باید کوچک شود. این کار را میتواندی از طریق مدیا کوئری برای هر صفحه انجام دهید. و یکی از روش های آسان تر کردن آن استفاده از واحد های نسبی (em, rem %) به جای واحد مطلق px است. در کد HTML و CSS زیر خواسته ایم که اندازه فونت متن را در صفحه های بزرگ ۳rem و در صفحه هایی با عرض کمتر ۷۶۸ پیکسل را ۱.۵rem کند:

 

} media screen and (max-width: 768px)
} p {
font-size: 1.5rem;
{
{

 

طرح بندی ریسپانسیو

طرح بندی هر صفحه نحوه نمایش محتوا در مرورگر را مشخص میکند. در گذشته طراحان سایت از مجبور به استفاده از جدول بودند که کنترل شان آسان نبود. سپس float و clearfix آمدند که مدیریت کردن آنها نیز سخت بود. ظهور CSS Grid و Flexbox طرح بندی ها را متحول کرد و به طراحی واکنش گرا آنها کنترل بیشتری داد.

پیشنهاد می کنیم برای درک بهتر طراحی وبسایت مقاله مراحل طراحی وبسایت را مطالعه کنید.

 

سوالات متداول در رابطه با طراحی سایت ریسپانسیو

 

 

۱- ریسپانسیو بودن سایت یعنی چه؟

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

 

 

۲- طراحی سایت ریسپانسیو چه مزایایی دارد؟

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

 

 

۳- آیا طراحی سایت ریسپانسیو مقرون به صرفه است؟

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

 

 

۴- آیا میتوان یک سایت را یه سایت ریسپانسیو تغییر داد؟

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