مشاوره: 23087 21 (98+)

آیا طراحی سایت مهم است

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

طراحی سایت

اهمیت طراحی سایت

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

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

  1. سایت باید از نظر رنگبندی مناسب باشد تا باعث خستگی کاربر نشود
  2. فونت سایت باید خوانا و با اندازه مناسب باشد
  3. بخش های مهم سایت باید در منوی اصلی به راحتی در دسترس کاربر باشد
  4. بخش های با اولویت کمتر در منوهای ثانویه یا ستون های کناری قرار داشته باشد
  5. از پاپ آپ به هیچ عنوان در سایت استفاده نکنید
  6. تا حد ممکن در قسمت بالایی سایت از تبلیغات استفاده نکنید
  7. تبلیغات باید در ستون های کناری یا انتهای مطالب باشد

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

سوالاتی که باید از شرکت طراحی سایت بپرسید

طراحی سایت و انتخاب رنگها

طراحی سایت دینامیک و استاتیک

طراحی سایت و زبانهای برنامه نویسی آن

طراحی سایت و نکات اصلی آن

طراحی سایت واکنش گرا

تاریخچه طراحی سایت

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

طراحی وب سایت

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

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

کلمات کلیدی:

آخرین مقالات

طراحی سایت و زبانهای برنامه نویسی آن

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

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

  • Frontend developer : یعنی طراحی بخشی که کاربر میبیند که به زبانهای html , java , css است.
  • Backend developer : یعنی طراحی استخوانبندی سایت مانند بانکاهی اطلاعاتی , محل های نگهداری فایل ها و اطلاعات کاربران که با زبانهای Php , Asp,Ruby,Python کار میکنند

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

طراحی سایت و زبانهای آن

طراحی سایت

۱ – HTML (HyperText Markup Language)

اولین زبان برنامه نویسی تحت وب که در سال ۱۹۹۰ ایجاد شد و برای طراحی سایت ساده و با امکانات جزئی مورد استفاده قرار میگرفت در سال ۱۹۹۱ اولین سایت اینترنتی توسط آقای Tim Berners Lee به همین زبان نوشته شد و کم کم امکانات بیشتری به آن اضافه شد و با عرضه شدن ورژن ۵ از این زبان در سال ۲۰۱۰ با نام HTML5 انقلابی در طراحی سایت اتفاق افتاد و شروع طراحی سایت واکنش گرا از همین سال بود که به طراح کمک میکرد سایتی ایجاد کند که با هر سایز صفحه نمایش هماهنگی داشته باشد.

کد زیر یک دستور اچ تی ام ال ساده است

<!DOCTYPE html>

<html>

<body>

<h1>A Dummy Heading</h1>

<p>Some text that spans the line.. </p>

</body>

</html>

 

 

۲- CSS (Cascading Style Sheets)

سی اس اس ها در سال ۱۹۹۶ توسط کنسرسیوم جهانی وب یا W3C معرفی شد و باعث شد طراحی سایت جان تازه این بگیرد.این کنسرسیوم مامور است تا استاندارد های لازم در اینترنت و زبانهای برنامه نویسی را ایجاد کند و همه باید از این استانداردها پیروی کنند. با کمک سی اس اس طراح میتوانست قالب سایت را استایل بندی کند و برای متن و تصاویر سایت فقط مشخصات را از فایل css فراخوانی کند که در کدنویسی باعث کاهش زمان میشد.

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

برای مثال شما در فایل css مشخص میکنید که فونت سایت شما Tahoma با سایز ۱۰ باشد که این باعث میشود تمام متون سایت شما با فونت و اندازه مشخص شده نمایش داده شود. حال اگر بخواهید سایز فونت را از ۱۰ به ۱۲ تغییر دهید دیگر نیازی نیست تک تک فایلهای قالب را ویرایش کنید بلکه فقط در فایل css اندازه را از ۱۰ به ۱۲ تغییر میدهید و به همین راحتی کل سایت ویرایش میشود.

سی اس اس هم به مرور زمان دستخوش تغییراتی شد و در سال ۱۹۹۹ ورژن ۳ آن عرضه شد. امروزه از سی اس اس در طراحی سایت به طور بسیار فراگیری استفاده میشود و تقریبا سایتی وجود ندارد که از آن استفاده نکرده باشد.

۳- JavaScript

