في نهاية المطاف على شبكة الإنترنت تصميم مستجيب تقرير اخبارى

التصميم المتجاوب هو المحبوب الجديد لعالم تصميم الويب. يبدو أنه لا يمر أسبوع واحد أنه لا توجد موارد جديدة للقيام بذلك ، أو آراء حول كيفية القيام بذلك أو حتى ما إذا كان يجب القيام به على الإطلاق ، ومواقع جديدة تستخدمها بشكل جميل.

يمكن أن يحصل بسرعة ساحقة في محاولة لمواكبة كل ذلك.

هنا قمنا بتجميع قائمة بأكثر من سبعين موردًا لإنشاء تصميمات سريعة الاستجابة.

تتضمن المقالات مناقشة التصميم المتجاوب والنظريات ذات الصلة ، والأطر والأشكال المتراكبة للتخطيطات المتجاوبة ، وأدوات اختبار التصميمات سريعة الاستجابة ، وتقنيات الصور التي يمكن تغيير حجمها ، والكثير غيرها.

ثم ، بعد كل شيء ، قمنا بجمع مائة من أفضل التصاميم سريعة الاستجابة في الوقت الحالي لتلهمك وتعطيك بعض الأفكار الواقعية.

المقالات والمنشورات

في ما يلي عدد من المقالات عالية الجودة التي تتحدث عن التصميم سريع الاستجابة والتقنيات التي تدخل فيه. قد يتضمن بعضها بعض مقتطفات الشفرة أو معلومات تقنية أخرى ، ولكن في معظمها ، تكون هذه مناقشات على مستوى المفهوم.

تصميم الويب سريع الاستجابة

هذا ال المشاركة الأصلية بقلم إيثان ماركوت الذي تم نشره على A List Apart. وهو يناقش المنطق والمبادئ وراء التصميم المستجيب ، وكذلك التقنيات العملية لإنشاء مواقع سريعة الاستجابة.

كتاب تصميم الويب سريع الاستجابة

تصميم الويب سريع الاستجابة من إيثان ماركوت ، التي نشرتها A Book Apart ، تغطي حالة الويب المتجاوب ، والشبكات المرنة ، والصور المرنة ، والاستعلامات الإعلامية ، وكيفية إنشاء التصاميم سريعة الاستجابة.

The Practicalities of CSS Media Queries، Lessons Learned

هذه بريد ، من Bloop ، نظرة عامة رائعة حول كيفية استخدام استعلامات الوسائط (وإيجابياتهم وسلبياتهم مقارنة بإنشاء موقع محمول مخصص) ، بالإضافة إلى بعض النصائح المفيدة لتنفيذها. يتم تضمين بعض مقتطفات الشفرة المفيدة أيضًا.

كبير مقابل صغير: التحديات في تصميم الويب سريع الاستجابة

هذه مقالة - سلعة يناقش بعض التحديات التي يمكن أن يقدمها تصميم الويب المتجاوب ، بما في ذلك الاعتبارات الفريدة المطلوبة مع استمرار نمو أحجام شاشات سطح المكتب ، بينما في الوقت نفسه ، يصل العديد من المستخدمين الآن إلى الويب بشكل أكبر على الأجهزة اللوحية أو الهواتف الذكية.

دليل المبتدئين لتصميم الويب سريع الاستجابة

هذه دليل المبتدئين يقدم Think by Vitamin مقدمة رائعة للتصميم سريع الاستجابة ، بما في ذلك المعلومات حول الشبكات السائلة والاستعلامات الإعلامية.

تصميم الويب سريع الاستجابة: ما هو وكيفية استخدامه

هذه مقدمة للتصميم الاستجابة من مجلة سماشينج هو كتاب رائع حول هذا الموضوع. وهو يغطي المفهوم الأساسي ، على النحو الذي حدده إيثان ماركوت ، فضلا عن المخاوف العملية لإنشاء تصاميم سريعة الاستجابة. يتم تضمين أمثلة رمز أيضا.

تستجيب عن طريق الافتراضي

هذه مقالة - سلعة من أندي هيوم يناقش سبب استجابة الويب بشكل افتراضي ، وقد أجبرها المصممون على عدم الاستجابة لسنوات. انها فكرة مثيرة للاهتمام ، تناقش في الغالب من وجهة نظر المطور.

