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

• تعمیرات استخر
• تعمیرات استخر در تهران
• چطور استخرمو تعمیر کنم
• چطور استخرمو با کمترین هزینه تعمیر کنم

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

• کتاب های الکترونیکی (e-book)
• شبکه های اجتماعی
• راهنماها
• مطالعه های موردی
• وبلاگ ها
• گزارش ها
• سمینارهای آنلاین

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

چرا طراحی سایت واکنش گرا (ریسپانسیو) اینقدر مهم است؟
اگه میپرسید سایت واکنش گرا چیه، باید بگم سایت واکنش گرا روی طیف وسیعی از دستگاه های مختلف کار می کنه. دستگاه هایی مثل تلفن های همراه، گوشی های هوشمند، تبلت ها و کامپیوترهای خونگی. سایت واکنش گرا طوری طراحی و کدنویسی شده که میتونه اندازه صفحه نمایشی که باهاش داره نمایش داده میشه رو بفهمه و در صورت نیاز خودشو کوچیکتر یا بزرگتر کنه. هدف اینه که سایت ساده سازی بشه و کار باهاش برای کاربر راحت باشه.
هدف اصلی سایت شما اینه که به کاربرها کمک کنه تا بتونن سریع و آسون مطالب مورد نیازشونو پیدا کنن. کلید جذب مخاطبین آنلاین کاراییه. اگه سایتتونو 3-4 سال پیش یا قبلتر ساختید، روی تبلت یا گوشی هوشمند امتحانش کنید. اگه مجبور بودید با اسکرول بار چپ و راست صفحه رو ببینید، یا برای کلیک کردن روی جهت یابی ها مجبور بودید زوم کنید، باید بدونید این کارها کاربرها رو اذیت می کنه و یه تجربه منفی تو ذهنشون میذاره. وقتی سایتتون لود میشه باید تو نگاه اول بشه فهمید راجع به چیه و چه بخش هایی داره و چطوری میشه به اون بخش ها رفت و از اطلاعاتش استفاده کرد.
دقت کنید اون چند سال پیش بود که سایت ها رو اول برای کامپیوترهای خونگی و لپتاپ ها میساختند. تخمین زدند که تا سال 1394 حدود 195 میلیون تبلت فروخته شده باشه. حتی بعضی ها هم معتقدند که دیگه دوره کار با کامپیوترها برای مقاصد تجاری سر اومده. یه لحظه صبر کنید و به این حرف ها فکر کنید. حالا بگید سایتتون اول برای کدوم دستگاه طراحی بشه، زودتر قدیمی میشه؟
یه واقعیتی این وسط هست و اون اینه که یه کاربر معمولی دامنه توجه خیلی کوتاهی داره و اگه دنبال چیزی باشه، همین الآن میخواد براش فراهم شه. نمیخواد معطلِ بارگذاریِ گرافیک فانتزی و فیلم کوتاه روی سایت بشه. فکر می کنید همچین کاربری به خودش زحمت اسکرول و زوم کردن سایت میده؟ پس اگه سایتتون واکنش گرا نیست در خطر رها شدنید.
یادتون میاد فهرست جهت یابی ظریف و کشویی سایتتون چند سال پیش طراحی شده؟ اون موقع خیلی چیز خوبی بود، اما تا حالا این فهرست ها رو روی تبلت یا گوشی های هوشمند امتحان کردید؟ اصلا نمیشه باهاشون کار کرد. علتش لمسی بودن صفحه نمایش این دستگاه هاست. طراحی سایت واکنش گرا به طور خودکار این فهرست ها رو با فهرست های مخصوص دستگاه های لمسی جایگزین می کنه.
اصلی ترین مسئله راحتی کاربره. هیچ وقت نذارید کاربر برای پیدا کردن چیزی به زحمت بیفته. جریان و ارائه اطلاعات باید تا حد امکان بی دردسر باشه. اگه بتونید کاربرهاتونو راضی نگه دارید، اونها هم شما رو راضی می کنن. اگه راجع به طراحی سایت سوالی داشتید میتونید با شرکت طراحی و توسعه سایت دارکوب تماس بگیرید و از راهنمایی های آقای بالوی پور و همکارانشون بهره ببرید.

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

• ظاهر سایت قدیمی شده

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

