هنگام ساخت برای طیف وسیعی از کاربران و دستگاهها، علاوه بر طرحبندی و طراحی گرافیکی، محتوا را نیز در نظر بگیرید.
نحوه مطالعه افراد در وب
راهنمای نگارش دولتی ایالات متحده خلاصهای از آنچه مردم از نوشتن در وب میخواهند را ارائه میدهد:
تحقیقات نشان میدهد که مردم صفحات وب را نمیخوانند، بلکه آنها را مرور میکنند . به طور متوسط، مردم فقط ۲۰ تا ۲۸ درصد از محتوای صفحات وب را میخوانند . خواندن از روی صفحه نمایش بسیار کندتر از خواندن از روی کاغذ است. مردم سایت شما را ترک میکنند مگر اینکه دسترسی و درک اطلاعات آسان باشد.
چگونه برای موبایل بنویسیم
روی موضوع مورد نظر تمرکز کنید و داستان را از ابتدا تعریف کنید. برای اینکه نوشته در طیف وسیعی از دستگاهها و نماها قابل استفاده باشد، حتماً نکات اصلی خود را در ابتدا بیان کنید: به عنوان یک قاعده، در حالت ایدهآل در چهار پاراگراف اول، در حدود ۷۰ کلمه .
از خودتان بپرسید مردم از سایت شما چه میخواهند. آیا آنها به دنبال چیزی هستند؟ اگر مردم برای کسب اطلاعات به سایت شما مراجعه میکنند، مطمئن شوید که تمام متن شما در جهت کمک به آنها برای رسیدن به هدفشان باشد. با لحن معلوم بنویسید، اقدامات و راهحلها را ارائه دهید.
فقط آنچه را که بازدیدکنندگانتان میخواهند منتشر کنید، و نه بیشتر.
تحقیقات دولت بریتانیا همچنین نشان میدهد که:
به عبارت دیگر: از زبان ساده، کلمات کوتاهتر و ساختارهای جملهبندی ساده استفاده کنید - حتی برای مخاطبان باسواد و فنی. مگر اینکه دلیل خوبی برای این کار وجود داشته باشد، لحن صدای خود را محاورهای نگه دارید. یک قانون قدیمی روزنامهنگاری این است که طوری بنویسید که انگار با یک کودک ۱۱ ساله باهوش صحبت میکنید.
یک میلیارد کاربر بعدی
رویکرد سادهسازی در نوشتن، بهویژه برای خوانندگان دستگاههای تلفن همراه اهمیت دارد و هنگام ایجاد محتوا برای تلفنهای ارزانقیمت با نمایشگرهای کوچک که نیاز به پیمایش بیشتری دارند و ممکن است نمایشگرهای با کیفیت پایینتر و صفحه نمایشهای با پاسخگویی کمتر داشته باشند، بسیار مهم است.
بیشتر یک میلیارد کاربر بعدی که آنلاین میشوند، دستگاههای ارزانقیمتی خواهند داشت. آنها نمیخواهند بودجه اینترنت خود را صرف گشتوگذار در محتوای طولانی کنند و ممکن است به زبان مادری خود نخوانند. متن خود را کوتاه کنید: از جملات کوتاه، علائم نگارشی حداقلی، پاراگرافهای پنج خطی یا کمتر و تیترهای تکخطی استفاده کنید. متن واکنشگرا را در نظر بگیرید (مثلاً استفاده از تیترهای کوتاهتر برای نمایشگرهای کوچکتر) اما مراقب معایب آن باشید .
نگرش مینیمالیستی به متن، بومیسازی و بینالمللیسازی محتوای شما را نیز آسانتر میکند - و احتمال نقل قول از محتوای شما در رسانههای اجتماعی را افزایش میدهد.
نکته آخر:
- ساده نگهش دار
- شلوغی را کاهش دهید
- به اصل مطلب بپردازید
حذف محتوای غیرضروری
از نظر اندازه بایت، صفحات وب بزرگ هستند و بزرگتر هم میشوند .
تکنیکهای طراحی واکنشگرا امکان ارائه محتوای متفاوت برای نمایشگرهای کوچکتر را فراهم میکنند، اما همیشه منطقی است که با سادهسازی متن، تصاویر و سایر محتوا شروع کنیم.
کاربران وب اغلب عملگرا هستند و به جای اینکه برای جذب یک کتاب خوب به عقب خم شوند، در جستجوی پاسخ به سوال فعلی خود «به جلو خم میشوند».
جیکوب نیلسن
از خودتان بپرسید: مردم وقتی از سایت من بازدید میکنند، دنبال چه چیزی هستند؟
آیا هر جزء صفحه به کاربران در رسیدن به هدفشان کمک میکند؟
حذف عناصر زائد صفحه
طبق گفته HTTP Archive، فایلهای HTML تقریباً ۷۰ هزار فایل را تشکیل میدهند و به طور متوسط بیش از نه درخواست برای هر صفحه وب وجود دارد.
بسیاری از سایتهای محبوب حتی در موبایل از چندین هزار عنصر HTML در هر صفحه و چندین هزار خط کد استفاده میکنند. حجم زیاد فایل HTML ممکن است باعث کندتر شدن بارگذاری صفحات نشود ، اما حجم زیاد HTML میتواند نشانهای از حجیم بودن محتوا باشد: فایلهای .html بزرگتر به معنای عناصر بیشتر، محتوای متنی بیشتر یا هر دو هستند.
کاهش پیچیدگی HTML همچنین باعث کاهش وزن صفحه میشود، به محلیسازی و بینالمللیسازی کمک میکند و برنامهریزی و اشکالزدایی طراحی واکنشگرا را آسانتر میکند. برای اطلاعات بیشتر در مورد نوشتن HTML کارآمدتر، به HTML با کارایی بالا مراجعه کنید.
هر مرحلهای که شما کاربر را مجبور به انجام آن میکنید تا از اپلیکیشن شما بهره ببرد، ۲۰٪ از هزینه کاربران را برای شما خواهد داشت.
گابور چله، توییتر
همین امر در مورد محتوا نیز صدق میکند: به کاربران کمک کنید تا در اسرع وقت به آنچه میخواهند برسند.
فقط محتوا را از کاربران موبایل پنهان نکنید. برابری محتوا را هدف قرار دهید، زیرا حدس زدن اینکه کاربران موبایل شما چه ویژگیهایی را از دست نمیدهند، برای کسی بیفایده است. اگر منابع دارید، نسخههای جایگزین از همان محتوا را برای اندازههای مختلف نمایشگر ایجاد کنید - حتی اگر فقط برای عناصر صفحه با اولویت بالا باشد.
مدیریت محتوا و گردش کار را در نظر بگیرید: آیا سیستمهای قدیمی منجر به محتوای قدیمی میشوند؟
سادهسازی متن
با توجه به اینکه وب به سمت موبایل میرود، باید نحوه نوشتن خود را تغییر دهید. ساده بنویسید، از شلوغی و پیچیدگیها بکاهید و به اصل مطلب بپردازید.
تصاویر اضافی را حذف کنید
تصاویر میتوانند زیبا، سرگرمکننده و آموزنده باشند - اما از فضای صفحه نیز استفاده میکنند، به وزن صفحه میافزایند و تعداد درخواستهای فایل را افزایش میدهند. با بدتر شدن اتصال، تأخیر بدتر میشود ، به این معنی که با افزایش استفاده از وب به سمت موبایل، درخواستهای بیش از حد برای فایلهای تصویری به یک مشکل فزاینده تبدیل شده است.
تصاویر هم برق مصرف میکنند. بعد از صفحه نمایش، رادیو دومین عامل بزرگ تخلیه باتری شماست. درخواستهای بیشتر برای تصویر، استفاده بیشتر از رادیو، باتریهای بیشتری را خالی میکند. حتی فقط رندر کردن تصاویر هم برق مصرف میکند - و این با اندازه و تعداد متناسب است. گزارش استنفورد با عنوان «چه کسی باتری مرا از بین برد؟» را بررسی کنید.
اگر میتوانید، از شر تصاویر خلاص شوید!
در اینجا چند پیشنهاد ارائه شده است:
- طرحهایی را در نظر بگیرید که به طور کلی از تصاویر اجتناب میکنند، یا از تصاویر به میزان کم استفاده میکنند. متنهای فقط میتوانند زیبا باشند ! از خود بپرسید: «بازدیدکنندگان سایت من به دنبال چه چیزی هستند؟ آیا تصاویر به این فرآیند کمک میکنند؟»
- در گذشته، ذخیره عنوانها و سایر متنها به صورت گرافیکی رایج بود. این رویکرد به خوبی به تغییرات اندازه نمایشگر پاسخ نمیدهد و به وزن و تأخیر صفحه میافزاید. استفاده از متن به عنوان گرافیک همچنین به این معنی است که متن توسط موتورهای جستجو پیدا نمیشود و توسط صفحهخوانها و سایر فناوریهای کمکی قابل دسترسی نیست. در صورت امکان از متن "واقعی" استفاده کنید - فونتهای وب و CSS میتوانند تایپوگرافی زیبایی را ایجاد کنند.
- برای گرادیانها، سایهها، گوشههای گرد و بافتهای پسزمینه ، از CSS به جای تصاویر استفاده کنید، ویژگیهایی که توسط همه مرورگرهای مدرن پشتیبانی میشوند . با این حال، به خاطر داشته باشید که CSS ممکن است از تصاویر بهتر باشد، اما هنوز هم میتواند باعث جریمه پردازش و رندر شود، به خصوص در موبایل.
- تصاویر پسزمینه به ندرت در موبایل خوب کار میکنند. میتوانید از کوئریهای رسانهای برای جلوگیری از تصاویر پسزمینه در نماهای کوچک استفاده کنید .
- از تصاویر اسپلش اسکرین (صفحه نمایش شلوغ) اجتناب کنید.
- برای انیمیشنهای رابط کاربری از CSS استفاده کنید .
- با گلیفهای خود آشنا شوید؛ به جای تصاویر از نمادها و آیکونهای یونیکد استفاده کنید، در صورت لزوم از فونتهای وب نیز استفاده کنید.
- فونتهای آیکون را در نظر بگیرید؛ آنها گرافیکهای برداری هستند که میتوانند به صورت نامحدود مقیاسبندی شوند و میتوان کل مجموعه تصاویر را در یک فونت دانلود کرد. (با این حال، از این نگرانیها آگاه باشید.)
- عنصر
<canvas>میتواند برای ساخت تصاویر در جاوا اسکریپت از خطوط، منحنیها، متن و سایر تصاویر استفاده شود. - تصاویر SVG یا Data URI درونخطی، وزن صفحه را کاهش نمیدهند، اما میتوانند با کاهش تعداد درخواستهای منابع، تأخیر را کاهش دهند. Inline SVG پشتیبانی بسیار خوبی در مرورگرهای موبایل و دسکتاپ دارد و ابزارهای بهینهسازی میتوانند اندازه SVG را به میزان قابل توجهی کاهش دهند. به همین ترتیب، Data URIها نیز به خوبی پشتیبانی میشوند. هر دو را میتوان در CSS درونخطی کرد.
- به جای GIF های متحرک، از
<video>استفاده کنید. عنصر video توسط همه مرورگرهای موبایل (به جز Opera Mini) پشتیبانی میشود .
برای اطلاعات بیشتر به بهینهسازی تصویر و حذف و جایگزینی تصاویر مراجعه کنید.
طراحی محتوا برای عملکرد خوب در اندازههای مختلف نمایشگر
«یک محصول بسازید، نه اینکه آن را برای صفحه نمایشهای کوچک دوباره تصور کنید. محصولات موبایل عالی ساخته میشوند، هرگز پورت نمیشوند.»
طراحی و توسعه موبایل، برایان فلینگ
طراحان بزرگ «برای موبایل بهینه سازی» نمیکنند - آنها به صورت واکنشگرا فکر میکنند تا سایتهایی بسازند که در طیف وسیعی از دستگاهها کار کنند. ساختار متن و سایر محتوای صفحه برای موفقیت در دستگاههای مختلف بسیار مهم است.
بسیاری از یک میلیارد کاربر بعدی که به اینترنت متصل میشوند، از دستگاههای ارزانقیمت با نمایشگرهای کوچک استفاده میکنند. خواندن روی یک صفحه نمایش با وضوح پایین ۳.۵ یا ۴ اینچی میتواند کار سختی باشد.
اینم یه عکس از این دو تا با هم:
در صفحه نمایش بزرگتر، متن کوچک اما خوانا است.
در صفحه نمایش کوچکتر، مرورگر طرحبندی را به درستی رندر میکند، اما متن حتی در حالت بزرگنمایی هم خوانا نیست. صفحه نمایش تار است و «رنگ زمینه» دارد - رنگ سفید، سفید به نظر نمیرسد - که باعث میشود محتوا خوانا نباشد.
طراحی محتوا برای موبایل
هنگام ساخت برای طیف وسیعی از نماها، محتوا و همچنین طرحبندی و طراحی گرافیکی را در نظر بگیرید، طراحی با متن و تصاویر واقعی، نه محتوای جایگزین .
«محتوا مقدم بر طراحی است. طراحی در غیاب محتوا، طراحی نیست، بلکه تزیین است.»
جفری زلدمن
- مهمترین محتوای خود را در بالا قرار دهید، زیرا کاربران تمایل دارند صفحات وب را به شکل F بخوانند .
- کاربران برای رسیدن به هدفی از سایت شما بازدید میکنند. از خود بپرسید که برای رسیدن به آن هدف به چه چیزی نیاز دارند و هر چیز دیگری را حذف کنید. در مورد تزئینات بصری و متنی، محتوای قدیمی، لینکهای بیش از حد و سایر موارد غیرضروری سختگیر باشید.
- مراقب آیکونهای اشتراکگذاری اجتماعی باشید؛ آنها میتوانند طرحبندیها را شلوغ کنند و کد مربوط به آنها میتواند سرعت بارگذاری صفحه را کاهش دهد.
- طرحبندیهای واکنشگرا را برای محتوا طراحی کنید، نه برای اندازههای ثابت دستگاه.
محتوای آزمایشی
- با استفاده از Chrome DevTools و سایر ابزارهای شبیهسازی، خوانایی را در نماهای کوچکتر بررسی کنید.
- محتوای خود را در شرایط پهنای باند کم و تأخیر زیاد آزمایش کنید ؛ محتوا را در سناریوهای مختلف اتصال امتحان کنید.
- سعی کنید مطالب خود را با یک گوشی ارزان قیمت بخوانید و با آنها تعامل داشته باشید.
- از دوستان و همکارانتان بخواهید که اپلیکیشن یا سایت شما را امتحان کنند.
- یک آزمایشگاه تست دستگاه ساده بسازید. مخزن گیتهاب برای آزمایشگاه دستگاه موبایل کوچک گوگل، دستورالعملهایی در مورد نحوه ساخت آزمایشگاه خودتان دارد. OpenSTF یک برنامه وب ساده برای آزمایش وبسایتها روی چندین دستگاه اندروید است.
در اینجا OpenSTF در عمل نشان داده شده است:
دستگاههای تلفن همراه به طور فزایندهای برای مصرف محتوا و کسب اطلاعات استفاده میشوند - نه فقط به عنوان دستگاههایی برای ارتباط، بازی و رسانه.
این امر باعث میشود برنامهریزی محتوا برای عملکرد خوب در طیف وسیعی از نماها و اولویتبندی محتوا هنگام بررسی طرحبندی، رابط کاربری و طراحی تعاملی بین دستگاهها، به طور فزایندهای اهمیت پیدا کند.
هزینه داده را درک کنید
صفحات وب بزرگتر میشوند.
طبق گزارش HTTP Archive ، میانگین حجم صفحات برای یک میلیون سایت برتر اکنون بیش از ۲ مگابایت است.
کاربران از سایتها یا برنامههایی که کند یا گران تلقی میشوند، اجتناب میکنند، بنابراین درک هزینه بارگذاری صفحه و اجزای برنامه بسیار مهم است.
کاهش حجم صفحه نیز میتواند سودآور باشد. کریس زاخاریاس از یوتیوب متوجه شد که وقتی اندازه صفحه تماشا را از ۱.۲ مگابایت به ۲۵۰ کیلوبایت کاهش دادند:
به عبارت دیگر، کاهش حجم صفحات میتواند بازارهای کاملاً جدیدی را ایجاد کند .
محاسبه وزن صفحه
تعدادی ابزار برای محاسبه وزن صفحه وجود دارد. پنل Chrome DevTools Network اندازه کل بایت را برای همه منابع نشان میدهد و میتواند برای تعیین وزن انواع داراییهای منفرد مورد استفاده قرار گیرد. همچنین میتوانید بررسی کنید که کدام موارد از حافظه پنهان مرورگر بازیابی شدهاند.
فایرفاکس و سایر مرورگرها ابزارهای مشابهی ارائه میدهند.
WebPagetest امکان آزمایش بارگذاری صفحات اول و بعدی را فراهم میکند. شما میتوانید آزمایش را با اسکریپتها (مثلاً برای ورود به یک سایت) یا با استفاده از APIهای RESTful آنها خودکار کنید. مثال زیر (بارگیری developers.google.com/web ) نشان میدهد که ذخیرهسازی با موفقیت انجام شده و بارگذاری صفحات بعدی به هیچ منبع اضافی نیاز ندارد.
WebPagetest همچنین اندازه و درخواست را بر اساس نوع MIME تفکیک میکند.
محاسبه هزینه صفحه
برای بسیاری از کاربران، دادهها فقط هزینه بایت و عملکرد ندارند - بلکه هزینه دارند.
سایت « هزینه سایت من چقدر است؟» به شما این امکان را میدهد که هزینه مالی واقعی بارگذاری سایت خود را تخمین بزنید. نمودار هیستوگرام زیر نشان میدهد که (با استفاده از طرح داده پیشپرداخت) بارگذاری amazon.com چقدر هزینه دارد.
در نظر داشته باشید که این موضوع، مقرونبهصرفه بودن نسبت به درآمد را در نظر نمیگیرد. دادههای blog.jana.com هزینه اینترنت را نشان میدهد.
| طرح داده ۵۰۰ مگابایتی هزینه (دلار آمریکا) | حداقل ساعتی دستمزد (دلار آمریکا) | ساعات کاری برای پرداخت برای طرح داده ۵۰۰ مگابایتی | |
| هند | ۳.۳۸ دلار | ۰.۲۰ دلار | ۱۷ ساعت |
| اندونزی | ۲.۳۹ دلار | ۰.۴۳ دلار | ۶ ساعت |
| برزیل | ۱۳.۷۷ دلار | ۱.۰۴ دلار | ۱۳ ساعت |
حجم زیاد صفحه فقط مشکل بازارهای نوظهور نیست. در بسیاری از کشورها، مردم از طرحهای تلفن همراه با حجم داده محدود استفاده میکنند و اگر سایت یا برنامه شما را سنگین و گران بدانند، از آن اجتناب میکنند. حتی طرحهای داده تلفن همراه و وایفای «نامحدود» نیز عموماً محدودیت دادهای دارند که فراتر از آن مسدود یا محدود میشوند. به همین دلایل، بهتر است تا حد امکان در مورد میزان داده مصرفی صفحه خود شفاف باشید. پست وبلاگ زیر بهترین شیوههای خاص را ارائه میدهد: اعتماد را از طریق شفافیت هزینه پرورش دهید
نکتهی اصلی: حجم صفحه بر عملکرد تأثیر میگذارد و هزینه دارد. بهینهسازی کارایی محتوا نشان میدهد که چگونه میتوان این هزینه را کاهش داد.