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

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

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

  1. سوال مطرح کنید.

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

  1. به کدهای خود گوش کنید.

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

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

  1. کنترل دسترسی وب

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

  1. استفاده از فواید بارگذاری شرطی

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

  1. از کدهای css غافل نشوید

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

  1. طراحی با ارتفاع بالا

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

  1. همیشه یک تصویر کلی در ذهن داشته باشید

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

  1. از فضاهای نام در کدهای css خود استفاده کنید

فضاهای نام ها امکان یک دسته بندی خوب و مدون برای فایل های شما را در اختیارتان قرار می دهد. وشما به وسیله آن می توانی تغییرات لازم و نام گذاری های هدفمندی را برای خود انجام دهید.

  1. استفاده از سیستم های بازگشت پذیری حالت

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

  1. عکس های پس زمینه را نیز ریسپانسیو کنید

برای نمایش عکس های پس زمینه خود به صورت ریسپانسیو می توانید از خصیصه size:cove در کدهای css بهره ببرید. همچنین برای دریافت نتیجه بهتر می توانید از background-size:cover نیز استفاده کنید. این کار باعث می شود پیکسل های مرتبط با عکس با تغییر اندازه صفحه نمایش ساختار خود را به صورت منعطف پذیری در آورده تا نمایش درستی در این دستگاه ها داشته باشد.

  1. استفاده از شبهCSS ها

شبه CSSها متدهای رایجی هستند برای کاهش دفعات درخواست تصاویر از سرور. با ترکیب چندین تصویر پس زمینه در یک تصویر و استفاده از کد Background-image و Background-position برای نمایش قطعه ای از تصویر در داخل تصویری بزرگتر می توان تعداد دفعات درخواست به سرور را کاهش داد که بر روی ترافیک وب سایت بسیار تاثیر گذار است.

  1. ترکیب فایلهای CSS در یک فایل

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

  1. حذف کلاس های بدون استفاده

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

  1. بکارگیری CSS بصورت فایل خارجی

به دو روش می توان از CSSها استفاده کرد اول اینکه کدها را بصورت Inline بنویسیم یعنی کدها را در داخل تگ <Style>و در داخل خود صفحات مستقیماً بکار گیریم. دوم اینکه کلیه این کدها را در داخل فایلی متنی نوشته و با پسوند CSS. ذخیره نمائیم و بعد فایل را با تگ Link فراخوانی کنیم. امروزه وب سایت های کمی از روش اول استفاده می کنند، روش دوم بهینه تر است البته درصورت نیاز میتوان از کدهای کوتاه و ویژه در بعضی صفحات استفاده نمود. از مزایای روش دوم می توان به یکپارچگی کدها، حذف کدهای تکراری، کاهش حجم صفحات، سادگی تغییرات در آینده، افزایش خوانایی کدهای صفحات، قابلیت ثبت و ماندگاری در حافظه مرورگرها (یعنی یکبار فایل بارگذاری می شود و چندین بار قابل استفاده است) اشاره نمود.

  1. در کش مرورگر ذخیره سازی کنید

 

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

  1. فعالسازی Keep-Alive

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

  1. استفاده از شبکه تحویل محتوا

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

  1. Redirect ها را کاهش دهید

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

  • هرگز آدرس‌هایی که ریدایرکت می‌شوند را در صفحات خود استفاده نکنید. هر بار که مقصد آدرس تغییر می‌یابد، مرورگر شما نیاز به تغییر و به روز رسانی آدرس خود دارد.
  • هرگز برای رسیدن به منبع مورد نظرتان، از بیش از یک ریدایرکت استفاده نکنید. به طور مثال اگر هدف شما C است و دو نقطه آغاز متفاوت وجود دارد، به نام A و B، این دو باید مستقیما به C ختم بشوند. نه اینکه A به B و سپس به C ریدایرکت شود.
  • از دامنه‌هایی که از ریدایرکت استفاده می‌کنند اما محتوایی ارائه نمی‌کنند، خودداری کنید. گاهی مواقع دامنه‌های اضافی دیگری به یک سایت ختم می‌شوند تا از غلط‌های املایی کاربران در هنگام تایپ سو استفاده کنند.

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