• سایت واکنش گرا نیست

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

• سایت کاربر دائمی ندارد

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

• سایت کاربرپسند نیست

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

• رتبه سایت در موتورهای جستجوی بزرگ پایین است

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

الآن راه های زیادی برای ساخت سایت هست و سیستم های مدیریت محتوای مختلفی وجود داره. هر چی که فکرشو بکنید از سایت های hardcoded در اسکریپت های مختلف گرفته تا سایت سازهای رایگانِ drag & drop.
شما میتونید بسته به هدف سایتتون هر کدوم از این روش ها رو انتخاب کنید. اما باز هم می بینیم بیشتر طراح های سایت ها وردپرس رو انتخاب می کنن.
وردپرس مزیت های زیادی داره که باعث میشن برای طیف وسیعی از سایت های مختلف مناسب باشه. برخلاف کدنویسی های ثابت، به راحتی میشه با اضافه کردن یه صفحه یا تغییر یه جهت یابی میشه بروزرسانیش کرد. از اون طرف هم برعکسِ سایت های drag & drop، خیلی انعطاف پذیره- هم برای جهت یابی انسان و هم موتورهای جستجو.
یه سایت وردپرسی میتونه نیازهای هر کسی رو برآورده کنه. هرچند که طراح سایت میتونه هر قالبی که شما بخواهید رو براتون طراحی کنید، اما خودِ وردپرس هم قالب های پیش ساخته خیلی زیادی داره. بعضی ها به اشتباه فکر می کنن وردپرس محدود کنندست اما اصلا واقعیت نداره. اتفاقا تا الآن انواع و اقسام سایت های مختلف با وردپرس ساخته شدند که اگه بگم باورتون نمیشه.
از نظر قیمت هم وردپرس واقعا به صرفه است چون رایگانه. البته باز هم باید برای خرید دامنه و میزبانی هزینه کنید، اما دیگه برای وردپرس دیگه دردسر قرارداد بستن و کارهای دیگه هم ندارید.
وقتی سایت رو ساختید و راه افتاد میتونید بدون محدودیت گسترشش بدید و بهش صفحه و محتوا اضافه کنید- البته به شرطی که فضای میزبانی کافی داشته باشید. همین ویژگی ها باعث میشه انتخاب اول استارتاپ ها و کاسبی های تازه باشه.
علاوه بر همه این ها، اگر توسعه دهنده سایتتون کارشو درست انجام بده، وردپرس از لحاظ امنیت هم مشکلی نداره. مسائل امنیتی برای هر شرکتی در هر حد و اندازه ای که باشه خیلی مهمه، چون هرکرها قربانی رو تصادفی انتخاب می کنن و کاری به مهم بودن یا نبودن شرکت ندارن. پس یه وقت اشتباها به فکرتون نزنه که چون هنوز شرکت خیلی مهمی نیستید هک نمیشید. تو دارکوب ما این مسئله رو خیلی جدی میگیریم و به مشتری هامون تضمین میدیم که تا آخرین حدی که امکان داره امن هستند و مشکلی براشون پیش نمیاد.
وردپرس نه تنها از نظر طراحی، بروزرسانی و گسترش سایت کارش حرف نداره، بلکه از نظر بهینه سازی برای موتورهای جستجو هم خیلی خوب عمل می کنه. سایت های وردپرسی خیلی واضح کدنویسی شدند و برای همین موتورهای جستجو راحت میتونن بخزن و اطلاعاتشونو با عبارت های مرتبطی که سرچ میشه مطابقت بدن. برای همین توسعه دهنده ها از این لحاظ هم خیالشون راحته که سایتی که طراحی می کنن به چشم کاربر میرسه.

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

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

همچنین گوگل از سال 2015، طراحی سایت ریسپانسیو (RWD) را یکی از عوامل رتبه بندی اعلام کرد.

چند نکته که در هنگام طراحی سایت ریسپانسیو باید در نظر گرفت

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

هدفمند کردن محتوای حیاتی

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

سعی کنید حداقل سه پوسته را طراحی کنید

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

کوچک: زیر600 پیکسل. این سایز برای اغلب تلفن های همراه می باشد.

