طراحی استاندارد

استاندارد های طراحی سایت ۲۰۲۰

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

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

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

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

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

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

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

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

اطمینان از سازگاری با مرورگرهای قدیمی

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

در ژانویه سال ۲۰۱۶ ، مایکروسافت پشتیبانی از نسخه های Internet Explorer زیر IE11 متوقف کرد. علاوه بر این ، اکنون همه مرورگرهای اصلی وب “همیشه سبز” هستند ، به این معنی که با شروع مجدد استفاده کاربر از مرورگر ، آنها به روز (آپدیت) می شوند. کمتر احتمال دارد که کاربران از به روزرسانی های مرورگر عقب بمانند.
افزایش رتبه بندی در نتایج موتورهای جستجو:

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

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

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

وب از سه زبان اصلی برنامه نویسی ، HTML ، CSS و JavaScript (JS) تشکیل شده است. جدا کردن این زبانها در پرونده های مختلف به شما امکان بارگیری سریعتر صفحه را می دهد ، زیرا در حالیکه بقیه صفحه در حال بارگیری است، می توانند در پس زمینه بارگیری شوند. CSS در بالای یک صفحه وب ، در بخش head گنجانده شده است ، و به محض بارگیری بقیه مطالب ،به صفحه استایل می دهد.

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

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

اسامی کلاس مورد استفاده نیز باید به مطالب موجود در این عنصر اشاره داشته باشد.
دسترسی به وب و قانون برابری ۲۰۱۰ (UK)

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

در بعضی از کشورها ، از جمله انگلستان ، طبق قانون برابری ۲۰۱۰ ، صاحبان وب سایت به طور قانونی موظف هستند از دسترسی وب سایت برای کاربران معلول اطمینان حاصل کنند.

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

در اکثر اوقات ، مشتریان طراحی سایت ممکن است چنین چیزی را بگویند ، “چرا ما لوگو را در اینجا امتحان نمی کنیم” یا “چرا منو سایت را تغییر نمی دهیم وغیره

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

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

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

در مثال ما (مطالعه ۵۰ وب سایت برتر بازاریابی که در لیست ما از ۱۰ روش مختلف مورد بررسی قرار گرفته است ، استاندارد حداقل ۸۰٪ این سایتها ، مطابق با عملکرد مورد نظر هستند.)

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

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

بنابراین ، بیایید نگاهی گذرا به برخی از استانداردهای طراحی سایت بیاندازیم که ممکن است شما انها را مد نظر قرار نداده باشید.

استانداردهای مهم در طراحی سایت عبارتند از :

قرار دادن لوگو سایت

لوگو در گوشه و بالای صفحه قرار دارد. این عمل ۱۰۰٪ همیشه تأیید شده است.بنابراین این مورد در استانداردهای طراحی وب سال ۲۰۲۰، ۱۰۰٪ پذیرفته شده است.

قرار دادن اطلاعات تماس

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

مکان یابی اصلی منو سایت:

منو سایت معمولاً در بالای صفحه به صورت افقی قرار می گیرد ، که معمولاً استاندارد است.

نمایش اسلایدر در صفحه اصلی

آیا سایت شما دارای اسلایدر در صفحه اصلی است؟این یک استاندارد نیست اگر چه بسیاری از سایت هایی که دیده ایم این کار را انجام داده اند.

باید دارای صفحه کشویی چرخان در صفحه اصلی باشد؟ فقط ۳۲٪ از سایتهای بازاریابی مورد مطالعه این کار را نکرده اند ، اما یک استاندارد نیست اگرچه به نظر می رسد بسیاری از سایتهایی که من می بینم این را دارند … این روزها بیشتر تصاویر استاتیک مورد توجه هستند.

ارزش پیشنهادی بالا در صفحه

تقریباً از هر ۱۰ سایت ۸ مورد حاوی گزاره ارزش “بالاتر از برابر” یا به طور واضح در بینایی هنگام باز کردن صفحه اصلی است. ۲ مورد دیگر اصلاً گزاره ارزشی را مشاهده نکردند.

call to action در بالا صفحه

تقریباً بیشتر سایتها در هنگام باز کردن صفحه اصلی دارایcall to action مناسب هستند. این مورد کمتر از حداقل استاندارد برای انجام دادن است اما بسیار توصیه می شود!

نوار جستجو در وب

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

بخش ثبت نام در فوتر سایت

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

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

اکثر سایت ها دارای لینک شبکه های اجتماعی هستند که معمولا در فوتر قرار می گیرند و این در واقع یک استاندارد است. بازدید کنندگان باید بتوانند به شبکه های اجتماعی سایت نیز دسترسی داشته باشند.