محتوى الكوريغرافيا

غالبًا ما نتحدث عن التصميم سريع الاستجابة تمامًا من النهاية الفنية للأشياء ، ولكن الهدف الكامل للتصميم سريع الاستجابة هو تحسين تجربة المحتوى. هذه بريد من ترينت والتون يتحدث عن ذلك ، كيف أن تكديس المحتوى ليس دائمًا هو الحل الأفضل ، وما يمكن فعله بدلاً من ذلك.

فهم عناصر تصميم الويب السريع الاستجابة

هذا المنصب من ستة التنقيحات يغطي أساسيات التصميم المتجاوب: الشبكة المرنة ، الصور المرنة ، واستعلامات الوسائط.

نظرة عامة موجزة عن التصميم المستجيب

هنا آخر متهدمة أساسية كبيرة ما هو تصميم استجابة وكيفية تحقيق ذلك ، هذه المرة من مصمم الويب الأول .

خلق تصميم الويب سريع الاستجابة فرصًا عبر المجلس

هذه بريد يغطي بعض الفرص التي يقدمها التصميم سريع الاستجابة للمصممين والمطورين.

تصميم لشبكة الويب سريعة الاستجابة

هذه مقالة - سلعة من Webdesigntuts + يناقش التصميم المتجاوب من حيث الشبكة السائلة والصور السائلة واستعلامات الوسائط.

تجربة مع تصميم الويب سريع الاستجابة

هذه مقالة - سلعة من Lee Munroe يقدم لمحة عامة بسيطة عن التصميم المتجاوب ، وخاصة الاستفسارات الإعلامية ، بالإضافة إلى بعض الأمثلة.

استعلامات الوسائط CSS3

جدار مصمم الويب يقدم تقريرًا موجزًا ​​عن مقتطفات شفرات الاستعلام الخاصة بالوسائط وأمثلة التصميم المتجاوب والمزيد في هذا المقال.

20 أمثلة رائعة لاستخدام استعلامات الوسائط لتصميم الويب المتجاوب

هذا المنصب من تصميم شاك تقدم بعض الأمثلة الرائعة للتصميم المتجاوب ، بالإضافة إلى الكثير من المعلومات حول كيفية إنشاء مواقع سريعة الاستجابة.

سياق الكلام

هذه بريد يغطي Adactio بعض الارتباك الذي غالباً ما يحيط بتصميم متجاوب ، ويفصله بعبارات بسيطة ويقدم بعض البصيرة المفيدة.

قماش أكثر ثراء

هذا المقال من مارك بولتون يناقش بعض المزايا التي يوفرها التصميم المتجاوب ، و CSS3 ، والأدوات الأخرى للمصممين ومنشئي المحتوى ، وتحديدًا أننا يجب أن نصمم من المحتوى ، بدلاً من العكس.

بعض الأفكار حول تصميم الويب واستفسارات الوسائط سريعة الاستجابة

هذه بريد من جون فيليبس يناقش بعض الجوانب السلبية المحتملة للتصميم الاستجابة ، والأهم من ذلك ، يقدم بعض الحلول العظيمة.

تصميم الويب سريع الاستجابة وإطار الجوال

هذه بريد يناقش كيفية استخدام أجهزة الجوال لتصفح محتوى الويب ، وكيف يمكن أن يؤثر ذلك على اختيارات التصميم سريعة الاستجابة.

New Front End End Stack: دور التصميم المتجاوب

هذا المنصب من Acquia يناقش أهمية التصميم المتجاوب ، ويقدم بعض الأمثلة الرائعة ، والعناصر الفنية التي تدخل في إنشاء التصاميم سريعة الاستجابة ، والمزيد.

تصميم الويب سريع الاستجابة من المستقبل

تصميم الويب سريع الاستجابة من المستقبل هو عرض تقديمي من قبل كايل نيث يناقش مستقبل تصميم الويب فيما يتعلق بمبادئ التصميم المتجاوبة.

إلى الجحيم بالأجهزة السيئة: تصميم الويب سريع الاستجابة ومعايير الويب

هذا نظرة متعمقة على التصميم المتجاوب ، مناقشة التصميم الخاص بالجهاز ، ما يعني التصميم التفاعلي للتطبيقات ، وأكثر من ذلك.