متوسط:  600 تا 900 پیکسل. این سایز برای اکثر تبلت ها، برخی از تلفن های همراه بزرگ و رایانه های کوچک مانند نوت بوک ها می باشد.

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

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

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

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

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

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

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

ابزارها و منابع

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

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

طراحی ریسپانسیو چیست ؟ و چرا به آن نیاز دارید؟

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

توسعه وب سایت های پاسخگو

طراحی وب سایت موبایلی شامل سه اصل برای توسعه است. برای انجام صحیح این موضوع باید موارد زیر رعایت شود:

·         شبکه های روان

·         کوئری های رسانه ای

·         تصاویر و رسانه های انعطاف پذیر

شبکه های روان

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

کوئری های مدیا

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

تصاویر و فیلم های انعطاف پذیر

این ویژگی به شما این امکان را می دهد تا تصاویر و سایر رسانه ها را به صورت متناسب با دستگاه با توجه به ویژگی سرریز CSS استفاده کنید. مقیاس بندی در CSS  بسیار ساده است. حداکثر عنصر را می توان 100% در نظر گرفت. در این صورت بسته به اندازه مرورگر کوچک و بزرگ می شود.

چگونه می توانیم یک وب سایت ریسپانسیو بسازیم؟

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

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

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

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

صفحه index.html  را باز کنید. ما از تمام عناصر موجود در آن استفاده نمی کنیم.

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

مرحله 1: پایه

در ابتدا شما باید در مورد ایجاد لایه ها بدانید. کد آن به صورت زیر نوشته می شود.

این کد به این معنا است که در این ردیف مشخص شما 12 ستون را با عرض 1000 پیکسل اشغال می کنید.  در حالی که در کد زیر:

ما دو "شش" ستون را در داخل "دوازده" ستون قرار داده ایم. این به این معناست که شش ستون پنجاه درصد از عرض 12 ستون را اشغال می کند. به همین صورت باقی ستون ها را می توان انجام داد.

مرحله دوم: لایه بندی

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

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

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

چهارچوب های ساخت وب سایت های ریسپانسیو

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

فریم ورک چیست؟

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

در دنیای طراحی وب ، اگر بخواهیم تعریف ساده تر از فریم ورک ها داشته باشیم  می گوئیم:  یک فریم ورک به عنوان یک بسته از ساختار، فایل ها و پوشه کد های استاندارد مانند css  و html و js  و غیره است . که می تواند برای حمایت از توسعه وب سایت ها ، به عنوان پایه ای برای شروع ساختن یک سایت استفاده می شود.

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

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

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

بوت استراپ (bootstrap)

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

Foundation

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

Pure

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

نتیجه گیری

پیدا کردن بهترین چهارچوب برای طراحی سایت شما می تواند یک چالش باشد،  اما زمانی که شما چندین چهارچوب را در دسترس دارید، آنها را تست کنید تا بتوانید یکی از آنها را پیدا کنید که به بهترین نحو برای شما مناسب باشد.

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

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

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

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

• جریان اطلاعات

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

• تعریف کردن داستان

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

• تبدیل، تبدیل، تبدیل

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

• کاربر پسند، حتی در موبایل

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

• عدم توجه به اشتراک گذاری

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

• سئو و تحلیل ها

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

• سرعت پایین بارگذاری

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

