چرا به طراحی پاسخگو نیاز دارید؟

​

 ​

 در اینجا 5 دلیل وجود شما برای طراحی پاسخگو آورده شده است

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

طراحی پاسخگو چیست؟

​

 

طراحی وب پاسخگو روشی است برای طراحی وب که تجربه کاربری (UX) را در اولویت اهمیت خود قرار می دهد. یک طراحی پاسخگو متناسب با اندازه صفحه ، دستگاه و جهت گیری هر کاربر ، ایجاد یک UX بهینه برای میز کار ، رایانه لوحی و تلفن های هوشمند است. یک طراحی پاسخگو یک فناوری جدید را نشان نمی دهد ، بلکه نشان دهنده یک رویکرد جدید به فن آوری های موجود است. یک وب سایت پاسخگو با استفاده از یک چارچوب پاسخگو مانند  Bootstrap  و  Foundation ساخته شده است .

آناتومی یک طرح پاسخگو را می توان به 3 جز components تقسیم کرد:

 

شبکه های متناسب با مایع.

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

تصاویر پاسخگو

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

پرس و جوهای رسانه CSS.

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

ظهور طراحی پاسخگو

​

 

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

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

بیایید 5 مزیت اصلی طراحی پاسخگو را بررسی کنیم

​

1. هزینه های توسعه و نگهداری پایین تر

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

2. تجربه کاربر بهبود یافته

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

3. مدیریت وب سایت انعطاف پذیر

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

4. نتایج بهتر سئو

وقتی Google چیزی را پیشنهاد می کند ، باید گوش دهید. همانطور که طراحی واکنش گرا تجربه بهتری از کاربر را نشان داده است ، Google الگوریتم های جستجوی خود را به روز کرده است تا شامل طراحی پاسخگو به عنوان یک عامل حیاتی در تعیین کیفیت وب سایت و رتبه بندی جستجو باشد. علاوه بر این ، با نصب Accelerated Mobile Pages (AMP) در وب سایت خود ، موقعیت خود را در مورد SEO محلی بهبود خواهید بخشید .

5. کاهش نرخ گزاف گویی

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

نتیجه

​

 

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

​

​

5 روش برتر طراحی وب ریسپانسیو از SEO شما سود می برد

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

ما اکنون در یک دوره همراه اول زندگی می کنیم و به سمت یک شاخص همراه اول حرکت می کنیم .

به این دلیل که مصرف کنندگان به تلفن های هوشمند و تبلت ها اعتیاد دارند. و این به زودی تغییر نمی کند.

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

چرا به طراحی ریسپانسیو نیاز دارید؟

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

همانطور که در اواخر سال 2016 منتشر شد ، همچنین دیدیم که از بین افرادی که فقط از یک نوع دستگاه استفاده می کنند ، دو برابر بیشتر از تلفن های هوشمند از طریق رایانه های رومیزی استفاده می کنند.

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

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

به گفته برخی ، تعداد کسانی که نتوانسته اند خود را با تقاضای محیط ریسپانسیو تطبیق دهند ، به 60 درصد می رسد.

این باید باعث نگرانی کسب و کارها شود (ذکر یک انگیزه قوی برای طراحان وب که بدنبال کار هستند!).

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

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

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

1. قابلیت استفاده سایت بهبود یافته است

اگر کاربران نتوانند به راحتی در وب سایت شما پیمایش کنند ، بعید به نظر می رسد که در آن جا بمانند.

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

امتیازات خوب استفاده منجر به تکرار بازدیدکننده و افزایش تبدیل می شود. همانطور که در بالا ذکر شد ، گوگل در تلاش است تا سوالات کاربر را تأمین کند.

طراحی وب با قابلیت ریسپانسیو به تلفن همراه برای تجربه مثبت کاربر بسیار اساسی است و Google قرار است به سایتهایی که با چنین تجربه ای ملاقات کاربران می کنند پاداش دهد.