زبان جاوا هم در سال ۱۹۹۵ وارد طراحی سایت شد و کمک میکرد بخش های جذابی به سایت اضافه شود. برای مثال اسلایدر تصاویر , قابلیت چت , افکت گذاری روی نوشته ها و تصاویر و امکاناتی از این دست که در زمان به بازار آمدن بسیار جذاب بود ولی امروزه استفاده چندانی از آن نمیشود.

کدهای جاوا هم در فایلهای مجزی با پسوند .js ذخیره میشود و از طریق دستورات در قالب فراخوانی میشود.

۴ – PHP: Hypertext Preprocessor

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

زبان php یک زبان طراحی سایت سمت سرور Server Side است. به این معنی که دستورات نوشته شده به این زبان توسط سرور اجرا و ترجمه میشود و نتیجه آن برای کاربر نمایش داده میشود. در این زبان اگر کاربری کد سورس سایت شما را ببیند دستورات ترجمه شده نهایی را میبیند نه کدهای اصلی را

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

۵ – ASP (Active Server Pages)

این زبان هم توسط شرکت مایکروسافت در سال ۱۹۹۳ ارائه شد و فقط بر روی سرویس های میزبانی وب ویندوز قابل اجرا است. قابلیت های آن بسیار شبیه پی اچ پی است و این زبانها به نوعی مکمل زبان html هستند و امکانات جانبی بیشتری به آن اضافه میکنند. زبان ای اس پی هم بصورت سمت سرور است و دستورات ترجمه شده آن برای کاربر نمایش داده میشود.

یکی از مزیت های زبانهای برنامه نویسی سمت سرور مانند : Php,Asp این است که کدهای اصلی این زبانها برای کاربر نمایش داده نمیشود و به همین دلیل کپی برداری و سرقت این کدها کار آسانی نیست و به نوعی محافظت از حقوق برنامه نویس است.

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

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

کلمات کلیدی:

آخرین مقالات

صفر تا صد راه اندازی سایت و طراحی سایت

بسیاری از افرادی که قصد راه اندازی سایت اینترنتی برای خود یا مجموعه ای که در آن کار میکنند را دارند دو سوال اصلی در ذهنشان است :

  1.  طراحی سایت چه مدت زمان نیاز دارد؟
  2. راه اندازی سایت چقدر هزینه دارد ؟

پاسخ دادن به این سوالات به عوامل بسیار زیادی بستگی دارد. مانند :

  • نوع سایت : شخصی یا تجاری
  • سیستم مدیریت محتوی
  • تعداد کاربران و منابع مورد نیاز هاست
  • نوع و تعداد محتوی و صفحات سایت

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

در ادامه روند اجرایی پروژه راه اندازی سایت از ابتدا تا انتها بصورت مرحله به مرحله بررسی میشود.

راه اندازی سایت

صفر تا صد طراحی سایت

۱- تحقیق و برنامه ریزی (۲ تا ۱۰ هفته) :

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

بهتر است قبل از راه اندازی سایت پاسخ سوالات زیر را در ذهن خود آماده کنید

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

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

۲ – دامنه و منابع مورد نیاز (۱ هفته )

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

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

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

راهنمای انتخاب هاست مناسب

کدام پلن هاست برای شما مناسب است

۱۶ نکته قبل از خرید هاست

اصطلاحات رایج در میزبانی وب

چرا از هاست رایگان استفاده نکنیم

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

۳ – طراحی سایت (۴ تا ۱۲ هفته )

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

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

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

مقالات زیر هم اطلاعات بیشتری در موضوع  طراحی سایت در اختیار شما قرار میدهد :

تاریخچه طراحی سایت

۷ نکته مهم در طراحی سایت

آموزش واکنش گرا کردن قالب وردپرس

طراحی سایت و نکات اصلی آن

۴ – محتوی سایت (۵ تا ۱۵ هفته)

یک بخش مهم در طراحی سایت و راه اندازی سایت , انتخاب و تولید محتوی برای سایت است.
هرچه شما به زیبایی ظاهری سایت اهمیت بدهید ولی از نظر محتوی ضعیف باشید در عمل شکست میخورید چون این محتوی سایت است که باعث جذب کاربر به سمت شما میشود و همین کاربرها به خریداران و مشتریان شما تبدیل میشوند.

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

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

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

مطالبی که منتشر میکنید باید حداقل ۳۰۰ کلمه باشد و پیشنهاد موتورهای جست و جو این است که مقاله شما باید بین ۱۵۰۰ تا ۲۰۰۰ کلمه باشد تا بتواند در نتایج جست و جو رتبه خوبی کسب کند.

