در این مطلب می خواهیم درباره ی طراحی سایت ریسپانسیو توضیحاتی ارائه کنیم. طراحی وب سایت ریسپانسیو برای بسیاری از افراد مهم است، اما مولفه های دیگری هم برای موفقیت در بازار دیجیتال با محوریت موبایل ها وجود دارد که در این مطلب با آن ها آشنا خواهیم شد.

از آنجایی که اهمیت کاربران موبایل برای وب سایت ها روز به روز بیشتر می شود نیاز بیشتری برای بهینه سازی طراحی سایت برای این نوع از کاربران نیز احساس می شود. 

حتی در شرایط کنونی هم جستجو های انجام شده توسط موبایل ها برای کسب و کار ها نسبت به جستجو های انجام شده با کامپیوتر بیشتر است. به آمار زیر توجه کنید:

• بخش بزرگی از سرچ های گوگل توسط موبایل ها و تبلت ها انجام می شود.
• 50% سرچ هایی که توسط موبایل ها انجام می شود برای دریافت شماره کسب و کار هایی است که در نزدیکی آن ها وجود دارد.
• بر اساس آماری که توسط BrightEdge ارائه شده است 69% کسانی که با موبایل سرچ انجام داده اند از وب سایتی خرید کرده اند که کالا یا خدمات متناسب با نیازشان را ارایه می کرده اند.

حالا با طراحی وب سایت موبایل، سرعت نسبت به همه ی فاکتور های دیگر در طراحی سایت مهم تر شده است. می توان گفت بیشتر از نصف وب سایت ها برای موبایل ها بهینه سازی نشده اند. 70% وب سایت ها 7 ثانیه زمان می برد تا تصاویر بالا و پایین صفحه را بالا بیاورد.

ارور های رایج سایت ها برای موبایل ها:

• جاواسکریپت و فایل های CSS بلاک شده،
• ناموفق بودن redirect،
• رابط کاربری گرافیکی ضعیف (برای مثال متن بسیار ریز و پیکسل بندی نامناسب تصاویر)،
• کارکرد های نامناسب جستجو بین مطالب سایت،
• بی نظمی بخش های مختلف وب سایت.

درست کردن بسیاری از این مشکل ها نیاز به سرمایه گذاری در یک سیستم مدیریت محتوای ریسپانسیو (CMS) و پیکر بندی برای سایت موبایلی دارد.

همچنین بسیاری سوال وجود دارد که کدام پیکربندی برای وب سایت شما مناسب تر است. طراحی وب سایت ریسپانسیو به عنوان بهترین نوع پیکربندی بازار طراحی سایت موبایل را تسخیر کرده است. اما با توجه به اینکه طراحی سایت موبایل رقابتی تر می شود، آیا این صنعت باید به جلو برود؟

طراحی سایت ریسپانسیو کافی است؟

امروزه طراحی سایت موبایل (فقط برای کاربران موبایلی) از دید یک بازدیدکننده وبسایت خوب تلقی می شود، اما وب سایت از دید سئو و بهینه سازی بشدت صدمه می بیند. علاوه بر این خرید دامین های موبایل گران هستند و هزینه های نگهداری آن ها نیز گران تمام می شود.

برخی از وبسایت ها از طراحی سایت ریسپانسیو در کنار صفحه های سرعت دهی شده برای موبایل ها،AMP، استفاده می کنند تا وبسایتی کاملا موبایل پسند داشته باشند. ولی باید به یاد داشته باشیم که طراحی وبسایت ریسپانسیو برای سرعت نیست، هدف از این نوع طراحی، افزایش کارایی وب سایت برای کاربارن با صفحه نمایش های کوچک تر است.

احتمالا CMS شما پلاگین طراحی سایت ریسپانسیو دارد.

صفحاتی که بصورت ریسپانسیو طراحی شده اند از شبکه های سیال برای نمایش عکس ها به تناسب دستگاهی که وبسایت با آن بازدید می شود، استفاده می کنند. برای تیم های حرفه ای، این کار برتری های طراحی برای موبایل مانند موارد زیر را به دنبال دارد:

