وبسایت‌ها به مانند بوم نقاشی هستند. شما آزادی کاملی دارید تا آن‌ها را به شکلی که می‌خواهید طراحی کنید. اما بر خلاف یک نقاشی، همه افراد سایت شما را به روشی که می‌خواهید مشاهده نخواهند کرد.
اینترنت بسیار بزرگ و قدیمی است و به مرور زمان دستگاه‌ها کوچک‌تر و جمع و جورتر می‌شوند. حال باید نقاشی خود را بدون اینکه زیبایی‌اش را از دست دهد بر روی یک بوم کوچک‌تر تطبیق دهید.
اینجاست که طراحی واکنش گرا وارد می‌شود. هم اکنون وبسایت‌ها می‌توانند به همان خوبی که در یک تلویزیون بزرگ نمایش داده می‌شوند، در یک تلفن همراه هم نمایش داده شوند. اما همیشه اینگونه نبوده است. رسیدن به این مرحله برای توسعه‌دهندگان سال‌ها طول کشیده است. و ما هنوز هم در حال پیشرفت هستیم.
در این مقاله، ما قصد داریم نگاهی به تاریخچه طراحی وب واکنش گرا بیندازیم و ببینیم که وبسایت‌ها با گذشت زمان چگونه تکامل یافته‌اند.
روزهای اولیه اینترنت
روزهای ابتدایی اینترنت را بخاطر بیاورید، آیا در آن زمان همه وبسایت‌ها عالی به نظر می‌رسیدند؟ در آن زمان فقط داشتن یک صفحه شخصی دستاوردی بزرگ بود. حتی اگر این فقط یک صفحه Geocities یا یک صفحه Angelfire می‌بود. شما آن را به دوستان خود نشان می‌دادید و این یکی از بهترین احساسات جهان بود.
همه مردم فقط با تعداد متعددی رزولوشن از طریق دسکتاپ به وب دسترسی پیدا می‌کردند. این بدان معنا بود که طراحان می‌توانستد بدون نگرانی بیش از حد درباره اندازه‌های صفحه، چیزهایی را در هر مکانی از صفحه مورد نظر خود قرار دهند.
در آن زمان، دیدن وبسایت‌هایی که شما را مجبور به استفاده از یک مرورگر دسکتاپ می‌کردند رایج بود. طراحی مجدد یک وبسایت برای صفحه نمایش‌های حاشیه‌دار کار دشواری بود و بسیاری از شرکت‌ها مایل به سرمایه‌گذاری در این زمینه نبودند.
زندگی قبل از CSS
در حدود ۲۰ سال گذشته یا بیشتر، اکثر توسعه‌دهندگان کار خود را با توسعه وب شروع کرده‌اند و این به معنای یادگیری HTML و بلاک‌های اولیه وبسایت‌ها بوده است. از ابتدایی‌ترین اصطلاحات عناصر HTML، باکس‌های مستطیلی هستند که به صورت پیش فرض در کنار یکدیگر قرار می‌گیرند. با باکس‌هایی که حاوی متن و تصاویر بودند، نمی‌توانستید کار زیادی انجام دهید.
ابتدایی‌ترین تگ‌های HTML، تنها مواردی بودند که می‌توانستیم از آن‌ها استفاده کنیم. آن‌ها شامل تگ‌های ۱h تا ۶h، تگ‌های تصویری، فهرست‌ها، جداول، پاراگراف‌ها و غیره بودند (که هم اکنون تمام این موارد ذکر شده توسط CSS انجام می‌شوند).
یک صفحه HTML اولیه به این شکل ظاهر می‌شود:
<html>
<head>
<title>FreeCodeCamp</title>
</head>
<body>
<h1>FreeCodeCamp</h1>
<img src="logo.jpg" height="150" width="150" align="right">
<p>Text goes here</p>
<p>Text goes here</p>
</body>
</html>
هیچ روش ساختاری یا یکنواختی برای عناصر HTML وجود ندارد. اما خوشبختانه، HTML از طریق تگ‌های مخصوص به شما امکان شخصی‌سازی را داده است.
تمام این تگ‌ها هنوز هم استفاده می‌شوند، اگرچه برخی از آن‌ها در ۵HTML منسوخ شده‌اند و به دلیل قدیمی بودن بهتر است که از آن‌ها استفاده نشود. به عنوان مثال، می‌توان تگ <marquee> را نام برد که برای ایجاد متن کشویی، تصاویر و سایر عناصر HTML از آن استفاده می‌شد.
هم اکنون شما می‌توانید تمام این اثرگذاری‌ها را به وسیله CSS انجام دهید. اما در آن زمان، توسعه‌دهندگان برای هر عملکرد واحد مجبور بودند تگ‌های جداگانه‌ای ایجاد کنند.
بنابراین، طراحان برای استایل‌دهی به عناصر به روشی ساختاریافته احتیاج دارند. باید انعطاف‌پذیر و کاملا قابل تنظیم باشد.
این امر منجر به ایجاد Cascading Style Sheets (CSS)، یک روش استاندارد برای استایل‌دهی به عناصر HTML شد.
نکته: CSS روشی برای استایل‌دهی به تمام عناصر HTML است. آن‌ها دارای مجموعه‌ای از ویژگی‌های از پیش تعریف شده هستند که می‌تواند برای هر عنصر HTML اعمال شود. این استایل را می‌توان در همان صفحه HTML تعبیه کرد یا به عنوان یک فایل .css خارجی استفاده کرد.
این یک نقطه عطف مهم در طراحی وب بود. هم اکنون طراحان می‌توانند هر کدام از ویژگی‌های عناصر HTML را تغییر داده و ﺁن‌ها را در هر کجا که می‌خواهند قرار دهند.
وقتی صفحه‌های نمایش کوچک شدند
حالا که طراحان کنترل کاملی بر روی صفحه وب دارند، باید مطمئن شوند که اندازه این صفحات نمایش در تمام صفحه‌ها به خوبی به نظر برسد.
هنوز هم که هنوزه دسکتاپ محبوب است، اما اکثر مردم از دستگاه‌های تلفن همراه برای وبگردی استفاده می‌کنند. در حال حاضر طراحان از عرض کمتر اما ارتفاع قابل استفاده‌تری برای طراحی صفحات نسخه موبایل برخوردار هستند، زیرا اسکرول کردن در دستگاه‌های دارای صفحه لمسی در مقایسه با دسکتاپ بسیار راحت‌تر است.
امروزه تمام وبسایت‌ها باید از طراحی وب واکنش گرا استفاده کنند. طراحی وب واکنش گرا، روشی است برای طراحی وب که صفحات وب را در انواع دستگاه‌ها و در صفحه نمایش‌هایی با اندازه‌های مختلف به خوبی نشان می‌دهد.
رایج‌ترین روش مواجه شدن با صفحه‌های کوچک‌تر سایدبار (Sidebar) است. سایدبار مانند کشویی است که لینک‌ها و سایر چیزهای نه چندان مهم در آن قرار می‌گیرد. طراحان فقط چیزهای ثانویه را به سایدبار منتقل می‌کنند تا صفحه اصلی وب تمیز به نظر برسد.
با این حال این یک روش قدیمی است و سایدبارها در اصل برای این منظور در نظر گرفته نشده بودند.
قبل از این شیوه، تگ <frameset> و <frame> بسیار محبوب بودند، زیرا به طراحان این اجازه را می‌دادند که صفحات وب خارجی را جاگذاری کنند. اما بر خلاف تگ‌های <iframe> که اکنون محبوب هستند، این تگ‌ها بسیار واکنش گرا نبودند.
این امر به این دلیل بود که آن‌ها با اندازه‌های مختلف صفحه نمایش سازگار نبودند و طرح‌بندی‌ها را به شکل وحشتناکی در اندازه‌های مختلف حفظ می‌کردند.
<frameset rows="100,*">
<frame src="header.html"/>
<frameset cols="33%,33%,*">Nested frameset
<frame src="subframe1.html"/>
<frame src="subframe2.html"/>
<frame src="subframe3.html"/>
</frameset>
</frameset>خروجی تصویر بر روی دسکتاپ‌ها به خوبی به نظر می‌رسد، اما در دستگاه‌های تلفن همراه کاملا برعکس این قضیه رخ می‌دهد.
فریم‌سِت‌ها بر روی نسخه دسکتاپ و تلفن همراه
تغییر و تحول به سوی طراحی واکنش گرا
وبسایت‌های قدیمی و بزرگ با هزاران صفحه با یک معضل روبرو بودند: واکنش گرا بودن یا نبودن.
هر طراح وب می‌داند که انجام یک تغییر از یک صفحه بزرگ‌تر به یک صفحه کوچک‌تر بدترین حالت ممکن است. کانواس‌های شما کوچک‌تر می‌شوند، در حالی که صفحه اصلی شما مثل قبل است. شما یا باید بخش‌هایی از صفحه اصلی خود را حذف کرده یا آن را با محیط مربوطه سازگار کنید.
از آنجا که هیچ دستورالعملی از واکنش گرا کردن در اوایل کار وجود نداشت، طراحان وب در اغلب اوقات از روش‌های ساده و سطحی برای قرار دادن عناصر در بخش‌های مختلف صفحه استفاده می‌کردند.
برای مثال از تگ <table> استفاده می‌کردند.
استفاده از این تگ به دلایل مختلفی که در ادامه ذکر می‌کنیم کار اشتباهی بود:
- Tableها برای چیدمان و طرح‌بندی ساخته نشده‌اند. آن‌ها برای نمایش داده‌های جدولی به صورت فشرده هستند.
- تگ‌های Table، دقیقا به مانند تگ‌های frameset واکنش گرا نیستند و با اندازه صفحه نمایش کوچک‌تر سازگاری پیدا نمی‌کنند.
- این تگ تا زمانی که به طور کامل بارگذاری نشود، امکان نمایش ندارد، در حالی که استفاده از تگ‌های div به آن‌ها امکان بارگذاری مستقل را می‌دهد.
مطالعه بر روی برخی از وبسایت‌های بزرگ
در ادامه می‌خواهیم برخی از وبسایت‌های بزرگ را که با این معضل مواجه شده‌اند را بررسی کنیم. برای مثال، از یوتیوب شروع می‌کنیم.
احتمالا نسخه دسکتاپ یوتیوب را دیده‌اید. یک هدر در بالای صفحه، یک سایدبار در سمت چپ، فیلم‌هایی که در کنار یکدیگر قرار گرفته‌اند و یک پاورقی. بیشتر این موارد برای کاربران تلفن همراه کاملا غیرضروری است، زیرا نمی‌توانند از آن‌ها به درستی استفاده کنند.
درست است که یوتیوب طراحی واکنش گرا را انتخاب کرده است، اما این به معنای مخفی کردن این عناصر اضافی در جایی دیگر است.
هرکسی که یک وبسایت طراحی کرده باشد، می‌داند که عملکرد وبسایت چقدر مهم است. هر چیزی که در یک صفحه قرار میدهید باعث کند شدن آن می‌شود.
یوتیوب و همچنین طراحی‌اش قدیمی هستند. در عوض، یوتیوب از آنچه که با نام Dynamic Serving شناخته می‌شود، استفاده کرده است.
Dynamic Serving روشی است که در آن سرور به بررسی دستگاه درخواست‌کننده می‌پردازد تا متوجه شود که درخواست از سوی نسخه دسکتاپ بوده است یا تلفن همراه. سپس بسته به نوع دستگاه، به صورت پویا صفحه وب را ارائه می‌دهد.
اجرای این روش آسان است، زیرا طراحان مجبور نیستند با اندازه‌های مختلف صفحه نمایش سر و کله بزنند. اما در اغلب اوقات ناامیدکننده ظاهر می‌شود، زیرا اگر به درستی پیکربندی نشود، می‌تواند سئو را به دلیل مشکلات محتوای تکراری، نابود کند.
این نسخه‌های تلفن همراه اغلب از طریق یک زیر دامنه متفاوت مانند m.<site-name>.com ارائه می‌شوند تا آن‌ها را از هم متمایز کند.
به دلایل مشابه این روش توسط فیس بوک، ویکی پدیا و سایر وبسایت‌های بزرگ مورد استفاده قرار گرفته است. طراحی وب واکنش گرا یک راه‌حل ایده‌آل است که اجرای آن دشوار خواهد بود.
برخی از سایت‌های دیگر تصمیم گرفتند که واکنش گرا نباشند، بلکه به جای آن یک اپلیکیشن موبایل ایجاد کنند. این یک رویکرد معقولانه بود. اما نصب یک اپلیکیشن موبایل به درجه‌ای از اعتماد نیاز داشت، زیرا دسترسی آن‌ها بسیار بیشتر از اپلیکیشن‌های وب بود.
همچنین، مشکل اپلیکیشن‌های موبایل هزینه بسیار بالای آن‌ها در حین ساخت بود، زیرا مجبور بودند برای چندین پلتفرم با طراحی دقیق و یکسان ساخته شوند. وب یک پلتفرم کاملا جا افتاده است و از این رو دامنه بیشتری نسبت به اپلیکیشن‌های موبایل دارد.
راهکار طراحی وب واکنش گرا
این‌ها مشکلاتی بودند که سایت‌ها در گذشته با آن روبرو می‌شدند. برای وبسایت‌های جدید، طراحی واکنش گرا برای رقابت با سایر وبسایت‌ها تبدیل به یک امر ضروری شده است.
همچنین گوگل این اواخر شاخص‌سازی mobile first را معرفی کرده است، این بدان معناست که وبسایت‌های فرندلی موبایل را در هنگام جستجو بر روی دستگاه‌های تلفن همراه ترجیح می‌دهد و یک دلیل دیگر را برای سازگاری ایجاد می‌کند.
رویکرد mobile first
فرض کنید چمدانی دارید که مقداری وسیله در آن وجود دارد. آیا انتقال وسایل از چمدان کوچک‌تر به چمدان بزرگ‌تر آسان‌تر خواهد بود یا از چمدان بزرگ‌تر به کوچک‌تر؟
در این رویکرد، یک وبسایت طوری ساخته شده است که از ابتدا با تلفن همراه سازگار باشد و سپس ببینید که هنگام انتقال به یک صفحه بزرگ‌تر، همه چیز چگونه تغییر می‌کند.
یک تصور غلط در مورد این روش این است که مردم فکر می‌کنند این فقط مخصوص موبایل است. اما این درست نیست، mobile first به معنای طراحی فقط برای موبایل نیست. این یک روش ایمن و آسان برای شروع کار است.
از آنجا که فضای موجود در صفحه موبایل در مقایسه با دسکتاپ بسیار کمتر است، باید از آن برای محتوای اصلی استفاده شود.
همچنین کاربران موبایل اغلب در حال تغییر صفحه هستند و این بسیار مهم است که سریعا توجه آن‌ها را جلب کنیم. از ﺁنجا که عناصر کمتری در صفحه وجود دارد و تمرکز بیشتری بر روی محتوا گذاشته می‌شود، این کار منجر به صفحه وب تمیزتری خواهد شد.
آینده طراحی وب
وب با سرعت باورنکردنی در حال رشد است. مردم در حال تغییر شغل خود به صورت آنلاین هستند و رقابت سخت‌تر از قبل شده است.
همچنین این بحث هم وجود دارد که آیا مشاغل واقعا به یک اپلیکیشن موبایل احتیاج دارند یا خیر. با رشد برنامه‌های وب پیش‌رونده (PWAs) و APIهای مختلف وب، وب بسیار قدرتمندتر از قبل شده است. و بیشتر ویژگی‌های بومی مانند اعلان‌ها، لوکیشن، حافظه پنهان و سازگاری آفلاین اکنون با PWA امکان‌پذیر است.
برنامه وب پیش‌رونده نوعی نرم‌افزار کاربردی است که با استفاده از فناوری‌های رایج وب از جمله HTML، CSS و JavaScript ساخته شده است.
روند ساخت PWA بسیار ساده بوده، اما فراتر از حد و ایده اصلی این مقاله است. اجازه دهید بیشتر بر روی ﺁنچه که از PWAها دریافت می‌کنیم تمرکز کنیم.
احتمالا در مرورگر کروم فوق دکمه " Add to Home Screen" را مشاهده کرده‌اید. برای وبسایت‌های عادی، چیزی غیر از نماد میانبر در صفحه اصلی نیست. اما اگر وبسایت PWA باشد، می‌توانید کارهای بسیار جالب و خوبی را با این قسمت انجام دهید.
برای عملکرد آن به عنوان PWA نیازی به نصب یک برنامه وب ندارید، اما این باعث می‌شود که این برنامه بیشتر شبیه به یک برنامه بومی باشد. همچنین، یک PWA می‌تواند به عنوان یک برنامه وب مستقل و بدون نوار آدرس کروم در بالا اجرا شود.
PWAها در دسکتاپ‌ها نیز کار می‌کنند که آن‌ها را به یک نامزد کامل برای هر برنامه جدید تبدیل می‌کند. آن‌ها می‌توانند بر روی هر پلتفرمی که دارای یک مرورگر وب باشد، اجرا شوند، ایمن هستند و دارای تمام ویژگی‌های بومی هستند.
با این حال، بسیاری از ویژگی‌هایی که از قبل نصب نشده‌اند یا در دسترس نیستند، می‌توانند یک تهدید امنیتی باشند، زیرا باز کردن یک وبسایت بسیار امن‌تر از نصب یک برنامه است. بنابراین، برخی از ویژگی‌های بسیار بومی هنوز هم به یک برنامه بومی نیاز دارند.
فقط برای روشن‌سازی: PWAها جایگزین اپلیکیشن‌های بومی نیستند. اپلیکیشن‌های بومی وجود خواهند داشت. PWA فقط یک روش ساده برای دستیابی به این ویژگی‌ها بدون ساختن یک اپلیکیشن موبایل است.
پیش‌بینی آینده وب
همانطور که دیدیم، پیشرفت فناوری همچنان ادامه دارد و اینترنت با رشد تصاعدی تعداد کاربران همچنان در دسترس خواهد بود. تغییر روند طراحی وب بیشتر متمایل به سمت عملکرد و تجربه کاربری است و ادامه خواهد داشت.
ما همچنین به سمت وب ۳.۰ می‌رویم:
وب ۳.۰ نسل بعدی فناوری اینترنتی است که به شدت به استفاده از یادگیری ماشین و هوش مصنوعی (AI) متکی است. هدف آن ایجاد وبسایت‌ها و اپلیکیشن‌های وب بازتر، متصل و هوشمندانه‌تر است که بر استفاده از یک دستگاه مبتنی بر درک داده‌ها تمرکز دارد.
این بدان معناست که همه چیز به هم متصل خواهد شد و ماشین آلات نیز از اینترنت استفاده خواهند کرد.
یک طراحی وب خوب، تمیز و مینیمال با تمرکز بیشتر بر روی محتوا به ماشین‌ها کمک می‌کند تا مسائل را بهتر درک کنند. اینترنت مکانی باز با نوﺁوری‌های فراوان است.
نتیجه‌گیری
ما از ابتدای اینترنت شروع کردیم و دیدیم که چگونه فناوری‌های عامه پسند منسوخ شدند. اما ما هنوز هم در حال پیشرفت به سوی اینترنتی بهتر هستیم.
ما دیگر در دوره‌ای نیستیم که توسعه‌دهندگان نگران کاربران نباشند. امروزه تجربه کاربری در اولویت قرار دارد، مهم نیست که عملکرد باشد یا طراحی، کاربر باید از هر برنامه‌ای احساس رضایت کند.
و برخلاف روزهای قدیم، ما تنها به یک ابزار محدود نمی‌شویم. ما آزادیم که از خلاقیت خود استفاده کنیم و این به خود ما بستگی دارد که چگونه خلاقیت‌های خود را به چیزی با ارزش تبدیل کنیم.
وب مکان فوق‌العاده‌ای است و وبسایت‌های بسیاری وجود دارند که باید از ﺁن‌ها الهام گرفته شود.
امیدوارم از این مقاله لذت برده باشید و بابت خواندن این مقاله از شما سپاس‌گذارم.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید