سلام به شما همراهان همیشگی یارین وب، امروز می خواهیم درباره نکات مهم طراحی سایت برای موبایل باشما صحبت کنیم.
چرا به طراحی سایت برای موبایل نیاز داریم؟
نکات مهم طراحی سایت برای موبایل تا چه اندازه به شما کمک می کند؟
در حال حاضر طراحی وبسایت برای موبایل بسیار مهم است،زیرا در حال حاضر اکثر کاربران از تلفن های هوشمند برای جست و جو در اینترنت استفاده می کنند.
در نتیجه رعایت نکات مهم طراحی سایت برای موبایل باعث پیشرفت شما می شود. هنگامی که سایت برای کاربران موبایلی بهینه نشده باشد، آن ها نمای خوبی از سایت مشاهده نمی کنند. پس سایت شما را بسته و سراغ سایت دیگری می روند.
رتبه بندی در گوگل بر اساس نسخه موبایلی سایت ها انجام می شود
این نکته مهم است که وبسایت شما در موبایل چه محتوایی را نمایش می دهد؟چه لینک هایی دارد؟
منو،فوتر و ساید بار در تلفن همراه چه وضعیتی دارد؟
از همه مهم تر سرعت سایت در موبایل چگونه است. نسخه دسکتاپ سایت در وضعیت دوم قرار می گیرددر سال های اخیر و با رونمایی از الگوریتم mobile-first indexing گوگل،خیلی از سایت ها به دلیل سازگار نبودن افت رتبه داشتند.
چطور متوجه شویم که سایت ما برای موبایل بهینه شده (نکات مهم طراحی سایت برای موبایل):
اولین قدم برای فهمیدن این موضوع استفاده از تست موبایل فرندلی توسط گوگل است. برای این کار ابتدا سایت را در گوگل باز کرده،سپس روی سه نقطه ی سمت راست بالای صفحه کلیک کنید.
وارد more tools و سپس developer tools شوید.بعد از آن با گرفتن دکمه های ctrl+shift+M و یا زدن آیکونی که شبیه به موبایل است،سایت شما در حالت شبیه ساز موبایل قرار می گیرد.
پس از این مرحله نوبت تست سایت توسط گوگل است.گوگل برای این کار ابزاری با نام google mobile-friendly test را در اختیار کاربران قرار داده است.پس از سرچ google mobile-friendly test صفحه ای برای شما باز می شود که با قرار دادن آدرس سایت خود، می توانید از موبایل فرندلی بودن سایت خود مطلع شوید.
چگونه یک سایت برای کاربران موبایل طراحی کنیم؟
قبل از انجام هر کاری ابتدا یک سایت اولیه طراحی کنید تا از احتمال هر گونه باگ دور شوید. زمانی که طرح اولیه را طراحی می کنید می توانید باگ ها را پیش بینی کنید و برای آن راه حل در نظر بگیرید.
طراحی سایت برای موبایل دقیقا مانند طراحی وبسایت برای کامپیوتر است. هر دوی آن ها از CSS,HTML و Javascript پشتیبانی می کنند.همچنین اکثر مرورگر های موبایل از CSS3 و HTML5 پشتیبانی می نمایند، ؛فقط باید مواردی را برای سایت موبایل به تگ ها اضافه کنید.
تگ های مختلفی می بایست به <head> صفحه اضافه گردد تا مرورگر موبایل اطلاع یابد که این سایت برای موبایل طراحی شده:
<meta name=”HandheldFriendly” content=”True”>
<meta name=”MobileOptimized” content=”320″>
<meta name=”viewport” content=”width=device-width”>
برای سازگاری نسخه وب با موبایل نیاز به ساختن یک سایت جدید نیست، بلکه باید از سایت های تطابق پذیر یا ریسپانسیو استفاده کرد.
سایت ریسپانسیو چیست؟(نکات مهم طراحی سایت برای موبایل)
به ریسپانسیو بودن یک سایت اصطلاحا واکنش گرا یا تطابق پذیر هم گفته می شود. یک سایت ریسپانسیو به گونه‌ای طراحی می شود که برای هر دستگاه متفاوت، نمایش مخصوصی دارد.بخش های مختلف سایت به طور مرتب، بدون نیاز به زوم برای نمایش در صفحات مختلف برنامه ریزی شده اند.همه چیز کاملا در جای خود قرار گرفته است.
هدف طراحی سایت واکنش گرا این است که، برای کاربران تجربه ای خوشایند در مشاهده سایت ، با قابلیت خواندن آسان محتوا، حداقل زوم و کاوش هر چه ساده تر در سایت با انواع نمایشگر ها را فراهم کند.
مزایای چنین روشی این است که سایت شما فقط یک URL دارد.پس از نظر سئو وظیفه کمتری خواهید داشت.همچنین سایت شما در انواع دستگاه ها نمایش مناسبی خواهد داشت.
در طراحی سایت واکنش‌گرا سرور همیشه کد HTML یکسان به دستگاه‌های مختلف ارسال میکند و در عوض برای رندرگیری صفحه، روی دستگاه کاربر از CSS استفاده میکند.
27 نکته کلیدی برای بهبود طراحی سایت موبایلی:
وقتی صحبت از طراحی سایت موبایلی می شود،تمام جزئیات ریز هم اهمیت پیدا میکند.دستگاه مورد استفاده کاربر ویژگی های زیادی دارد که باید به آن توجه کرد از جمله اندازه صفحه نمایش،نوع تعامل(صفحه لمسی،موس)،وضوح گرافیکی و…
1.کاربر موبایل باید بتواند به راحتی در دیگر دستگاه ها به ادامه کارش بپردازد. یکی از خدماتی که یارین وب به شما می دهد نشان دادن صحیح وبسایت در دستگاه های مختلف هست.
2.همه صفحات وبسایت هم با دسکتاپ و هم با موبایل به صورت اصولی دیده شود.به کاربران بگویید سایت در حالت افقی بهتر کار می کند یا در حالت عمودی.
3.عکس ها و همه ی المان های سایت باید خوانا باشد.از عکس های کلیدی باکیفیت و از نمای نزدیک استفاده کنید.این یکی از نکات مهم طراحی سایت برای گوشی است.
4.از برچسب موبایل(دسکتاپ) استفاده کنید.
5.سادگی مساوی با کارایی است.اجازه بدهید کاربرها بدون سختی در سایت بچرخند و لذت ببرند.سایت رو با جدول و غالب و…پر نکنید.
6.قسمت جست و جو در همه ی صفحات به خوبی دیده شود.بهتر است قسمت جست وجو نزدیک به قسمت بالای صفحه قرار بگیرد.از فیلتر ها جهت جست و جو استفاده شود تا کاربر بتواند با دقت بیشتری به جست و جو بپردازد و سریع تر به نتیجه برسد.
7.قبل از گرفتن اطلاعات شخصی از کاربر اجازه دهید از سایت شما بازدید کند.حتی اجازه خرید به کاربر مهمان بدهید اما او را تشویق به ثبت نام در سایت کنید.ثبت نام در سایت را برای کاربران راحت کنید.فیلد هارا برای کاربرانی که قبلا در سایت شما ثبت نام کرده اند به صورت خودکار پر کنید.
8.نیاز کاربر به نوشتن رو کم کنید.آسوده ترین راه را برای وارد کردن اطلاعات کاربران موبایل در نظر بگیرید؛ مانند امکان تیک زدن یا منوی ابشاری.به صورت شفاف توضیح دهید.از اعتبار سنجی لحظه ای استفاده کنید.
به کاربر بگویید کدام قسمت اطلاعات اشتباه وارد شده است.همچنین هر قسمت دارای تگ ویژگی مناسب باشد مثلا در قسمت شماره تماس کاربر نباید بتواند چیزی جز مقادیر عددی ثبت کند.
9.طراحی فرم دارای اهمیت بسیاری است؛کوتاه بودن وراحت خوانده شدن،لازمه ی طراحی فرم برای طراحی سایت موبایل است.
10.در مواقعی که قرار است کاربر موبایل،اعدادی را وارد کند،صفحه کلید را به او نشان دهید.
11.از تقویم دیداری برای راحتی کاربر جهت انتخاب تاریخ و برنامه ریزی استفاده کنید.
12.لینک انتخاب شده را مشخص کنید.مثلا می توانید از فونت و رنگ های متفاوتی برای پس زمینه لینک ها و دکمه استفاده کنید.
13.وجود دکمه های کوچک در سایت های موبایل مشکل ساز است.از سایز مناسب استفاده کنید تا کاربر بتواند بدون زوم کردن روی دکمه ضربه بزند.
14.صفحه اصلی معمولا مکان خوبی برای قرار دادن تبلیغات است، اما در بسیاری از موارد تبلیغات موجود در صفحه باعث خروج کاربر از سایت و آزار دهنده می شود.صفحه ی اول باید محتوای مورد نیاز کاربران را دراختیار آنان قرار دهد تا کاربری را که وارد سایت می شود به مشتری تبدیل کند.
15.سعی کنید نام منو ها کوتاه و مختصر باشد.منو های وبسایت در حالت عادی می تواند دارای تعداد زیادی بخش باشد که اندازه‌ی بسیار زیادی را اشغال کند. یکی دیگر از نکات مهم طراحی سایت برای موبایل استفاده از نام کوتاه است.
در وبسایت های موبایل منو باید طوری طراحی شود که کاربران بتوانند به راحتی آن را با دستان خود کنترل کنند.بهتر است که کاربران با یک لمس به منوی کشویی سایت دسترسی داشته باشند.
16.یکی از مهم ترین عوامل در موفقیت سایت سرعت بارگزاری صفحات آن است.مرور گر های موبایل برای رویت مطالب با حجم پایین طراحی شده اند بنابر این باید به حجم صفحات و میزان دیتا ها دقت کنید و سایت را با پایین ترین حجم ممکن طراحی کنید تا سایت دچار مشکل سرعت نشود.
17.محتواهای تصویری را سبک کنید.پایین بودن حجم تصاویر برای بالا بردن سرعت سایت بسیار مهم است.همیشه حجم محتواها خصوصا تصاویر را بررسی کنید تا دچار مشکل نشوید.
اگر روی سایت شما ویدیو های زیادی هست بهتره از یوتیوب یا آپارات استفاده کنید چون این سایت ها خودشون ریسپانسیو هستند و لازم نیست شما کار اضافه ای انجام بدید.یکی از استراتژی های کلیدی برای ایجاد تصاویر یا ویدیو های واکنش گرا استفاده از جعبه نسبت ابعاد است.
18.با افزایش رشد کاربران در فضای مجازی کاربران انتظار دارند که با بررسی نظرات دیگران تجربه خوبی از خرید داشته باشند.
19.داشتن صفحه سوالات متداول به کاربر این امکان را می دهد که بدون نیاز به تماس با شما به پاسخ سوالات خود برسند.همچین این امکان را فراهم کنید که کاربر بتواند با کلیک بر روی یک دکمه با اپراتور تماس بگیرد.
20.در طراحی سایت برای موبایل از رنگ های خوانا و با کنتراست بالا استفاده کنید.استفاده از رنگ های مناسب به کاربر این اجازه را میدهد که به خوبی از مطالب سایت استفاده کند.از تصاویر پس زمینه استفاده نکنید زیرا ممکن است خوانایی مطالب را از بین ببرد.حتی الامکان از گرافیک های کمتری استفاده کنید.
21.کاربران را دریک صفحه browser نگه دارید.از هدایت کاربر یه صفحه و یا یک تب دیگر خودداری کنید.
22.راه برگشت به صفحه ی اصلی را با استفاده از لگو تسهیل کنید.زیرا ممکن است کاربر در بین صفحات گم شود و به طور کامل از سایت خارج شود.
23.اگر به تازگی یادگیری سایت ریسپانسیو را آغاز کردید، مدیا کوئری اولین و مهم ترین ویژگی css است که باید یاد بگیرید.مدیا کوئری برای شما این امکان را ایجاد میکند که عناصر را بر اساس عرض صفحه نمایش بچینید.
مدیا کوئری بخش بسیار مهمی از سایت واکنش گرا است که برای طرح بندی شبکه ای ، اندازه فونت و حاشیه ها در صفحه نمایش های متفاوت، استفاده می شود.
24.امروزه بسیاری از ویژگی های جدید css توسط مرورگر های مختلف پذیرفته و پشتیبانی میشود.Flexbox یکی از مهم ترین ویژگی های css از نظر طراحی سایت واکنش گرا است.
25.Lighthouse یک ابزار متن باز است که که راهی برای تجزیه و تحلیل عملکرد وبسایت در یک دستگاه خاص ارائه میدهد.از Lighthouse و Foo برای نظارت و تجزیه و تحلیل عملکرد سایت استفاده می کنند.
26.Viewport یه فضای مجازی است که مرورگر برای تعیین اندازه و سایز محتوا از آن استفاده می کند.پس وقتی می خواهید محصولی بسازید که روی دستگاه های مختلف به خوبی کار کند، این کد اهمیت زیادی پیدا می کند.
متا تگ ویو پورت به مرورگر اطلاع می دهد که صفحات شما باید با سایز نمایشگر بازدید کننده هماهنگ شود.برای این کارپیکر بندی های زیادی باید انجام شود.می توانید فقط یکبار بالای داکیومنت از کد زیر استفاده کنید.
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
27.یکی از مهم ترین نکاتی که باید در دنیای طراحی سایت ها و همچنین اپلیکیشن های موبایل به آن توجه کرد، قابلیت به روز رسانی آن است.
تقریبا همه ی نرم افزار ها و وبسایت ها نیاز به آپدیت های چند وقت یکبار دارند؛ مثل تغییرات فنی در زمینه برنامه نویسی جهت برطرف کردن برخی ایرادات نرم افزاری، ایجاد تنوع بیشتر و بهتر در فضا و تغییر و به روز رسانی ظاهر برنامه ها و …
نکته ی پایانی:
وقتی وب سایت واکنش گرا ساخته شد، به طور مداوم باید اون رو نه تنها روی موبایل بلکه روی دستگاه های مختلف تست کنید.همه صفحات و اقداماتی که کاربر می تواند انجام دهد را امتحان کنید.
از همه ی دکمه ها استفاده کنید و موقع استفاده خود را جای کاربر قرار بدید و یا از کسی که در طراحی سایت دخالتی نداشته بخواهید که این کار را برای شما انجام دهد. این نیز هم شامل نکات مهم طراحی سایت برای موبایل می شود.
طراحی ریسپانسیو مفهومی است که می توان با استفاده از آن تجربه کاربری را بهبود بخشید،به طور کامل مشکلات را برطرف نمی کند.ما باید با دستگاه ها ، پلتفرم ها و فضاهای جدید کار کنیم تا با تکامل فناوری در سال های آینده تجربه کاربری بهبود یابد.
شما می توانید به راحتی برای دریافت مشاوره رایگان با متخصص های یارین وب در تماس باشید. متخصص های این مجموعه نکات مهم طراحی سایت برای موبایل را با شما به اشتراک می گذارند.