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

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

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

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

طراحی واکنش گرا چطور کار می کند؟
سایت های واکنش گرا با استفاده از CSS تنظیم می کنن که بسته به اندازه صفحه نمایش، کدوم مطالب کجای صفحه نمایش داده بشن. به عبارت دیگه جای مطالب، عکس ها و فهرست های جهت یاب رو تغییر میده تا با تعداد پیکسل های موجود هماهنگ بشن. حتی لوگو و عناصر گرافیکی هم می تونن از صفحه نمایش های معمولی کامپیوتر تا تبلت و موبایل تغییر اندازه بدن.
همونطور که گفتم الآن خیلی از سایت ها واکنش گرا شدند، ولی اگه بخوام براتون یه مثال عالی از سایت های واکنش گرا رو معرفی کنم، میتونید سایت BostonGlobe.com رو ببینید. توسعه دهنده این سایت آقای Ethan Marcotte، همون کسیه که برای اولین بار واژه responsive design یا طراحی واکنش گرا رو بکار برد.
طراحی های واکنش گرا، به جز عکس های با اندازه مشخص، از عکس های تطبیقی هم استفاده می کنن. بنابراین هر وقت با موبایل سایتی رو باز کنید، عکس ها کوچیکتر دیده میشن و اگه همون سایت رو با مرورگر کامپیوتر باز کنید، عکس هارو بزرگتر میبینید. اینطوری عکس ها فضای صفحه نمایش بزرگ کامپیوتر رو بهتر می تونن پر کنن.

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

آیا می دانستید در حدود 5.9 بیلیون کاربر با استفاده از موبایل خود وب را مرور می نمایند و به این تعداد هر لحظه اضافه می گردد!

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

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

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

کاربران وب سایت موبایل

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

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

اصول اولیه طراحی سایت موبایل

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

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

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

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

• در ایجاد ساختار سایت از css استفاده نمایید و سایت را با استفاده از دایو طرح ریزی نمایید و سعی نمایید حتی الامکان از جداول استفاده ننمایید.
• ساده تر است که کد نویسی سایت را بر مبنای XML یا XHTML انجام داده باشید, برای کاراکتر ست از UTF-8 استفاده نمایید.
• در نظر داشته باشید که سایت صفحه موبایل ها نیز با یکدیگر متفاوت می باشند سایت را به گونه ای طراحی نمایید تا در نسخه های مختلف عرض موبایل به خوبی پیاده سازی گردد و حتی المکان از عرض های ثابت استفاده ننمایید و عرض را به صورت درصدی مقدار دهید.
• در نظر داشته باشید موارد مهم را حتی المکان در بالای صفحه قرار دهید. به دلیل کوچک بودن ابعاد صفحه موبایل مرور یک سایت توسط موبایل ممکن است زمانبر باشد آیتم های موجود در صفحه را به گونه ای ساده در اختیار کاربر قرار دهید.
• برای انگشت طراحی نمایید. سایز لینک ها حداقل می بایست 30-40 پیکسل باشد و فواصل بین کلید ها را برای انگشت انسان حتما رعایت نمایید.
• زمان دانلود را در نظر داشته باشید. از تصاویر پس زمینه استفاده ننمایید… زیرا ممکن است خوانایی مطالب را از بین ببرد. از گرافیک های کوچک در سایت استفاده نمایید و حتی المکان گرافیک کمتری استفاده نمایید. سایز تمامی آیتم های صفحه خود را به حداقل برسانید تا درخواست های http به حداقل برسد و سایت سریع تر بارگذاری شود.
• فرم ها را از طریق تکت باکس ها انتخاب ننمایید و آن ها را از طریق رادیو و چک باکس ها طراحی نمایید. عناوین فیلدهای فرم را بالای فیلد کار نمایید و فرم را حتما به صورت تک ستونی طراحی نمایید. پر کردن فرم از طریق موبایل بسیار سخت می باشد آن را هر چه می توانید ساده طراحی نمایید.
• در طراحی فرم ها فیلدهای فرم را حداقل طراحی نمایید و داده های ثبت شده کاربر را برای دفعه بعد در سیستم ثبت نمایید
• اکثر مرورگرها از پلاگین ها و اکستنشن ها پشتیبانی نمی نمایند.
• در پایان برای طراحی سایت موبایل این مطلب را در ذهن داشته باشید که کمتر بهتر است. سعی نمایید از گرافیک های بی مورد در طراحی سایت خود استفاده ننمایید

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

چگونه وب سایت موبایل طراحی نماییم

طراحی وب سایت موبایل دقیقا به مانند طراحی سایت کامپیوتر می باشد. هر دوی آنها ازHTML, CSS وJavascript پشتیبانی می نمایند و از طریق ابزارهای مختلف طراحی سایت ایجاد می گردند. همچنین اکثر مرورگرهای موبایل ازHTML5 و CSS3 پشتیبانی می نمایند فقط می بایست مواردی را برای سایت موبایل به تگ های صفحه اضافه نمایید.

تگ های مختلفی می بایست به <head> صفحه اضافه گردد تا مرورگر موبایل اطلاع یابد که این سایت برای موبایل طراحی شده:

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">

موارد بیشتری را در مورد تگ های متا می توانید در این بخش مطالعه نمایید.

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

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

منابع

برای لیست کاملی از منابع موبایل,  کلیک نمایید.

قیمت های ما

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

در نتیجه

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