• پردازش و مدیریت ریسپانسیو لایه های روی صفحه برای دستگاه های مختلف
• نگه داشتن همه ی محتوا روی یک URL، بر خلاف یک دامین .m
• به صرفه تر بودن نسبت به طراحی سایت فقط برای موبایل
• سایت ها بصورت آفلاین هم با استفاده از HTML5 قابل دسترسی هستند.

درست است که طراحی سایت ریسپانسیو برتری های خود را دارد، اما باید به یاد داشته باشیم که این روش از روش های بسیار ارزان برای بهینه سازی سایت برای موبایل بود. شیوه آسان اجرای این طرح نیز دلیلی بر پر کاربرد بودن آن است.

مشکلاتی که طراحی وب سایت ریسپانسیو دارد همچنان ادامه دارد:

• سرعت بالا آمدن پایین: بیشتر از 10 ثانیه و بدون بهینه سازی روی سایت مناسب
• طراحان هنوز هم باید برای لمس بهینه سازی کنند
• نمایش داده ها بصورت تصویر باید برای صفحه های ریز تر بهینه سازی شوند (مثلا جدول ها و نمودار ها)

پس چرا این کار مهم است؟ درحالیکه طراحی وبسایت ریسپانسیو راه موثری برای انتشارات و کسب و کارهای کوچک است، بسیاری از کسب و کار های بزرگتر به سمت پیکر بندی های پر سرعت تر مانند صفحات موبایل سرعت دهی شده (AMP) و اپلیکیشن های تصاعدی وب (PWA) می روند.

صفحات موبایل سرعت دهی شده (AMP) راه حل هستند یا گمراه کننده؟

صفحات موبایل سرعت دهی شده (AMP) حرکت بزرگ گوگل به سمت سرعت دهی به اینترنت است، اما آیا این کار دقیقا به سمت اهداف خود می رود؟ و آیا به آن ها دست می یابد؟

به عنوان یک پیشگام سریع، AMP در اصل یک فریم ورک HTML است که مانند یک شبکه ی تحویل محتوا کار می کند که ورژن های رها شده صفحات وب را برای سرعت دهی به آن ارائه می کند. AMP ها برای انتشاراتی هایی که مقالات و پست های وبلاگی اخبار را انتشار می کنند بسیار خوب است. این چارچوب مشابه Instant Articles فیسبوک عمل می کند.

هم اکنون چندین موتور جستجو از AMP استفاده می کنند، حتی تبلیغات AdWords نیز از آن استفاده می کند. با استفاده از تگ "Fast Fetch"، این تکنیک سریع تر نیز شده است و کاربری آن نیز آسان تر می شود.

با توجه به صحبت های گوگل، بیشتر از 900,000 دامنه هم اکنون از AMP استفاده می کنند و این تعداد به سرعت در حال افزایش است.

افزایش سود بازگشت از سرمایه کمپین ها با استفاده از صفحه های لندینگ AMP

قبلا هم گفتیم که متوسط زمانی که برای بالا آمدن یک صفحه ی AMP در موتور جستجو گوگل می گذرد کمتر از یک ثانیه است. در هفته های گذشته بیان کردیم که این صفحات دو برابر سریع تر هم شده اند. تعجبی ندارد که AMP بصورت گسترده مورد استفاده قرار می گیرد و بیش از 2 میلیارد صفحه AMP از 900,000 دامین منتشر شده اند. ائی بی(eBay) و چندین وب سایت بزرگ دیگر پس از طراحی سایت AMP در میزان جلب مشتری از طریق جستجوهای موتورهای جستجو پیشرفت داشته اند.

در حقیقت وب سایت های زیادی پس از تبدیل به AMP موفقیت های چشمگیری را گزارش کرده اند،

گوگل هم بیان کرده وب سایت هایی که دارای طراحی صفحه AMP هستند را در اولویت قرار داده است. سرعت وب موبایل مسلما تاثیر زیادی روی تجربه کاربری و نرخ تبدیل شما خواهد داشت. منظور از نرخ تبدیل، میزان تبدیل بازدیدکننده ها و مشتری های احتمالی به خریدار است و منظور از تجربه کاربری، تجربه ای است که کاربر از استفاده از وب سایت شما بدست می آورد.

سایت هایی که از طراحی سایت AMP استفاده کرده اند با استفاده از کش گوگل Google Cache بسیار سریع تر لود می شوند و بالا می آیند، اما مشکلی که دارند هم دقیقا همینجاست.

