سال هاست که کارشناسان بر افزایش چشمگیر ترافیک وب سایت ها از طریق دستگاه های موبایل تاکید دارند. به همین دلیل، بسیاری از کسب وکارها با هوشمندی به سمت استراتژی موبایل محور برای حضور آنلاین خود روی آورده اند و تجربه هایی متناسب با تلفن های همراه و سایر دستگاه های موبایل ایجاد می کنند.
پس از صرف زمان برای یادگیری طراحی صفحات وب برای تلفن های همراه و پیاده سازی استراتژی خود، می خواهید اطمینان حاصل کنید که بازدیدکنندگان سایت شما می توانند این طرح ها را ببینند. روش های متعددی برای این کار وجود دارد که برخی از آن ها بهتر از بقیه عمل می کنند. در این مقاله، نگاهی به روش هایی خواهیم داشت که می توانید برای پیاده سازی پشتیبانی از موبایل در وب سایت خود استفاده کنید. همچنین، در پایان توصیه ای برای بهترین روش دستیابی به این هدف در وب امروزی ارائه خواهیم کرد.
لینک دادن به نسخه موبایل سایت
این روش، ساده ترین راه برای مدیریت کاربران تلفن همراه است. به جای نگرانی در مورد اینکه آیا آن ها می توانند صفحات شما را ببینند یا نه، کافیست لینکی را در بالای صفحه قرار دهید که به نسخه موبایلی سایت شما اشاره کند. سپس بازدیدکنندگان می توانند خودشان انتخاب کنند که آیا می خواهند نسخه موبایل را ببینند یا به نسخه "معمولی" ادامه دهند.
مزیت این راه حل، سهولت پیاده سازی آن است. شما فقط باید یک نسخه بهینه شده برای موبایل ایجاد کنید و سپس یک لینک در بالای صفحات سایت اصلی اضافه کنید.
اما معایبی هم وجود دارد:
- شما باید یک نسخه جداگانه از سایت را برای کاربران موبایل نگهداری کنید. با بزرگتر شدن سایت، ممکن است فراموش کنید که آن نسخه دوم را بروزرسانی کنید و سایت های شما از هماهنگی خارج شوند.
- آیا باید یک نسخه سوم برای تبلت ها هم ایجاد کنید؟ و یک نسخه چهارم برای دستگاه های پوشیدنی؟ این مفهوم نسخه های خاص دستگاه می تواند به سرعت از کنترل خارج شود.
- شما باید یک لینک نامناسب را در بالای صفحه قرار دهید که برای خوانندگان غیر موبایل هم قابل مشاهده است (و احتمالاً روی آن کلیک می کنند).
در نهایت، این رویکرد یک رویکرد قدیمی است که بعید است بخشی از یک استراتژی مدرن موبایل باشد. گاهی اوقات به عنوان یک راه حل موقت در حالی که راه حل بهتری در حال توسعه است استفاده می شود، اما در واقع در این مرحله یک راه حل کوتاه مدت است.
استفاده از جاوااسکریپت
در نوعی از رویکرد ذکر شده در بالا، برخی از توسعه دهندگان از نوعی اسکریپت تشخیص مرورگر برای تشخیص اینکه آیا کاربر از یک دستگاه تلفن همراه استفاده می کند یا خیر استفاده می کنند و سپس آن ها را به آن سایت موبایلی جداگانه هدایت می کنند. مشکل تشخیص مرورگر و دستگاه های تلفن همراه این است که هزاران دستگاه تلفن همراه در آنجا وجود دارد. تلاش برای تشخیص همه آن ها با یک جاوااسکریپت می تواند تمام صفحات شما را به یک کابوس دانلود تبدیل کند - و شما هنوز هم در معرض بسیاری از معایب همان رویکرد ذکر شده در بالا هستید.
استفاده از CSS @media Handheld
به نظر می رسد دستور CSS به ظاهر برای نمایش استایل های CSS فقط برای دستگاه های دستی - مانند تلفن های همراه - یک راه ایده آل باشد. این راه حلی ایده آل برای نمایش صفحات برای دستگاه های تلفن همراه به نظر می رسد. شما یک صفحه وب می نویسید و سپس دو شیوه نامه ایجاد می کنید. اولی برای نوع رسانه "screen" صفحه شما را برای مانیتورها و صفحه های کامپیوتر استایل می دهد. دومی برای "handheld" صفحه شما را برای دستگاه های کوچک مانند تلفن های همراه استایل می دهد. آسان به نظر می رسد، اما در عمل واقعاً کار نمی کند.
بزرگترین مزیت این روش این است که شما مجبور نیستید دو نسخه از وب سایت خود را نگهداری کنید. شما فقط یکی را نگهداری می کنید و شیوه نامه نحوه نمایش آن را تعریف می کند - که در واقع به راه حل نهایی که می خواهیم نزدیک تر می شود.
مشکلی که در این روش وجود دارد این است که بسیاری از تلفن ها از نوع رسانه پشتیبانی نمی کنند - آن ها صفحات خود را با نوع رسانه screen نمایش می دهند. و بسیاری از تلفن های همراه و دستگاه های دستی قدیمی تر اصلاً از CSS پشتیبانی نمی کنند. در پایان، این روش غیرقابل اعتماد است و به همین دلیل به ندرت برای ارائه نسخه های موبایل یک وب سایت استفاده می شود.
تشخیص User-Agent با PHP, JSP, ASP
این روش بسیار بهتری برای هدایت کاربران موبایل به یک نسخه موبایل از وب سایت است زیرا به یک زبان اسکریپت یا CSS که دستگاه موبایل از آن استفاده نمی کند، متکی نیست. در عوض، از یک زبان سمت سرور (PHP، ASP، JSP، ColdFusion و غیره) برای بررسی user-agent استفاده می کند و سپس درخواست HTTP را تغییر می دهد تا در صورت موبایل بودن، به یک صفحه موبایل اشاره کند.
یک کد ساده PHP برای انجام این کار به این صورت خواهد بود:
مشکل در اینجا این است که تعداد زیادی user-agent بالقوه دیگر وجود دارد که توسط دستگاه های تلفن همراه استفاده می شوند. این اسکریپت بسیاری از آنها را می گیرد و هدایت می کند، اما به هیچ وجه همه آنها را نه. و هر لحظه موارد بیشتری اضافه می شوند.
به علاوه، مانند راه حل های دیگر در بالا، شما همچنان باید یک سایت موبایل جداگانه برای این خوانندگان نگهداری کنید! این نقطه ضعف داشتن مدیریت دو (یا بیشتر!) وب سایت دلیل کافی برای جستجوی یک راه حل بهتر است.
استفاده از WURFL
اگر هنوز مصمم هستید که کاربران موبایل خود را به یک سایت جداگانه هدایت کنید، WURFL (Wireless Universal Resource File) یک راه حل خوب است. این یک فایل XML (و اکنون یک فایل DB) و کتابخانه های DBI مختلف است که نه تنها حاوی داده های به روز user-agent بی سیم است، بلکه شامل ویژگی ها و قابلیت هایی است که آن user-agentها پشتیبانی می کنند.
برای استفاده از WURFL، شما فایل پیکربندی XML را دانلود می کنید و سپس زبان خود را انتخاب می کنید و API را در وب سایت خود پیاده سازی می کنید. ابزارهایی برای استفاده از WURFL با Java، PHP، Perl، Ruby، Python، Net، XSLT و C++ وجود دارد.
مزیت استفاده از WURFL این است که افراد زیادی در حال به روز رسانی و اضافه کردن به فایل پیکربندی هستند. بنابراین در حالی که فایلی که استفاده می کنید تقریباً قبل از اینکه دانلود آن را تمام کرده باشید، منسوخ شده است، احتمالاً اگر آن را ماهی یکبار دانلود کنید، تمام مرورگرهای موبایلی را که خوانندگان شما به طور معمول استفاده می کنند، بدون هیچ مشکلی خواهید داشت. البته، نقطه ضعف این است که شما باید به طور مداوم این را دانلود و به روز کنید - همه اینها به این دلیل که کاربران را به یک وب سایت دوم هدایت کنید و نقاط ضعفی که ایجاد می کند.
بهترین راه حل: طراحی واکنش گرا (Responsive Design)
بنابراین اگر نگهداری سایت های مختلف برای دستگاه های مختلف پاسخ مناسبی نیست، پس راه حل چیست؟ طراحی واکنش گرا (Responsive Design).
طراحی واکنش گرا جایی است که شما از media queries CSS برای تعریف استایل ها برای دستگاه هایی با عرض های مختلف استفاده می کنید. طراحی واکنش گرا به شما امکان می دهد یک صفحه وب برای کاربران موبایل و غیر موبایل ایجاد کنید. سپس دیگر لازم نیست نگران این باشید که چه محتوایی را در سایت موبایل نمایش دهید یا فراموش کنید آخرین تغییرات را به سایت موبایل خود منتقل کنید. به علاوه، پس از نوشتن CSS، نیازی به دانلود چیز جدیدی ندارید.
طراحی واکنش گرا ممکن است به طور کامل روی دستگاه ها و مرورگرهای بسیار قدیمی (که بیشتر آنها امروزه بسیار کم استفاده می شوند و نباید نگرانی زیادی برای شما ایجاد کنند) کار نکند، اما از آنجا که افزودنی است (استایل ها را به محتوا اضافه می کند، نه اینکه محتوا را حذف کند) این خوانندگان همچنان می توانند وب سایت شما را بخوانند، فقط در دستگاه یا مرورگر قدیمی خود ایده آل به نظر نمی رسد.
روش های شناسایی بازدیدکنندگان موبایلی وب سایت شما — https://www.rayeshmand.ir/article/how-to-detect-hits-from-mobile-devices-on-web-pages