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

دسته بندی: 

چگونگی ساخت layouts، منوها، فرم‌ها، فونت‌ها و gestures به روشی مناسب برای دستیابی به تجربه‌ای عالی برروی نمایش‌گرهای کوچک

چرا موبایل تا این اندازه مهم است؟ بدون در نظر گرفتن اهمیت موبایل، شما به شکلی بالقوه برند و تجربه‌ی مشتری‌مدار خود را خراب می‌کنید. از زمانی که دیوایس‌های هوشمند موبایل به یک الزام همیشگی در زندگی روزمره‌ی ما بدل شدند اینترنت نیز مجبور شد برای در بر گرفتن آن‌ها متحول شود. داشتن یک وب‌سایت سازگار با  موبایل، یک ویژگی برای آینده نیست بلکه همین حالا به استانداردی بدل شده است و تمام فعالیت‌های تجاری باید یکی از این سایت‌ها داشته باشند. حالا بیش از همیشه فعالیت‌های تجاری بر ایجاد تجربیات انعطاف‌پذیر و تاثیرگذار با وب‌‌سایت‌ها و کاربردهای تجاری متمرکز می‌شوند. گوگل از اوایل سال 2015 به این طرف شدیدا بر وب‌سایت‌های سازگار با موبایل متمرکز بوده است و پیشرفت‌های دائمی و منظم را برای الگوریتم SERP خود طراحی کرده است تا این روش را بیش از پیش تقویت نماید. امروزه استفاده از بزرگ‌ترین روش بازاریابی دیجیتالی به شکل بهینه‌شده‌ترین روش ممکن برای هر کسب و کار تجاری به کاری حیاتی بدل شده است. داده‌های منتشر شده‌ی خود گوگل نشان می‌دهد که در عرض یک سال گذشته، جست‌و‌جو برروی گوشی‌های هوشمند بیش‌تر از جست‌و‌جو از طریق کامپیوترهای دسک‌تاپ و تبلت‌ها بوده است. برای این که شکلی اقتصادی به آن بدهیم، حتی اگر از قبل یک وب‌سایت موبایل داشته‌ باشید برای این که بتوانید در فضای رقابت باقی بمانید باید برروی آن سرمایه‌گذاری نموده و آن را توسعه دهید. برای طراحان و توسعه‌دهنده‌ها، استانداردها و انتظارات کاربر بروی کارآیی وب‌سایت موبایل به شکل سرسام‌آوری افزایش پیدا کرده است. اگر یک مشتری/ کاربر بالقوه امروزه تجربه‌ی ضعیفی برروی یک سایت داشته باشد به شکلی اجتناب‌ناپذیر به جای دیگری مراجعه خواهد کرد. موبایل به کاربران اجازه داده است دمدمی مزاج شوند و به همین علت است که هر چیزی،‌ از مدت زمان بارگذاری تا ظاهر زیبایی‌شناسانه‌ و حس سایت‌ها باید در حد اعلا و درجه‌ی یک باشد.

 

گردش اطلاعات را تسهیل کنید

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

 

Layout و Viewports

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

کد(1):

غیرفعال کردن “کنترل انسانی“ با meta viewports یک راه‌حل قدرتمند برای این مشکل است و به ما اطمینان می‌دهد layout مورد نظر به دٌرٌستی نمایش داده می‌شود. هرچند این، چالش‌های بیش‌تری برای مسائلی که باید در طراحی در نظر گرفته شود ایجاد می‌کند. حداقل سایز دکمه (45px برای انگشت انسان برروی یک دیوایس Retina)، استفاده‌ی دٌرٌست از gutter/margin و طول تایپوگرافی باید برروی جهات مختلف یک دیوایس، سایز و مشخصات آن دقیق و سیال باشند. این باعث افزایش مدت زمان ساخت و ایجاد وب‌سایت‌ها می‌شود.

 

اهمیت پیمایش موبایل

