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

 اما طراحی Responsive  به چه معناست و چرا امروزه به یکی از رایج ترین شیوه های طراحی سایت تبدیل شده؟

تقریبا همه مشتری ها خواستار سازگاری سایت خود با تلفن های همراه  هستند که البته نکته ای  مهم و ضروری به شمار می رود. سایت ها باید به گونه ای باشد که در هر دستگاهی اعم از آیپد(iPad)، آیپاد(iPod)، آیفون(iPhone)، بلک بری(BlackBerry)، و هزاران دستگاه دیگر با اندازه ها و رزولوشن های متفاوت صفحه نمایش سازگاری داشته باشند. این امر تا پنج سال بعد نیز گسترده تر خواهد شد چرا که همه روزه گجت های جدیدی وارد بازار تکنولوژی می شوند.

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

طراحی رسپانسیو(Reponsive Web Design) روشی است که در آن طراحی و توسعه سایت باید به درستی  به اعمال و رفتار کاربر با هر سایز و رزولوشن و دستگاهی پاسخ دهد. این عمل شامل استفاده درست  از  Grid  یا همان  توری ،  Layout  یا پوسته ، عکس ها و عناصر  انعطاف پذیر و قابل تغییر است. به گونه ای که اگر کاربر به جای  لپ تاپ از  دستگاهی دیگر مانند آیپاد استفاده کرد، سایت به صورت اتوماتیک  خود ر ا با رزولوشن ، اندازه عکس ها ، و توانایی دستگاه در اجرای کد (Script) سازگار کند. سایت های رسپانسیو(Responsive) نیازی به طراحی مجدد برای گجت های جدید نداشته و اگر طبق اصول طراحی شوند با هر دستگاهی سازگار خواهند بود.

  هدر ثابت(Fixed Header)

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

اما هدر ثابت چگونه کار می کند؟

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

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

سایت Grainandmortar یکی از نمونه های مناسب برای درک بهتر نحوه کار این نوع هدر است.

عکس زمینه "بزرگ"(Large Photo Backgrounds)!

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

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

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

* عکسی که شما انتخاب میکنید باید به اندازه کافی بزرگ باشد، چرا که ممکن است در صفحات بزرگ تر، مثلا تلویزیون عکس شما حالت طبیعی خود را از دست بدهد.

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

سایت Geo-fun  از این نوع زمینه به خوبی استفاده کرده است. همانطور که گفته شد سرعت نمایش این گونه سایت ها آهسته است.

شفافیت به کمک سی اس اس (CSS Transparency)

یکی از ابزار های جدید CSS3 امکان  تغییر شفافیت عکس یا قسمت های دیگر سایت شما را فراهم می کند. این بدان معنی است که شما میتوانید به راحتی شفافیت هر قسمت از سایت خود را بدون نیاز به برنامه ای مانند فوتوشاپ تغییر دهید.

یک مثال عالی بلاگ Squarespace  است که  در آن صفحه جلویی دارای خاصیت Transparency است و زمینه سایت از پشت آن مشخص است.

طراحی ساده (Minimalist Landing Pages)

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

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

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

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

به عنوان نمونه سایت chriswilhitedesign را مشاهده کنید.

استفاده از QR Codes

فراوانی تلفن های همراه و قابلیت ایجاد بارکد های دیجیتالی منجر به ساخت سایت و برنامه های زیادی شده است. QR در واقع مخفف Quick Response Code  یا  کد پاسخ سریع است. شما میتوانید اطلاعاتی را در بارکد دیجیتال خود ذخیره کنید تا کاربر پس از مشاهده آن توسط تلفن همراه خود،  اطلاعاتی که شما از شرکت یا محصول خود ایجاد کرده اید را به راحتی بخواند.

آیکن های شبکه های اجتماعی

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

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

اسکرول بی پایان!

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

شاید واضح ترین مثال سیستم جستجوی عکس گوگل باشد که هر وقت به پایین صفحه اسکرول کنید عکس های جدید نمایش داده می شوند.

تور گشت و گذار در سایت!

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

یکی از بهترین مثال ها سایت بزرگ  MediaFire  است که یکی از بزرگترین سایت های به اشتراک گذاری فایل در دنیای وب به شمار می رود. یکی از نکاتی که به ساخت سفری مهیج در سایت شما کمک می کند استفاده از طرح های گرافیکی بزرگ بوده که باعث جلب توجه کاربر خواهد شد.

صفحات کشویی

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

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

منوی دسترسی سازگار با تلفن های همراه

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

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

نوشته های عظیم!

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

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

نوشته های عظیم با فونت های زیبا می توانند به اندازه عکس های بزرگ تماشایی باشند.

سایه زنی!

CSS3  امکان اضافه کردن سایه ها را به نوع جدیدی برای طراحان فراهم کرد. امروزه کمتر سایتی را می توان یافت که از این ابزار استفاده نکرده باشند. این افکت در چشم کاربر عالی به نظر می رسد  و به ندرت باعث کم شدن زیبای سایت  شما می شود مگر موقعی که از آن زیادی استفاده کنید!

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

انیمشن های CSS3

CSS3  امکان افزودن افکت های حرکتی یا به عبارتی ساخت نوعی انیمیشن را برای عناصر سایت فراهم کرده است. نکته مثبت آن است که دیگر نیازی به نوشتن کد جاوا اسکریپت برای حرکت بخشیدن به عناصر وجود ندارد.

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

منوی دسترسی عمودی

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

نقاط قوت منوی عمودی :

منو های عمودی به شما اجازه می دهند که لینک های خود را منظم و به صورت عمودی در سمت چپ سایت قرار دهید. اما به خاطر داشته باشید که لینک های زیاد می توانند برای کاربر نا خوشایند باشند.

این گونه منو ها همچنین می توانند قسمت های بیشتری از سایت شما در دسترس کاربر قرار دهند .

نقاط ضعف منوی عمودی :

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

اگرچه این گونه منو ها لینک های بیشتری در بر می گیرند اما در عین حال باعث تاخیر در باز شدن سایت شما خواهند شد. سرعت نمایش سایت از نکات مهم در طراحی سایت به شمار می رود.

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

نقاط قوت منوی افقی :

این منو های در مقایسه با منو های عمودی فضای بسیار کمتری اشغال کرده و به کاربر اجازه می دهند که مطالب اصلی را بدون نیاز به اسکرول مشاهده کنند.

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

نقاط ضعف منوی افقی :

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

طراحی  یک صفحه ای:

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

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

طراحی عناصر دایره ای!

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

سایت 360langstrasse نمونه ای عالی و البته سنگین برای طراحی گرد داینامیک است. با حرکت موس روی عناصر شکل آن های تغییر می کند. این نوع طراحی باعث متفاوت شدن سایت شما با دیگر سایت ها خواهد شد.

طراحی User Interface  از پیچیده ترین مسائل دنیای وب به شمار می رود.

امیدوارم که از ایده های ارائه شده لذت برده باشید و از آنها در سایت های خود استفاده کنید.