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

Written by 92 on فوریه 1, 2018 and posted in مقالات سئو - بهینه سازی سایت - بک لینک.

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

الویت دادن به موبایل.

اگه سایت شما تجربه کاربری موبایل رو هدف گرفته پس باید سنتای قبلی رو درهم شکسته و از راه حل ” اولویت با موبایل” پیروی کنین. با آغوش باز این تکنیک رو قبول کنین، چون هنگامیکه بیشتر کاربران شما از راه گوشی موبایل به سایت دسترسی پیدا میکنن ،قبول کردن این تکنیک هیچ ضرری نداره. طبق اظهارات code my views طراحی وب موبایل فقط یک فرصت خوب نیس، در سرتاسر دنیا 1.2 بیلیون کاربر از وب موبایل استفاده میکنند و بنظر نمی رسه این تعداد به این زودی کم بشه بلکه به احتمال زیاد در آینده، زیاد می شه. قبول کردن این تکنیک شاید اول کمی رقابت برانگیز باشه اما اگه مایلید اولویت رو به کاربران خود بدین ارزش امتحان کردن داره.
طراحی سایت راحت، تمییز یا موبایل محور هیچ تناقضی با پختگی و باتجربگی نداره. سایت Karimrashid.com نمونه کاملی از ترکیب سادگی و پختگی و ایجاد یک طراحی واکنشگرا، تمییز و درعین حال باکلاسه.

ایجاد لی اوتای  (Layout) روان.

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

اینم بخونین:   تاثیر طرح های کپی بر کسب و کار شما و 7 راه برای سئو سایت بجای SSL

کارایی.

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

شناسایی کاربران.

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

اینم بخونین:   آموزش کامل جز به جز بهینه سازی سایت

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

حتما دستورالعمل واسط کاربری پلتفرمی که استفاده می کنین رو بدقت بخونین. بعضی از پلتفرما نرمی بیشتری نسبت به بقیه پلتفرما دارن. هر پلتفرمی که باشه باید بعضی از کامپوننتای کلیدی برند یا “signature” ها باقی بمونن.
یک پیشرفت دهنده اپل باید دستورالعمل واسط انسانی iOS رو مطالعه کرده و در اصول مقدماتی طراحی، روش های هدفمند طراحی، المانای واسط کاربری، طراحی آیکون/عکس از استانداردهای اپل پیروی کرده و از طرف دیگه باید به کمک راهنمای پیشرفت دهندگان آندروید همه چیز رو درباره ی کامپوننتا، استایل، توانایی استفاده و لی اوت اپلیکیشنای آندروید فراگیرد.

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

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

اینم بخونین:   چگونه با بهینه سازی رتبه نخست در گوگل شویم؟

طراحی واسه تاچ.

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

استفاده از وسیله متراکم (فشرده) سازی.

الان بی آخر وسیله در بازار وجود دارن که بار سنگین کار طراحی رو سبک تر کرده ان. کمپرسورهای اسکریپت مثل HTML compressor یا Gzip بطور اتوماتیک کامنتای غیرضروری، فضای سفید یا کدها رو حذف میکنند. بقیه وسیله ها مثل CSS minifier و CSS compressor و وسایل دیگه به شما امکان ترکیب شدن کدهای CSS و بهبود کارکرد رو واسه طراحان فراهم کرده ان. فشرده کردن تصاویر هم اهمیت کمی نداره، بعضی وسیله ها مثل EWWW image optimizer، smuch.it، opting و jpegtran درحالیکه به کیفیت فایل آسیبی وارد نمیکنند اندازه فایلای png و jpeg رو کوچیک میکنند.
در تصویر زیر نمونه ای بینظیر از یک طراحی portfolio واکنشگر به وسیله Ry Johnson رو نگاه می کنین. این سایت مملوه از تصاویر تماشایی که با ورژن دسکتاپ خود هیچ فرقی ندارن. بی شک راز بارگذاری سریع این سایت بهینه بودن تصاویر اینه.