وبلاگ
قدیم تر ها یک سری مطالبی در سایت ها در حوزه طراحی سایت بود که از اهمیت ریسپانسیو بودن سایت برای موبایل می گفت. خیلی با آب و تاب هم از این موضوع صحبت می شد و خیلی هم روی این موضوع تاکید می شد و البته حق هم داشتند، طراحی سایت برای دسکتاپ خیلی راحت تر و در دسترس تر است. امروزه با وجود اینکه حدودا 60 درصد از کاربران وب، کاربران موبایل هستند، دیگر ریسپانسیو بودن سایت یک ویژگی نیست، یک اصل نیست و بلکه جزو بدیهیات است و اصلا سایتی که ریسپانسیو نباشد همان طراحی نشود سنگین تر است! اینجا هم دیگر سرتان را با خوبی های این نوع طراحی و اهمیتش در سئو درد نمی آوریم و آن چیز که عیان است، چه حاجت به بیان است؟! اینجا می خواهیم از صفحات ریسپانسیو در المنتور صحبت کنیم. همراه ما باشید.
در این مطلب با چه مواردی آشنا می شویم ؟
اصلا دیگر نمی شود آموزش طراحی سایت داد و به ریسپانسیو بودن سایت اشاره نکرد. این موضوع از یک اصل تبدیل به یک موضوع پایه شده است و دیگر بدیهی است که سایتی که ریسپانسیو نباشد، به هیچ وجه نمی تواند در دنیای وب موفق باشد. در این بخش از آموزش طراحی سایت هم ما به سراغ اهمیت ریسپانسیو بودن صفحات سایت “نرفته ایم” چون دیگر توضیح واضحات لازم نیست. در اینجا می خواهیم برای کسانی که تازه می خواهند طراحی سایت را شروع کنند چند روش خوب ساخت صفحات ریسپانسیو در المنتور را آموزش دهیم. اینکه ندانید المنتور چیست واقعا خیلی محتمل تر است از اینکه اهمیت ریسپانسیو بودن سایت را ندانید!
در هر حال برای شروع و با تصور اینکه شما هیچ ایده ای از طراحی سایت و وردپرس ندارید، باید به شما بگویم که ریسپانسیو بودن سایت یعنی سایت شما در هر دستگاه و پلتفرمی مانند گوشی موبایل، تبلت، کامپیوتر شخصی، لپ تاپ و … به درستی اجرا شود. در رابطه با المنتور هم باید بگوییم المنتور یکی از بهترین صفحه ساز ها و ادیتورهای وردپرس است که بوسیله آن شما می توانید صفحات سایت خودتان را بسازید و المان های مختلف را به آن اضافه کنید. حالا در اینجا می خواهیم ساخت صفحات ریسپانسیو در المنتور را یاد بگیریم و سایت های به اصطلاح Mobile-friendly بسازیم. پس در ادامه همراه ما باشید.
علم طراحی سایت بیشتر بشناسید!
خیلی سریع بریم سراغ ساخت صفحات ریسپانسیو در المنتور و قبل از آن البته به شما پیشنهاد می کنم که اگر با این ادیتور تا به حال کار نکردید، آموزش های مقدماتی کار با آن را در یوتوب ما تماشا کنید و اگر هم تا حدودی با این صفحه ساز کار کردید که از اینجا به بعد را همراه من باشید تا وارد بحث قدم های ریسپانسیو کردن سایت بشویم.
قبل از اینکه وارد بحث ساخت صفحات ریسپانسیو در المنتور بشوید یک دقیقه همین جا بمانید که یک چیزی را به شما بگویم. ما در این آموزش طراحی سایت دو مورد را در نظر می گیریم. اینکه شما می خواهید برای خودتان و کسب و کارتان یک سایت طراحی کنید و دو اینکه شما می خواهید که تبدیل به طراح سایت بشوید و برای دیگران طراحی سایت را انجام بدهید. در هر حالت، تا زمانی که دستتان راه بیفتد و خودتان قالب خودتان را طراحی کنید، در قدم اول ساخت سایت ریسپانسیو باید یک قالب خوب برای سایت خودتان انتخاب کنید که طراحی مناسبی داشته باشد و فونت ها و تصاویر به صورت خودکار با صفحه موبایل سینک بشوند. هرچند این کافی نیست و همچنان شما باید یک سری اقدامات را برای بهتر کردن ریسپانسیو قالب انجام بدهید.
در المنتور فارسی در گوشه سمت راست و در المنتور انگلیسی در گوش سمت چپ یک آیکون است که روی آن یک موبایل و یک مانیتور وجود دارد، وقتی روی آن کلیک کنید یک نوار در بالای صفحه شما ظاهر می شود که شما می توانید ریسپانس سایت خودتان را در سه دستگاه اصلی دسکتاپ، گوشی و تبلت مشاهده کنید. روی گوشی بزنید و ببینید که المان های سایت شما در Viewport موبایل چگونه نمایش داده می شود و برای قرار دادن المان ها نیز از آن استفاده کنید.
در این حالت اگر شما برای موبایل المانی اضافه کنید، این المان دیگر برای دسکتاپ اضافه نمی شود و برای اینکه المان شما روی تمامی نسخه ها گذاشته شود یا باید جداگانه المان را برای هر پلتفرم بزنید یا باید این بخش رو غیر فعال کنید.
یک سری المان ها هست که روی دسکتاپ خیلی خوب جوابگو هستند اما برای داشتن صفحات ریسپانسیو در المنتور این المان ها باید در موبایل حذف بشوند. به این خاطر که یک سری المان ها اصلا نباید در موبایل نشان داده شوند یا اصلا خوب روی موبایل نشان داده نمی شوند. در این صورت شما می توانید وارد تنظیمات المان بشوید و در بخش Advance Settings یا تنظیمات پیشرفته، گزینه Responsive یا واکنشگرا را کلیک کنید و در آنجا المان را در دستگاهی که نمیخواهید نمایش داده شود مخفی کنید.
چرا می گوییم پاک نکنید؟ چون اگر المان را پاک کنید، المان برای دسکتاپ هم پاک می شود اما اگر آن را مخفی کنید، فقط برای دستگاه هایی نمایش داده می شود که ما مخفی بودن المان در آن ها را فعال نکرده ایم.
تقریبا در هر ادیتوری این بخش وجود دارد و اتفاقا برای ریسپانسیو کردن صفحات المنتور هم خیلی به درد ما می خورد. Margins در واقع فاصله های بیرونی المان از کادر صفحه و دیگر المان ها می باشد و Padding فاصله های داخلی از کادر داخلی خود المان می باشد. ما از این دو مفهوم می توانیم برای این استفاده می کنیم که فضاهای خالی خیلی بزرگ یا خیلی کوچک نداشته باشیم و همه چیز برای ریسپانس موبایل به اندازه باشد. تنظیمات این موارد را می توانید در تنظیمات پیشرفته یا Advanced Settings استفاده کنید.
فونت در طراحی سایت بسیار مهم است و در ریسپانس موبایل هم یکی از کلیدی ترین نقش ها را ایفا می کند. فونت اگر در موبایل خیلی بزرگ باشد ممکن است یک سطر کل صفحه گوشی شما را بگیرد و اگر هم خیلی کوچک باشد که شما برای خواندن هر صفحه باید هر دفعه کلی زوم کنید. در نتیجه فونت دسکتاپ و فونت موبایل باید جداگانه در سایت قرار بگیرند و برای این کار شما وارد بخش Responsive Mode می شوید، سپس به Mobile Viewport، بعد Site Settings و بعد هم وارد بخش Global Fonts می شوید .و فونت کلی سایت را تنظیم می کنید.
اینکه عکس های شما باید کم حجم باشند یک طرف، اینکه سایز آن ها مناسب قرار گرفتن در نسخه موبایلی سایت شما باشند یک طرف دیگر است. برای داشتن “صفحات ریسپانسیو در المنتور” بهتر است که سایز تصاویر سایتتان را متناسب با آنچه در موبایل لازم است تنظیم کنید. مثلا اگر یک تصویر در نسخه دسکتاپ 600 در 400 است، مثلا در موبایل باید سایزی حدود 150 در 90 را داشته باشد. همچنین شما می توانید از سایت هایی مانند TinyPNG برای بهینه کردن تصاویر خودتان استفاده کنید.
یک نکته سئویی هم این وسط بخواهم بگویم، برای اینکه سرعت بارگذاری سایتتان را هم بیشتر کنید می توانید از Lazy Load در تصاویر خود استفاده کنید که این کار هم توسط افزونه های WP Rocket قابل انجام است و هم کدش را می توانید به صورت دستی وارد کنید.
این را می دانید که در Elementor شما این قابلیت را دارید که سایز بندی، موقعیت المان و پدینگ/مارجین را جداگانه برای هر دستگاه تنظیم کنید؟ شما می توانید از این قابلیت در بخش های Design و Advanced Settings در تنظیمات Columns یا ستون های صفحه استفاده کنید و ستون های ریسپانسیو برای سایت خودتان داشته باشید. در نظر داشته باشید که موقعیت ستون های محتوایی باید طوری باشد که همه آن ها در وسط Viewport موبایل باشند و به سمت چپ یا راست متمایل نباشند.
یک قابلیت جالب دیگری هم که المنتور دارد این است که شما برای داشتن صفحات ریسپانسیو در المنتور می توانید در بخش تنظیمات چیدمان یا Layout Settings گزینه Breakpoints را انتخاب کنید و این مورد را برای موبایل تنظیم کنید. در این صورت محتوای سایت شما با آن موقعیت مکانی کاملا بهینه می شود.
همینکه شما وارد المنتور صفحه می شوید در ستون المان ها و در بالای آن یک بخش Global وجود دارد که با استفاده از آن شما می توانید یک سری المان ها را قرار بدهید که در صفحات شما به همان شکل که شما می خواهید نمایش داده شوند. وقتی مطمئن شدید که این المان ها در تمامی صفحات و در تمامی پلتفرم ها به خوبی نمایش داده می شوند، می توانید آن ها را ذخیره کنید تا نیازی نباشد برای همه صفحات جداگانه آن ها را تنظیم کنید.
یک نکته سئویی این وسط بگویم که برای گوگل مهم است که نسخه موبایل سایت شما با سرعت بیشتری از نسخه دسکتاپ بارگذاری بشود و برای اینکار در وردپرس شما می توانید از افزونه های خاصی مانند WP Rocket استفاده کنید و البته که افزونه های دیگری هم به همین منظور وجود دارد. کارهایی که شما باید برای این مورد انجام بدهید به شرح زیر می باشد:
شاید برای یک سری از این کارها به یک متخصص وردپرس نیاز داشته باشید اما با چند بار تکرار، خود شما هم می توانید این کار را انجام بدهید. هرچند تصور ما همیشه این است که کسی که وارد آکادمی تابان می شود به دنبال یادگیری برای یک تخصص مانند طراحی سایت است اما به هر حال باز به این موضوع اشاره می کنیم که گاهی وقت ها برای یک سری کارها نیاز است که با یک متخصص مشورت کنید. ممنون که در این مقاله همراه ما بودید و خوش حال می شویم که نظراتتان را در اختیار ما قرار دهید.