تجربه مشتری و قابلیت استفاده از سایت را نمی توان بیش از حد تأکید کرد. مشاغل و آژانس های بازاریابی دیجیتال باید در هنگام تبدیل و تجربه مشتری هوشیار باشند.

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

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

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

2. سرعت صفحه سریعتر

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

هر وب سایتی باید برای بارگیری در اسرع وقت بهینه شود تا به شانس رتبه بندی خوب آن در نتایج موتور جستجو کمک کند.

پیام ثابت گوگل در طول سال ها این بوده است که سایت های پر بار در نتایج جستجو مورد علاقه قرار می گیرند.

این فقط یکی از دلایل زیادی است که Google توصیه می کند از طراحی وب ریسپانسیو استفاده کنید.

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

3. کاهش نرخ گزاف گویی

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

Google ممکن است مدت زمان کوتاه (ترک یک سایت تقریباً به همان سرعتی که به آن مراجعه کرده اید) را تفسیر کند به این معنی که محتوایی که جستجوگر در سایت شما پیدا کرده مربوط به نیازهای آنها نیست.

نتیجه این وب سایت تنظیم منفی در رتبه بندی آنها در نتایج موتور جستجوی گوگل برای آن س quال خواهد بود.

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

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

4. محتوای تکراری کمتر

همانطور که الگوریتم های گوگل هوشمند هستند ، هنوز هم از شما مهم است که کدام یک از مطالب وب سایت شما مهم است.

کسانی که تصمیم گرفته اند در مسیر یک سایت جداگانه برای موبایل گام بردارند ، در مدیریت مسائل تکراری محتوای مشکل دارند. استفاده از یک وب سایت جداگانه برای مشتری تلفن همراه خود نیاز به استفاده از URL جداگانه دارد.

مشکل این است که محتوای موجود در آدرس دسک تاپ و تلفن همراه یکسان است ، حتی اگر URL متفاوت باشد.

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

نتیجه تقریباً همیشه رتبه بندی پایین تر در نتایج جستجو است. (اکثر سایت های تلفن همراه جداگانه در موتورهای جستجو رتبه خوبی ندارند زیرا آنها به عنوان همتای دسک تاپ خود متعارف هستند ، این یکی دیگر از مزایای ریسپانسیو است: شما می توانید SEO خود را روی یک سایت متمرکز کنید.)

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

5. اشتراک اجتماعی تقویت شده

طراحی وب ریسپانسیو ساخته شده است تا اشتراک گذاری اجتماعی را برای غالب ترین جمعیت آنلاین - کاربران تلفن همراه آسان کند.

اگرچه رسانه های اجتماعی می توانند به سئو کمک کنند ، اما اشتراکات اجتماعی تأثیر مستقیمی در رتبه بندی نخواهد داشت. اما به رشد مخاطبان کمک می کند.

مخاطبان بیشتر می توانند به معنای بازدید و تعامل بیشتر و همچنین تقاضای جستجوی بیشتر برای نام تجاری شما باشند - که قطعاً باعث توجه Google خواهد شد.

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

تفکر پیش رو: از قبل برنامه ریزی با توجه به کاربران موبایل

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

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

همه اینها با ارائه یک استراتژی واضح تر ، به تلاش شما در زمینه جستجوگرها کمک می کند.

شما در تلاش برای دستیابی به چه کسی و تلاش برای دستیابی به آنها خواهید بود که پایه ای در تلاش شما برای ریسپانسیو در زمینه طراحی وب خواهد بود و منجر به یک استراتژی سئو موثر در جستجوگرها برای وب سایت شما خواهد شد.

SEO طراحی وب ریسپانسیو

ویل کریچلو در ماه نوامبر اعلام کرد که وبلاگ Distilled با یک طراحی ریسپانسیو جدید به روز شده است ، اما اخیراً به نظرم رسید که ما هرگز به جزئیات این که چرا طراحی وب ریسپانسیو بسیار عالی است ، پرداختیم. طراحی ریسپانسیو طی چند ماه گذشته یکی از موضوعات داغ در بازاریابی آنلاین بوده است ، اما آیا واقعاً قرار است این یک استاندارد صنعتی شود؟

