طراحی وب واکنش گرا یک واژه کلیدی در دهه گذشته است و برای دنیای پر از ارتباطات امروز ما کاملاً ایده‌آل می‌باشد. این موضوع سبب شده تا برخی از متخصصان بگویند که طراحی واکنش گرا مانند روزهای ابتدایی Flash است و ما می‌توانستیم بدون هیچ دلیل خوبی هیجان‌زده شویم. با این حال مشکلاتی در رابطه با عملکرد وجود دارد که می‌توان این موارد را تا حدودی با برخی تنظیمات کوچک، فشرده‌سازی و تغییر اندازه تصویر برطرف کرد.
چرا طراحی واکنش گرا می‌تواند آهسته عمل کند
طراحی واکنش گرا تمام المان‌های یکسان HTML در دستگاه‌ها را بارگیری می‌کند؛ حال این دستگاه‌ها می‌تواند تبلت، کامپیوتر و یا غیره باشد. نوع دستگاه استفاده شده اهمیتی ندارد، زیرا اغلب کلیه محتوا (تصاویر، متن‌ها و غیره) تحویل داده می‌شود. مطالعه‌ی انجام شده در سال گذشته نشان می‌دهد که ۸۶ درصد از سایت‌های واکنش گرای آنلاین، یک صفحه‌ی دسکتاپ را به دستگاه‌های موبایل ارائه می‌دهند. در حال حاضر طراحی واکنش گرا اندازه صفحه را بالا می‌برد و این روشی است که باید مورد توجه قرار گیرد؛ به خصوص وقتی می‌فهمید که ۵۷ درصد از کاربران موبایل در صورت بارگیری نشدن سایت در ۳ ثانیه آن را ترک خواهند کرد.
چگونه می‌توان عملکرد را بهبود بخشید؟
کسانی که از قبل یک طرح دارند و به دنبال بهینه‌سازی هستند، می‌توانند از Mobitest برای اندازه‌گیری عملکرد استفاده کرده و به کارهای خود ادامه دهند. بهینه‌سازی هنگام برنامه‌ریزی کردن در مورد یک طرح آسان‌تر خواهد بود. شما همیشه باید عملکرد را به عنوان یک بخش اساسی در طراحی خود تصور کنید.
به منظور بهبود عملکرد، باید اندازه صفحات و منابع بارگیری شده با آن‌ها کاهش یابند. این کارها با استفاده از تکنیک‌های مختلف قابل انجام است و نیازی به تغییر دادن ظاهر سایت ندارد. اولین چیزی که باید در نظر بگیرید این است که مطمئن شوید تنها منابع مورد نیاز به دستگاه‌های هدف ارسال می‌شوند. شما می‌توانید این کار را با به حداقل رساندن تعداد درخواست‌های HTTP به انجام برسانید. با این کار کاربران زمان کمتری را صرف بارگذاری DOM می‌کنند. این به نوبه خود می‌تواند با فشرده‌سازی منابع SCC و Javascript انجام شود، برای این کار می‌توانید از ابزارهایی مثل Compass استفاده کنید. این به توسعه‌دهندگان اجازه می‌دهد تا نشانه‌گذاری‌هایی بهتر و افزونه‌هایی با حداقل مشکل ایجاد کنند.
شما می‌توانید از ابزارهایی مثل UglifyJS برای فشرده‌سازی کد استفاده کنید.
بارگیری مشروط
این می‌تواند یک تکنیک مهم در زمینه طراحی واکنش گرا به حساب آید. زیرا می‌توان از این طریق اطمینان حاصل کرد که کاربران گوشی‌های هوشمند جنبه‌هایی که سبب کند شدن سایت می‌شود را دانلود نمی‌کنند. از بارگیری مشروط می‌توان برای متوقف کردن بارگیری تمام محتواها از جمله ابزارک‌های اجتماعی، تصاویر، نقشه‌ها و غیره استفاده کرد. شما باید به این نکته مهم دقت داشته باشید که سایت باید در هر مرحله از بهینه‌سازی مورد آزمایش قرار گیرد. با این کار شما می‌توانید به راحتی مواردی که سبب بروز تغییر شده‌اند را شناسایی کنید.
تصاویر
همه‌ی ما می‌دانیم که معمولاً تصاویر مسئول بیشترین مقدار مصرف کیلوبایت در یک صفحه وب هستند. تصاویری که برای یک مرورگر دسکتاپ طراحی شده‌اند، هنگام بارگیری شدن در یک دستگاه موبایل، عملکرد و اجرای مشابهی را نخواهند داشت.
اگر یک سایت دارای محتوایی بسیار قدیمی باشد، این بر روی عملکرد آن خیلی تاثیر می‌گذارد. بنابراین برای بارگیری نشدن اینگونه محتواها باید اقداماتی صورت بگیرد. شما می‌توانید با تغییر دادن المان‌های src و img نشانه‌گذاری‌ها را تغییر داده و این کار را انجام دهید. اما احتمالاً استفاده از «PHP solution Adaptive Images» ساده‌تر است. این نرم‌افزار اندازه صفحه را تشخیص می‌دهد و بدون هیچگونه نیازی به تغییر نشانه‌گذاری، به طور خودکار تصاویر HTML مناسب را ایجاد می‌کند. این روش در کنار تکنیک تصویر Fluid یک راه‌حل مفید است که باعث صرفه‌جویی در زمان شما می‌شود. Adaptive Images برای تعیین اندازه صفحه نمایش بازدیدکنندگان سایت از یک فایل htaccess، یک فایل php و یک خط جاوااسکریپت استفاده می‌کند.
متن
متن‌ها ارزش فکر کردن را دارند. زیرا این زمانی رخ می دهد که دستگاه تحت فشار بوده و می‌تواند باعث مشکلات نمایشی شود. Fittext ابزاری است که می‌تواند در این مسئله به شما کمک کند. افزونه‌ی jQuery اندازه‌ی فونت را بروز می‌کند و گزینه‌هایی برای اندازه‌های حداقل و حداکثر مجاز دارد.
این ابزارها برای سرفصل‌هایی که در موبایل‌ها به خوبی نمایش داده نمی‌شوند ایده‌آل هستند. همچنین اجازه می دهند تا CSS3 با تشخیص فونت مربوط آن را نادیده بگیرد. اگر چه FitText تنها برای عناوین در نظر گرفته شده و نباید در متن پاراگراف‌ها استفاده شود.
چرا انتخاب می‌کنیم که واکنش گرا طراحی کنیم؟
مانند سایر فناوری و تکنیک‌های نسبتاً جدید، طراحی واکنش گرا نیز مشکلات خودش را دارد. البته هنوز هم ساخت وبسایت با این روش ارزشمند است. اگر چه ساخت وبسایت برای دستگاه‌های موبایل آسان‌تر است، اما کمی ابتکار عمل به خرج دادن بسیار بهتر خواهد بود.
گوگل نیز با این موضوع موافق است. آن‌ها استفاده از طراحی واکنش گرا را پیشنهاد می‌کنند، زیرا باور دارند که این بهترین روش طراحی کردن برای موبایل است. امروزه این موضوع در عرصه‌ی به اشتراک‌گذاری اجتماعی نیز منطقی است، زیرا ممکن است کاربران موبایل بخواهند صفحه‌ای را در اشتراک کاربران دسکتاپ قرار دهند. برای فراهم آوردن یک تجربه‌ی یکسان، محتواهای ارائه داده شده باید مشابه باشند.
علاوه بر این‌ها داشتن یک سایت واکنش گرا باعث افزایش بهره‌وری در نیروی کار می‌شود، زیرا کارهای بسیار کمتری برای انجام داده شدن وجود خواهد داشت. این امر در زمینه محتوا، بروزرسانی‌ها و سئو کاربرد دارد.
اشکال
موبایل‌ها و تبلت‌ها در حال تبدیل شدن به دستگاه‌هایی کاربردی در اتصال به اینترنت و گشت‌و‌گذار در آن هستند. فروش تبلت‌ها در سراسر جهان تنها در عرض یک سال افزایش پیدا کرده است. حال اکثر مصرف‌کنندگان دستگاه‌های موبایل مختلفی با سیستم عامل‌های اندروید و IOS را انتخاب می‌کنند.
طراحی‌های واکنش گرا در کنار مشکلات عملکردی، تاثیرات مثبتی داشته‌اند. بر اساس گزارش تهیه شده از برخی برندهای برتر جهان، داشتن یک سایت واکنش گرا بر روی ترافیک وبسایت تاثیر گذاشته است. این برندها اعلام کردند که بازدید آن‌ها از تمام دستگاه‌ها به میزان قابل توجهی افزایش یافته است.
این موضوع شامل افزایش متوسط ۲۳ درصدی توسط بازدیدکنندگان موبایل و کاهش ۲۶ درصدی نرخ گزاف‌گویی بوده است. همچنین بازدیدکنندگان نسبت به قبل ۷.۵ درصد زمان بیشتری را در سایت سپری می‌کردند.
O’Neill یک خرده فروشی لباس است که با توسعه دادن یک سایت واکنش گرا اعلام کرده نرخ تبدیل آن در دستگاه‌های IPad و iPhone حدود ۶۵.۷ درصد بیشتر شده است. این به تنهایی سبب رشد درآمد ۱۰۱.۲ درصدی شده است. البته نرخ تبدیل در دستگاه‌های اندروید بهتر بوده است. نرخ تبدیل در این دستگاه‌ها ۴۰۷.۳ درصد بوده و رشد درآمد ۵۹۱.۴ درصدی را به همراه داشته است. شایان ذکر است که ما در سایر دستگاه‌های دیگر شاهد نرخ تبدیل اندکی نیز بوده‌ایم.
این تنها اطلاعات گرفته شده از یکی از این برندهاست. در حال حاضر دریافت اطلاعات از سایر برندها کار تقریباً دشواری است. با این حال این به نوعی ثابت می‌کند که طراحی یک وبسایت واکنش گرا می‌تواند بازده قابل توجهی داشته باشد.
با توجه به این نکته، طراحان برای خلق یک طراحی واکنش گرا به چه دلایل دیگری احتیاج دارند؟ هیچ دلیل دیگری وجود ندارد. طراحانی که به دنبال یادگیری نحوه طراحی، ساخت و بهینه‌سازی سایت با استفاده از تکنیک‌های واکنش گرا نیستند، احتمالاً در آینده با مشکل روبرو خواهند شد. ۶۷ درصد از کاربران می‌گویند که از طریق سایت‌های دستگاه‌های موبایل خرید می‌کنند. تصور می‌شود که استفاده از اینترنت موبایل تا سال آینده از کامپیوترها پیشی بگیرد. به همین خاطر است که اکثر تجارت‌ها راه‌حل‌های کاربردی و خوبی را برای موبایل‌ها ارائه می‌دهند.
شاید در حال حاضر طراحی واکنش گرا در مراحل ابتدایی باشد، اما به نظر می‌رسد که تقاضای بازار سبب رشد سریع آن می‌شود. بنابراین یادگرفتن جنبه‌های این موضوع بسیار ارزشمند است. شما برای بهینه سازی سایت‌های واکنش گرا از چه تکنیک‌هایی استفاده کرده‌اید؟
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید