0 925 چهارشنبه 4 فروردین 02:22
طراحی سایت با AMP

طراحی سایت با AMP چگونه است؟

طراحی سایت با AMP

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

 

AMP رو  میشه پروژه ای برای طراحی صفحات وب سایت در موبایل  تعریف کرد. در واقع در طراحی سایت  AMP صفحات به صورت ویژه برای موبایل ها طراحی میشن تا با سرعت بالاتری روی گوشی‌های موبایل بارگذاری بشن. این پروژه توسط گوگل پشتیبانی میشه و یک پروژه آزاده. 

در واقع طراحی سایت  AMP یه  تکنولوژیه که میشه با استفاده از اون هر صفحه‌ای از وب سایت‌ رو برای موبایل بهینه کرد. این بهینه سازی به منظور افزایش سرعت بارگذاری صفحات روی موبایله. از سال 2016 به بعد گوگل طراحی سایت  AMP رو در نتایج جستجو‌های خودش قرار داده و صفحاتی که از این قابلیت پشتیبانی میکنن به صورت ویژه نشون داده میشن.

 

چرا باید طراحی سایت  AMP داشته باشیم؟

 

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

 

لزوم طراحی سایت  AMP و مزیت های اون

 

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

 

برای طراحی سایت با  AMP  باید طبق مراحل زیر پیش رفت :

 

  •   ساختن صفحه AMP Html

 

قطعه کد‌های AMP در کنار کدهای html قرار می‌گیرن. ممکنه کد‌هایی که برای هِدِر سایت نوشته میشن کمی بیشتر باشه، اما این کدها دیده نمی‌شن.

 

  •   ساختن تگ تصویر

 

با استفاده از اکثر تگ‌های html میشه تگ‌های amp html را بازسازی و پیاده سازی کرد؛ اما ساختن تگ‌های تصاویر ممکنه کمی متفاوت باشه، البته تگ‌های خاصی از تصویر در ای ام پی ممنوع هستن، اما مابقی تگ‌ها   رو میشه به راحتی با تگ های ای ام پی جایگزین کرد.

 

  • اصلاح  لایه ها

 

برای طراحی بخش ظاهری سایت‌ها، عموما از Css استفاده میشه. در این حالت عناصر کلاس‌ها و موارد مشابه در هِدِر سایت استفاده و شکل ظاهری سایت‌ها را تشکیل میدن، اما در طراحی سایت  AMP  هر صفحه سایت باید یک Stylesheet جداگانه داشته باشه.

 

  •  پیش نمایش صفحات و بررسی اعتبار آنها

 

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

 

  •  آماده کردن صفحات برای بررسی و کشف کدهای  AMP

 

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

 

 انتشار صفحه بر اساس AMP

 

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

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

 

منبع: رویش نوین 

 

برچسب ها AMP طراحی سایت طراحی سایت با AMP رویش نوین

مطالب اخیر

نکات طراحی هدر

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

7 ایده برای داشتن یک وبسایت جذاب

میون این همه وبسایت جور وا جور، واقعا چطور ممکنه که بتونیم وبسایت خودمون رو راه بندازیم و موفقیت آمیز هم عمل کنیم؟

معرفی 4 ابزار سئوسایت

اگر شما هم کسب و کار آنلاین دارید و دوست دارید اون رو توسعه بدید؛ یا دلتون می‌خواد به عنوان یک سئوکار مشغول باشید؛ در این مقاله همراه ما باشید تا مهم‌ترین ابزارهایی که به دردتون می‌خورن و کارتون رو بهتر می‌کنند؛ بهتون معرفی کنیم...

تفاوت UI و UX

حالا بین همه‌ی شاخه‌های جذاب طراحی و توسعه‌ی وب و مدیوم‌های آنلاین، دو تا رشته بیشتر از همه طرفدار داره: UI و UX دیزاین. پس اگر شما هم از اون دسته افرادید که به این رشته‌ها، طراحی سایت و اپلیکیشن علاقه دارید اما دقیقا به جزئیات اونا تسلط ندارید و نمی‌دونید باید از کجا شروع کنید؛ در این نوشتار کوتاه همراه ما باشید؛ تا همه چیز رو براتون توضیح بدیم...

طراحی سایت با ASP.net core

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

همه چیز راجع‌به PWA.

PWA نوع جدیدی از اپلیکیشن‌های موبایله که از یه تکنولوژی جدید، به نام Progressive Web App  استفاده می‌کنه.این تکنولوژی به صورت اختصاری با نام PWA شناخته و در واقع نوعی پیشرفته‌  از برنامه‌های تحت وب محسوب میشه که همونطور که گفتیم روی موبایل قابل نصب است.

طراحی سایت رو از کجا شروع کنیم؟

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

طراحی اپلیکیشن اندروید

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

مطالب مفید