وب سایت های واکنش گرا – Responsive Web Design

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


امیر سروری ۱۴ دیدگاه اصول طراحی وب سایت , ایده و خلاقیت دوشنبه, ۱۲ام تیر , ۱۳۹۱ 26425 بازدید

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


طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

webtarget

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

طراحان وب در گذشته نیز نسخه هایی برای موبایل به صورت مجزا طراحی میکردند ، به طور مثال www.example.com/mobile و یا mobile.example.com که این نوع از آدرس دهی نشان میدهد که این نسخه ها کاملا از نسخه اصلی وب سایت مجزا هستند و به صورت جدا گانه ای طراحی شده اند .

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

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

با توجه به موارد ذکر شده و ایجاد محدودیتها در این زمینه و نیاز رو به افزایش در زمینه طراحی وب سایتهای واکنش گرا ، تلاشهایی برای طراحی این نوع از وب سایتها از طرف طراحان وب و کمپانی های مطرح صورت گرفت و با ظهور تکنیک ها و امکانات کاربردی بسیار در نسخه های جدید سی اس اس – css3 – و به خصوص مدیا کوئری ها – Media Queries – طراحان وب توانستند وب سایتهای کاملا واکنش گرا طراحی کنند .

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


طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

Yaron Schoen



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

Full Frontal



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

۱۰K Apart



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

More Hazards More Heroes



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

warface



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

Fork



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

Social Marketers Summit



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

Atlason



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

hanging up the moon



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

White Lotus Aromatics



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

Cappuccino Digital



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

Reverse Büro



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

Progetty



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

Jet Cooper



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

Bloom



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

Forefathers



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

Sunday Best Designs



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

Patrick Grady



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

Stonehenge Veterinary Hospital



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

Frontend 2011



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

francesca nini



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

yoke



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

webtarget



طراحی واکنشگرا یا Responsive webtarget.ir


طراحی واکنشگرا یا Responsive webtarget.ir

پونیشا



نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۱۴ دیدگاه برای این نوشته ثبت شده است


  1. علی اقدم
    ۱۲ تیر ۱۳۹۱

    امیر جان چرا وانستادی من ورژن جدید بیرون بدم بعدش این مطلبو بنویسی! چراا!!! ;)




  2. مهدخت
    ۱۳ تیر ۱۳۹۱

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

    ار مقالتون هم ممنون .




  3. پونیشا
    ۱۵ تیر ۱۳۹۱

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

    با تشکر فراوان و به امید دیدار شما در همایش استاندارد وب

    نیما نورمحمدی




  4. boBak nspr
    ۱۵ تیر ۱۳۹۱

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

    برقرار باشید




    • امیر سروری
      ۲۱ تیر ۱۳۹۱

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




  5. Alireza
    ۱۷ تیر ۱۳۹۱

    من توی طراحی یام از http://drupal.org/project/adaptivetheme استفاده می کنم ، به طور پیشفرض Responsive است.




    • امیر سروری
      ۱۷ تیر ۱۳۹۱

      بسیار عالی علیرضای عزیز . در آبنده رعایت این بک نکته برای یک وب سایت استاندارد الزامی خواهد بود . هر چند که در حال حاضر هم هست :-)




      • Alireza
        ۲۰ تیر ۱۳۹۱

        بله ، کاملا درسته . پروژه های پیش نمایش دروپال رو چند روز پیش نسخه الفاش امده بود ، یک قابلیت جدید اضافه شده responsive layout builder این به شما اجازه برای دیوایس های مختلف layout مجزا ایجاد کنید. سایر CMS ها هم اضافه میشه ، به تدریج.

        فقط یک نکته هم بعضی از سایت ها برای سایت شون App ایجاد می کنند ، دیگه نیازی به طراجی Responsive ندارند ، مثل سایت goal.com یا خیلی از سایت های دیگه . نطرتون در این مورد چیه؟




        • امیر سروری
          ۲۱ تیر ۱۳۹۱

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




  6. علیرضا
    ۷ مرداد ۱۳۹۱

    آقا من کم کم دارم به وبسایتت علاقه مند میشم ! :)




  7. سامان
    ۲۰ آبان ۱۳۹۱

    میشه با مراجعه به این مقاله هم به راحتی نسخه موبایل وبسایتها رو ساخت
    http://bit.ly/SvscEY




  8. امین
    ۱۳ اسفند ۱۳۹۱

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



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

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

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

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

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.