نکاتی که باید در نوشتن مقالات و محتوی سایت خود رعایت کنید :

  • حداقل ۳۰۰ کلمه باشد و مقالات بیش از ۲۰۰۰ کلمه به دو قسمت تقسیم شوند
  • یک کلمه کلیدی برای مقاله خود در نظر بگیرید و در پاراگراف اول و آخر حتما از آن استفاده کنید و در میان متن هم چند بار آن را تکرار کنید
  • متون طولانی را پاراگراف بندی کنید و کلمات مهم را بصورت پر رنگ یا زیرخط دار نمایش دهید
  • کلمات کلیدی خود را با تگ H1 تا H3 در متن مشخص کنید
  • حتما از یک تصویر مرتبط با متن در مقاله خود استفاده کنید و در تگ alt تصویر از کلمه کلیدی استفاده کنید.موتورهای جست و جو نمیتوانند تصویر را ببینند اما از روی تگ alt تشخیص میدهند آن تصویر چه موضوعی دارد.

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

۵ – تست اولیه (۲ تا ۶ هفته)

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

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

۶- رونمایی سایت (۱ روز)

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

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

۷- توسعه ( همیشگی)

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

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

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

کلمات کلیدی:

آخرین مقالات

طراحی سایت و نکات اصلی آن

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

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

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

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

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

برای هر سایت از ترکیب ۲ تا۳ رنگ مختلف استفاده کنید. استفاده از رنگهای بیشتر از این باعث شلوغ سایت خواهد شد.

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

۴ – رنگ متن : بهتر است رنگ متن سایت مشکی با پس زمینه سفید باشد. در این صورت کاربر هنگام خواندن متن دچار خستگی چشم نمیشود و میتواند مقالات شما را کاملا مطالعه کند. استفاده از رنگ های تند برای متن سایت باعث میشود کاربران سایت شما را ترک کنند.

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

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

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

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

۹ – تکنولوژی : برای طراحی سایت تا جایی که میتوانید از جدیدترین تکنولوژی های برنامه نویسی تحت وب مانند : Html 5 , Jquery ,bootstrap  و این دست فریم ورک ها استفاده کنید که قابلیت های فراوانی در اختیار شما قرار میدهد و امنیت بیشتری هم دارد. برای آشنایی بیشتر به مقاله تاریخچه طراحی سایت مراجعه کنید.

۱۰ – خاص بودن : قالبهای رایگان فراوانی در بازار وجود دارد که میتوانید از آنها برای سایت خود استفاده کنید اما فکر کرده اید چند نفر مثل شما از همان قالب استفاده کرده اند و سایت شما ممکن است از نظر کاربر تکراری باشد.همچنین این قالب های رایگان و قفل شکسته که در اینترنت به وفور یافت میشوند پر از مشکلات ظاهری و فنی هستند.

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

تجربه کاربر                     User Experience

۱۲ – سرعت سایت : باید دقت کنید صفحات سایت سبک باشد و در کمتر از ۵ ثانیه برای کاربر نمایش داده شود. اگر بیشتر از این زمان طول بکشد اکثر کاربرها با زدن دکمه برگشت به سراغ سایت بعدی میروند و در حقیقت نرخ پرش سایت شما افزایش یافته است.

۱۳ – واکنش گرا : در طراحی سایت باید دقت کنید که حتما قالب واکنش گرا باشد زیرا امروزه اکثر افراد با تلفن همراه و تبلت و حتی تلویزیون های هوشمند وب گردی میکنند پس یابت شما باید بتواند با هر دستگاهی و هر سایز صفحه نمایش هماهنگ شود. اگر قالب فعلی سایت این قابلیت را ندارد مقاله آموزش واکنش گرا کردن قالب وردپرس راهنمای خوبی برای شما خواهد بود.

۱۴ – منو ها : بخش بسیار مهم سایت منو ها هستند که بازدیدکنندگان با کمک آنها میتوانند به راحتی به بخش مورد نظر خود هدایت شوند. صفحات مهم سایت را در منوی اصلی سایت در بالای سایت قرار دهید و باقی صفحات را به منو های ثانویه و ستون های کناری سایت منتقل کنید.

۱۵ – اسکرول : سایت شما باید قابلیت اسکرول به پایین را داشته باشد. اما نباید در موبایل و تبلت نیازی به اسکرول به چپ و راست داشته باشد.

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

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