معمولا مشتری هامون قبل از اینکه کارمونو شروع کنیم میپرسن: چه چیزهایی لازمه؟
برای همین هم تصمیم گرفتم این مقاله رو بنویسم و توش هر چیزی که لازمه رو توضیح بدم. تو هر مرحله از طراحی سایتتون که باشید میتونید چیزهایی که تو این مقاله گفته میشه رو به طراحیتون اضافه کنید، پس نگران نباشید. مجبورم این مطلب رو کامل و جامع بنویسم تا همه استفاده کنن، شاید بعضی قسمت هاش به سایت شما نخوره، اما مطمئنم بیشترش برای همه سایت ها کاربرد داره.
ایده ها و ذهنیت ها
خب این که معلومه مهمترین قسمت کاره. ما باید بدونیم چی تو سر شماست. هدف سایتتون چیه. لطفا تا جایی که امکان داره این مورد رو توضیح بدید و واضح هم توضیح بدید تا راحتتر خواست شما رو پیاده کنیم. اگه طراحی سایتتون رو به گروه دارکوب سپرده باشید میتونید هرچیزی که تو ذهنتونه رو برامون رو کاغذ بنویسید و برسونید دستمون، اگه دوست داشته باشید ایمیل هم میشه کرد. میتونیم حتی با هم یه ملاقات حضوری داشته باشیم (که ترجیح ما هم همین ملاقات حضوریه).
تم رنگی
اگه رنگ خاصی رو برای برندتون یا برای سایتتون در نظر گرفتید و میخواهید سایتتون اون رنگی باشه باید به ما بگید. باید کد 6 رقمی رنگ رو دربیارید و اون کد رو به ما بدید. میتونید کد رنگ رو از سایت Hex Colour Picker پیدا کنید. اگه نظر تخصصی ما رو بخواهید، حداکثر 3-4 رنگ بیشتر دیگه انتخاب نکنید. دو تا از این رنگ ها هم که معمولا سفید و مشکیه. اگه مقاله های دیگه ما رو خونده باشید، باید بدونید که فضای سفید تو سایت باعث میشه نوشته ها بیشتر تو چشم بیان و خود به خود با خواننده حرف بزنن. اون دو تا رنگ دیگه ای که بهمون میگید هم معمولا برای رنگ برند یا رنگ سایت استفاده می کنیم و میشن رنگ اصلی تم سایتتون.
محتوای سایت
نوبتی هم که باشه نوبت اصل سایته. محتوا! ما محتوای سایت رو به 4 قسمت تقسیم کردیم: تصاویر، مطالب، نمونه ها، لوگو. مقدار محتوایی که باید برای سایتتون به ما بدید به نیازهای سایت بستگی داره. فایل هایی میخواهید تو سایتتون بذارید مثل فایل های ویدئویی، PDF ها و فایل های گرافیکی دیگه. یادتون باشه که برای نمونه ها باید اسم فایل رو برای ما بنویسید.
تصاویر
باید تمام تصاویری که میخواهید روی سایتتون بذارید رو مشخص کنید. رمز موفقیت خیلی از سایت ها اینه که عکس های با کیفیت و قشنگی دارن که برای کاربرها جذابه. اگه عکس های خیلی قوی روی سایتتون بذارید، طراحی سایتتون رو زیباتر جلوه میده. ما همیشه توصیه می کنیم برای عکس ها از یه عکاس حرفه ای کمک بگیرید تا عکس هایی که به ما میدید تا بذاریم رو سایتتون با کیفیت و واضح باشن. وقتی عکس هاتون خوب باشن، کیفیت سایتتون بالا میره.
نمونه ها
تو طراحی سایت، منظور از نمونه یا Mockup یه فایله که طراحی مورد نظر شما رو نمایش میده. مشتری ها معمولا نمونه ها رو به انوع و اشکال مختلف به دست ما میرسونن. بعضی ها دقیق ترند. این هم یکی از مراحل طراحی سایته. وقتی شما نمونه بهمون میدید ما میتونیم فکری که تو ذهن شماست رو واضح تر ببینیم و بفهمیم دوست دارید تو هر صفحه چه مطالبی و چطوری نمایش داده بشن. میتونید حتی نمونه های صفحات سایتتون رو با دست بکشید. بعضی ها هم یه وایرفریم از هر صفحه طراحی می کنن. میتونید با ورد / word هم نمونه های ذهنیتونو تجسم ببخشید و به صورت PDF سیو کنید. اگر دستی می کشید، میتونید همونو اسکن کنید و برامون ایمیل کنید. اگر هم پست براتون راحتتره میتونید پست کنید.
مطالب سایت
برای هر صفحه از سایتتون یه فایل درست کنید به اسم همون صفحه. و مطالبی که قراره رو اون صفحه باشه رو تو اون فایل بریزید. مطالبتون هم میتونید با فایل word document (.doc) یا text document (.txt) برامون بفرستید.
لوگو
اگه خودتون لوگو رو دارید و ما قرار نیست براتون طراحی کنیم، فایل هاشو با فرمت .ai یا .eps برامون بفرستید. چون با این فرمت ها میتونیم اندازه و طراحی لوگو رو ویرایش کنیم تا روی سایت بهتر جلوه کنه. معمولا لوگوهایی که روی سایت میذارن فقط برای هدف سایت طراحی شدن.
دسترسی به دامنه و میزبانی شما
اگه ما براتون دامنه و میزبانی رو نخریدیم، باید بهمون دسترسی لاگین به کنترل پنل دامنه و میزبانی رو بدید تا بتونیم تنظیمات مناسب رو اعمال کنیم.
آپلود فایل ها
فایل ها رو باید روی یکی از سرورها مثل dropbox، پرشین گیگ، گیگفا یا ... برای طراح سایتتون آپلود کنید. اگه طراحی سایتتون رو به دارکوب سپردید، متخصص های ما فضایی که براتون در نظر گرفتند رو بهتون اطلاع میدن و اطلاعات لاگین رو در اختیارتون میذارن تا بتونید پوشه ها و فایل هایی که آماده کردید رو آپلود کنید. فقط ما اطلاعات لاگین رو داریم و به جز خودتون و ما هیچ کس دیگه ای نمیتونه به فایل ها دسترسی پیدا کنه. شما میتونید فایل هایی که ما آپلود می کنیم هم ببینید، مثلا ممکنه برای سایتتون یه مطلب بنویسیم.  
فهرست کوتاه
در آخر براتون فهرست کوتاهی از همین چیزهایی که الآن نام بردیم آماده کردیم که همه رو یکجا ببینید و همه چیز رو آماده کنید تا روی سایتتون قرار بگیره.

