التصميم التكيفي (التصميم سريع الاستجابة)

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

فيما يلي بعض النصائح التي يجب وضعها في الاعتبار عند عمل تصميم بهذه الخصائص. انتبه!

نصائح للتصميم المتكيف

1. اصنع قالبًا بسيطًاببساطة لا أعني لطيفًا. أنا أتحدث عن estructura HTML لموقع الويب الخاص بك: كلما كان أوضح ، كان ذلك أفضل. ضع في اعتبارك أن شاشة الكمبيوتر يمكن أن تناسب ثلاثة أعمدة رأسية ؛ على شاشة الهاتف المحمول ، ستناسب واحدًا فقط. فكر في الأمر وكيف ستعيد وضع العناصر.
2. تخلص من كل شيء غير ضروريتجنب تأثيرات jQuery ورسوم الفلاش المتحركة وأي كود آخر يبطئ تحميل صفحتك. كلما قل المحتوى الموجود لديك من هذا النوع ، زادت سرعة تحميل الويب.
3. حدد النمط css لكل "حجم"قم بإنشاء ملف tiny.css و small.css و big.css (على سبيل المثال) يعمل وفقًا للجهاز الذي يتم عرضه عليه. على سبيل المثال:
   

   <style></style>

   import url (tiny.css) (الحد الأدنى للعرض: 300 بكسل) ؛

   import url (small.css) (الحد الأدنى للعرض: 600 بكسل) ؛

   import url (big.css) (الحد الأدنى للعرض: 900 بكسل) ؛

   </style>

4. القرارات الأكثر استخدامًا320 بكسل / 480 بكسل / 720 بكسل / 768 بكسل / 900 بكسل / 1024 بكسل
5. اجعل قالبك مرنًاكلما استطعت ، اعمل بالنسب المئوية بدلاً من المبالغ الثابتة. فيما يلي بعض المعادلات المرجعية: 200 بكسل = 15'38٪ / 300 بكسل = 23'07٪ / 800 بكسل = 61'5384615384٪
6. الطباعة إنها أكثر أهمية من أي وقت مضى في بعض الأحيان قد تكون شاشة جهازك صغيرة جدًا لدرجة أن كل ما تراه هو نص. لهذا السبب يتعين علينا اختيار أفضل الخطوط على موقعنا بعناية فائقة ، بحيث لا تفقد الوضوح عند تقليل حجمها. بالإضافة إلى ذلك ، يجب أن نعرف كيفية الجمع بين الخطوط الأكثر حيادية مع الآخرين والشخصية التي تمنح الويب الشخصية اللازمة. لذلك ، فإن النصيحة الأولى هي أنك تقضي وقتًا في تحديد الخطوط التي ستستخدمها.
7. استخدم صور عالية الجودةمع تقليل المساحة ، سترافقها الصور. حدد تلك التي لا تفقد الجودة عند تقليلها ، والتي تعمل بنفس الطريقة عند القياس. الصورة ذات الجودة الرديئة ستجعل موقع الويب الخاص بك يبدو سيئًا.
8. أن صورك دائمًا ما تُرى اكتمالامنع قطع صورك عن طريق إضافة رمز img (width: 100٪؛) في ملف css. بهذه الطريقة ، أنت تخبر الجهاز أن يعيد حساب الارتفاع الذي يجب إعطاؤه للصورة بحيث يمكن رؤية عرضها بنسبة مائة بالمائة.
9. كل منخفضة نفس عنوان URLانسَ المجالات الفرعية مثل www.mysite.com/mobile ، لأن ملف index.html نفسه في المجلد الجذر سيعمل مع جميع الأجهزة (إذا قمت بالتصميم التكيفي بشكل صحيح). أنت تعرف بالفعل الميزة: كلما قل عدد المجالات الفرعية ، كلما كان تحميل الصفحة أسرع.
10. استفد من الدعم: كن مبدعًا الوصول إلى موقع ويب من جهاز كمبيوتر مكتبي ليس هو نفسه الوصول من جهاز iPad أو هاتف محمول. مع الأول ، سوف تتنقل بطريقة هادئة ومريحة. مع هذا الأخير ، ستفعل ذلك في ساعات الخمول وتغلق النافذة بمجرد أن تشعر بالملل. استفد من هذه الشروط للترفيه عن المستخدم وجعله يستمتع في تلك الدقائق القليلة التي سيخصصها لك. ربما عندما يعود إلى المنزل سيقرر زيارتك مرة أخرى بطريقة أكثر استرخاءً.
11. احصل على مصدر إلهام في المنشورات الرقمية ، سوف تتساءل عن سبب هذه النصيحة. سهل جدا: المجلات الرقمية (جيد) تعرف كيف تستفيد من الدعم وتصميمها ذكي للغاية. احصل على الإلهام منهم وأنشئ موقعًا على شبكة الإنترنت يصعب تركه.

معلومات اكثر - المجلات الرقمية

المصدر - سبليو، 960.gs ، عمودي