پیمایش موبایل باید خلاقانه، به راحتی قابل دسترس باشد و با برخورداری از بیش‌ترین فضای ممکن برروی اسکرین؛ نباید فضای زیادی اِشغال نماید. ساده نگه داشتن آن و تبعیت از استانداردهایی که از طریق وب‌‌سایت‌های محبوب و رایج ست می‌‌شود بهترین روش است. فکر کردن درباره‌ی این که کدام استیل منو برای مخاطب مورد نظر مناسب است همیشه اهمیت دارد. تجربه‌ی عادی و معمول مورد نظر آن‌ها (کاربران) از سایر وب‌سایت‌هایی که هر روز استفاده می‌کنند چیست؟ در حالی که ممکن است پیمایش 8 آیتم برای یک سایت دسک‌تاپ ایده‌آل به نظر برسد به احتمال زیاد برروی یک موبایل بیش از حد زیاد است و مسائل و مشکلاتی برای دیوایس‌های کوچک‌تر موبایل به وجود می‌آورد. برای کمک به ایجاد منوی موبایل ایده‌آل، موارد زیرا را دنبال کنید:

  1. ابتدا محتوای کلیدی را لیست کنید.
  2. آن را ساده نگه دارید. رسیدن به “ Mega menus“ دٌرٌست برروی فضای محدود بسیار دشوار است.
  3. کاری کنید تا پیمایش خلاقانه شود. منوهای پائین افتادنی به یک نشانه‌ی بدیهی نیاز دارند که نشان دهد محتوای بیش‌تری در آن‌ها وجود دارد.
  4. با فونت‌ها و کنتراست دٌرٌست کار کنید.
  5. یک منو را به طور خاص برای لمس طراحی کرده و بسازید.
  6. هر جا که امکان دارد در فضا صرفه‌جویی کنید. فقط به علت این که برروی پیمایش دسک‌تاپ است بدین معنا نیست که باید برروی موبایل باشد.

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

 

ساخت: مسائل کلیدی، توصیه‌ها و قطعات کٌد

  • Mobile First CSS(Flexbox & Multicolumns).‎ Flexbox یک مجموعه ابزار جدیدتر محسوب می‌شود که در کنار CSS3 در دسترس قرار دارد و توسعه‌دهنده‌ها را قادر می‌سازد کنترل ترتیب‌بندی عناصر متشکله‌ی بلاک روی یک صفحه را با مناسب‌سازی بهتری در مقایسه با روش‌های CSS در اختیار داشته باشند. یک Flexbox layout، رابطه‌ای بین یک عنصر main wrapping و آیتم‌هایی که container wraps در بر می‌گیرد تعریف می‌نماید. اگر بخواهیم ساده‌تر صحبت کنیم، Flexbox آیتم‌ها را در یک خط که به هر مسیر منطقی؛ بدون اجبار برای در نظر گرفتن دوباره‌ی HTML، اشاره می‌نماید مرتب می‌سازد.

کد(2):

  • رندر متن (شکست خطوط و word wraps). مشکلی که همیشه در طراحی پاسخ‌گوی وب وجود داشته است،‌ موقعیت‌دهی متن و wrapping است. محتوا باید دینامیک باشد و layoutهای طراحی شده باید با viewportهای باریک تطبیق پیدا کنند. مرورگرهای وب معمولا فاقد hyphenation اتوماتیک و فرمت‌گذاری متن که در طراحی نرم‌افزار وجود دارد هستند. وقتی بلوک‌های متن باریک‌تر می‌شوند، ریسک این که کلمات واحد طولانی‌تر از عرض ستون باشند افرایش پیدا می‌کند، خصوصا در محتوای چندزبانی. وقتی چنین چیزی رخ می‌دهد، متن معمولا در بیرون از عرض بلاک توسعه پیدا می‌کند. این افکت می‌تواند هر چیزی؛ از فضای سفید ناخواسته تا متن کاملا غیر قابل خواندن باشد. CSS چند قاعده دارد که می‌تواند این مشکل را برطرف نماید: word-wrap و hyphens. با تلفیق این دو مشخصه، امکان پرهیز و دوری از بیرون زدن متن از container برروی تقریبا هر دیوایسی وجود دارد.

