10 الفك اسقاط الهبوط المستجيب الصفحات
تعد "Responsive" (المستجيب) أحدث حركة في تطوير الويب - وهي واحدة تحتاج إلى نتائج سيئة للغاية. كل يوم ، يزداد عدد الأجهزة والأنظمة الأساسية والمتصفحات المستخدمة للوصول إلى الإنترنت. وعلى الرغم من أن غالبية المستخدمين لا يزالون يصلون إلى الويب من منصات تقليدية ، إلا أن الطلب على مواقع الويب المتكيفة والموحدة أقوى من أي وقت مضى.
يأخذ العديد من المصممين هذا التغيير إلى القلب ويخلقون بعض القطع المذهلة التي تزدهر في البيئات المحمولة والكمبيوتر اللوحي وسطح المكتب.
تعمل المواقع التالية على دمج الجمال مع تقنيات تصميم الويب المتجاوب وعرض ما يمكن تحقيقه من خلال القليل من الابتكار. حتى انتزاع بعض الفشار ومذكرة ، أنت تريد أن تولي اهتماما.
StephenCaver.com
عندما تفتح هذا الموقع على سطح المكتب ، فإنه يأسر على الفور. يتناقض العنوان الجريء والأسود والمبرر بشكل جميل مع جودة شبه ألوان مائية تقريبًا في صحراء Mojave Desert. عندما يتكيف هذا الموقع مع حجم الجوال ، يكون التغيير هامًا ، وما زال الموقع يبدو رائعاً.
FoodSense.is
مع تخطيطها الواسع ، الخطوط النظيفة والبنية البسيطة هذا الموقع هو مثال رائع لتصميم الويب البسيط. عند عرضها على جهاز لوحي أو هاتف محمول ، يتم ضبطها دون المساومة على التركيب أو التدفق.
Warface.co.uk
استخدام اللون لافت للنظر والموضع المبتكر للتماثيل ثلاثية الأبعاد في مقدمة الموقع يشغل المشاهد حقًا. الموقع هي فريدة ومثيرة ، ولا يتم فقدان أي من التأثيرات على الجوّال.
DanielVane.com
مرة أخرى هنا المصمم يتيح عمله يتحدث عن نفسه. الصفحة المقصودة جميلة في بساطتها كاملة الحجم وهذا ينقلها بشكل مثالي إلى الهاتف المحمول ، تاركًا رسمًا مميّزًا بشكل خاص يتضمن شعارًا دقيقًا.
SasquatchFestival.com
هذا الموقع هو متعة ومرحة وفريدة من نوعها بين المواقع الأخرى في هذه القائمة. إنها تستغني عن البساطة النظيفة من أجل الاستمتاع بالألوان ، والصور ، والرموز بطريقة لا تزال قادرة على تقديم الأناقة. هذا يمكن أن يكون من الصعب القيام به في مساحة صغيرة ، ولكن المصممين من Sasquatch إدارة جهد.
GravitateDesign.com
استخدام الشكل في هذا الموقع تبرز على الفور. من خلال تجنب استخدام الحدود ومربعات المحتوى ، تمكنوا من إنشاء موقع يعرض عملهم في أفضل حالاته.
VisualSupply.co
وبالمثل لـ Warspace ، فهي الصور التي تعمل بالفعل هذا الموقع . إنه منظم بشكل مثالي ، ويبدو جميلاً على كل جهاز.
StudioMds.co
يمكن أحيانًا تجاهل الألوان الداكنة في تصميم الويب ، ولكن استوديو إم دي إس تعزيز المحتوى الخاص بهم مع قرارهم الجريء. يتكيف التخطيط ليتناسب مع حجم شاشة أصغر لا يفقد أي شيء سوى الروابط الزائدة.
ForefathersGroup.com
هذا الموقع لديه إحساس رائع قديم ويستخدم نسيجًا وصورًا وخطًا لإنشاء ذلك. أنه ينحل بشكل جميل (ولكن من العار أن تفقد ذلك القرد).
MapBox.com
مخطط الألوان واستخدام الصور تعطي Mapbox مساحة نظيفة لعرض منتجاتها. البساطة مرة أخرى يفوز على تصميم معقدة أو صعب ، وهذا بالضبط لماذا يعمل بشكل جيد على شاشة أصغر.
أشياء يجب أن تضعها في اعتبارك أثناء تصميمك
لذلك ، الآن بعد أن نظرت إلى بعض المواقع سريعة الاستجابة ، ربما كنت تود البدء بتصميم تصميم خاص بك. ولكن قبل البدء ، إليك بعض الأشياء التي يجب تذكرها.
الصور
تتمثل إحدى العوائق أمام التصميم سريع الاستجابة في كيفية عرض الأجهزة للصور. سيعرض جهاز MacBook Pro مع شاشة شبكية العين صورة بدقة أعلى بكثير من الهاتف المحمول ، الأمر الذي قد يؤدي في الغالب إلى حدوث مشكلات. تتمثل إحدى طرق تنفيذ هذه المشكلة في رفع كلٍّ من النسخ العالية والمنخفضة الدقة لصورك. باستخدام CSS ، يمكنك عندئذٍ تحديد الصورة التي يتم تحميلها استنادًا إلى دقة شاشة الجهاز. إذا كنت تستخدم صور المخزون ، فتأكد من تفاؤلك بخيار rez الأعلى.
تحديد نقاط التوقف
في كثير من الأحيان تكون التصاميم سريعة الاستجابة حول ما يعرف باسم "نقاط التوقف" - أو الدقة التي يتغير فيها التصميم - تعتمد بشكل أساسي على أحجام الشاشات الشائعة للجهاز. لكن المشكلة في هذا المنهج هي أنه لا يأخذ بعين الاعتبار مدى اختلاف أحجام الشاشات. لا يوجد حجم "عالمي" بعد الآن. لذا ، بدلاً من تحديد نقاط التوقف مسبقًا عند 360 بكسل (الجوال) ، 768 بكسل (الجهاز اللوحي) ، و 1024 بكسل (سطح المكتب) ، من الأفضل أن تجعل التصميم الخاص بك يتحدث عن نفسه. ابدأ بالتخطيط النهائي ثم أعد تغيير حجم النافذة حتى ينهار التصميم - اجعل هذا من نقاط التوقف الخاصة بك ثم استمر في العمل. ستجد أن موقعك يتدفق أكثر سلاسة.
هل صادفت صفحة مقصودة رائعة الاستجابة؟ هل صممت نفسك بنفسك؟ اسمحوا لنا أن نعرف في التعليقات.