آیا می دانستید در حدود 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 استفاده نمایید و فایل استایل مناسب را برای وسیله مورد نظر اجرا نمایید. راه حل های بسیاری برای پیاده سازی سایت موبایل وجود دارد. مهترین نکته آن است که سایت موبایلی خود را برای تمامی مرورگرهای موبایل طراحی نمایید و سایت را اختصاصا برای مرورگر خاصی طراحی نکنید. همینطور ابزارهای موبایل پیوسته در حال تغییر می باشند.

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

منابع

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

قیمت های ما

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

در نتیجه

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

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

Photoshop CS6 for Web Designers 

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

9 مقاله در مورد سئو خوندم و ازشون لذت بردم برای شما هم گذاشتم تا بتونید دانش سئو خودتون را بالا ببرید. البته مقاله ها به زبان انگلیسی هستند بنابراین باید زبانتون قوی باشه.

Time to Change the SEO Mindset – David Harry, Search Engine Watch

With SEO Linking Strategies, Gaming the System is So Last Decade – Kern Lewis, Forbes

SEO in 2013: 7 Surprisingly Simple Factors That Will Take The Lead – Jason DeMers, Search Engine Journal

SEO Basics: 8 Essentials When Optimizing Your Site – Victoria Edwards, Search Engine Watch

The State of SEO: What’s Working Now – Neil Patel, QuickSprout

Google Plus SEO – Mark Traphagen, WindMill Networking

Google Penguin 2013: How to Evolve Link Building into Real SEO – Adam Setzer, Search Engine Watch

The 3 Steps for Success in a Multi-device Search World – Aleyda Solis, Moz

Top 1 SEO Tips for 2013 –  Dr. Peter J. Meyers, Moz

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