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

folder_openبرنامه نویسی
commentبدون دیدگاه
طراحی سایت

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

خلاصه

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

هر چیزی که باید در مورد موبایل فرندلی و ریسپانسیو سازی بدانید

مقدمه

دنیای ما را به راحتی می­توان عصری توصیف کرد که در آن تکنولوژی از همه چیز مهمتر است! به دور و بر خودتان نگاه کنید تا ببینید مردم چقدر با تکنولوژی، طراحی سایت و اپلیکیشن ها خو گرفته­اند. امروزه حتی دور افتاده ترین روستا ها نیز دارای اینترنت پر سرعت هستند و عجیب نیست که بهترین و ثروتمند ترین برند های جهان شرکت های تکنولوژی هستند! (اپل، مایکروسافت، گوگل و …). در این مقاله قصد داریم درمورد بخش مهمی از طراحی سایت یعنی موبایل فرندلی (Mobile friendly) بودن سایت و البته ریسپانسیو سازی (Responsive) صفحات وب صبحت کنیم. مسلما که این مقاله مناسب افرادی است که یک وبسایت دارند و یا در سودای ساخت یک وبسایت هستند! برای افرادی که هیچگونه تخصصی از طراحی سایت فرانت اند (front-end) یا اصول طراحی وب ندارند شاید برخی لغات و اصطلاحات گنگ به نظر بیایید که اگر می­توانید با جستجو در گوگل معنای آنها را یاد بگیرید، پس باید شما را نیز به خواندن ادامه این مقاله دعوت کنیم. با ما همراه شوید.

تفاوت یک سایت موبایل فرندلی با یک وبسایت که موبایل فرندلی نیست

موبایل فرندلی چیست؟ و آیا مهم است؟

در واقع این لغت همان برگردان انگلیسی کلمات Mobile friendly است که به همان سازگار بودن با موبایل یا دوست بودن با موبایل است!! (ترجمه تحت اللفظی در بسیاری از اصطلاحات کامپیوتر کارایی ندارد!). در کل اگر بخواهیم مسئله را پیچیده نکنیم موبایل فرندلی در واقع به وبسایت گفته می­شود که با دستگاه های موبایل سازگاری دارد! همین! همانطور که احتمالا می­دانید امروزه اکثر کاربران وبسایت ها افرادی هستند که وبسایت ها را با موبایلشان باز می­کنند و یا حداقل چند بار این کار را انجام داده­اند! پس طراحی سایتی که موبایل فرندلی باشد حائز اهمیت فراوان است! برای اینکه یک وبسایت موبایل فرندلی باشد مجموعه­ای اعمال وجود دارد که بسته به تکنولوژی طراحی سایت شما باید این موارد روی وبسایت اعمال شود!

حال توجه شما را به آماری جلب می­کنیم تا بهتر درک کنید که موبایل فرندلی بودن یک وبسایت چقدر مهم است!!

  • 70 درصد از ترافیک وب متعلق به دستگاه های موبایل است
  • 80 درصد از وبسایت هایی با رتبه عالی (top-ranked) موبایل فرندلی هستند
  • 61 درصد از کاربران هرگز به وبسایتی که موبایل فرندلی نیست بر نمی­گردند.
  • 80 درصد از کاربران تلفن های هوشمند از شرکت هایی خرید می­کنند که سایتشان موبایل فرندلی است و یا اپلیکیشن نسخه موبایل دارند
  • 70 درصد از جستجو های تلفن های همراه منجر به اقدامی آنلاین خواهد شد.
  • پیش بینی می شود تا سال 2022 میزان استفاده از داده های تلفن همراه 46 درصد رشد کند.

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

برخی از آمار مربوط به موبایل فرندلی

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

 

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

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

در ادامه به شما می­گوییم چگونه وبسایت تان را ریسپانسیو کنید.

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

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

  1. تست وبسایت از نظر موبایل فرندلی بودن

خب قبل از انجام هر کاری باید بیبیند که آیا اصلا وبسایت شما به تنظیمات موبایل فرندلی نیاز دارد یا نه! باید وبسایت را تست کنید تا بدانید که موبایل فرندلی هست یا خیر و اگر موبایل فرندلی نیست، چه بخش هایی از آن باید تغییر کنند تا وبسایت موبایل فرندلی شود! خوشبختانه برای اینکار شرکت گوگل اقدام موثری انجام داده است که تست کردن موبایل فرندلی بودن را ساده کرده و اینکار در چند ثانیه انجام خواهد شد کافی است در قسمت جستجوی گوگل بنویسید “mobile friendly” تا یک کادر برای شما باز شود که باید آدرس وبسایت خود را در این کادر وارد کنید و دکمه اجرای آزمایش را بزنید، تا گوگل موبایل فرندلی بودن آن را بررسی کند.

