براي مطالعه و تحقيق در باره استانداردهاي Mobile friendly سايت هاي بسيار زيادي در سرتاسر وب وجود دارند. سايت هاي آموزش مانند ليندا و Tutsplus ويديوهاي آموزشي فراواني براي آموزش ايجاد يك سايت با قابليت هاي استاندارد نمايش در موبايل ارائه داده اند. ما در اين آموزش مانند تمام آموزش هاي ديگر به سايت رسمي ارائه دهنده استاندارد موبايل فرندلي مراجعه كرده و با استانداردهاي ذكر شده در آن آشنا ميشويم و در انتها اگر مجالي بود از سايت ها و منابع مختلف ديگر مثالهايي براي توضيح بيشتر استانداردهاي ذكر شده خواهيم آورد.
طراحي سايت طراحي سايت طراحي سايت طراحي سايت طراحي سايت طراحي سايت
طراحي سايت طراحي سايت
استانداردهاي Mobile friendly چيست؟
اولين سايتي كه بصورت رسمي از پلتفرم موبايل فرندلي استفاده كرده است، سايت Audi است. اين سايت كه محصولات شركت Audi را ارائه ميدهد، با توجه به اينكه مشتريانش با گوشي هاي موبايل سايت را مشاهده مي كردند، پايه گذار اين استاندارد بصورت حرفه اي بود. نام و اعتبار اين شركت در گسترش پلتفرم موبايل فرندلي در بين سايت ها بي تاثير نبوده است.
همانطور كه در مقدمه اشاره كرديم، براي تعريف استاندارد هاي Mobile friendly به سراغ سايت رسمي انتشار اين استاندارد خواهيم رفت، سايت https://www.w3.org/standards/webdesign/mobilweb به تعريف استاندارد طراحي سايت براي موبايل ميپردازد. سايت W3 استانداردهاي وب را پايه گذاري مي كند. اين سايت رفرنس تمام برنامه نويسان وب است و مطلبي كه در اين سايت تائيد شود، ميتواند بدون ترديد توسط طراحان سايت مورد استفاده قرار بگيرد. موتورهاي جستجو تلاش مي كنند، تا همواره استانداردهاي امتياز دهي به صفحات وب را با استاندارد هاي ارائه شده در اين سايت هم آهنگ كنند. بنابراين ميتوانيد از سئو بيس بودن اطلاعات اين سايت كاملا مطمئن باشيد. چرا كه در واقع اين سايت، مرجع موتورهاي جستجو، براي تعيين استاندارد بودن صفحات است.
ما قصد ترجمه واژه به واژه سايت مزبور را نداريم ولي قسمت هايي كه به توضيح تكنيك ها ميپردازد را عيننا تكرار خواهيم كرد. به هر حال امكان توضيح و آموزش تمام تكنيك هاي Mobile friendly قطعا در يك مقاله نمي گنجد، ما نيز قصد توضيح تمام جزئيات كد نويسي براي صفحات موبايل را نداريم. در واقع اين آموزش قصد دارد، كه تعريفي از مفاهيم و ابزار هاي لازم براي توليد صفحات Mobile friendly ارائه بدهد تا كاربران بتوانند از اين توضيحات براي يافتن مطالب مد نظر خود استفاده كنند.
استاندارد W3 براي Mobile friendly
با گسترش موبايل هايي كه توانايي اتصال به اينترنت دارند. موبايل ها هدفي براي توليد كنندگان محتوا در دنياي وب شدند. بنابراين شناخت توانايي ها و محدوديت هاي اين دستگاه وشناخت تكنولوژي هايي كه اين دستگاه ها استفاده مي كنند. براي توليد كنندگان محتوا در وب از اهيمت بالايي برخوردار است. وبسايت هايي كه از تكنولوژي هاي موجود در موبايل براي ارائه محتواي متناسب با آن استفاده مي كنند، را اصطلاحا وب سايت هاي mobile-friendly ميناميم.
آيا براي نوشتن سايت براي موبايل بايد كد هاي خاصي استفاده كنيم؟
در حالت ايده آل، بدون تغيير يك خط كد بايد بتوان سايت را در موبايل مشاهده كرد. در عالم حقيقت يك طراح سايت بايد براي تجربه كاربري بهتر استفاده كنندگان گوشي هاي همره برنامه ريزي كند. اين موضوع حتي درباره گوشي هاي به روز نيز صادق است.
دليل اين امر مسائل فني مانند محدوديت هاي CPU و حافظه و يا جايگزيني كليك موس با فشردن صفحه است.
آيا تكنولوژي جديدي براي توسعه سايت براي موبايل وجود دارد؟
W3C در سه سال گذشته بر روي ايجاد تكنولوژي هاي جديد براي همآنگي ميان وب و دستگاه هاي موبايل كار كرده است. از ميان اين تكنولوژي ها ميتوان موارد زير را مثال زد:
وقتي سال گذشته اين مقاله را ميخواندم با ديدن اين واژه كلي به تكاپو افتادم تا تغييرات Css را مطالعه كنم. اما خوشبختانه تمام قوانين همان هايي است كه در سال 2014 اضافه شده بود. تغييراتي كه در بخش فضاهاي نامي صورت گرفته است، نيز عملا چندان كارايي براي سايت ها ندارد. بسياري از طراحان سايت بجاي استفاده از فضاهاي نامي براي كاراكترهاي فارسي از فونت فارسي استفاده مي كنند. از آنجا كه نميتوان استفاده از فونت فارسي را كنار گذاشت دليلي براي استفاده از دو ابزار براي انجام يك كار وجود ندارد.
اگر با SVG آشنا نيستيد. اين تكنولوژي با HTML5 به طراحي سايت اضافه شده است و هدف آن ايجاد گرافيك هاي ريسپانسيو با حجم كم است. در واقع SVG اشكال گرافيكي را با كد ايجاد مي كند. به اين ترتيب يك شكل را ميتوان در هر اندازه اي به نمايش گذاشت بدون آنكه حجم نهايي صفحه وب تغييري داشته باشد. براي توليد SVG كافيست كه در نرم افزار فتوشاپ شكل مورد نظر را با ابزار هاي رسم شكل(فونت،Pen، ابزار مستطيل، دايره، مستطيل گوشه گرد، خط، شكل سفارشي) ايجاد كرده و دستور File/Export/svg را اجرا كنيد.
SVG Tiny كه در اينجا نامبرده شده تكنولوژي SVG 1.2 است كه ميتوانيد از جزيئات آن در سايت W3 آگاه شويد. ولي براي ايجاد آن همان روش ذكر شده با فتوشاپ نسخه 2017 بهترين روش و البته ساده ترين روش ايجاد SVG است.
نسخه معرفي شده از Html براي مبايل كه امكان توضيح كد نويسي هاي آن در اين مقاله ممكن نيست. اين نسخه از HTML قابليت هاي تعاملي با كاربران را حفظ كرده است.
طراحي سايت طراحي سايت طراحي سايت طراحي سايت طراحي سايت طراحي سايت
آيا سايت ما Mobile friendly است
براي چك كردن يك سايت ميتوانيد به آدرس https://search.google.com/test/mobile-friendly مراجعه كنيد. كار كردن با اين سايت بسيار ساده است. كافيست كه آدرس سايت خود را بصورت كامل در نوار ابزار سايت قرار داده و روي دكمه موجود در پايين نوار ابزار كليك كنيد.
Responsive, adaptive, amp
براي تبديل يك سايت به نسخه موبايل فرندلي سه راهكار در اختيار داريد. هر كدام از اين راهكارها نقاط ضعف و قدرتي دارد.
روش ريسپانسيو:
امروزه اكثر منابع از طراحي Mobile first صحبت به ميان ميآورند. يعني اينكه طراحي سايت بايد بر اساس موبايل انجام شود و براي صفحات با اندازه هاي بزرگتر از مديا كوئري ها استفاده شود. در طراحي ريسپانسيو در مديا كوئري ها بر حسب درصد به تگهاي تشكليل دهنده سايت مقدار ميدهيم. تا اين تگ ها در صفحات با اندازه مختلف بزرگ و كوچك شوند. مزيت ريسپانسيو اين است كه اگر دستگاه تغيير نكند و تنها اندازه پنجره نمايش عوض شود نيز تغيير اندازه تگ ها رخ ميدهد.
روش آداپتيو:
در اين روش تنها براي اندازه هاي خاصي از صفحه طراحي صورت ميگيرد. اين اندازه ها يك استاندارد خاص دارند و صفحه سايت تنها در صورت رسيدن به اين اندازه ها تغيير حالت ميدهد و ديگر بصورت درصدي به تگ ها اندازه نمي دهيم.
روش AMP:
يك صفحه است كه بصورت جداگانه با كدهاي خاص خود طراحي مي شود و اگر كاربر با موبايل سايت را باز كند به آن صفحه منتقل ميشود. طراحي َAMP با استاندارد تك صفحه اي ارائه شده است و تبديل يك سايت نسخه AMP ميتواند چالش بزرگي محسوب شود.
نكات مهم در Mobile friendly:
1- استفاده از فلش ممنوع
سالهاست كه استفاده از فلش در وب كنار گذاشته شده است ولي هنوز هم برخي كاربران در سايتهاي خود از فايل هاي فلش استفاده مي كنند. بايد به خاطر داشته باشيد كه فلش ها در موبايل اجرا نخواهد شد.
از ويژگي Canvas در HTML5 به همراه جاوا اسكريپت به عنوان جايگزين ميتوانيد استفاده كنيد.
2- فرمت فيلم ها
موبايل ها براي پخش فيلم بايد نرم افزار پخش را در گوشي خود داشته باشند. اكثر مرورگرهاي جديد با خود كدك هاي تصويري لازم براي پخش فيلم را دارند و ميتوانيد با استاندارد هاي HTML5 در صفحات خود از فيلم استفاده كنيد.
3- منوهاي شناور ممنوع
موبايل ها امكان هاور كردن ندارند. بنابراين نميتوان در موبايل از منوي شناور استفاده كرد. در بوت استرپ كدهاي لازم براي تبديل يك منوي شناور به يك منوي قابل استفاده در موبايل وجود دارد. ميتوانيد از سايت رسمي بوت استرپ و يا از سايت W3schools اين كدها را ذخيره كنيد.
4- اسلايدر ها را براي نسخه موبايل حذف كنيد
اسلايدرهاي ريسپانسيو زيادي در بازار هستند ولي در عمل در گوشي هاي كوچك يك اسلايدر جلوه خاصي ندارد بنابراين ميتوانيد َآن را با عكس ثابت تغيير دهيد.
CMS هاي موبايل فرندلي
در مقاله CMS چيست؟ انواع سيستم هاي مديريت محتوا را توضيح داديم. خود CMS ها و تم هاي كه توسط آنها براي طراحي سايت انتخاب ميشود. بايد Mobile friendly باشند. براي اينكه بدانيد CMS يا تم انتخابي شما Mobile friendly است يا خير، بايد به توضيحات موجود در سايت شركت ارائه دهنده آن مراجعه كنيد.
امروزه اكثر سيستم هاي مديريت محتوا به شما امكان استفاده از طراحي سايت ريسپانسيو را ميدهند.اما با اينحال هنگام كار با يك سيستم متن باز، ممكن است تم هايي را بيابيد كه بدرستي ريسپانسيو نشده اند.
جمع بندي:
در طراحي Mobile friendly چنيدن روش مختلف وجود دارد هنگام انتخاب يك روش بايد به چند نكته توجه كنيد.
- آيا كدهاي شما در اين طراحي نياز به تغيير دارد.
- آيا آدرس صفحات سايت شما بايد تغيير كند.
در طراحي موبايل فرندلي نكاتي مانند: تغيير اندازه فونت معمولا توسط برنامه نويسان فراموش ميشود، ولي اين نكته از نظر سئو از اهميت برخوردار است، بنابراين بهتر از با يكي از تكنيك هاي درصد، فونت هاي خود را تعيين اندازه كنيد.