إيجابيات وسلبيات تصميم الويب السريع الاستجابة

تناقش الكثير من المقالات كيفية إنشاء تصميم متجاوب ، ولكن لا يناقش الكثيرون الأشياء الجيدة والسيئة حول التصميمات سريعة الاستجابة. بام يفعل ذلك بالضبط ، وإعطاء قائمة شاملة إلى حد ما من الإيجابيات والسلبيات المرتبطة بها.

11 أسباب لماذا تصميم الويب سريع الاستجابة ليست بهذه السهولة

هذا المنصب من WebDesignShock يوضح بعض التحديات والمشاكل المحتملة التي يمكن أن يقدمها التصميم المتجاوب.

دروس

ستعلمك البرامج التعليمية أدناه استعلامات وسائط CSS وتقنيات التصميم المتجاوبة الأخرى.

نصيحة سريعة: A Crash-Course في CSS Media Queries

هذه برنامج Nettuts + تعليمي يقدم بعض الأساسيات للعمل مع استعلامات الوسائط ، مع استكمال تعليمي فيديو ومقتطفات التعليمات البرمجية.

تخطيطات متكيفة مع استعلامات الوسائط

هذه الدورة التعليمية من .Net مجلة يقدم نظرة على تقنيات الاستعلام عن الوسائط CSS3 الأساسية. ويتضمن الكثير من مقتطفات الشفرة والمعلومات العملية حول صياغة مخططات الاستجابة الخاصة بك.

تصميم الويب سريع الاستجابة: دليل مرئي

هذه فيديو تعليمي من Tuts + يقدم مقدمة رائعة لما يبدو عليه التصميم المتجاوب ، مع أمثلة. ثم يشرح كيفية إنشاء تصميم سريع الاستجابة ، مع مراعاة الجوانب المرئية والتقنية.

CSS استعلامات الوسائط واستخدام المساحة المتاحة

هذا المنصب من CSS-الخدع يشرح مفهوم استخدام استعلامات الوسائط للاستفادة من المساحة المتوفرة في منفذ عرض المتصفح. يتضمن الكثير من مقتطفات التعليمات البرمجية المفيدة والأمثلة.

العمل مع استعلامات الوسائط

هنا قصير الدورة التعليمية للعمل مع استعلامات الوسائط ، مع الكثير من أمثلة التعليمات البرمجية. إنها أساسية ومهمة ، ولكنها مقدمة مثالية للاستفسارات الإعلامية الأساسية.

كيفية استخدام استعلامات الوسائط التوجيه CSS3

تُعد استعلامات الوسائط رائعة لتعديل طريقة عرض التصميم سريع الاستجابة على أحجام مختلفة من المتصفحات ، ولكن الكثير من المصممين يتجاهلون ذلك ضوابط التوجيه . تتيح لك هذه الطريقة تغيير طريقة عرض موقعك بناءً على ما إذا كان الجهاز موجهًا حاليًا إلى الوضع الرأسي أو الأفقي ، وهو أمر مفيد لكل من الهواتف الذكية والأجهزة اللوحية.

تحسين البريد الإلكتروني الخاص بك لأجهزة المحمول معmedia Query

غالبًا ما نتغاضى عن النشرات الإخبارية عبر البريد الإلكتروني بتنسيق HTML عند التفكير في التصميم المتجاوب ، ولكن بالنظر إلى عدد الأشخاص الذين يُرجح عرضهم لرسومات HTML الإلكترونية على هواتفهم ، من المستحسن استخدام طلبات البحث عن الوسائط في هذه الحالة. هذا المنصب من مراقبة الحملة يشرح كيف يتم ذلك.

كيفية استخدام استعلامات الوسائط CSS3 لإنشاء إصدار الجوال لموقع الويب الخاص بك

هذا المنصب من مجلة سماشينج يشرح كيفية استخدام استعلامات الوسائط لإنشاء موقع للجوّال أو ربط أوراق أنماط منفصلة.

تصميم متكيف ومتجاوب مع استعلامات وسائط CSS3

هذه المشاركة الرائعة من جدار مصمم الويب يتضمن قالب تصميم سريع الاستجابة ، بالإضافة إلى برنامج تعليمي حول كيفية إنشاء القالب. إنه مورد رائع لأولئك الذين يحبون تعلم تقنيات جديدة من خلال تشريح المشاريع النهائية.