سرعت بالاتر برای بالا آوردن صفحه را یکی از عوامل تجربه کاربری بهتر می دانیم، اما موردی وجود دارد که ارزش دیجیتال مارکتینگ طراحی سایت AMP را به شدت محدود کرده است.

از آنجاییکه AMP با استفاده از کش گوگل بالا می آید و ورژن دیگری از سند اصلی است، کلیک هایی که انجام می شود به سختی قابل پیگیری هستند و در اصل روی صفحه وب سایت اصلی انجام نمی گیرند. این مورد اثری بسیاری قوی روی جلب موثر بازدید کنندهاست. صفحات وبسایت طراحی شده با AMP نسخه ای ضعیف تر اما سریع وب سایت هستند و برای پست های وبلاگ که اطلاعات زیادی ارائه می کنند بسیار عالی هستند، اما شکافی بین کلیک های داخلی و ارتباط های بعدی بازدیدکننده با وب سایت وجود دارد.

این بدان معناست که فروشگاه های اینترنتی و منتشر کنندگان مطلب در اینترنت بصورت تئوری باید دو ورژن از پیشنهاد های خود را ارائه دهند. در اصل AMP نسخه تبلیغاتی نتیجه جستجو است. 

یکی دیگر از مشکلاتی که طراحی سایت AMP بجای طراحی سایت ریسپانسیو دارد این است که گوگل نمی تواند با مشتری های خود ارتباط داشته باشد.

از کسی که در فضای وب چندان حرفه ای نیست بپرسید که AMP چیست، یا اینکه آیا می توانند طراحی سایت AMP را تشخیص دهند، آن ها فقط به صورت شما با تعجب نگاه خواهند کرد. گوگل در حال تضعیف تجربه کاربری بسیاری از کاربرانش است. دلیل آن هم این است که گوگل به کاربران فردی خود درباره ی AMP هیچگونه اطلاعاتی ارائه نمی دهد اما از طرفی دیگر وب سایت ها را تشویق می کند از این نوع طراحی سایت استفاده کنند.

آیا این حرف ها بدین معناست که طراحی وب سایت AMP باید مورد بی توجهی قرار بگیرد؟ نه دقیقا، همه ی آن به وب سایت شما بستگی دارد. متاسفانه پیکربندی دیگری وجود دارد که برتری طراحی وبسایت ریسپانسیو و رشد استفاده از AMP را تهدید می کند.

استفاده از اپلیکیشن های تصاعدی وب (PWA) چطور؟

اگرچه تعداد بسیار کمی از وب سایت ها از اپلیکیشن تصاعدی وب PWA استفاده می کنند، شاید با این تکنولوژی هوشمندانه آشنا باشید.

اپلیکیشن های تصاعدی وب ( PWA ها) وب سایت هایی هستند که از هر نظر مانند یک اپلیکیشن عمل می کنند اما نیازی به دانلود ندارند.

دسترسی به PWA ها از طریق مرورگر ها و استفاده از جاواسکریپ یا سی اس اس در کنار اچ تی ام ال این امکان را فراهم آورده است تا سرعت بالا آمدنی تقریبا مشابه با اپلیکیشن ها داشته باشند. زمانی که PWA ها با استفاده از URI آن ها توسط کاربر وب بوک مارک یا اشتراک گذاری می شوند عملکرد مورد پسندی دارند.

برتری های اصلی PWA ها:

●      قابلیت کار کردن آفلاین

●      دسترسی جهانی در همه ی دستگاه ها و مرورگر ها

●      سرعت لود کردن قابل رقابت با AMP

●      جابجایی سریع تر بین صفحات وب و کاربری سایت بهتر نسبت به دامین های موبایل قبلی

●      رابط کاربری بسیار مشابه اپلیکیشن

●      قابل لینک دهی و ایندکس شدن

●      قابلیت ارسال نوتیفیکیشن

بصورت کلی از اپلیکیشن تصاعدی وب توسط فروشگاه های اینترنتی استفاده می شود تا زمان بررسی و مشاهده سریع تر و تجربه کاربری بهتر تولید شود. PWA ها می توانند جلب مشتری به وب سایت شما را افزایش دهند و با استفاده از قابلیت آفلاین بودن خود برای نرخ تبدیل بیشتر بازدیدکننده به مشتری استفاده کنند.

