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

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

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

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

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

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

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

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

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

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

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

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

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

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

• داستان از چه قرار بود:

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

• من چی کار کردم:

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

• نتیجه:

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

• خلاصه:

پس اگه کسی محتوا یا تصاویر سایتتون رو بدون اجازه برداشت چی کار می کنید؟

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

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

الآن راه های زیادی برای ساخت سایت هست و سیستم های مدیریت محتوای مختلفی وجود داره. هر چی که فکرشو بکنید از سایت های 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  در دسترس هستند. این چهارچوب برجسته نیز قابلیت سفارشی سازی را دارد.

نتیجه گیری

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

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

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

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

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

• کارتون رو با یک ایده خوب شروع کنید.

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

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

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

• از حقایق استفاده کنید تا محتوایی که تولید می کنید قابل انتشار در روزنامه باشد

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

• برای گفته هاتون مدرک بیارید تا پیشرفت کنید

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

• تحقیقاتی که Google trends ارائه میده.
• اسکرین شات ها یا تصاویری که از شبکه های اجتماعی میگیرید (اینجور تصاویر ناشرانی رو جذب می کنن که هدفشون جذب مخاطبانی مشابه مخاطب های همون تصویر باشه).
• هر مدرکی که از تحقیقاتتون به دست آوردید.

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

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

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

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

• بهینه سازی درون-سایت مثلا اینکه اندازه متا تگ ها درست باشه و به نحوی شایسته از کلیدواژه های شما استفاده کرده باشن.
• بهینه سازی برون-سایت برای اینکه تضمین کنه شما پیوندهای باکیفیت و مرتبط با موضوع اصلی سایت دارید و حضور فعالی در کل وب، گوگل پلاس، Google My Business و غیره دارید.
• پاک کردن لینک های خراب و پاک کردن پروفایل کلی لینکها.
• اطمینان پیدا کردن از اینکه گوگل میتونه با روبات هاش و با استفاده از نقشه سایت به راحتی سایتتون رو بخزه و صفحات رو فهرست کنه.
• استفاده از بهترین محتوای تولید شده و اطمینان از اینکه هر کدوم برای تبدیل و موتورهای جستجو بهینه شده اند.
• و خیلی کارهای دیگه...

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