Mobile friendly شرکت گوگل

 

حال ببیند نتیجه بررسی موبایل فرندلی بودن وبسایت گوگل سان چه بوده است:

نتیجه بررسی موبایل فرندلی بودن سایت google sun

به سادگی تست انجام شد (فقط با یک کلیک) و نتیجه بررسی شده می­گوید که این وبسایت موبایل فرندلی است!

  1. قدم اول طراحی سایت موبایل فرندلی

بعد از تست وبسایت، ابتدایی ترین کاری که باید انجام دهید این است که ببینید وبسایت شما از چه تکنولوژی ها، زبان های برنامه نویسی و ابزاری ساخته شده است! قبل از شروع هر کاری باید دید که اصلا قرار است چه کاری انجام شود! پس اول باید از طراح سایت بپرسید که آیا وبسایت با کمک CMS ساخته شده! آیا کامل کد نویسی شده و اگر اینطور است آیا شما به کد های HTML و CSS آن دسترسی دارید؟! و یا شاید وبسایت شما با سایت ساز ها طراحی شده باشد! زمانی که مشخص کردید وبسایت چگونه ساخته شده است می­توانید به سراغ مرحله بعدی بروید.

2.1- اگر وبسایت با سایت ساز ها ساخته شده است

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

2.2- وبسایت من با سایت ساز ها ساخته نشده است!

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

  1. مراحلی که برای موبایل فرندلی کردن وبسایت باید انجام شوند
  2. ریسپانسیو کردن وبسایت

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

افزونه های ریسپانسیو سازی در وردپرس:

  • Jetpack
  • WPTouch
  • AMP for WP
  • Superfly
  • Touchy

البته تاکید می­شود که از قالب یا تمی در وردپرسی استفاده کنید که حتما ریسپانسیو باشد (اکثر قالب های امروزی ریسپانسیو هستند). اگر ظاهر سایت شما مستقیما با کد های HTML و CSS ساخته شده است باید با کمک فریمورک هایی چون بوت استرپ آن را ریسپانسیو کنید.

همچنین برای اینکه بدانید که وبسایت تان در دستگاه های مختلف چگونه به نظر می­رسد کافی است سایت را در مرورگر کروم باز کنید و سپس کلید F12 را فشار دهید.

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

 

  1. سرعت وبسایت را ارتقا دهید

خب مهم نیست وبسایت شما با چه تکنولوژی ساخته شده باشد اگر کم سرعت است مطمئن باشید بسیاری از کاربران دنیا اصلا از آن بازدید نخواهند کرد! مخصوصا کاربران موبایل که معمولا انتخاب های بسیار زیادی برای سرگرم شدن و حتی خرید دارند منتظر یک وبسایت کند نخواهند ماند تا بارگذاری آن تمام شود!! پس یکی از مهمترین بخش های موبایل فرندلی در طراحی سایت همین سرعت وبسایت است. در وردپرس به راحتی با نصب افزونه هایی چون WP Rocket می­توانید سرعت وبسایت را بالاتر ببرید. در وبسایت های کد نویسی شده نیز می­توانید با بهینه کردن کد ها، حذف کد های اضافی، حذف فایل های اضافی، استفاده از الگوریتم ها و … سرعت وبسایت را ارتقا ببخشید.

 

  1. تا حد امکان ظاهر وبسایت را ساده نگه دارید و روی UX بهتر تاکید داشته باشید

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

 

  1. اندازه دکمه ها در موبایل باید بزرگ باشد

به این نکته توجه داشته باشید که گزینه های Call to action و دکمه ها در نسخه موبایل یک وبسایت موبایل فرندلی به خوبی دیده می­شوند! آنها به اندازه کافی بزرگ هستند و کاربران می­توانند به راحتی روی آن کلیک کنند! معمولا اگر دکمه های مهم در صفحه نمایش عرض 100 درصد داشته باشند عالی خواهد شد.

موبایل فرندلی

  1. از فونت بزرگ و مناسب استفاده کنید

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

 

  1. پاپ آپ ها را متوقف کنید

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

  1. از مدیا کوئری ها استفاده کنید