پاسخ کوتاه: بله

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

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

چگونه کار می کند؟

خیلی درست به نظر می رسد ، درست نیست؟ همه چیز با یک نظریه نسبتاً ساده از ایتان مارکوت در مقاله ای تحت عنوان " طراحی وب ریسپانسیو " در سال 2010 آغاز شد . صفحات وب ریسپانسیو به جای ایجاد یک صفحه وب واحد با عرض 800 پیکسل و متمرکز شدن روی صفحه ، از عناصری تشکیل شده اند که بر اساس عرض صفحه مرورگر اندازه ، شکل و قرار می گیرند. عناصر با استفاده از پرس و جوهای رسانه CSS اندازه صفحه را تعیین می کنند.

بیایید با استفاده از 9 عنصر مستطیل شکل با برچسب A – I با یک مثال ساده در یک شبکه شروع کنیم. در یک صفحه کوچک ، مانند رایانه لوحی یا رایانه قدیمی با پیکسل کمتر ، عناصر خود را در شبکه 3 * 3 نمایش می دهند:

وقتی صفحه گسترده تر باشد ، این عناصر می توانند گسترش پیدا کنند:

هنگامی که باریک تر می شود ، آنها می توانند:

اکنون ، در اینجا یک زندگی واقعی ، نمونه ای پیچیده و ، شاید بگویم ، مبتکرانه وجود دارد. وب سایت مایکروسافت از این بخشها استفاده می کند:

وقتی صفحه کوچک می شود ، عناصر به طور متفاوتی روی هم قرار می گیرند:

برای مثال تعاملی تر ، به www.microsoft.com بروید و با تغییر صفحه مرورگر از آن لذت ببرید.

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

این نمای دسک تاپ آنهاست:

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

رفتن به نمای رایانه لوحی به اندازه iPad:

هنگامی که صفحه نمایش در هر دو طرف فضای زیادی ندارد ، Smashing Magazine تبلیغات و جستجو را در سمت راست نگه می دارد ، اما ناوبری را به روشی هوشمندانه و قابل توجه به بالای صفحه منتقل می کند ، اما فضای زیادی را اشغال نمی کند .

در اینجا نمای تبلت Kindle Fire آنها به شرح زیر است:

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

و اکنون ، بر روی تلفن همراه:

در نمای موبایل ، تبلیغات همراه با دکمه های اشتراک همچنان از بین رفته اند. پیمایش از یک عنصر ثابت در صفحه به یک کشویی کوچک در بالا تغییر کرده است. با از بین رفتن پیمایش برتر ، نوار جستجو در فضای موجود قرار گرفت.

همانطور که مشاهده می کنید ، طراحی وب ریسپانسیو به شما کنترل شگفت انگیزی می دهد. با برخی از خلاقیت ها ، یک طراحی وب ریسپانسیو می تواند تقریباً همه چیز را از PC-optimized به mobile-optimized ، به هر چیزی در این بین تبدیل کند.

چرا طراحی ریسپانسیو برای سئو خوب است

بنابراین اکنون می دانید که طراحی ریسپانسیو ایده هوشمندانه ای است که با تنظیم صحیح ، از نگهداری وب و ایجاد محتوا می کاهد. اما این چگونه به SEO کمک می کند؟

قابلیت استفاده

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

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

محتوای تکراری

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

رتبه بندی برای جستجوهای تلفن همراه

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

پیوند ساختمان

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

تشخیص زود هنگام فرزندخواندگی

ریسپانسیو بودن سایت خود ، وقتی موضوع داغ است اما تا حد زیادی استفاده نشده است ، توجه شما را جلب می کند. در اینجا چند مثال عالی آورده شده است:

• http://blogs.adobe.com/digitalmarketing/digital-marketing/mobile/responsive-web-design-and-web-analytics/
• http://inspirationfeed.com/inspiration/website-inspiration/60-examples-of-responsive-website-design/
• http://www.clicknewz.com/5984/benefits-of-responsive-web-design-examples/
• و البته Microsoft و Smashing Magazine از این پست.