۱۸ – دکمه های مهم : در تمام سایتها دکمه های وجود دارد مانند : دکمه خرید , ثبت نام در خبرنامه , دانلود محصول و …. که این دکمه ها باید با رنگ بندی خاصی مشخص شود تا توجه کاربر جلب شود و همچنین این دکمه ها باید سایز بزرگتری داشته باشد.

۱۹ – خوانایی : متن سایت باید با یک فونت استاندارد و خوانا مشخص باشد. فونتی که بر روی تمامی نمایشگر ها بصورت خوانا قابل دیدن باشد و مطالعه آن باعث خستگی چشم نشود.

۲۰ – شفاف سازی : باید در سایت از خود اطلاعاتی به کاربر بدهید و خودتان و سابقه فعالیت هایتان را بصورت شفاف معرفی کنید. با این کار اعتماد کاربر بیشتر میشود و بهتر میتواند از خدمات شما استفاده کند.

۲۱ – آماده سازی : کاربران ورودی سایت را مستقیما به صفحات فروش محصول هدایت نکنید . بلکه اول اطلاعاتی به او بدهید و ذهنیت او را برای خرید آماده کنید. بعد در مرحله آخر او را به صفحات ویژه فروش هدایت کنید.

۲۲ – لینک سالم : تمامی لینک های سایت را بررسی کنید تا  مطمئن شوید که سالم هستند و لینک شکسته در سایت وجود ندارد.

۲۳ – متن لینک : متنی برای لینک خود انتخاب کنید که کاربر قبل از کلیک رو آن متوجه موضوع آن لینک بشود.

بجای اینکه کلمه اینجا کلیک کنید را لینک کنید میتوانید یک کلمه که مرتبط با صفحه مورد نظر است را لینک کنید که کاربر متوجه شود به چه صفحه ای هدایت خواهد شد.

۲۴ – لینک خارجی : تمامی لینکهای که از سایت شما به سایتهای دیگر داده میشود باید در پنجره جدید باز شود. این کار در کاهش نرخ پرش بسیار موثر است.

۲۵ – فرم ها : اگر در سایت خود فرم ثبت نام و خرید و …. دارید سعی کنید تا حد ممکن آنها را مختصر کنید و سوالهای اضافی از کاربر نپرسید. همچنین اگر میتوانید کدهای Captcha  را از فرم های خود حذف کنید.

۲۶- پر شدن خودکار : فرم های سایت شما باید این قابلیت را داشته باشند که بصورت خودکار توسط مرورگر کاربر پر شوند.

۲۷ – دادن تاییدیه : وقتی یک کاربر در سایت شما فرمی را پر میکند باید در انتها  پیغام مناسبی به او نمایش داده شود که کاربر بفهمد فرم با موفقیت ارسال شده یا خیر که متاسفانه بسیاری از طراحان این نکته را فراموش میکنند.

۲۸ – اطلاعات تماس : برای اعتماد سازی هرچه بیشتر سعی کنید در کنار تمامی فرم های سایت خود اطلاعات تماس را هم منتشر کنید که اگر به هر دلیلی کاربر نتوانست از طریق آن فرمها به خواسته خود برسد . بتواند به صورت مستقیم با شما در ارتباط باشد.

محتوی                  Content

۲۹- تعداد صفحات : در طراحی سایت نیازی نیست که صدها صفحه برای یک سایت ایجاد کنید بلکه میتوانید در چند صفحه اصلی سرویس ها و کالای خود را معرفی کنید به این ترتیب مدیریت آن برای شما راحت تر خواهد بود و کاربر هم سریعتر به هدف خود میرسد.

۳۰ – صفحه اصلی : مهم ترین بخش یک سایت که اگر درست طراحی شود میتواند یک بازدیدکننده عادی را به یک خریدار تبدیل کند.پس باید دقت فراوانی در طراحی صفحه اول سایت داشته باشید.

۳۱ – محتوی همه چیز است : اگر هدف بلندمدت برای موفقی در فضای اینترنت دارید باید روی تولید محتوی تمرکز کنید.در میانه میلیونها سایت اینترنتی فقط یک محتوی خوب و کاربردی میتواند در نتایج جست و جو جایگاهی داشته باشد.

۳۲ – اسپم : هرگز افرادی که در خبرنامه سایت شما عضو هستند را با مطالب بیمورد و تبلیغات اسپم نکنید.

۳۳ – تصاویر: در یک متن طولانی یا توضیح یک موضوع تخصصی انتشار یک تصویر مناسب میتواند به اندازه صدها خط توضیح در انتقال مفاهیم موثر باشد.