اگر با کد های HTML و CSS سر و کله زده باشید حتما مدیا کوئری ها (Media Queries) را می­شناسید. در واقع در حین طراحی صفحات وب شما می­توانید با کمک مدیا کوئری ها اعمال خاصی را برای صفحه نمایش هایی با اندازه های مختلف تعیین کنید! به عنوان مثال می­توانید با کمک مدیا کوئری های مشخص کنید که موردی در وبسایت زمانی که کاربر با موبایل وارد وبسایت شده به او نمایش داده نشود! و در عوض مورد دیگری به او نمایش داده شود! در یک وبسایت کد نویسی شده طراح فرانت انت به خوبی می­داند که از مدیا کوئری ها به سود وبسایت استفاده کند و سایت را آماده­ی موبایل و دیگر صفحات نمایش کند فقط کافی است کد های CSS را در اختیار او قرار دهید. در وبسایت های وردپرسی نیز استفاده از مدیا کوئری ها بسیار ساده است فقط کافی است به بخش کد های اضافی وبسایت رجوع کنید و کد های مدیا کوئری خود را به آن قسمت بیفزایید.

 

  1. از درصد ها استفاده کنید

در زبان های نشانه گذاری HTML و CSS واحد های بسیاری برای تعیین اندازه یک شی وجود دارد! یکی از آنها درصد است به عنوان مثال می­توانید تعیین کنید که عرض یک تصویر 100 درصد صفحه باشد! که بدین معنی است که عرض صفحه نمایش هر چقدر که بود عرض تصویر نیز همان قدر شود! بدین صورت دیگر مهم نیست کاربر با تبلت وارد سایت شده، با موبایل وارد سایت شده یا … در هر صورت با تعیین واحد ها بصورت درصد اشیا وبسایت خودشان را به سایز های مختلف در می­آورند. در وردپرس کار خاصی لازم نیست انجام دهید اکثر طراحین قالب وردپرسی با درصد اندازه اشیا را تعیین کرده­اند. در سایت های کد نویسی شده نیز فقط کافی است واحد هایی مثل PX را در قسمت هایی که نیاز است به واحد درصد تغییر دهید.

 

  1. تماس با ما، نمایان باشد

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

تماس با ما در موبایل

  1. بخش جستجو در وبسایت طراحی شود

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

نوار جستجو در موبایل

 

11. از فناوری AMP استفاده کنید

یکی دیگر از راه های تاثیر گذار طراحی سایت موبایل فرندلی، استفاده از فناوری AMP (Accelerated Mobile Pages) که توسط گوگل ساخته شده است، با کمک این ابزار می­توانید سرعت بارگذاری برخی از صفحات وب را برای موبایل تا چندین برابر افزایش دهید! در وردپرس به راحتی می­توانید که افزونه AMP را نصب کنید و از امکانات آن در دستگاه های موبایل استفاده کرد در وبسایت های کدنویسی شده نیز کافی است طبق دستور العمل هایی که شرکت گوگل داده است پیش بروید تا نسخه AMP وبسایت شما نیز آماده دسترسی شود.

amp

نقش موبایل فرندلی بودن وبسایت در سئو

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

 

می­خواهم یک وبسایت موبایل فرندلی بسازم

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

 

سخن پایانی

5 میلیارد و 270 میلیون نفر در دنیا موبایل دارند! این آمار قابل توجه­ای است! توصیه اول ما این است که حتما به فکر ساخت کسب و کار آنلاین خود باشید (مخصوصا در این ایام کرونا) و دوم اینکه سعی کنید که این وبسایت موبایل فرندلی باشد! شرکت گوگل سان، نه تنها مانند بسیاری از کسب و کار های ملی دیگر در این ایام کرونا به کمک کارآفرینان آمده است! بلکه می­توانید توقع وبسایتی را از این شرکت داشته باشید که در آنها تمامی اصول مهم طراحی سایت به علاوه موبایل فرندلی بودن رعایت شده است (خود وبسایت این مجموعه کاملا موبایل فرندلی است و از تست های مختلف سربلند بیرون آمده است). داریم در مورد نوعی از کسب و کار صحبت می­کنیم که ایلان ماسک، جف بزوس و بیل گیتس را به ثروتمند ترین های دنیا تبدیل کرده­اند. داشتن یک کسب و کار آنلاین می­تواند بی نهایت حائز اهمیت و هیجان انگیز باشد و اولین قدم برای آن طراحی سایت است.

 

 

Tags: , , ,

مطالب مرتبط

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

فهرست