کد(3):

  • 16:9 Video Embed‌.‎ با تلفیقی از CSS، ریاضیات و قواعد overflow، شما می‌توانید هر ویدئوی توکار (embedded) یا هر محتوای iFramed را به طور کامل پاسخ‌گو نمود. روشی که در این‌جا به کار گرفته می‌شود ایجاد یک wrapping divider و اضافه کردن قواعد padding خاص به محتوای iFramed درونی است تا در هر عرضِ سایز شده کار کٌنَد:

کد(4):

  • Media Queries.‎ با توجه به این که در حال حاضر CSS3 به شکل گسترده‌ای توسط دامنه‌ی وسیعی از مرورگرها پشتیبانی می‌شود؛ ویژگی‌های جدید رسانه‌ای مثل max0width, device-width، جهت و رنگ برای استفاده در دسترس قرار دارند. توسعه‌ی style sheetهای متعدد برای اهداف گوناگون، همچنین تغییر در layoutها برای تطبیق با دامنه‌ی متنوعی از عرض‌ها که برای استیل‌های landscape ایده‌آل جلوه می‌کند حالا امکان‌پذیر است. Multiple media queries همیشه می‌تواند درون CSS stylesheet مشابه مورد استفاده قرار گیرد:

کد(5):

  • Meta Tags.‎ برای این که Layoutهای پاسخ‌گو به دٌرٌستی کار کنند Meta viewport tag ضروری است. این باعث می‌شود view برروی تمامی اسکرین‌ها با نرخ 1x1 ست شود، و عملکردهای pinch and zoom برروی دیوایس‌ها را باطل کنند. اگرچه این را می‌توان به عنوان نکته‌ای منفی برای مجبور کردن یک رفتار در نظر گرفت اما به جلوگیری از ایجاد یک تجربه‌ی زومینگ منفی در هنگام تعامل با فرم‌های وب و دارایی‌های دینامیک وب‌سایت کمک می‌کند:

کد(6):

  • قواعد مربوط به عرض و ارتفاع.  تصورات ما همان چیزی است که زیبایی‌شناسی یک وب‌سایت را تعرف می‌کند. ابعاد تصورات می‌تواند انعطاف‌پذیر باشد و پیاده‌سازی مقیاس کردن CSS به شکلی خارق‌العاده می‌تواند در این زمینه سودمند باشد. شما می‌توانید حداکثر سایز هر رسانه‌ای را برروی 100 درصد قرار دهید و مرورگر بسته به container خود، تصویر را کوچک می‌کند یا توسعه می‌دهد. عرض‌های container همیشه در معرض سایز دیوایس و اسکرین آن قرار دارند در حالی که ارتفاع دارایی‌های دیجیتال می‌تواند به شکل اتوماتیک براساس هر چیزی که خود تصویر نیاز دارد تعریف شود. استفاده از بالاترین کیفیت تصویر برای viewport تعریف شده و سپس فراهم نمودن امکان تطبیق CSS با تصویر در سایز مناسب بهترین روش است:

کد(7):

  • تصاویر پاسخ‌گو برای پس‌زمینه. یک هک عالی برای تغییر سایز سیال پس‌زمینه و نگه داشتن aspect ratio مشابه، بدون این که در زیر آن فضایی خالی باقی بگذاریم وجود دارد. ایده‌ی نهفته در پشت آن، ست کردن سایز برروی Opx و فراهم نمودن قابلیت کار Padding با ارتفاع و aspect ratio به جای آن است:

کد(8):

