طراحی سایت ریسپانسیو

معنی طراحی سایت ریسپانسیو

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

طراحی سایت ریسپانسیو یک تکنولوژی در زمینه وب سایت محسوب می شود. طراحی سایت ریسپانسیو یا Responsive web design به معنای واکنش گرا بودن سایت می باشد. وب سایت هایی که از این تکنولوژی استفاده می کنند انعطاف پذیر هستند. یعنی با صفحات نمایش مختلف خود را تطبیق می دهند.

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

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

امتیاز یا جریمه گوگل

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

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

افزایش اعتبار نزد مشتریان

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

همان طور که گفتیم و طبق آمار دقیق گوگل حدود ۷۰% از بازدید کنندگان با موبایل وارد سایت می شوند. این آمار می دهد که طراحی سایت ریسپانسیو چقدر مهم است.

حفظ مشتریان قدیمی

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

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

آشنایی با مشتریان جدید

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

صرفه جویی در هزینه ها

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

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

جلوگیری از محتوای تکراری

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

هشدار به دارندگان وب سایت

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

تاریخچه طراحی سایت ریسپانسیو

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

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

تاریخچه طراحی سایت ریسپانسیو در ایران به دهه هشتاد شمسی باز می گردد . عبارت هایی مانند طراحی سایت سیال و… به وجود آمد نسخه های اولیه ی طراحی سایت ریسپانسیو بود . در سالهای قبل از ۸۰ وب سایت ها با عرض ثابت طراحی می شدند . بیشتر مانیتور ها ۱۰۲۴ در ۸۰۰ پیکسل بودند . وب سایت برای این صفحات طراحی می شد . اما از وقتی که تلفن های همراه هوشمند و تبلت ها به بازار آمدند گستردگی سایز صفحات نمایش نیز بیشتر شد . به همین جهت سایت باید طوری طراحی می شد که در صفحات مختلف به درستی اجرا شود . به همین دلیل کم کم طراحی سایت ریسپانسیو رواج و محبوبیت پیدا کرد .

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

ریسپانسیو بودن تصاویر

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

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

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

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

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

ریسپانسیو بودن ردیف ها و ستون ها

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

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

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

ریسپانسیو بودن منو

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

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

ریسپانسیو بودن فرم ها

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

ریسپانسیو بودن اسلایدر

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

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

اشتباهات رایج در طراحی سایت ریسپانسیو

استفاده از آگهی

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

متن های طولانی

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

قابل کلیک نبودن شماره ها

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

در دسترس نبودن منو

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