راه های ساخت یک وب سایت در 20 سال گذشته تکامل یافته است . در سال 1990 ، طراحی سایت تحت سلطه ی جداول بود ، و اگر چه در سال 1996 شیوه نامه ها یعنی CSS منتشر شده بود ، اما تا سال 2003 کاربرد چندانی نداشت و به گوشه ای رانده شده بود .
بخش دوم – شروع طراحی وب واکنش گرا ، معرفی طراحی واکنش گرا
راه های ساخت یک وب سایت در 20 سال گذشته تکامل یافته است . در سال 1990 ، طراحی سایت تحت سلطه ی جداول بود ، و اگر چه در سال 1996 شیوه نامه ها یعنی CSS منتشر شده بود ، اما تا سال 2003 کاربرد چندانی نداشت و به گوشه ای رانده شده بود .
اما CSS آمده بود تا نشان دهد چگونه می توان ظاهر سایتی را بدون دست زدن به HTML تغییر داد . متعاقب این اتفاق و همه گیر شدن CSS ، استاندارد توسعه دهندگان وب براساس صفحه نمایش با رزولوشن 1024 * 800 شکل گرفت و نمایشگرهای بزرگتر بخش های اضافه را بصورت سفید نمایش داده و نمایشگرهای کوچکتر نیاز به اسکرول شدن داشتند . و این شکل طراحی برای این بود که دستگاه ها و کاربران وسیعی بتوانند از سایت استفاده کنند . چرا که اکثریت کاربران دسترسی به رزولوشن 1024 * 800 داشتند .
با آمدن آیفون در سال 2007 ، تربه ی کامل استفاده از اینترنت در هر مکانی و در هر جایی امکان پذیر شد . سادگی از میان رفت و استفاده از مرورگرهای موبایل دشوار شد و ناگهان استفاده از مرورگرهای رومیزی در تلفن همراه و دستگاه های کوچک امکان پذیر شد .
اولین واکنش شرکت ها به این مسئله این بود که وب سایتی مجزا و بهینه شده برای موبایل ها طراحی کنند . پیروی از این تئوری برای این بود که بتوانند کاربران بیشتری را به سایت خود جذب کنند تا فروش بیشتری داشته باشند . اما این تجربه ناموفق بود ؛ چرا که در اکثر موارد طراحی موبایل خوب از آب در نمی آمد و خیلی از محتویاتی که در سایت اصلی بود در موبایل نشان داده نمی شد . بنابراین بسیاری از کاربران مجبور بودند تا به سایت اصلی بازگشته و از آن استفاده نمایند .
در سال 2010 ، CSS3 نمایش رسانه ها در مرورگرهای موبایل را به اجرا گذاشت . که با اندروید 2.1 و IOS 3.2 پیگیری می شد . این مهم امکان و توانایی نمایش در نمایشگرهای با رزولوشن های مختلف را به ارمغان آورد .
جدای از تغییر سایز نمایشگرها ، استفاده از تمام صفحه نمایش و همچنین تراکم پیکسلی بطور کامل تبدیل به امری عادی گشت . شرایط نمایش شبیه شبکیه ی چشم توسط اپل در ژوئن 2010 بوجود آمد تا بالاترین وضوح را در صفحه نمایش خود بدست آورد . و آن ها این مسئله را مسیر اصلی خود قرار دادند تا میزان dpi ( نقطه در اینچ ) را افزایش دهند . و این تنها شرکتی نبود که اینکار را سرلوحه ی خویش قرار داد . بنابراین توجه به این امر که وب سایت شما در چنین رزولوشن بالایی بصورتی جذاب نمایش داده شود بسیار با اهمیت بود . و بهینه ترین روش برای رسیدن به این جذابیت ، استفاده از طراحی واکنش گرا بود .
طراحی واکنش گرا بسرعت تبدیل به روند جاری در توسعه ی وب شد . که ما در این سری از مقالات خود در مورد طراحی واکنش گرا به این مقوله پرداخته و روش های مختلف طراحی واکنش گرا را به شما آموزش می دهیم .
طراحی واکنش گرا چیست؟
روش طراحی واکنش گرا از آنجایی می آید که در واقع روشی است که یک مرورگر به محیط اطراف خود پاسخ می دهد . طراحی واکنش گرا دارای این هدف است که یک وب سایت طوری توسعه یابد که کاربر تجربه ی خوبی را با وب سایت شما در مرورگرها ، دستگاه ها و نمایشگرها در سایزهای مختلف داشته باشد . وب سایت طراحی شده با روش واکنش گرا لایه های خود را با شبکه های سیال ، محتوای سیال ( عکس ، ویدئو ، متن و ... ) و رسانه های CSS3 تطبیق می دهد .
طراحی واکنش گرا ، استفاده از واحدهای ثابت مثل پیکسل را کنار گذاشته و از سیستم درصد دهی استفاده می کند . به این معنا که پهنای بخش های مختلف از یک سایت با درصد مشخص می گردد .
اولین فردی که طراحی واکنش گرا را ابداع کرد و در مقاله ی خود در مورد لیست های بکار بست ، Ethan Marcotte بود . او یک کلید واژه داد تا توسط آن بتوان مشکل افزایش تعداد دستگاه های قابل استفاده از سایت بصورت یکسان را رفع کرد .
پایان بخش دوم
محمد جعفری فوتمی
در بخش بعد خواهید خواند : بخش سوم – شروع طراحی وب واکنش گرا ، چرا موبایل خیلی مهم است؟