اما مشکلاتی هم در استفاده از طراحی سایت اپلیکیشینی وجود دارد. این کار نیاز به سرمایه زیادی دارد و پیاده کردن آن نیز کار آسانی نیست، یعنی باید از یک طراح سایت حرفه ای بخواهید تا این کار را برای وب سایت شما انجام دهد.

یک از سوالاتی که در اینجا پیش می آید این است که چرا روی طراحی اپلیکیشن موبایل سرمایه گذاری نکنیم؟ کاربران صد ها وب سایت را بصورت هفتگی بازدید می کنند و تعداد زیادی اپلیکیشن هم دارند که روی گوشی آن ها نصب شده و مانده است. درخواست اصلی آن ها سرعت بالای لود شدن اطلاعات است که AMP این امکان را می دهد.

با همه ی این مواردی که بیان شد، کدام پیکر بندی برای موبایل مناسب وب سایت شماست؟ به یاد داشته باشید که ما در شروع عصر موبایل ها هستیم پس بالاخره باید یک کاری  برای جلب کاربران موبایلی انجام دهید.

کدام پیکر بندی برای موبایل بهتر است؟

برای وب سایت هایی که می خواهند وب سایت آن ها ترافیک بیشتری داشته باشد بهتر است از طراحی وبسایت AMP استفاده کنند. تعداد زیادی از صاحبان وب سایت ها بدلیل اینکه CMS آن ها پلاگینی برای AMP ندارد در استفاده از آن به مشکل خورده اند. حتی با وجود تلاش های گوگل برای اهمیت دادن به AMP باز هم سیستم های مدیریت محتوای برتر مانند WordPress در بکارگیری درست AMP مشکل داشته اند.

از طرفی دیگر طراحی سایت اپلیکیشنی در همه ی مرورگر ها کار می کنند و بهبود های تصاعدی آن ها، این نوع پیکر بندی را در برابر ویروس ها و محتوای ناخواسته در امان نگاه داشته است.

با در نظر گرفتن سرعت، AMP و PWA سرعت لود کردن تقریبا یکسانی دارند. تنها تفاوت بزرگی که این دو با هم دارند در هدایت بین صفحات مختلف وبسایت است که در PWA برخلاف AMP همه ی صفحات در این فرمت هستند.

از دید رنکینگ (رتبه بندی گوگل)، AMP شاید نشان رنکینگ بهتری باشد (البته کسی نمی تواند هنوز به طور قطع نظری بدهد)، اما اگر PWA ها هم اگر سرعت لود کردن یکسانی داشته باشند از نظر رنکینگ این دو پیکر بندی طراحی وب سایت تفاوت چندانی با یکدیگر نخواهند داشت.

از منظر طراحی وبسایت، AMP مانند یک کابوس است، دلیل آن هم این است که بخش های مهم گرافیکی و رابط کاربری سایت اصلی را بی اهمیت می کند. از طرفی دیگر اما طراحی سایت اپلیکیشنی این امکان را می دهد که همه ی گرافیک ها و المان های طراحی سایت در قالب یک اپلیکیشن موبایل برای کاربر نمایش داده شود.

در پایان، PWA ها یا همان سایت های اپلیکیشنی در همه ی مرورگر ها جواب می دهند.

بهترین راهکار این است که بصورت ترکیبی از هر دو استفاده کنید تا تجربه ی کار کردن با وب سایتی پرسرعت و یکدست را داشته باشید. برند های معروف مانند واشنگتن پست این کار را انجام داده اند. با بهتر دیده شدن در نتایج جستجو و سرعت متون AMP و رابط کاربری اپلیکیشن مانند PWA ها، ترکیب کردن هر دوی آنها می تواند تجربه ی بهتری را به بازدیدکننده ها بدهد.

نتیجه گیری

طراحی سایت ریسپانسیو به عنوان قدم اول بسیار خوب است اما برای کسب و کارهایی که رقبای زیادی دارند کافی نیست. وب سایت هایی که هم از AMP و هم از PWA استفاده می کنند بهترین پیکر بندی برای موبایل را دارند. تنها چیزی که می توانیم بگوییم این است قبل از اینکه خیلی دیر شود وب سایت خود را به وب سایتی موبایل پسند تغییر دهید.