نتایج

همانطور که احتمالاً حدس می زنید ، اگر سایت شما قبلاً برای رایانه لوحی و / یا تلفن همراه بهینه نشده بود ، شاهد کاهش نرخ گزاف گویی از آن دستگاه ها خواهید بود. ما شاهد انتشار تأثیرات مثبت به سایت اصلی نیز بوده ایم. در سایت یکی دیگر از مشروبات الکلی ، اجرای طراحی وب ریسپانسیو بازدیدها را در طول یک ماه بیش از 400٪ افزایش داد:

این یک نمونه افراطی است. تغییر به طراحی وب ریسپانسیو در وبلاگ Distilled همان تأثیر را نداشت. با این حال ، نتایج مانند این نشان می دهد ، در شرایط مناسب ، طراحی وب ریسپانسیو می تواند نتایج شگفت انگیزی را به همراه داشته باشد.

منفی ها

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

زمان را تنظیم کنید

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

صفحات بزرگ

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

به همین دلیل سایت هایی مانند NYTimes.com و CNN.com دارای نسخه های جداگانه موبایلی هستند که فقط قسمت کوچکی از کل مقاله ها و پیوندهایی را که در نسخه دسک تاپ خود دارند نمایش می دهند. اگر سایتی دارید که از این نظر عظیم است - و به همین معنای بزرگ است - با نسخه های جداگانه موبایل و دسک تاپ همراه باشید.

تجربه کاربر موبایل

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

بنابراین ، آیا طراحی وب ریسپانسیو برای سایت شما مناسب است؟

اگر سایت شما خیلی بزرگ یا پیچیده است و به یک سایت موبایل احتیاج دارد ، احتمالاً از آن آگاه هستید (و احتمالاً قبلاً یک سایت موبایل شگفت انگیز داشته اید که نباید باهاش ​​اشتباه کرد). اما ، اگر سایت موبایلی ندارید یا یک سایت ساده دارید و نمی دانید سوئیچ به یک طراحی وب پاسخگو ارزش دارد ، چه می کنید؟ شما می خواهید کمی تحقیق در Google Analytics انجام دهید:

آیا حتی به سایت موبایل هم احتیاج دارم؟

با رفتن به گزارش نمای کلی موبایل ، که یک گزارش استاندارد در بخش مخاطبان است ، در بخش کشویی تلفن همراه شروع کنید. اگر تعداد بازدید از تلفن همراه و رایانه لوحی کمتر از 5٪ از کل بازدید شما باشد ، احتمالاً لازم نیست نگران ایجاد یک سایت مخصوص موبایل باشید (هنوز: این تعداد فقط در حال رشد است).

اگر بیش از این است ، روی مجموعه هدف یا مجموعه معیارهای تجارت الکترونیکی - از هرکدام برای ردیابی تبدیل ها استفاده می کنید - در بالای صفحه ، در زیر تب Explorer کلیک کنید:

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

سایت موبایل من چگونه به صفحه نمایش آنها نگاه می کند؟

به گزارش های استاندارد> مخاطبان> تلفن همراه> دستگاه ها بروید و بعد اصلی را به "وضوح صفحه" تغییر دهید. با کلیک روی کشویی دیگر در سمت راست خط سایر ابعاد اصلی که می توانید استفاده کنید ، می توانید آن را درست بالای جدول تغییر دهید. 10 رایج ترین وضوح صفحه را که توسط بازدید کنندگان شما استفاده می شود ، امتحان کنید. سایت موبایل شما چگونه به آنها نگاه می کند؟  برای دیدن سایت خود در دستگاه های مختلف از Screenfly استفاده  کنید. شاید تعجب کنید که چند تبلت یا تلفن بزرگ شاهد یک سایت بیش از حد ساده هستند که چندان جذاب نیست. حتی اگر یک سایت موبایل دارید که در 50٪ بازدید از تلفن همراه عالی به نظر می رسد ، اگر در 50٪ دیگر بد به نظر می رسد ، باید طراحی وب ریسپانسیو را در نظر بگیرید.