بهینه‌سازی فرم‌های وب

  • فیلدهای ورودی و دکمه‌ها. ورود متن برروی دیوایس‌های لمسی می‌تواند تجربه‌ای دردناک و خسته‌کننده باشد. فیلدهای متنی همیشه باید برای کلیک به اندازه‌ی کافی بزرگ باشند در حالی که دکمه‌ها باید سایزی داشته باشند که با انگشت مخاطب شما سازگار باشند. به عنوان مثال، اگر مخاطب شناخته‌شده فقط مرد است تمام دکمه‌ها را بزرگ‌تر کنید.
  • اَشکال تست برروی یک دیوایس لمسی واقعی. اگر فرم وب نتواند نشان‌گر یک تجربه‌ی موبایل محلی باشد کار نخواهد کرد. از مردم واقعی بخواهید فرم را پٌر کنند و پاسخ‌های آنان را گردآوری کنید. هر فرم رها شده‌ای یک موقعیت از دست رفته به شمار می‌رود و ساده‌سازی فرم‌ها به گونه‌ای که به شکلی واقعی با tab indexing و labling دٌرٌست کار کنند، نرخ مکالمه را افزایش می‌دهد.
  • فرم را MVP کنید. تطبیق کل صفحه‌ی وب به شکلی که کپچر داده‌ها را به مهم‌ترین عنصر بدل سازد یک تصمیم طراحی به شدت قابل قبول به شمار می‌رود. پنهان کردن پیمایش global site، نوارهای کناری و کاهش شلوغی، حقیقتا به تمرکز بر هدف خودِ فرم کمک می‌کند. این دقیقا همان کاری است که John Lewis, eBay و Amazon سال‌ها است انجام می‌دهند.
  • فرم‌های طولانی را چند مرحله‌ای کنید. فرم‌های طولانی می‌توانند قبل از این که مشتریان بالقوه شروع کنند آن‌ها را فراری دهند. فراهم نمودن یک step counter یا نوار پیشرفت درون یک طراحی چند مرحله‌ای، استفاده از آن را ساده و سریع می‌کند. همیشه سعی کنید گام‌ها را تا حد ممکن تقلیل دهید و حذف فیلدهای غیرضروری کاملا قابل قبول است.
  • به رفتارهای محلی دیوایس اطمینان کنید. فیلدها می‌توانند سفارشی شوند تا برای سازگاری با طراحی وب‌سایت از ظاهری خوب برخوردار باشند و عملکرد مناسبی هم داشته باشند. همچنین امکان نادیده گرفتن رفتار پیش‌فرض دیوایس هم وجود دارد و اگرچه این کار ممکن است تجربه‌های دسک‌تاپ را پیشرفته‌تر و غنی‌تر سازد، دیوایس‌های موبایل از گستره‌ای از تعامل‌های محلی نظیر date-picker و یک چرخ drop-down برخوردار هستند. این‌ها به ورای قابلیت‌های تیپیکال وب‌سایت می‌رود و یک تجربه‌ی آشناتر و مجتمع‌تر فراهم می‌کند.
  • Gestureهای لمسی برروی یک سایت موبایل. Gestureهای لمسی اغلب برای ایجاد تجربیات هوشمندتر و طبیعی‌تر مورد استفاده قرار می‌گیرند. اپلیکیشن‌های محلی، از کنترل‌های مجتمع و gestureهای کاربری به شدت بهره‌مند می‌شوند. با یک JavaScript framework مثل Hammer.js، gestureهای لمسی باید مستقیما درون تجربه‌های وب‌سایت جای گیرند و امکان یک روش متفاوت درگیر شدن با محتوا را فراهم نماید.  تجربیات غنی کاربری مثل پیکره‌بندی محصول می‌تواند برروی دیوایس‌های لمسی و با استفاده از gestureهای متعددی که وجود دارد امکان‌پذیرتر شود.
  • ساعت‌های هوشمند چه می‌شوند؟ وقتی برای ساعت‌های هوشمند طراحی می‌کنید، بر موارد کاربردی جهان واقعی برای محیط ساعت متمرکز شوید. اپلیکیشن‌های موفقیت‌آمیز ساعت هوشمند به کاربران اجازه می‌دهد اطلاعاتی مثل زمان رسیدن اتوبوس بعدی، پاسخ‌‌های فعال به پیام‌ها و مسیرهای موجود به سمت نزدیک‌ترین رستوران را در یک نظر به دست آورند. اینترفیس ساعت، موقعیت‌های منحصر به فرد کاربردی فراهم می‌کنند که برروی دیوایس‌های سنتی موبایل در دسترس نیستند اما محدودیت‌های خاص خودشان را دارند که باید به عنوان بخشی از طراحی در نظر گرفته شود. اگرچه تشخیص فیزیکی، بیش‌تر در درون دیوایس جای داده شده است، سایز اسکرین کوچک‌تر بدین معنا است که ساده‌گی در طراحی بیش از همیشه اهمیت پیدا کرده است. تمرکز باید همیشه بر عملکرد اصلی کاربرد دیجیتال باشد. 

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

