مقالات طراحی سایت

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

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

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

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

یک بنیان قابل انعطاف

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

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

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

بطور مختصر، طراحی منعطف ما در متن دسکتاب محور بخوبی کار میکند برای اینکه برای این محیط طراحی شده اند، اما برای محیط های غیر دسکتاب بهینه نیستند.

واکنش گرا شدن

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

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

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

مدیا کوئری media query

از CSS 2.1، صفحات استایل قابلیت سنجش دستگاه را از طریق انواع مدیا را دارد. اگر یک صفحه استایل پرینت را نوشته باشید، با این مفهوم آشنا هستید:

 
link rel="stylesheet" type="text/css" href="core.css" 
media="screen" link rel="stylesheet" type="text/css" href="print.css" media="print"
 

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

خوشبختانه، W3C کوئری مدیا را بعنوان بخشی از CSS3 ایجاد کرده است، تا انواع مدیا را بهبود بخشد. کوئری مدیا به ما این اجازه را میدهد تا نتنها کلاس دستگاه را هدف قرار دهیم، بلکه ویژگی های فیزیکی دستگاهی را که کار ما را نشان میدهد را نیز تشخیص میدهد. برای مثال، با افزایش وب کیت موبایل، کوئری مدیا تکنیک رایج سمت کاربر برای انتقال صفحه استایل مخصوص آی فون، تلفن های اندروید، و انواع آن استفاده میشود. برای اینکار، ما کوئری مناسب را به صفت مدیا صفحه استایل لینک میکند:

link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
 href="/shetland.css"  

کوئری شامل دو جزء است:

1. نوع مدیا (پرده نمایش)، و
2. کوئری واقعی که داخل پرانتز قرار دارد، که شامل یک ویژگی خاصی از مدیا میباشد (حداکثر عرض دستگاه) که باید مورد بررسی قرار بگیرد، و بوسیله مقدار نهایی مورد بررسی قرار میگیرد (480px).

به زبان ساده، ما از دستگاه میپرسیم که آیا رزلوشن افقی آن (حداکثر عرض تصویر) کوچکتر یا مساوی 480px است یا نه. اگر اینطور باشد – به عبارت دیگر، اگر ما سایت را در دستگاه های کوچکی نظیر آیفون مشاهده کنیم – دستگاه Shetland.css را لود میکند. به عبارت دیگر، طراحان با طرح بندی که از رزلوشن آگاهی داشته باشد آشنا هستند، که اکثر بر js استوار است، مانند اسکریپت کامرون آدام. اما کوئری مدیا ویژگی های مدیایی را فراهم میکند که فراتر از رزلوشن صفحه نمایش میرود، و حوزه تست کوئری ها را افزایش میدهد. چیزی که تازه است این موضوع است که میتوانیم چندین پراپرتی را در یک کوئری ساده با نوشتن زنجیره وار آنها با کمک کلمه کلیدی and تست کنید:

link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
 href="/shetland.css"
 

بعلاوه، ما محدود به ترکیب کوئری مدیا در لینک هایمان نیستیم. میتوانیم آنها را بعنوان بخشی از CSS خود با قوانین @media وارد کارمان کنیم:

@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}

یا بعنوان دستور @import:

@import url("shetland.css") screen and (max-device-width: 480px);

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

وفق دادن، پاسخ دادن، و غلبه کردن

بیایید به تصاویری بپردازیم که بر اساس صفحه مان است. در طرح بندی پیش فرض، CSS مربوط به آن بدین صورت است:

.figure {
float: left;
margin: 0 3.317535545023696682% 1.5em 0; /* 21px / 633px */
width: 31.121642969984202211%; /* 197px / 633px */
}
li#f-mycroft,
li#f-winter {
margin-right: 0;
}

من تعدادی از پراپرتی های چاپی را برای توجه به طرح بندی حذف کرده ام: اندازه هر المان .figure یک سوم ستون است، با مارجین سمت راست صفر برای دو تصویر در انتهای هر ردیف (li#f-mycroft, li#f-winter). و این کار بخوبی انجام میشود، تا وقتی که دید کوچکتر و یا بزرگتر از سایز اصلی میباشد. با کوئری مدیا، میتوان از رزلوشنهای خاص اتفاده کرد تا طراحی ما به تغییرات صفحه نمایش بهتر پاسخ دهد.

اول از همه، صفحه را بصورت طولی در بیاوریم تا تصویر به اندازه رزلوشن خاصی در بیاید – مثلا 600px. در انتهای صفحه استایل یک بلوک مدیا مانند این ایجاد کنیم:

@media screen and (max-width: 600px) {
.mast,
.intro, .main,
.footer {
float: none;
width: auto;
}
}

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

@media screen and (max-width: 400px) {
.figure,
li#f-mycroft {
margin-right: 3.317535545023696682%; /* 21px / 633px */
width: 48.341232227488151658%; /* 306px / 633px */
}
li#f-watson,
li#f-moriarty {
margin-right: 0;
}
}

به درصدهای بدمنظره اهمیت ندهید؛ ما عرض گریدهای شناور را برای طرح بندی تازه محاصبه کرده ایم. بطور خلاصه، ما از طرح بندی سه ستونه به دو ستونه تغییر میکنیم، زمانی که عرض دید (تصویر) کمتر از 400px در می آید و تصاویر را برجسته میکند.

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

@media screen and (min-width: 1300px) {
.figure,
li#f-mycroft {
margin-right: 3.317535545023696682%; /* 21px / 633px */
width: 13.902053712480252764%; /* 88px / 633px */
}
}

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

با استفاده از min-width در یک کوئری مدیای تازه، میتوانیم تصاویر خود را به یک طرح بندی تک ستونه تغییر دهیم.

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

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

چند نکته تکنیکی

باید توجه شود که کوئری مدیا بطرز باور نکردنی از روبوت در میان مرورگرها استفاده میکند. مرورگر دسکتاب مانند سافاری 3+، کروم، فایرفاکس 3.5+، و اپرا 7+ همگی بصورت ذاتی کوئری مدیا را تجزیه میکنند، همانکاری که مرورگرهای موبایلی مانند موبایل اپرا و وب کیت موبایل انجام میدهند. البته، ورژنهای پایین مرورگرهای دسکتاپی از کوئری مدیا پشتیبانی نمیکنند. و در حالی که ماکروسافت کوئری مدیا را در IE9 آورده است، اینترنت اکسپلورر بصورت ذاتی آنرا پیاده سازی نمیکند.

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

پلاگین جی کوئری از 2007 برخی از کوئری مدیا را پیشنهاد میکند، تنها پراپرتی مدیا min-width و min-height را زمانی که به یک المان لینک مجذا متصل شده باشد.

Css3-mediaqueries.js اخیرا منتشر شده است، کتابخانه ای که وعده داده بود تا "کاری کند که IE5+، فایرفاکس1، و سافاری2 بخوبی کوئری مدیا را تجزیه، تست و اجرا کند" زمانی که از طریق @media وارد پروژه شود. در حالی که نسخه 1.0 آن منتشر شده است، به شخصه متوجه شدم که کاملا قوی است، و میخواهم توسعه آنرا ببینم.

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

 

اثان مارکوت بیست و پنجم می 2010 | طراحی سایت واکنش گرا