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

• اصول اولیه طراحی سایت تجاری

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

• حتما میپرسید پس داره چی کار می کنه؟

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

• من اینجا چی کار میکنم؟

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

• من کلا گیج شدم.

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

• اصول اطلاعات

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

• شما با ما در امنیت هستید.

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

• اصول اولیه طراحی سایت شخصی
• این سه نکته

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

• این یکی رو حتما بخونید

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

• من اینطور فکر می کنم

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

• کجا بودید؟

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

• یه رفیق خوب شاد

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

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

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

• وایرفریم دقیقا چیست؟

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

• نقش مشتری چیست؟

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

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

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

• آنچه باید درباره CSS3 بدانید

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

• آنچه باید درباره جاوااسکریپت بدانید

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

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

• سازگاری با تلفن همراه

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

• پیمایش کلیکی و ضربه ای

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

• سازماندهی داستان

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

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

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

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