۳۴ – ویدئو ها : برای مطالب آموزش از ویدئو استفاده کنید و این کار تا حد بسیار زیادی نرخ تبدیل کاربران را افزایش میدهد.

۳۵ – به روز رسانی : یک سایت راکد و بدون فعالیت هیچ کاربری نخواد داشت و جایگاهی در نتایج هم ندارد.پس باید در فواصل زمانی منظم سایت خود را آپدیت کنید.

۳۶ – وبلاگ : یکی از مهمترین بخش های سایت است که مقالات شما در آن قرار میگیرد و میتوانید اطلاعات مهم در مورد محصولات را در آن قرار دهید.

۳۷ – شبکه های اجتماعی : بخش بسیار مهمی از ترویج و جذب کاربر به سایت بر عهده شبکه های اجتماعی است که به شما کمک میکند به صورت رایگان خودتان را به میلیونها کاربر از سراسر جهان معرفی کنید. البته باید دقت کنید تا اشتباهات رایج در شبکه های اجتماعی را مرتکب نشوید.

۳۸ – هدفمندی : اگر سایت شما جنبه عمومی ندارد و کالای خاصی ارائه میکنید پس فقط به دنبال جذب کاربران هدف خود باشید تا نتیجه بهتری بگیرید.

۳۹ – گرامر : باید دقت کنید که در متن شما غلط املایی و گرامر وجود نداشته باشد تا کاربر دچار چند فهمی و اشتباه نشود.

۴۰ – برتر بودن : در دنیای پر رقابت سایتهای اینترنتی فقط به بهترین بودن و رتبه اول نتایج گوگل فکر کنید.

۴۱ – صفحات فرود : برای فروش کالاهای خود صفحات فرود Landing page طراحی کنید و به طور خلاصه امتیازات مثبت محصول خود را در ان منتشر کنید.

۴۲ – سئو : یک بخش بسیار مهم در طراحی سایت قابلیت سئو بودن آن قالب است. یعنی قالب برای موتورهای جست و جو از نظر کدنویسی بهینه باشد تا بتواند رتبه خوبی کسب کند.

۴۳ – رتبه بندی : سایت شما باید در نتایج جست و جو رتبه خوبی داشته باشد که بتوانید فروش بیشتری داشته باشید.همه در حال تلاش هستند تا به صفحه اول نتایج گوگل دست پیدا کنند.

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

توسعه                      Development

۴۴ – سیستم مدیریت محتوی : بجای ساعتها برنامه نویسی و ایجاد یک سایت از صفر میتوانید از صدها سیستم مدیریت محتوی موجود در اینترنت نظیر: وردپرس , جوملا و … استفاده کنید.

۴۵ – امنیت کاربران : وقتی شما قصد فروش کالایی به کاربران دارید پس تامین امنیت روند خرید و فعالیت کاربران در سایت بر عهده شماست.

۴۶ – پاداش : اگر فرم ثبت نامی در سایت دارید در مقابل این ثبت نام و اعتماد کاربران برای آنها پاداشی در نظر بگیرید. مانند یک کتاب الکترونیکی یا یک کد تخفیف

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

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

۴۹ – برون سپاری : در طراحی سایت اگر تخصص و زمان کافی در اختیار شما نیست میتوانید از طریق برون سپاری آن پروژه را به یک شخص متخصص بسپارید.

۵۰ – رعایت اصول : رعایت اصول برنامه نویسی و بخش بندی های سایت یک بخش مهم در طراحی سایت است

۵۱ – سرعت سایت : که میتوانید با خرید هاست مناسب و همچنین استفاده از یک سرویس CDN تا حد زیادی سرعت سایت را افزایش دهید.

۵۲ – تصاویر مرتبط : سعی کنید تا جای ممکن از تصاویر مرتبط با موضوع سایت در طراحی سایت استفاده کنید.

۵۳ – متن بیش از حد : اگر مقالات سایت شما طولانی هستند سعی کنید آنها را به چند بخش تقسیم کنید و با پراگراف بندی و استفاده از تگ های H1 . H2 مطالب مهم را مشخص کنید.

۵۴ – کدهای اضافی : بعضی کدهای زیباسازی که در طراحی سایت استفاده میشود مانند : خوش آمدگویی هنگام ورود کاربر , پرسیدن سن و تاریخ تولد , خداحافظی هنگام خروج کاربر و ….. اینگونه کدها دیگر منسوخ شده اند و بهتر است از سایت حذف شوند.

