طراحی وبسایت واکنش گرا – بررسی نحوه طراحی یک وبسایت ریسپانسیو با اولویت نسخه دسکتاپ

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

طراحی وب سایت واکنش گرا (ریسپانسو) با اولویت نسخه موبایل یعنی آنکه قبل از طراحی نسخه دسکتاپ (بالای ۱۰۲۴px) وبسایت خود باید نسخه موبایل وب سایتتان را طراحی کنید و سپس با کلاس های css آن را به نسخه دسکتاپ تبدیل کنید. این روش پیشنهادی طراحی وبسایت واکنش گرا در وبسایت w3schools است.

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

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

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

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

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

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

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

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

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

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

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

هیچ انتخاب برتری وجود ندارد، بنابراین من توصیه می کنم هر دو را امتحان کنید تا ببینید کدام یک برایتان بهتر است.

پشتیبانی از همه مرورگرها

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

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

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

بزرگترین تفاوت ها در پشتیبانی از HTML/CSS نیست بلکه در پشتیبانی صفحات لمسی است. صفحات موبایل خیلی کوچکتر بوده و همچنین نیاز دارند که با انگشت بر روی آن ها زده شود. موس کامپیوتر در مقایسه با انگشت انسان بسیار کوچکتر تر است. گذشته از اینکه صفحات دسکتاپ خیلی وسیع تر بوده و نگاه کردن به آنها راحت تر می باشد.

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

• اجزای لمسی را بزرگتر درست کنید. (مانند کلیدها در نسخه موبایل)
• اندازه متن اصلی را افزایش دهید، بنابراین راحت تر می شود لینک ها را لمس کرد.
• کتابخانه های جاوا اسکریپت اضافه کنید که از حرکات کشیدنی یا Swipe پشتیبانی کند.

Graceful Degradation (و اینکه چرا اهمیت دارد)

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

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

یک مثال معمول برای این تکنیک، حذف منوهای آبشاری برای موبایل می باشد. از آنجا که کاربران گوشی های هوشمند نمی توانند لینک های منو را شناور ببینند، بهتر است که منوهای شناور را مخفی کرده و به جای آن یک گزینه دسترسی سریع یا یک منوی ساده مخفی ایجاد کرد. هر چند این بیشتر یک تغییر در تجربه کاربر (UX Designing) است تا یک Graceful Degradation؛ با این حال شما به دنبال عملکرد JS یا خصوصیات CSS3 هستید که در واقع در مرورگرهای خاصی پشتیبانی نمی شود. برای همین شما نیاز دارید یک polyfill یا fallback پیدا کنید که تجارب ناخوشایند کمتری ایجاد کند و در عین حال برای کاربرانتان کارایی داشته باشد.

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

اگر شما از گوگل آنالیتیکس (که یک ابزار مهم سئو میباشد) استفاده می کنید، می توانید همه مرورگرها و OS ها را بین مخاطبانتان بررسی کرده و متوجه شوید که کدام یک کاربرد بیشتری دارد. اگر هیچکس از اینترنت اکسپلورر ۷ برای جستجوی سایت شما استفاده نمیکند، چرا باید آن را پشتیبانی کنید؟

برای هر چه بهتر انجام دادن طراحی وبسایت واکنش گرا خود، به سایت هایی مانند Can I Use بروید تا متوجه شوید که چه نوع پشتیبانی هایی نیاز دارید که اتخاذ کنید.

وقتی دسکتاپ اولویت پیدا می کند

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

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

یک مثال بارز برای رویکرد دسکتاپی قدرتمند، وب سایت Mashable می باشد. وبسایت آنها به اندازه ۱۴۴۰px عرض داشته و دارای سه ستون خبری با یک منوی بالایی (navigation) بسیار قوی است. Mashable همچنین در موبایل نیز فوق العاده به نظر می رسد. با این حال شما می توانید مطمئن شوید که ورژن دسکتاپی آن یک ایده ثانویه نبوده است.

این مسئله شامل حال سایت های بزرگی مثل یوتیوب نیز می شود .

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

نتیجه گیری

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