آموزش طراحی سایت رسپانسیو و نکات آن

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

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

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

ما به شما کمک می کنیم تا بین گزینه های موجود بهترین انتخاب را داشته باشید.

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

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

واکنش گرایی یا حالت رسپانسیو (Responsive) چیست؟

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

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

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

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

حال تکلیف چه بود؟ آیا امکان منظم کردن این بهم ریختگی وجود داشت؟ وبمستران در نهایت به این نتیجه رسیدند که امکانی به نام واکنش گرایی را باید برای سایت های خود فعال کنند و سعی در پیدا کردن آموزش طراحی سایت های رسپانسیو رفتند. و آنجا بود که متوجه شدند با کمک آموزش های CSS3 و HTML5 عملیات واکنش گرایی را در CSS ممکن ساخته و امکان مشاهده سایت برای کاربران موبایلی را نیز ممکن سازد.

واکنش گرایی تا کجا پیشرفت کرد؟

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

چگونه سایت وردپرسی را رسپانسیو کنیم؟

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

۱- توجه به مرورگر های موبایل

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

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

۲- دقت به سرعت بارگذاری

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

کد واکنشگرا در وردپرس

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

قطعه کد زیر را داخل فایل header و مابین دو تگ <head> و <head/> قرار دهید :

<meta name="viewport" content="width=device-width">

حالا اگر می خواهید رزولوشن های گوناگونی را در نظر بگیرید، باید یک تغییر در CSS ایجاد کنید. قطعه کد زیر را در فایل style.css قرار دهید.

<link href="template.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)" />
<link rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 327px)" href="mobile.css">
<link rel="stylesheet" media="only screen and (min-width:328px) and (max-width: 768px)" href="templates/template/tablet.css">

به این صورت که می بینید اعداد ۱۰۲۴ برای کامپیوتر و لپ تاپ، ۳۲۷ تا ۱۰۲۴ برای تبلت و مینی لپ تاپ ها و ۳۲۷ برای گوشی ها می باشد. این اعداد به صورت استاندارد های کلی هستند. اما اگر خواستید می توانید آن ها را در بازه های مخصوصی تغییر دهید.

چگونه سایت وردپرسی خود را واکنشگرا کنیم؟

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

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

در این قسمت قصد داریم بهترین ابزار را برای تست کردن واکنش گرایی سایت معرفی کنیم، پس با ما همراه باشید :

mobile friendly test:

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

XRESPOND:

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

کلام آخر :

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

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

موفق و پیروز باشد.