• ایده ها و ذهنیت ها
• محتوای سایت (شامل تصاویر، مطالب و ....)
• تم رنگی (اگر رنگ خاصی مد نظرتون هست)
• نمونه (ها)
• دسترسی دامنه و میزبانی

تو این مقاله میخواهیم دروپال و وردپرس رو با هم مقایسه کنیم تا ببینید با توجه به نیازهای خودتون، کدوم یکی به کارتون میاد. چون هر شرکتی نیازها و خواسته هاش متفاوته. پس وقتی میخواهید برای سایت شرکتتون بین دروپال و وردپرس یکی رو انتخاب کنید باید بافت شرکت رو مد نظر قرار بدید.
اجازه بدید اول تشابهات وردپرس و دروپال رو با هم مرور کنیم:

• هر دو رایگان و برنامه های منبع باز تحت لیسانس استفاده عمومی (GPL) هستند و برای همین تعداد کثیری کاربر دارن که باهاشون کار می کنن و برای رفع نقص ها و بهبود توانایی ها بهشون کمک می کنن.
• هر دو پلتفرم، ابزار قدرتمندی هستن و میشه باهاشون یه سایت منعطف و شخصی شده ساخت
• وردپرس و دروپال، هر دو، سئو یا بهینه سازی رو برای موتورهای جستجو راحت کردند و در نتیجه سایتتون بین خیل عظیم سایت هایی که هر روز ساخته میشن گم نمیشه.
• هر دو امکان استفاده چند کاربر رو دارن و چند نفر میتونن روی سایت کار کنن و مطلب بذارن.

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

• سادگی در استفاده

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

• قدرت

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

• تدابیر امنیتی

یکی دیگه از تفاوت های این دو سیستم، امنیتشونه. البته هیچ کدوم امنیت 100% رو تضمین نمی کنن، اما سعیشونو می کنن که نقاط ضعف و رخنه های امنیتی رو به حداقل برسونن. تو این زمینه، دروپال سایت امن تریه و یه گروه امنیتی داره که گزارش های دقیقی برای کاربرها میفرستن. به علاوه بخاطر اینکه بیشتر به صورت داخلی توسعه پیدا کرده و کمتر وابسته به افزونه های خارجیه، نقاط دسترسی کمتری داره که همین خطرهای امنیتی رو کاهش میده. وقتی میخواهید از ماژول ها استفاده کنید، قبل از پذیرش، میتونید از طریق rigorous review process مطمئن بشید که با استاندارد های دروپال تطابق داره. وردپرس هم با اینکه بخاطر استفاده از افزونه ها نقاط ضعف بیشتری داره، اما امنیت رو جدی میگیره و زود به زود بروزرسانی هاشون منتشر می کنه و افزونه ها رو هم بروز نگه میداره.

• محبوبیت

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

