در این مقاله به کلیه اجزایی که برای وبسایت ؛ چه در بخش طراحی و چه در مرحله پیاده سازی باید به آن توجه داشته باشید میپردازیم. تا به عنوان یک صاحب وبسایت در پروسه طراحی و دیزاین علم و آگاهی کافی را داشته باشید
امروزه چشم انداز کسب و کار ترکیبی از تجربیات حضوری و دیجیتالی است. ساخت یک وب سایت با قابلیت پاسخگویی و ارائه خدمات گسترده به مخاطبین، به اعتبار کسب و کار شما کمک می کند زیرا منبع مطمئن و همیشه حاضر از اطلاعات را در یک قالب منسجم، به راحتی در دسترس مشتریان قرار می دهد.
در حالی که ابزارهای مدرن ساخت وب سایت این کار را آسان تر از همیشه می کنند، هنوز هم دانستن آناتومی اولیه یک وب سایت مهم است. هر بخش از وبسایت هدف مشخص به خود را در دنبال میکند و در کنار هم باید به بازدیدکنندگان و مشتریان یک تجربه یکپارچه از کسب و کار شما ارائه دهد.
در ادامه اجزای اصلی صفحه وب را با هم مرور خواهیم کرد:
موارد زیر اجزای اصلی وب سایت هستند. بسیاری از ما در حین گشت و گذار در اینترنت به آنها فکر نمی کنیم، اما اگر گم شده باشند یا به نوعی اتصال ما به اینترنت به یکباره قطع شود و به ناچار در یک صفحه وب بمانیم متوجه آنها می شویم، زیرا آنها عناصر ضروری وب سایت هستند.
هدر قسمت بالای وب سایت شما است که شامل لوگو، منوها، نام برند، دکمه محصولات و تماس با ما و پشتیبانی و … هست .
طراحیهای فعلی بر مبنای هدرهای ساده ای است که سریع بارگذاری می شوند تا هدرهای سنگین و پر از تصویر که نیمی از صفحه را اشغال می کنند.
مهم است که هدر را در همه صفحات سایت خود ثابت نگه دارید تا بازدیدکنندگان بتوانند در هنگام استفاده از همه بخشهای سایت به آن دسترسی داشته باشد.
پاورقی (فوتر) قسمت پایینی وب سایت شما است و به عنوان یک منوی ثانویه عمل می کند. این بخش به طور معمول شامل پیوندهایی (لینکهایی) به شرح زیر است:
حداقل، پاورقی شما باید اطلاعات حق انتشار محتوا و خط مشی رازداری (حفظ اطلاعات کاربران) و شرایط (قوانین سایت) شما را داشته باشد.
اینها جزئیات حقوقی مهمی هستند و همچنین در بسیاری از صفحات وب نقشه سایت در فوتر گنجانده میشود تا در صورتی که شما فرضا در یک صفحه بلاگ قرار دارید نشان دهد که شما فرضا در آرشیو مقالات و در مقاله … هستید. این برای وبسایتهای بزرگ با بخشهای متعدد مفید است، زیرا به کاربران کمک میکند سریعتر در صفحات مختلف سایت وارد شده و جستجوی دقیق تری داشته باشند.
سایدبار یکی از قابل تنظیم ترین بخش های یک صفحه وب هست که بنا به نیاز هر صفحه (بلاگ و یا صفحه محصول) تنظیم میشود.
آنها می توانند در سمت چپ یا راست صفحه یا هر دو طرف باشند و معمولا شامل ترکیبی از موارد زیر هستند:
که بهتر است از موارد فوق صرفا تعدادی را بنا به نیاز نوع صفحه وب انتخاب و بکار ببرید.
بازدیدکنندگان به راهی برای بازدید از بخش های مختلف وب سایت نیاز دارند. منوی شما نقشه سایت شما است و باید در سربرگ قابل دسترسی باشد.
پیوندهای منو باید بر اساس دسته بندی به گونه ای تقسیم شوند که برای کسب و کار شما منطقی باشد – به عنوان مثال، خدمات مسکونی و تجاری برای یک شرکت اجاره املاک.
با کلیک بر روی یک لینک، بازدیدکنندگان به صفحات مختلف وب سایت هدایت می شوند.
در تلفن همراه، منو معمولاً به صورت سه خط که روی هم چیده شده اند (منوی همبرگری) نشان داده می شود. مرورگرها روی منو ضربه می زنند تا گزینه های باز شده را مشاهده کنند. مطمئن شوید که هر صفحه وب به منوی شما پیوند داده شده است و یا در زیر مجموعه آن قرار گرفته است، در غیر این صورت بازدیدکنندگان آن را پیدا نخواهند کرد. منوهای باز شونده می توانند به کاهش شلوغی هدر سایت شما کمک کنند.
بدنه محتوای سایت، قسمت میانی صفحه و بخش اصلی محتوای سایت میباشد که معمولاً به محتوای نوشته شده یک صفحه اشاره دارد، حتی اگر صفحه ای با تصویر سنگین دارید (مثلاً یک گالری عکس)، میتوان گفت که عکس ها محتوای اصلی بدنه هستند چراکه در قسمت میانی و اصلی صفحه گالری قرار دارند.
عبارت «body» به کد HTML این بخش اشاره دارد که به پلتفرم محتوای شما میگوید آن را در فضای باز بزرگ وسط صفحه خود قرار دهید.
صفحات وب به تصاویر بصری نیاز دارند تا توجه بیننده را به خود جلب کنند و به سرعت ارتباط برقرار کنند.
اکثر صفحات حاوی یک تصویر ویژگی (به اصطلاح شاخص) هستند. این تصویر نماینده هر صفحه است. تصاویر دیگر نیز باید گنجانده شوند، اما تصویر ویژگی باید اول باشد.
در وردپرس، یک تصویر شاخص به عنوان تصویر کوچک پست نیز شناخته می شود. این تصویر با صفحه وب ایندکس می شود و در جستجوها به عنوان اتصال بصری برای هر صفحه مشخص ظاهر می شود.
هر وب سایت دارای مجموعه ای از صفحات اصلی است که برای آناتومی یک وب سایت بسیار مهم هستند. و معمولا شامل موراد زیر می شوند:
در ادامه توضیح خواهیم داد که هر صفحه برای چه چیزی است.
این پایگاه اصلی یکی از اجزای اصلی یک وب سایت است. به تمام صفحات دیگر شما پیوند داده می شود و به عنوان یک خوش آمدگویی و معرفی برای بازدیدکنندگان عمل می کند. معمولاً شامل یک تصویر شاخص (نشان دهنده محصول ، خدمات و یا کسبو کار شما) و نیز پیوندهایی به محتوای کلیدی سایت شما، و یک معرفی کلیدی یا مزایای کسب و کار شما است.
لوگویی که در هدر خود قرار می دهید (که باید در هر صفحه باشد، به یاد داشته باشید) باید به صفحه اصلی شما پیوند داده شود، تا در صورتی که بازدیدکنندگان در بخش های مختلف وب سایت گم شده باشند با کلیک بر روی آن به صفحه اصلی سایت برگردند.
صفحه اصلی شما باید ثابت بماند اما همیشه به روز باشد. وب سایت های قدیمی اعتماد مشتری را از بین میبردند چرا که به ندرت اروز رسانی میشدند اما با قابلیتهای جدید طراحی سایت فرآیند بروز رسانی صفحه اصلی به طور اتوماتیک انجام شده و موجب جلب توجه مخاطبین و دنبال کنندگان سایت شما میشود.
صفحه فرود با صفحه اصلی کمی متفاوت است. صفحات فرود معمولاً به یک کمپین تبلیغاتی متصل می شوند و زمانی که سرنخ ها (لیدها) روی یک آگهی یا پست اجتماعی کلیک می کنند ، به این صفحات وارد میشوند تا اطلاعات آنا دریافت و یا به سرعت محصول خاصی را خریداری نمایند.
صفحات فرود ساده هستند و یک تماس مستقیم برای اقدامی که در تبلیغ به آن اشاره شده است، مانند «همین الان خرید کن»، «برای مشاوره رایگان کلیک کن» یا «دانلود محصول جدید» و ….
میتوانید چندین صفحه فرود برای تبلیغات یا کمپینهای خاص ایجاد کنید و باید صفحات منسوخ را کنار بگذارید تا از هدایت سرنخها (لیدها) به محتوای بیفایده جلوگیری کنید.
صفحه “درباره ما” شما یکی از مهمترین موارد در سایت شما است.
اغلب اولین توقف برای بازدیدکنندگان جدید سایت شما است و باید کمی در مورد تاریخچه، ماموریت و ویژگی های متمایز شما در آن آمده باشد.
صفحه تماس شما ضروری است و باید از هر قسمت از سایت شما از طریق نوار کناری یا منوی هدر قابل دسترسی باشد.
این صفحه را ساده و قابل پیمایش نگه دارید. فرم ارسال ایمیل برای ما، آدرس و شماره تلفن، اجزای ضروری این صفحه هستند.
وبلاگ ها ابزارهای فوق العادهای برای هدایت ترافیک به سایت شما هستند. وبلاگ های شما باید از یک صفحه آرشیو وبلاگ که هر پست را به ترتیب لیست می کند و جدیدترین آنها در بالای صفحه قرار می گیرد قابل دسترسی باشد.
همچنین میتوانید بخشی برای پستهای وبلاگ ویژه که میخواهید برجسته کنید یا مکانی برای نمایش محبوبترین پستهای خود داشته باشید.
برای افزایش سرعت بارگذاری، ممکن است لازم باشد پست های وبلاگ را به چندین صفحه تقسیم کنید. مطمئن شوید که پستها را به ترتیب زمانی نگه میدارید، اگرچه ممکن است به بینندگان اجازه دهید مقالات را بر اساس موضوع یا دسته مرتب کنند، به خصوص اگر پستهای زیادی برای نمایش دارید.
روزنامهها تا میشوند و مهمترین داستان معمولاً در صفحه اول و در بالا آن قرار میگیرد، بنابراین حتی زمانی که روزنامه تا شده است، بتوان آن را به سرعت مشاهده کرد.
در مورد بخشهای صفحه وب، «بالا» به معنای محتوایی است که بازدیدکنندگان میتوانند بدون اسکرول کردن صفحه مشاهده کنند.
تحقیقات نشان میدهد که افراد تا ۸۰ درصد از زمان اسکن محتوا (بازدید) خود را صرف محتوای وب بالای صفحه میکنند و بیشتر تصمیم میگیرند که آیا میخواهند برای ادامه خواندن به خود زحمت بدهند و به پایین اسکرول کنند یا خیر.
پس باید محتوایی بالای صفحه خیلی خوب جلب توجه کند، مانند یک عنوان قوی، تصویر شاخص جالب، یا یک خلاصه یکی – دو خطی که بیان میکند صفحه درباره چیست و چرا ارزش مطالعه رو دارد.
وب سایت ها می توانند بیش از یک CTA داشته باشند و می توانند در چندین قسمت مختلف یک صفحه وب قرار گیرند: نوار کناری و هدر رایج ترین آنها هستند.
Call-to-Action بینندگان را دعوت می کند تا کاری برای تعامل بیشتر با برند شما انجام دهند و در صفحه وب شما به عنوان یک پنجره یا فرم ظاهر شوند. عبارات رایج عبارتند از:
CTA ها باید فوری باشند، اما نه سختگیرانه و باید با لحن برند شما مطابقت داشته باشند. معمولاً بیننده باید نام و یک شماره همراه و یا ایمیل در آن ارسال کند.
پس مهمترین صفحات وب شما – صفحه اصلی، تماس با ما، درباره ما و صفحه وبلاگ و … باید شامل یک CTA باشند، حتی اگر به سادگی یک فرم ارسال آدرس ایمیل باشد.
فرم وب صفحه ای است که کاربران به طور داوطلبانه اطلاعات شخصی خود را وارد می کنند. نظرسنجیها، ارسال آدرس ایمیل، بهروزرسانیهای آدرس حمل و نقل و برنامههای وفاداری ، همگی از طریق فرمهای وب پردازش میشوند.
فرم ها را برای مخاطب کوتاه و واضح ایجاد کنید و همیشه بیانیه ای (اطلاعیه ای) در مورد نحوه استفاده از اطلاعات درج کنید. به گفته HubSpot، بهبود تجربه کاربر با فرمهای وب، نرخ تبدیل در کسبوکارها را تا 75 درصد افزایش میدهد.
در سرتاسر جهان، نیمی از کل مرورهای اینترنتی بر روی یک دستگاه تلفن همراه انجام می شود. علاوه بر این، کاربران بیشتری از طریق دستگاه های تلفن همراه خرید می کنند. این بدان معنی است که وب سایت شما باید برای مشاهده و تعامل آسان از طریق تلفن های هوشمند و تبلت ها بهینه سازی شده باشد .
این به طور خودکار اتفاق نمی افتد. برخی از سازندگان وب سایت به سمت صفحات وب سازگار با تلفن همراه طراحی شده اند برای مثال همین سایت نوین گرام با تمام دیوایسها سازگاری کامل را دارد.
صفحات وب خوب قابل مشاهده در موبایل هستند، CTA واضحی دارند و دارای تصاویر باکیفیت (وکتور بیس) هستند.
خدمات ساخت وب مانند وردپرس و Shopify ساخت یک وب سایت بدون دانش فنی پیشرفته را بسیار ساده تر کرده است. اینجاست که اکثر مردم فرآیند طراحی و ساخت یک وب سایت را آغاز می کنند و هر صفحه در اصل یک سری کد است و یک سازنده وب سایت به شما امکان می دهد بدون دسترسی مستقیم به این کد یک وب سایت طراحی کنید.
کاربران از میان یک سری قالب های از پیش طراحی شده انتخاب می کنند که درجات مختلفی از سفارشی سازی را ارائه می دهند و همین پلتفرمهای سازنده وبسایت به مدیران وبسایت اجازه میدهند تا محتوای جدید آپلود کنند، طرحبندی سایت را تغییر دهند، فرمها و فیدهای شبکههای اجتماعی را ادغام کنند و ابزارهای ویژهای به نام افزونهها (پلاگینها) را اضافه کنند.
به بیشتر سازندگان وب، سیستم های مدیریت محتوا نیز گفته می شود، که فقط به این معنی است که می توانید محتوای خود را با استفاده از رابط کاربری بنویسید، ویرایش کنید و پست کنید.
در ادامه به برخی از محبوب ترین سازندگان وب سایت خواهیم پرداخت:
یکی از محبوب ترین سازندگان وب سایت موجود وردپرس است.
با گزینه های سفارشی سازی نا محدود و هزینه سالانه نزدیک به صفر، وردپرس گزینه های بهینه سازی تلفن همراه بسیاری را نیز ارائه می دهد. در حالی که ممکن است مجبور شوید مقداری HTML را اینجا و یا تغییر دهید، اما بیشتر کاربر این سیستم را جزو محبوبترین سازندگان وبسایت میدانند. درست مثل ما 🙂
شاپیفای (Shopify) احتمالاً قابل تنظیم ترین سازنده وب سایت تجارت الکترونیک است که بیش از یک میلیون و نیم کاربر در سراسر جهان دارد. دارای سیستم پرداخت یکپارچه است که آن را به یک انتخاب عالی برای فروشگاه های اینترنتی تبدیل می کند.
اگر میخواهید سریع شروع کنید و در مورد گزینههای سفارشیسازی سختگیر نباشید، Wix انتخاب خوبی است. در حالی که به اندازه وردپرس گزینههای سازماندهی وبلاگ را ندارد، میتواند انتخاب خوبی برای کسبوکارهای کوچکی باشد که میخواهند ویترین فروشگاهی به همراه برخی از گزینههای محتوا داشته باشند.
همه قالبهای Squarespace بهطور خودکار سازگار با موبایل هستند و طرحهای ساده و روشن مورد علاقه عموم است. همچنین نسبت به برخی از رقبا ارزانتر است.
Weebly یک انتخاب خوب برای سایتهای تجارت الکترونیک، رابط بصری دارد و تجربه محدودی را به صورت رایگان ارائه میکند، با سطوحی با قیمت متوسط که عملکردهای اضافی را ارائه میدهد. این یک بخش برنامه ها را به جای افزونه ها (پلاگین ها) را دارد که ممکن است برای کاربران وردپرس آشناتر باشد.
اطلاعات پشت صفحات وب (back end) مانند هاست، دامنه ها و CMS هنوز برای درک کامل آناتومی یک وب سایت مهم هستند. به همین دلیل در ادامه یه مهمترین اجزای آن پرداخته ایم.
پلاگین ها مانند برنامه هایی هستند که قابلیت هایی را به وب سایت شما اضافه می کنند. سازنده وب سایت شما منویی از افزونه های سازگار با رابط کاربری خود را ارائه می دهد. برخی رایگان هستند و برخی دیگر نیاز به خرید اشتراک یا حساب کاربری با یک سرویس شخص ثالث دارند.
دسته بندی پلاگین هایی که می توان در بسیاری از قسمت های یک صفحه وب یافت که معمولا شامل موارد زیر می شوند:
میزبانی وب اساساً املاک کوچک اینترنتی شما است که وب سایت خود را بر اساس آن می سازید. همه وب سایت ها نیاز به خرید هاست دارند، یعنی اجاره فضایی روی سرور برای ذخیره و انتشار محتوای شما. مانند اجاره یک ملک، میزبانی وبسایت هم نیاز به تمدید سالانه دارد.
هر وب سایت دارای یک مکان منحصر به فرد در اینترنت است که با آدرس IP آن قابل دسترسی است. این آدرس یک سری طولانی از اعداد است، بنابراین یک نسخه متنی “مورد پسند انسانها” به نام دامنه وجود دارد.
به نام دامنه، آدرس وب نیز گفته می شود. از فرمول استاندارد پیروی می کند:
www.domainnam
.org، .com، .edu، و غیره.
نام دامنه باید ماهیت وب سایت را تا حد امکان به وضوح بیان کند، بعلاوه به خاطر سپردن و املای آن ساده باشد.
به عنوان مثال، افراد مشهور اغلب نام خود را به عنوان نام دامنه خود انتخاب می کنند. ممکن است یک نام رایج قبلاً گرفته شده باشد یا نامی که املای آن سخت باشد ممکن است پیدا کردن سایت را برای افراد سخت کند.
URL مخفف Uniform Resource Locator است و به مکان دقیق هر صفحه وب اشاره دارد. این شامل نام دامنه شما و اطلاعات صفحه خاص است. نام دامنه به صفحه اصلی سایت هدایت می شود. URL ها به صفحه خاصی در آن سایت هدایت می شوند.
به عنوان مثال: https://www.novingram.com به صفحه اصلی وب سایت رسمی نوین گرام هدایت می شود، در حالی که https://novingram.com/parts-of-a-website/ به صفحه مقالهای که در حال مطالعه آن هستید هدایت میشود.
اکثر سازندگان وب سایت تا حدودی کنترل URL را ارائه می دهند. اگر انتخاب کنید که آن را سفارشی نکنید، به طور خودکار بر اساس نام صفحه وب شما ایجاد می شود.
SSL مخفف Secure Sockets Layer (SSL) لایه سوکت های امن است و نوعی کد است که رمزگذاری امن بین سرور و مرورگر را تضمین می کند.
SSL از داده هایی که بین دو مکان عبور می کند محافظت می کند. این از مهاجمان شخص ثالث که برای رهگیری و سرقط دادههایی که در مرورگر وارد میشود جلوگیری میکند. بنابراین، توصیه می شود هر سایتی که اطلاعات شخصی را درخواست می کند، گواهی SSL دریافت کند.
گواهینامههای SSL در محدودهای با سطوح مختلف حفاظت ارائه میشوند. برای مثال، برای وبسایتهای مالی یا بیمهای معمولاً گواهیهای با امنیت بالاتر طبق قانون مورد نیاز است، در حالی که یک سایت تجارت الکترونیک استاندارد الزامات امنیتی کمتری دارد.
هزینه گواهی همچنین به سطح امنیتی آن بستگی دارد و بیشتر آنها نیاز به تمدید سالانه دارند.
سئو مخفف عبارت Search Engine Optimization و به معنی بهینه سازی برای مرورگر است و راه اصلی برای یافتن وب سایت شما توسط موتورهای جستجو (به ویژه گوگل) است.
اکثر جستجوگران فقط روی صفحه اول نتایج جستجو کلیک می کنند، بنابراین بسیار مهم است که سایت شما برای گوگل مفید به نظر برسد.
این امر از طریق بهینه سازی یا گنجاندن کلمات کلیدی در بخش های مختلف صفحه وب سایت انجام می شود.
انجام تحقیق در مورد کلمات کلیدی مشخص می کند که مخاطب هدف شما به دنبال کدام کلمات کلیدی است. ابزارهای زیادی برای یافتن کلمات کلیدی طراحی شدهاند، تا با استفاده از عملکرد جستجوی پیشبینیکننده گوگل یک راه خوب برای یافتن عبارات جستجوی طولانی به شما پیشنهاد دهد تا سایت خود را جزو نتایج اول گوگل بالا ببرید.
بخش های صفحه وب برای بهینه سازی عبارتند از:
توضیحات متا (Meta Description) : هر صفحه وب دارای توضیحات متا است که توضیح می دهد صفحه در مورد چیست. وب ساز شما به شما این امکان را می دهد که مستقیماً این مورد را ویرایش کنید تا کلمات کلیدی مهم را شامل شود.
برچسب عنوان (Title Tag) : کلمات کلیدی هدف را در عناوین خود قرار دهید تا فوراً به موتورهای جستجو و خوانندگان نشان دهید که این موضوعی است که آنها به دنبال آن هستند.
برچسبهای سربرگ (Header Tags) : استفاده از ترکیب صحیح تگهای هدر برای ساختار سلسله مراتب موضوعات، بهترین روش برای انتشار محتوا در سایت شما است.
متن اصلی (Body text) : از پراکنده کردن کلمات کلیدی در همه جا خودداری کنید، که به رتبه گوگل شما آسیب می رساند. گنجاندن آنها در پاراگراف اول استراتژیک ترین راه برای بهینه سازی صفحات شما است.
کار ما در نوین گرام فقط طراحی سایت نیست ، ما تمام تلاش خود را برای ارائه خدمات نوین در عرصه اینترنت ایران میکنیم تا جایگاه شخصی و بیزنسی شما را ارتقاء دهیم!