جا نیست!

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

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

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

یک رویکرد برای قراردادن شیوه‌نامه‌های موبایل نیازمند شناسایی رشته عامل کاربر با استفاده از یک زبان سوی سرور (server-side) مانند PHP است. با استفاده از این تکنیک، سایت می‌تواند دستگاه‌های موبایلی را که از یک شیوه‌نامه مناسب استفاده کرده یا کاربر را به یک زیردامنه موبایل (m.jamejamonline.ir که البته هنوز موجود نیست) راهنمایی می‌کنند، شناسایی کند. این رویکرد سوی سرور چند مزیت دارد از جمله این‌که بالاترین سطح سازگاری را تضمین می‌کند و همچنین به وب‌سایت‌ها اجازه می‌دهد از محتویات و نشانه‌گذاری‌های خاصی برای کاربران موبایل استفاده کنند.

با این که چنین تکنیکی برای وب‌سایت‌های سطح سرمایه‌گذاری عالی به‌نظر می‌رسد، ولی نگرانی‌های عملی‌ای وجود دارند که پیاده‌سازی آن را روی بیشتر سایت‌ها مشکل می‌کند. روزانه رشته‌های عامل زیادی برای کاربران جدید تولید می‌شود، بنابراین نگهداشتن فهرست UA user agent (یا عامل کاربر) تقریبا غیرممکن است. بعلاوه این رویکرد به دستگاه بستگی دارد تا به عامل کاربر حقیقی خود کمک کند، هرچند در گذشته مرورگرها رشته UA خودشان را برای دورزدن این نوع شناسایی جعل می‌کردند! مثلا هنوز هم بیشتر رشته‌های UA با «موزیلا» شروع می‌شود تا از بررسی‌های نت‌اسکیپ عبور کند (روشی که در دهه 90 استفاده می‌شد)، یا برای سال‌های متمادی اوپرا وانمود می‌کرد که IE است!

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

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

البته از این فایده مهم که به کاربر اجازه داده می‌شود خودش انتخاب کند، نمی‌توان گذشت.

برخی از کاربران طرح‌بندی متراکمی که برای دستگاه آنها بهینه‌سازی شده‌ را ترجیح می‌دهند در حالی‌که کاربران دیگر ممکن است بخواهند وب‌سایت بدون محدودیت‌های طرح‌بندی موبایل دسترسی داشته باشد.

وقتی شیوه‌نامه‌های موبایل را پیاده‌سازی کردیم، زمان آن می‌رسد که ببینیم کدام‌یک از شیوه‌ها را می‌خواهیم تغییر دهیم؟

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

در گام بعدی با تنظیماتdisplay:none روی عناصر با اهمیت پایین‌تر، از شلوغی کلی صفحه کاسته می‌شود و در نهایت ذخیره پیکسل‌های افزوده به ‌وسیله کاهش‌ حاشیه‌ها و لایه‌ها برای ساخت یک طرح‌بندی بسته‌تر صورت می‌گیرد.

هدف دیگر شیوه‌نامه‌ها کاهش پهنای باند برای شبکه‌های موبایل کندتر است. نخست اطمینان حاصل کنید که تصاویر زمینه بزرگ را حذف یا جایگزین کرده‌اید، بویژه اگر از یک تصویر زمینه برای کل سایت استفاده می‌کنید. بعلاوه برای تصاویر غیرضروری تنظیمات display:none را انجام دهید.

اگر سایت شما برای دکمه‌ها یا نوارهای کناری از عکس استفاده می‌کند، توجه داشته باشید که آنها را با متن ساده CSS متناظرشان جایگزین کنید.

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

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

محمدحسین کردونی

منبع: smashingmagazine