آیا سایت موبایل من به بازدیدکنندگان آنچه می خواهند می دهد؟

به نرخ گزاف گویی تلفن همراه در بخش گزارشات استاندارد> تلفن همراه> نمای کلی نگاه کنید. وقتی بازدیدکنندگان روی سایت تلفن همراه شما فرود می آیند ، آیا چیزی باعث می شود آنها سریعتر از میز کار بروند؟ بازدیدکنندگان موبایل باید تقریباً همان نرخ گزاف گویی بازدیدکنندگان دسک تاپ را داشته باشند.

اگر وقت دارید ، حسابرسی کامل سئو موبایل را انجام دهید تا واقعاً تشخیص دهید نسخه موبایل سایت شما به چه صورت است. Aleyda Solis یک راهنمای عالی حسابرسی تلفن همراه در مورد وضعیت جستجو نوشت .

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

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

Ethan Marcotte توضیح می دهد که چگونه برنامه نویسی در مقاله اصلی خود کار می کند و توسعه دهندگان برای ایجاد CMS های محبوب (برای وردپرس ، دروپال و جوملا ) تم ایجاد کرده اند .

توجه داشته باشید که اجرای فنی نسبتاً پیشرفته است و تعدادی اشتباه کوچک وجود دارد که باید مراقب آنها باشید:

1. از تصاویر فشرده استفاده کنید

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

2. طراحی برای تمام اندازه های صفحه نمایش

بسیاری از طراحان می خواهند برای یک اندازه تلفن همراه ، یک اندازه تبلت و یک اندازه دسکتاپ طراحی کنند و فقط یک طراحی "ریسپانسیو" ایجاد می کنند که سایت را به طرح دیگری برای اندازه های استاندارد تبدیل می کند. اما ما تلفن های همراه کوچک و بزرگ ، تبلت هایی به اندازه Kindle Fires تا 10 اینچ Samsung Galaxy Tabs و نمایشگرهای رومیزی به اندازه 30 اینچ داریم. طراحی ریسپانسیو بیشتر به اندازه تغییر اندازه عناصر موجود در یک صفحه است زیرا پیکسل های شما بیشتر از این است که یک طرح را به دیگری بکشید. همانطور که طراح استفان هی می گوید ، "ابتدا با صفحه کوچک شروع کنید ، سپس آن را گسترش دهید تا به نظر برسد. زمان قرار دادن نقطه انفصال است! "

3. همیشه تمام مطالب را نشان دهید

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

4. بهینه سازی برای لمس

احتمالاً به طور تصادفی یک رویداد جاوا اسکریپت onmouseover در اندازه تلفن همراه سایت خود قرار نخواهید داد ، اما توجه داشته باشید که رایانه لوحی نمی تواند با ماوس خود معلق شود و ممکن است شخصی در دسک تاپ از ویندوز 8 استفاده کند و بخواهد از تاچ استفاده کند. بهترین روش این است که بدون در نظر گرفتن اندازه صفحه ، سایت خود را فقط با لمس کاملاً قابل دسترسی کنید.

5. تست روی همه مرورگرها

روزهای خوب گذشته را به خاطر می آورید ، وقتی از نیاز به آزمایش وب سایت خود در IE و Firefox شکایت کردید؟ اکنون شما باید:

دسکتاپ:

• IE9 برای ویندوز 7
• IE10 برای ویندوز 8 (که Flash را اجرا نمی کند)
• فایرفاکس
• کروم
• سافاری

تبلت / موبایل

• سافاری
• مرورگر پیش فرض اندروید
• Chrome بتا
• دلفین
• اپرا
• فایرفاکس

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

اما ارزشش را دارد

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

آیا هرکدام از شما سوییچ کرده است؟ توصیه ای برای کسانی که این کار را نکرده اند؟