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

مقدمه

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

منظور از سایت ریسپانسیو چیست؟

در یک کلام، استراتژی طراحی سایت ریسپانسیو به‌معنی راه‌اندازی وب‌سایت‌هایی است که برای انواع دستگاه‌های موبایل، تبلت و دسکتاپ به‌خوبی کار کند. اهمیت ریسپانسیو بودن سایت چنان بالاست که نه تنها کاربران گوشی‌به‌دست در عرض چند ثانیه وب‌سایت‌های غیر ریسپانسیو را می‌بندند، بلکه گوگل به طراحی سایت ریسپانسیو یا واکنش گرا به‌عنوان یک عامل رتبه‌بندی نگاه می‌کند.

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

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

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

ریسپانسیو بودن یا نبودن طراحی سایت وردپرس به تم (Theme) استفاده‌شده بستگی دارد. قالب وردپرس معادل طراحی سایت استاتیک است که طراحی و چیدمان محتوای سایت را کنترل می‌کند.

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

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

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

۱. طراحی سایت با CSS و HTML

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

۲. آموزش طراحی سایت ریسپانسیو با مدیا کوئری

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

۳. چیدمان سیال طراحی سایت (Fluid)

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

4. طرح بندی صفحات وب با فلکس باکس (Flexbox)

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

۵. طراحی سایت با تصاویر ریسپانسیو

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

۶. سرعت سایت ریسپانسیو

در مورد طراحی سایت ریسپانسیو یکی از حیاتی‌ترین مواردی که باید در نظر گرفته شود، سرعت وب‌سایت است. صفحاتی که طی ۲ ثانیه بارگیری می‌شوند، میانگین نرخ پرش ۹ درصدی دارند؛ در حالی که اگر بازشدن صفحه ۵ ثانیه طول بکشد، نرخ پرش تا ۳۸ درصد افزایش پیدا می‌کند.

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

برای طراحی سایت واکنش گرا ریسپانسیو باید مراحل زیر را دنبال کنید:

۱. نقاط انقطاع (Breakpoints) مناسب را تنظیم کنید

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

۲. با یک شبکه سیال شروع کنید

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

۳. حواستان به صفحه نمایش‌های لمسی باشد

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

۴. از تصاویر و ویدئوهای واکنشگرا استفاده کنید

طراحی وب می‌تواند از ویژگی‌های تگ تصاویر مدرن برای ریسپانسیو ساختن تصاویر و از نسبت ابعاد (aspect-ratio) برای ریسپانسیو ساختن ویدیوها استفاده کند.

۵. تایپوگرافی سایت را تعریف کنید

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

۶. از تم یا طرح آماده استفاده کنید

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

۷. تست پاسخگویی در دستگاه های واقعی

موقع تحقیق در مورد طراحی سایت ریسپانسیو و حتی بعد از پیاده‌سازی آن، اغلب اهمیت آزمایش بر روی دستگاه‌های واقعی نادیده گرفته می‌شود. توسعه دهندگان می‌توانند کد تمام جزئیات سایت را تغییر دهند؛ اما عملکرد این تغییرات باید در شرایط واقعی روی دستگاه‌های واقعی تأیید شود.

کلام آخر

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

خدمات طراحی سایت ای نگاه  :