وبلاگ

سایت ساز سی می پلاس

مقالات

چطور یک وب سایت Mobile-Friendly داشته باشیم؟

دوشنبه، ۱۵ بهمن ۱۳۹۷

 زمان مطالعه: حدود 5 دقیقه
ترفندهایی برای داشتن وب سایت mobile-friendly
 
داشتن وب سایت و یا یک فروشگاه اینترنتی پایان کار شما برای حضور در دنیای آنلاین و بهره بردن از مزایای آن نیست. درواقع در فضای مجازی عمر هر چیزی بسیار کوتاه است. مثلا طراحی وب سایت‌هایی که 5 سال گذشته با آن مواجه بودیم، حالا کاملا تغییر کرده بنابراین برای اینکه بتوانید در این دنیای پرسرعت و پرتغییر زنده بمانید باید تغییرات را بشناسید و به سرعت به آن‌ها پاسخ دهید.
یکی از این تغییرات عملکرد عالی وب سایت روی موبایل است که اصطلاحا به این موضوع Mobile-Freindly بودن وب سایت گفته می‌شود. با سایت ساز و فروشگاه ساز سی می پلاس همراه باشید تا نکات اساسی که وب سایت شما را Mobile-Friendly می‌کند، بررسی کنیم.

 

تکنیک‌هایی برای داشتن وب سایت Mobile-Friendly

 

1-سرعت را تا حد امکان بالا ببرید

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

2- منو ساده اما کاربردی داشته باشید

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

3- از طراحی ریسپانسیو استفاده کنید

طراحی ریسپانسیو (Responsive) باعث می‌شود که وب سایت شما روی هر صفحه نمایشی با هر اندازه‌ای به خوبی نمایش داده شود. بنابراین با وجود این تکنولوژی نیازی نیست که یک وب سایت مجزا برای موبایل طراحی کنید.
هنگامی که از طراحی ریسپانسیو استفاده می‌کنید، وب سایت اندازه و جهت صفحه نمایش کاربر را تشخیص می‌دهد و بنا به این دو فاکتور المان‌های صفحه را نمایش می‌دهد. به همین سادگی دیگر وب سایت شما در موبایل به هم ریخته نخواهد بود.
 

4- به اندازه فوت و دکمه‌ها توجه کنید

اندازه فونت و سایز دکمه‌ها دو فاکتور بسیار مهم برای کاربران موبایلی هستند. حتما فونت را حداقل روی سایز 14px تنظیم کنید تا کاربران برای خواندن مطلب نیازی به زوم و اسکرول کردن افقی نداشته باشند. تنها جایی که می‌توانید از فونت کوچک‎‌تری استفاده کنید، فرم‌ها و لیبل‌های هستند.
در مورد دکمه‌ها هم باید بگوییم هرچه دکمه بزرگ‌تر باشد بهتر است. بزرگ بودن دکمه کمک می‌کند که هم از دید کاربر مخفی نماند و هم اینکه کاربر اشتباهی روی لینک دیگری کلیک نکند. برای نمونه اپل توصیه می‌کند که سایز دکمه‌ها در نسخه موبایلی حداقل 44px در 44px باشد. این کار علاوه بر Mobile-friendly کردن وب سایت، آن را کاربرپسندتر هم می‌کند. 
 نمونه‌ای از سایز مناسب دکمه برای داشتن وب سایت Mobile-friendly
نمونه‌ای از سایز مناسب دکمه برای داشتن وب سایت Mobile-friendly
 
 

5- زوم خودکار را حذف کنید

یکی از سهل‌انگاری‌هایی که باعث می‌شود تمام المان‌های وب سایت شما به کلی به هم بریزد، زوم خودکار است. خلاص شدن از این مشکل بسیار ساده است تنها کافی است از متا تگی به نام viewport در تک head وب سایت استفاده کنید. این تگ به صورت زیر است:

زوم خودکار را با تگ viewport حذف کنید

زوم خودکار را با تگ viewport حذف کنید

0 دیدگاه

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد.
کد امنیتی

مشاهده دیدگاه های بیشتر