دیگه بیشتر شرکت های قدیمی سایتشونو با گوشی های تلفن همراه و تبلت وفق دادن. طرف صحبت ما با شرکت هایی که هنوز سایتشون با موبایل سازگار نیست. اگه شما هم جزء این دسته باشید حتما صدای اعتراض مشتری ها به گوشتون رسیده و مورد بمباران پیام های مخاطبانتون قرار گرفتید. وقتی نتونن با گوشی سایتتونو باز کنن حتما مشتری هاتونو از دست میدید. پس باید سایتتون با موبایل سازگار باشه.
همونقدر که این پیام های اسپم شما رو اذیت می کنه، اون ها هم از بابت سایت شما اذیت میشن. قبول دارید؟ پس سایتتون باید سازگار با موبایل باشه. قبول دارید؟
شاید قبول نداشته باشید. اجازه بدید یه قدم برگردم عقب و توضیح بدم که اصلا "سازگار با موبایل" یعنی چی. سازگار با موبایل یعنی یه سایت نسبت به اندازه صفحه نمایش وسیله کاربر واکنش نشون میده (عبارت طراحی واکنش گرا هم از همینجا گرفته شده) و محتوا رو طوری نشون میده که قابل مشاهده و هضم باشه. بیشتر مواقع، برای این کار، اول سایت رو برای صفحه نمایش های بزرگتر طراحی می کنن و بعد تعریف می کنن که برای صفحه های کوچیک تر چطور کوچیک بشه. بنابراین ورژن های موبایلی یه سایت از سایت والد مشتق میشه. میشد به این طراحی، طراحی دسکتاپ-اول، موبایل-دوم هم گفت.
میشه این کارو کرد اما به نظرتون اینطوری کاربرهای موبایل هم راحت میتونن وبگردی کنن؟ یه زمانی میتونستن، اما الآن دیگه نه. الآن 50% از ترافیک بیشتر سایت هایی که ما برای مشتری هامون طراحی می کنیم، از تلفن های همراه میان. حتی برای سایت های B2B هم این صادقه. و هرچی جلوتر میریم این درصد بیشتر میشه.
تو نمودارهایی که از تحلیل داده های سایت مشتری هامون نشون میده، کاملا مشخصه که از نیمه دوم سال 1393 ترافیک موبایل از ترافیک دسکتاپ بیشتر شده و تا اواخر 1394 با هم درگیر و کشمکش بودن تا اینکه از این زمان به بعد دیگه به طور قطع ترافیکی که از دستگاه های تلفن های همراه به سمت سایت ها سرازیر میشدن بیشتر از دسکتاپ ها بود. (ضمنا این نمودارها نشون میدن اسفند ماه که همه درگیر خرید هستن، بازدید سایت های فروشگاهی هم بالا میره).
بنابراین اگه دستگاه های تلفن همراه اولویت کاربرها هستن، چرا همه قالب ها برای صفحه نمایش های بزرگ طراح میشه و بعد اون قالب رو با صفحه نمایش های کوچیک تر سازگار می کنن؟ به نظرتون راه دیگه ای نیست؟ طراحی موبایل-اول بی معنیه؟
البته که نیست. اما بستگی به مخاطب داره. هر سایتی مخاطب های خاص خودشو داره و هیچ دو سایتی نیستن که دقیقا مخاطبانشون یکی باشه. ما طی همکاری که با شما داریم میتونیم متوجه بشیم که سایتتون از نظر مخاطب هدفتون جذابیت داره یا نه.
پس موضوع روشن شد. تو این عصر فناوری، سایت های سازگار با موبایل دیگه منسوخ شدند. همین الآن براتون اثبات کردم که باید یه طراحی موبایل-اول برای سایتتون آماده کنید که نه تنها با موبایل بلکه با همه دستگاه هایی که صفحه نمایش کوچیک دارن منطبق باشه (ساعت ها، اتومیبل ها و غیره). درسته که ما برای آینده برنامه ریختیم و سعی کردیم یه پیش بینی داشته باشیم، اما این پیش بینی ریشه در زمان حاضر داره و شما میتونید همین الآن با این برنامه به مخاطبانتون خدمات ارائه بدید و سایتتون همچنان روی لپتاپ و دسکتاپ به خوبی نمایش داده میشه.