۵۵ –  فوتر سایت : بخش انتهایی سایت که به آن فوتر گفته میشود محل خوبی برای قرار دادن لینک دوستان و همچنین لینک بخشهای اصلی سایت است.

آینده سایت Future

۵۶ – رفع مشکلات : از کاربرهای سایت بخواهید که اگر مشکلی در سایت وجود دارد حتما به شما خبر بدهند و هرچه سریعتر ان مشکل را رفع کنید.

۵۷ – آنالیز رقبا : سایتهای همکار خود را بررسی کنید و از نقاط قوت آنها برای بهبود سایت خود استفاده کنید.

۵۸ – راهنما باشید : در دنیای اینترنت امروز فقط سایت هایی موفق هستند که با دادن اطلاعات جامع و کاربردی به کاربران بتوانند رتبه خوبی در نتایج گوگل داشته باشند.

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

۶۰ – همگام سازی : در طراحی سایت باید دقت کنید که سایت شما قابلیت گسترش داشته باشد و بتواند با تکنولوژی های آینده تطبیق پذیری پیدا کند.

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

۶۱ – فلش : استفاده از فلش در طراحی سایت و زیباسازی آن بسیار موثر است اما نباید در این کار زیاده روی کرد چون باعث کند شدن سایت و سنگینی صفحات میشود.

۶۲ – پاپ آپ : هیچکس علاقه ای به این پنجره های مزاحم ندارد.پس از پاپ آپ در هیچ جای سایت استفاده نکنید.

۶۳ – پخش اتوماتیک : اگر در سایت خود از فیلم و صدا استفاده میکنید حتما برای آن دکمه پخش و توقف قرار دهید و قابلیت پخش اتوماتیک را از روی آن حذف کنید.

۶۴ – تبلیغات : همه سایت ها برای ادامه دادن و کسب درآمد از تبلیغات در سایت استفاده میکنند. اما باید تعادل را حفظ کنید و با تبلیغ بیش از حد باعث آزاد کاربران نشوید.

۶۵ – اسلاید شو : یک بخش دیگر در طراحی سایت ایجاد اسلاید شو است. با کمک اسلاید شو میتوانید مطالب مهم و اصلی سایت را به کاربران نمایش دهید اما دقت کنید که این اسلاید شو ها زمانبندی مناسبی داشته باشد که برای کاربر قابل دیدن باشد و کاربر بتواند در صورت نیاز روی آن کلیک کند.

۶۶ – تکنولوژی های منسوخ : اگر مدتهاست از طراحی سایت شما گذشته و سایت شما قدیمی شده بهتر است به فکر طراحی یک قالب نو باشید و از تکنولوژی های جدید برنامه نویسی تحت وب در آن استفاده کنید.

۶۷ – تصاویر متحرک  : استفاده از تصاویر متحرک یا Gif سالها پیش در طراحی سایت مرسوم بود اما دیگر جایگاهی ندارد و خوب نیست که زیاد از این تصاویر در سایت استفاده کنید.

۶۸ – حروف بزرگ : در نوشتن محتوی سایت نیازی نیست تمام کلمات را با حروف بزرگ بنویسید. چون کاربری که این متن را میخواند احساس میکند شما در حال فریاد زدن هستید که اصلا خوشایند نیست .

۶۹ – زیرخط : استفاده از زیرخط هم باید به اندازه لازم باشد. کلمات مهم و لینک ها را زیرخط دار کنید و نیازی نیست کل متن به صورت زیرخط دار باشد چون باعث اذیت شدن کاربر و ناخوانایی متن میشود.

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

طراحی سایت

برای انتشار اینفوگرافیک در سایت خود از کد زیر استفاده کنید

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

کلمات کلیدی:

آخرین مقالات

آموزش واکنش گرا کردن قالب وردپرس

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

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

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

قالب واکنش گرا

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

در این مقاله واکنش گرا کردن قالب پیش فرض TwentyTen در سیستم مدیریت محتوی وردپرس آموزش داده میشود. اما شما میتوانید همین تغییرات را بر روی هر قالب دیگری انجام دهید و آن قالب را Responsive کنید.

برای شروع باید به سراغ فایل Style.css بروید و تغییرات زیر را در آن ایجاد کنید.

برای دسترسی به این فایل از مسیر زیر استفاده کنید :

پنل مدیریت وردپرس >>> نمایش >>> ویرایشگر >>> فایل Style.css

در مرحله اول کد زیر را در انتهای فایل لضلفه کنید :

@media only screen and (max-width: 480px) {
}

