طراحی وب سایت

در چند سال اخیر کاربردهای تحت وب از موبایل به حدی افزایش یافته که دیگر طراحان و توسعه دهندگان نمی توانند آن را انکار کنند. در کشورهای ثروتمند تغییر سرویس های داده توسط اتصالات پهن باند موبایل سریع تر و ارزان تر انجام می شود، اما بیشترین رشد در کشورهای رو به توسعه دیده شده، جایی که جوانان خرید کامپیوترهای شخصی را کنار گذاشته و مستقیم به سراغ موبایل می روند.
متاسفانه عرصه موبایل پیچیدگی خاص خود را دارد و رویارویی با آن می تواند برای توسعه دهندگان مشکل باشد. توسعه موبایل چیزی فراتر از سازگاری با مرورگرهای مختلف است و باید با بسترهای مختلف سازگار شود. تعداد وسیعی از دستگاه های موبایل توسعه دهندگان را یاد روزهایی می اندازد که مجبور بودند فقط از مرورگرهای خاصی پشتیبانی کنند. افزون بر آن، برای پشتیبانی از بسترهای مختلف، هر دستگاه ممکن است از تعداد زیادی مرورگر وب موبایل استفاده کند. برای مثال یک کاربر آندروید می تواند با استفاده از مرورگر خاص آندروید یا با نصب اپرامینی یا فایرفاکس موبایل به سایت ها دسترسی یابد.
وب موبایل موضوعات مختلفی را دوباره مطرح کرد که در سال های اخیر فراموش شده بودند. با آمدن شبکه های نسل چهارم، پهنای باند یک موضوع جدی برای مشتریان موبایل شد، بعلاوه دستگاه های موبایل صفحه بسیار کوچکی دارند که ترکیب این موضوعات به همراه مشکلات سازگاری با بسترهای مختلف باعث می شود به راحتی درک کنیم که چرا توسعه موبایل بسیار شبیه «گامی به عقب در زمان» است.
پیاده سازی شیوه نامه های موبایل
نخستین گام برای افزایش پشتیبانی از موبایل برای یک وب سایت، شامل یک شیوه نامه خاص تنظیمcss برای دستگاه های موبایل است.
روش های سوی سرور و رشته ua
یک رویکرد برای قراردادن شیوه نامه های موبایل نیازمند شناسایی رشته عامل کاربر با استفاده از یک زبان سوی سرور (server-side) مانند php است. با استفاده از این تکنیک، سایت می تواند دستگاه های موبایلی را که از یک شیوه نامه مناسب استفاده کرده یا کاربر را به یک زیردامنه موبایل (m.jamejamonline.ir که البته هنوز موجود نیست) راهنمایی می کنند، شناسایی کند. این رویکرد سوی سرور چند مزیت دارد از جمله این که بالاترین سطح سازگاری را تضمین می کند و همچنین به وب سایت ها اجازه می دهد از محتویات و نشانه گذاری های خاصی برای کاربران موبایل استفاده کنند.
با این که چنین تکنیکی برای وب سایت های سطح سرمایه گذاری عالی به نظر می رسد، ولی نگرانی های عملی ای وجود دارند که پیاده سازی آن را روی بیشتر سایت ها مشکل می کند. روزانه رشته های عامل زیادی برای کاربران جدید تولید می شود، بنابراین نگهداشتن فهرست ua user agent (یا عامل کاربر) تقریبا غیرممکن است. بعلاوه این رویکرد به دستگاه بستگی دارد تا به عامل کاربر حقیقی خود کمک کند، هرچند در گذشته مرورگرها رشته ua خودشان را برای دورزدن این نوع شناسایی جعل می کردند! مثلا هنوز هم بیشتر رشته های ua با «موزیلا» شروع می شود تا از بررسی های نت اسکیپ عبور کند (روشی که در دهه 90 استفاده می شد)، یا برای سال های متمادی اوپرا وانمود می کرد که ie است!
روش ابتکاری کاربر
به خاطر سختی هایی که با شناسایی ua موبایل همراه است و همچنین مشکلات پرس وجوهای رسانه ای، برخی از شرکت ها مثل ikea راه جدیدی را در پیش گرفتند تا به کاربر اجازه دهند خودش تصمیم بگیرد که آیا می خواهد نسخه موبایل وب سایت را ببیند یا خیر. در حالی که این روش نقطه ضعف واضحی از نیاز به تعامل بیشتر با کاربر دارد ولی بی شک ساده ترین روش برای اجراست.
سایت، لینکی با عنوان «از سایت موبایل ما دیدن فرمایید» دارد که کاربر را به زیردامنه موبایل انتقال می دهد. این رویکرد اشکالاتی هم دارد از جمله این که برخی از کاربران موبایل ممکن است لینک را نبینند یا اگر بدون در نظر گرفتن این که چه دستگاهی در حال استفاده است، لینک برای همه قابل رویت باشد و بازدیدکنندگان دستگاه های غیرموبایل هم ممکن است روی آن کلیک کنند.
البته از این فایده مهم که به کاربر اجازه داده می شود خودش انتخاب کند، نمی توان گذشت.
برخی از کاربران طرح بندی متراکمی که برای دستگاه آنها بهینه سازی شده را ترجیح می دهند در حالی که کاربران دیگر ممکن است بخواهند وب سایت بدون محدودیت های طرح بندی موبایل دسترسی داشته باشد.
چه چیزهایی باید تغییر کنند؟
وقتی شیوه نامه های موبایل را پیاده سازی کردیم، زمان آن می رسد که ببینیم کدام یک از شیوه ها را می خواهیم تغییر دهیم؟
تغییر وضعیت واقعی صفحه
هدف اصلی شیوه نامه های موبایل تغییر طرح بندی برای یک نمایش کوچک تر است. در درجه نخست این مساله به معنای کاهش طرح بندی های چندستونه به تک ستونه است. بیشتر صفحه های موبایل عمودی هستند، بنابراین فضای افقی بیش از پیش گران تمام می شود و طرح بندی های موبایل به ندرت می توانند بیشتر از یک ستون اطلاعات را در بر بگیرند.
در گام بعدی با تنظیماتdisplay:none روی عناصر با اهمیت پایین تر، از شلوغی کلی صفحه کاسته می شود و در نهایت ذخیره پیکسل های افزوده به وسیله کاهش حاشیه ها و لایه ها برای ساخت یک طرح بندی بسته تر صورت می گیرد.
هدف دیگر شیوه نامه ها کاهش پهنای باند برای شبکه های موبایل کندتر است. نخست اطمینان حاصل کنید که تصاویر زمینه بزرگ را حذف یا جایگزین کرده اید، بویژه اگر از یک تصویر زمینه برای کل سایت استفاده می کنید. بعلاوه برای تصاویر غیرضروری تنظیمات display:none را انجام دهید.
اگر سایت شما برای دکمه ها یا نوارهای کناری از عکس استفاده می کند، توجه داشته باشید که آنها را با متن ساده css متناظرشان جایگزین کنید.
در کنار رویارویی با نگرانی های اندازه صفحه و پهنای باند، چند تغییر دیگر نیز وجود دارد که باید در تمام شیوه نامه های موبایل اعمال شود. می توانید خوانایی را با افزایش اندازه فونت هر متن ریز، متوسط یا زیاد کنید. عموما کلیک کردن در دستگاه های موبایل دقت کمتری دارد بنابراین توجه کنید مناطق قابل کلیک برای دکمه ها یا لینک های مهم را با تنظیمات display:block افزایش دهید و برای عناصر قابل کلیک لایه اضافه کنید.
عناصر شناور برای طرح بندی های موبایل مشکلاتی را ایجاد می کنند بنابراین آنهایی که شناورند و ضروری نیستند را حذف کنید. به یاد داشته باشید فضای افقی بویژه در موبایل هزینه بر است، بنابراین پیمایش عمودی را انتخاب کنید.
محمدحسین کردونی
منبع: smashingmagazine

منبع : جام جم آنلاین  تاریخ : 23   آبان   1389  شاخه : وب