صِرف داشتن یک وب‌سایت پاسخ‌گو دیگر کافی نیست. مواردی که در زیر اشاره می‌کنیم حیاتی بوده و باید تحت هر شرایطی دنبال شوند.

  • پارامترهای viewport را پیاده‌سازی کنید. viewport یک meta tag است که چگونگی تفسیر دقیق یک صفحه‌ی وب را به مرورگر می‌گوید تا براساس هدف طراحی، مقیاس شود. اگر یک وب‌سایت فاقد یک viewport tag باشد، طراحی دسک‌تاپ برروی یک دیوایس موبایل بارگذاری می‌شود و بدین ترتیب کاربر فضاهای خالی مرده را مشاهده خواهد کرد.
  • Spacing.‎ باید از فشرده‌سازی و پٌر کردن همه چیز 100 درصد پرهیز کنید. این کار نه فقط خواندن همه چیز را دشوار می‌کند بلکه کاربران قادر نخواهند بود به سادگی از لینک‌ها یا دکمه‌ها استفاده کنند. آن‌ها احتمالا دل‌زده می‌شوند و سایت را ترک می‌کنند و گوگل با عدم نمایش این سایت‌ها در نتایج جست‌و‌جو، آن‌ها را جریمه می‌کند. تلاش کنید عرض CTAهای خود را حداقل برروی 45 پیکسل تنظیم کنید.
  • دارایی‌ها را بهینه‌سازی کنید. همیشه از بارگذاری دارایی‌های بزرگ و حجیم قبل از چیزهای دیگر پرهیز کنید خصوصا برروی صفحه‌ی خانگی. اگر این برای طراحی سایت به شدت حیاتی می‌نماید، بهینه‌سازی تصاویر را برروی تمام دارایی‌های خود اِعمال کنید و سایت را با چیزی مثل Cloudflare، متوازن نمائید. این کار، امکان استفاده از دارایی‌های غنی را بدون تخریب زمان‌های بارگذاری امکان‌پذیر می‌سازد.
  • برچسب‌های تصویر. بهترین راه برای پرهیز از رندر ناموفق تصاویر بزرگ این است که سایزهای مختلف در دسترس را به مرورگر بگوئید (کد)
  • از تست Mobile-Friendly گوگل استفاده کنید. وب‌سایت‌هایی با خطاهای زیاد موبایل، قابلیت دیده شدن کم‌تری در ایندکس جست‌و‌جوی گوگل دارند. تمامی توسعه‌دهنده‌ها و طراحان باید از یک ابزار رایگان (bit.ly/2qO8iMY)، در زمان ساخت و بعد از راه‌اندازی سایت استفاده نمایند. اگر گوگل به این نتیجه برسد که وب‌سایت شما عملیاتی نیست، تمامی کارهای دشواری که برای ساخت یک وب‌‌سایت موبایل انجام شده است سریعا از بین خواهد رفت.

 

 

افزودن دیدگاه جدید