افزودن این کد به مرورگر میگوید که اگر سایز صفحه نمایش کاربر کوچکتر از ۴۸۰ پیکسل باشد نسخه موبایل سایت برای او نمایش داده شود.

۴۸۰ پیکسل حداکثر عرض  صفحه نمایش برای اکثر گوشی های هوشمند موجود در بازار است.

و برای پشیبانی از تبلت ها که عرض صفحه نمایش آنها ۹۵۹ پیکسل است از کد زیر استفاده کنید :

@media only screen and (min-width: 768px) and (max-width: 959px) {

}

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

مرحله بعد افزوردن کد زیر است :

#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper, #site-title {

width:400px;

}

و کد زیر :

#container {
width:100%;
}

مفهوم کدهای بالا این است که محتوی میتواند ۱۰۰% از عرض صفحه نمایش را بگیرد که عرض صفحه نمایش هم ۴۰۰ پیکسل تعریف شده است.

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

#branding img {
display:none;
}

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

#branding img {
width:100%
}

کد بالا مشخص میکند که اندازه تصویر هدر باید ۱۰۰% عرض صفحه نمایش باشد که در ابتدا ۴۰۰ پیکسل مشخص شد.

مرحله بعدی عنوان سایت است که برای مخفی کردن آن در نسخه موبایل از کد زیر :

#site-description{
display:none;
}

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

#site-description{
float:left;
}

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

#access{
width:100%;
}

و کد زیر برای هم عرض کردن بخش محتوی و نوار کناری  :

#content{
width:100%;
}

برای قسمت پست های سایت از کد زیر :

.hentry{
margin-left:-13px;
}

و برای مخفی کردن نوار کناری (ساید بار ) و هم عرض کردن نوار پایینی سایت (فوتر) از کد زیر استفاده کنید :

#primary{
display:none;
}

This one resizes the footer section:</pre>
<blockquote>
#footer{
width:100%;
}

و در پایان کد ها زیر برای کوچک کردن نام ورودپرس و حاشیه مشکی قسمت فوتر مورد استفاده قرار میگیرد :

#site-generator {
float:left;
margin-top:5px;
}

#colophon {
width:100%;
}

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

تمامی کد های بالا در کادر زیر وارد شده است که برای راحتی کار میتوانید از همین کادر تمام کدها را کپی کنید و در فایل style.css قرار دهید.

#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper, #site-title {
 
width:400px;
 
}

#container {
width:100%;
}

#branding img {
width:100%
}

#site-description{
float:left;
}

#access{
width:100%;
}
#content{
width:100%;
}

.hentry{
margin-left:-13px;
}

#primary{
display:none;
}
 
This one resizes the footer section:</pre>
<blockquote>
#footer{
width:100%;
}

#site-generator {
float:left;
margin-top:5px;
}
 
#colophon {
width:100%;
}

فایل ویدئویی زیر آموزش کامل انجام تغییرات برای واکنش گرا کردن قالب پیشفرض وردپرس میباشد :

کلمات کلیدی:

آخرین مقالات

طراحی سایت واکنش گرا

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

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

در تاریخچه طراحی سایت خواندید که اواخر سال ۲۰۱۰ کنسرسیوم W3C ورژن پنج زبان Html را ارائه کرد و به نوعی انقلابی در وب ایجاد کرد زیرا طراحان میتوانستند امکانات بسیار جدیدی به سایت اضافه کنند و یکی از آنها که خیلی زود فراگیر شد و به یک استاندارد تبدیل شد طراحی سایت واکنش گرا بود.
برنامه نویسان توانستند با کمک زبان اچ تی ام ال ۵ و فریمورک هایی نظیر بوت استرپ سایت هایی طراحی کنند که در تمامی دستگاه های همراه به درستی نمایش داده میشد و کاربران هیچ مشکلی در هنگام استفاده از آن سایتها نداشتند.
وقتی یک سایت واکنش گرا طراحی میکنید , در واقع با درخواست مرورگر کاربر ابتدا عرض صفحه نمایش او سنجیده میشود و سپس نسخه مناسب و بهینه سازی شده از سایت به مرورگر کاربر فرستاده میشود و در واقع در طراحی سایت واکنش گرا برای هر نوع صفحه نمایش یک نسخه بهینه سازی شده از سایت نمایش داده میشود که ممکن است با نسخه اصلی سایت تفاوت داشته باشد. البته این تفاوت از نظر سایز تصاویر و محل قرارگیری منو های سایت است و سیستم رنگ بندی و محتوی سایت تغییری نمیکند.

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