تصميم الويب سريع الاستجابة مع HTML5 والإطار 3 أقل

هذا المقال من SitePoint يقدم تعليمات شاملة لإنشاء تصميم سريع الاستجابة باستخدام HTML5 والإطار الأقل. ويشمل جميع التعليمات البرمجية التي ستحتاجها للتصميم النهائي ، بالإضافة إلى تحليل جيد لما يفعله هذا الرمز.

الأدوات والتقنيات

تجعل التقنيات والأدوات الموجودة أدناه من الأسهل إنشاء تصميمات تستجيب للطريقة التي تريدها بها. كثير منها للتعامل مع الصور (يمكن القول إن أحد الجوانب الأكثر تحديا للتصميم الاستجابة) ، ولكن هناك غيرها أيضا.

تأثير CSS: تباعد الصور إلى مطابقة نص الطول

بناءً على التنسيق ، قد تحتاج إلى نص ليصطف بشكل صحيح مع الصور ، بغض النظر عن كيفية تباعد الصور والنص. هذه تقنية من Zomigi يوضح لك كيفية القيام بذلك.

الاختباء والكشف عن أجزاء من الصور

تغيير حجم الصور يمكن أن يأخذك حتى الآن مع التصاميم سريعة الاستجابة في بعض الحالات. في بعض الأحيان ، من المهم أن يكون جزء معين من الصورة مرئيًا أو قابلاً للقراءة أكثر من عرض الصورة بأكملها. هذا هو المكان هذه التقنية من Zomigi يمكن أن تأتي في متناول اليدين. يتيح ذلك إمكانية اقتصاص الصور الخلفية والصورة بشكل ديناميكي مع تغير عرض المخطط.

خلق انزلاق المركب الصور

تتيح لك هذه التقنية ، من Zomigi ، إنشاء ما يبدو كصورة واحدة ولكنها في الواقع عبارة عن صور متعددة الطبقات فوق بعضها البعض. وبهذه الطريقة ، يمكنك التحكم في الموضع الدقيق للعناصر المختلفة للصورة نظرًا لتغيير حجم وشكل إطار المتصفح.

سلس شبكة الصور المستجيبة

هذه صالة عرض يقدم CSS-Tricks شبكة صور سلسة تقوم تلقائيًا بتغيير حجم الصور والشبكة بشكل عام لتلائم إطار عرض المتصفح الخاص بك.

جداول البيانات المستجيبة

تقنيات التصميم المتجاوب ليست ودية للغاية لجداول البيانات. من السهل أن ينتهي بك الأمر مع الجداول التي يكون فيها هذا النوع صغيراً جداً ومن المستحيل قراءته. أو يمكنك تحديد حد أدنى للعرض ، ولكن هذا النوع من الهزائم هو الغرض من التصميم المتجاوب. هذه تقنية من CSS-Tricks يقدم حلاً لعرض البيانات المجدولة على نحو متجاوب على جهاز محمول.

صور المقدمة التي تحجيم مع تخطيط

لذلك من السهل إنشاء صور خلفية متدرجة ، لكن الصور الأمامية تكون أكثر تعقيدًا. يغطي هذا المقال تقنية من Zomigi لإنشاء صور المقدمة في المحتوى الخاص بك والتي سوف تتسق مع تخطيطك.

FitText

FitText هو مكوّن jQuery الإضافي لتوسيع نص العنوان في تصميماتك المتجاوبة. باستخدام هذا ، سيملء النص دائمًا عرض العنصر الرئيسي.

Sencha.io Src

Sencha.io Src هي خدمة استضافة صور تقوم بحجم صورك إلى الحجم المناسب للجهاز الذي يطلبها. كما يتم تحسين الصور لضمان تكرار تكرارها بكفاءة.

منهج المعتدل للتصميم المتجاوب

هذا المقال من كريس ارمسترونج يتحدث عن " الطريقة المعتدلة "لإنشاء تصميمات سريعة الاستجابة" مناسبة تمامًا لأي جهاز.

مستجيبة للصور

مستجيبة للصور هي عبارة عن تجربة في الصور الأولى للجوّال التي تتدرج بسرعة لتناسب تصميمك. تكمن الفكرة في تقديم أحجام صور محسّنة وسياقية في التخطيطات المتجاوبة.

Lettering.js

Lettering.js هو برنامج jQuery plugin الذي يمنحك تحكمًا دقيقًا بالطريقة التي تظهر بها طباعتك على الويب ، والتي يمكن أن تكون إضافة كبيرة في الحفاظ على سهولة القراءة في تصميم متجاوب.

صور السوائل

هذه تقنية من إيثان Marcotte يخلق صور عرض السوائل لتصاميم السوائل الخاصة بك. وهو يعمل أيضًا مع مقاطع الفيديو المضمنة ، وهناك حل بديل للتوافق مع IE.

رد

رد برنامج نصي polyfill خفيف الوزن لاستعلامات الوسائط CSS3 min / max بعرضها ، لجعلها تعمل في Internet Explorer 6-8. يبلغ حجمه 3 كيلوبايت فقط ، أو 1 كيلوبايت gzipped.

Modernizr

Modernizr عبارة عن مجموعة أدوات لـ HTML5 و CSS3 توفر ميزة اكتشاف ميزات جافا سكريبت مع استعلامات الوسائط.

تصميم صفحات الويب سريع الاستجابة

إذا قمت بتجميع تصميماتك على الورق ، فستجدها تصميم صفحات الويب سريع الاستجابة لتكون مفيدة للغاية. هناك بضعة تخطيطات مختلفة يمكنك تنزيلها مجانًا ، يعرض كل منها عددًا قليلاً من شاشات عرض الجهاز المحتملة.

الأطر والألواح المعدنية

يمكن للأطر والألواح المعدنية تسريع عملية التصميم بشكل كبير. والخبر السار هو أن هناك الكثير من الألواح المعدنية والأطر المتاحة بالفعل لإنشاء تصميمات سريعة الاستجابة.

نظام الشبكة الذهبية

ال نظام الشبكة الذهبية يستخدم تصميمًا أساسه 16 عمودًا للشاشات العريضة. على الأجهزة اللوحية ، سيتم طي الأعمدة في تخطيط مكون من 8 أعمدة. وعلى شاشات الهواتف الذكية الأصغر ، يتم طي الأعمدة مرة أخرى إلى 4 أعمدة ، مما يسمح للتكيف بالتوافق مع أي شيء من شاشة عريضة 2560 بكسل إلى 240 بكسل.

نظام الشبكة الدلالية

نظام الشبكة الدلالية يسمح بالتصاميم السائلة والتصاميم سريعة الاستجابة ، مع استخدام الترميز الدلالي (الذي يفتقر بشدة إلى معظم أطر الشبكة).

Gridless

Gridless عبارة عن وحدة نمطية بتنسيق HTML5 و CSS3 لإنشاء مواقع الويب سريعة الاستجابة للجوّال. وهو لا يتضمن نظام شبكة محدد مسبقًا ولا توجد فئات غير دلالية.

أقل إطار 4

ال أقل إطار هو نظام شبكة CSS لتصميم مواقع سريعة الاستجابة تتكيف مع حجم إطار عرض المتصفح. يحتوي على أربعة تخطيطات: افتراضي (لأجهزة كمبيوتر سطح المكتب وأقراص الوضع الأفقي) ، وتخطيط الجهاز اللوحي ، وتخطيط جوال واسع ، وتخطيط للجوّال. هذا خيار جيد للمصممين الذين يرغبون في تصميم سريع الاستجابة ولكنهم لا يريدون بالضرورة أعمدة مرنة.

مستجيبة عشرون

مستجيبة عشرون يعتمد على موضوع Twenty Ten WordPress. هناك أيضا ملحق متاح لتحويل موضوع الطفل العشرين الخاص بك إلى تصميم متجاوب.

Columnal

Columnal هو نظام شبكة CSS عبارة عن "ريمكس" لبعض الشبكات الأخرى ، مع إضافة شفرة مخصصة. يتم أخذ قاعدة الشبكة المرنة من cssgrid.net ، بينما يتم أخذ أجزاء أخرى من الأكواد من 960.gs.

1140 CSS الشبكة

ال 1140 CSS شبكة النظام عبارة عن شبكة مرنة ومرنة من شأنها إعادة الترتيب استنادًا إلى منفذ العرض في المتصفح. تم تصميمه ليتناسب بشكل مثالي مع شاشة عريضة تبلغ 1280 بكسل ، ولكنه يصبح سائلًا أقل من ذلك.

320 وما فوق

320 وما فوق يستخدم مبدأ المحمول الأول لمنع الأجهزة المحمولة من تنزيل أصول سطح المكتب. إنه بديل لبدء تشغيل إصدار سطح المكتب وتقليص الحجم.

هيكل عظمي

هيكل عظمي هي عبارة عن لوحة لتصفية التصاميم المتوافقة مع الجوّال. يبدأ تشغيله بشبكة 960 ، لكنه يتدرج للشاشات الأصغر حجمًا ، وقد تم تصميمه ليكون سريعًا مع بدء استخدام نمط لا أدري.

نظام شبكة السوائل

ال نظام شبكة السوائل يستند إلى شبكة ستة أعمدة ولديه 720 إمكانيات تخطيط مختلفة. بسبب بساطته ، فإنه يتحلل بشكل جيد في المتصفحات القديمة.

نظام السوائل 960 الشبكة

ال نظام السوائل 960 الشبكة يستند إلى 960.gs ، ولكن يحتوي على تنسيق مرن بغض النظر عن حجم المتصفح.

Foldy960

Foldy960 هو نسخة متجاوبة من 960.gs. وهو يتألف من بعض الصفوف الإضافية والأشياء الأخرى لتحويل تصميم 960.gs إلى تصميم سريع الاستجابة.

SimpleGrid

SimpleGrid هو إطار شبكة استجابة آخر يدعم التعشيق اللانهائي. تمت تهيئتها للشاشات بأربعة أحجام مختلفة ، بما في ذلك 1235 بكسل و 720 بكسل.

أدوات الاختبار

تسهل هذه الأدوات اختبار التصميمات سريعة الاستجابة دون الحاجة إلى استخدام مجموعة من الأجهزة المختلفة.

resizeMyBrowser

resizeMyBrowser أداة اختبار مفيدة للتصاميم سريعة الاستجابة. ما عليك سوى النقر فوق أحد أزرار حجم المتصفح المعرفة مسبقًا وسيتم تغيير حجم المتصفح الخاص بك. يتم تصنيف كل حجم باسم جهاز واحد على الأقل يستخدم هذا القرار.

responsivepx

responsivepx أداة اختبار للمتصفح تسمح لك بإدخال عنوان URL (محلي أو عبر الإنترنت) ثم ضبط ارتفاع وعرض منفذ المتصفح لرؤية عروض نقطة الإيقاف الدقيقة بالبكسل.

اختبار التصميم المستجيب

مات كيرزلي أنشأت أداة اختبار المتصفح هذه والتي تتيح لك معرفة كيفية عرض موقعك على نحو شائع عند عرض المتصفح العادي ، بدءًا من 240 بكسل وتصاعديًا إلى 1024 بكسل.

Screenfly

Screenfly يوضح لك كيف سيبدو موقع الويب على أجهزة مختلفة ، بما في ذلك أجهزة التلفزيون والأجهزة المحمولة التي تدعم الإنترنت.

Adobe Device Central

يوجد عدد من منتجات Adobe Creative Suite الجهاز المركزي ، والتي يمكن أن تكون أداة قيمة للغاية لاختبار التصميمات سريعة الاستجابة. فهو لا يسمح لك بمعاينة فقط ، بل أيضًا اختبار تصميماتك على الجهاز الذي تختاره.

أمثلة

في ما يلي 100 مثال لتصميمات رائعة رائعة الاستجابة. هناك الكثير من المواقع التي تستخدم هذه التقنية ، ويتم إطلاق مواقع جديدة كل يوم. مورد واحد كبير للعثور على مواقع جديدة هو تساؤلات الإعلام ، معرض مخصص خصيصا للمواقع باستخدام تقنيات التصميم المستجيب.

بروفي سبان

الرؤساء المنسيون

بن هاندزو

آرون شيكي

الاعصار الطريق السريع

أفضل من المغلق التصميم وحي الرسم المتجاوب تصميم الويب تصميم المحمول تصميم الويب سريع الاستجابة إيثان ماركوت تساؤلات الإعلام دروس الدليل النهائي جولة في نهاية المطاف