طراحی سایت واکنش گرا

برای انتشار اینفوگرافیک در سایت خود از کد زیر استفاده کنید

مزایای طراحی سایت واکنش گرا :

  • کاربر مجبور نیست برای مطالعه مطالب شما زوم کند و مطالب با سایز مناسب به او نمایش داده میشود.
  • در سایت واکنش گرا نیازی به اسکرول کردن به چپ و راست نیست و مطالب با توجه به عرض صفحه فیت میشود.
  • منو های کاربری بهینه سازی شده اند و به راحتی در دسترس کاربر هستند.
  • به دلیل راحتی کاربر در استفاده از سایت زمان ماندن کاربر در سایت Time on Page افزایش میابد و همین باعث کاهش نرخ پرش Bounce Rate میشود.
  • در سال ۲۰۱۲ شرکت گوگل به همه سایت ها تاکید کرد که باید واکنش گرا باشند و این یک امتیاز مثبت در رنکینگ سایت است.

در حال حاضر ۴۶% از کاربران هنگام مشاهده نسخه موبایل سایت ها با مشکل مواجه میشوند و ۴۴% از کاربران بیان کرده اند که کار کردن با نسخه موبایل سایت ها سخت است و همین دلایل باعث میشود اگر شما واکنش گرا نیستید به زودی تعداد زیادی از مشتریان خود را از دست خواهید داد . چون آنها ترجیح میدهند وارد سایتهای واکنش گرا بشوند و زودتر و راحت تر به خواسته خود برسند.

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

کلمات کلیدی:

آخرین مقالات

وب سایت های واکنش گرا بهترین گزینه برای سئو

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

سئو در طراحی سایت

خرید و فروش موبایل ازخرید و فروش تجهیزات دسکتاپ و استفاده از موبایل اینترنت سبقت گرفته است و پیش بینی شده است که که این سبقت در سال ۲۰۱۴ افزایش یابد.این که استفاده موبایل ازاستفاده دسک تاپ سبقت بگیرد به دلیل بیش تر بودن کاربران موبایل در یکسری ازوجوهات در آینده منطقی به نظر میرسد.
به نظر میرسد ۶۷ درصد از کاربران ادعا می کنند که از سایت های تطبیق دهنده با موبایل خریداری می کنند و در واقع از سایت های واکنش گرا استفاده میکنند چون قابلیت انطباق با هر نوع و سایز صفحه نمایش را دارد .رقیبانی که بر سئو ادعا میکنند به قدر کافی برای شروع ساختن انتقال به وب سایت های تطبیق دهنده با موبایل و وب سایت های واکنش گرا هوشیار هستند که این یکی از ویژگی های داشتن سایت خوب می باشد.
جنجال بین داشتن حق انتخاب بین یک وب سایت واکنش گرا در طراحی وب سایت یا یک نسخه جدا برای موبایل ها خایز اهمیت است که از ویژگی های سایت خوب است در صورتی که حقیقت این است که هر دو گزینه جنبه مثبت و منفی خود را دارند.

google-mobile-search-175x300

گزینه ای که برای کسب و کار شما بهترین است به عوامل بسیاری بستگی دارد مثلا هدف از راه اندازی وب سایت برای داشتن یک سایت خوب چیست و دانستن مشتریان پایدار و هدفمند و حتی  سئو ممکن است که یک عامل باشد.

اگر سیو یک عامل است ما در اینجا به شما سه دلیلی را که چرا وب سایت های پشتیبان بهترین گزینه برای استراتژی های موبایل است را معرفی میکنیم:

۱-توصیه شده توسط گوگل

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

این به خاطر این است که طراحی سایت های پشتیبانی یک URL و  HTML یکسان دارند بسته به وسیله که آن را  برای خزنده گوگل آسان تر و کارآمدتر میسازد و  ورژن های مختلف را در همان سایت بررسی میکند.

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

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

۲-یک وب سایت دستگاه های زیاد

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

۳_اسان تر برای مدیریت

داشتن یک دسک تاپ و یک سایت موبایل  جدا به داشتن کمپین های سئو  نیازمند است . مدیریت یک سایت و یک سئو از مدیریت دو سایت و دو سئو خیلی آسان تر است این یک فاکتور کلیدی برای  یک داشتن یک  وب سایت پشتیبان است که  بیشتر از یک سایت موبایل را در خود دارد.

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

نتیجه گیری:

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

کلمات کلیدی:

آخرین مقالات